diff --git a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css new file mode 100644 index 0000000..d46f39c --- /dev/null +++ b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css @@ -0,0 +1,5132 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +.monaco-workbench { + --chat-input-control-height: 22px; +} + +.interactive-session { + display: flex; + flex-direction: column; + max-width: 950px; + height: 100%; + margin: auto; + position: relative; + /* Enable absolute positioning for child elements */ + + /* 11px when base font is 13px */ + --vscode-chat-font-size-body-xs: 0.846em; + /* 12px when base font is 13px */ + --vscode-chat-font-size-body-s: 0.923em; + /* 13px when base font is 13px */ + --vscode-chat-font-size-body-m: 1em; + /* 14px when base font is 13px */ + --vscode-chat-font-size-body-l: 1.077em; + /* 16px when base font is 13px */ + --vscode-chat-font-size-body-xl: 1.231em; + /* 20px when base font is 13px */ + --vscode-chat-font-size-body-xxl: 1.538em; +} + +.monaco-workbench .interactive-session.chat-session-state-indicator:is(.chat-state-in-progress, .chat-state-idle-unvisited, .chat-state-needs-input)::before { + content: ''; + position: absolute; + inset: 0; + /* Paint above the Prompt Timeline sticky header (9) and rail (15). */ + z-index: 16; + pointer-events: none; + border: var(--vscode-strokeThickness) solid transparent; + border-radius: var(--vscode-cornerRadius-medium); + transition: border-color 350ms ease, box-shadow 350ms ease; +} + +.monaco-workbench .interactive-session.chat-session-state-indicator.chat-state-in-progress::before { + border-color: var(--vscode-chat-sessionStateIndicator-inProgressBorder); +} + +.monaco-workbench .interactive-session.chat-session-state-indicator.chat-state-idle-unvisited::before { + border-color: var(--vscode-chat-sessionStateIndicator-unvisitedBorder); + border-style: dotted; +} + +.monaco-workbench .interactive-session.chat-session-state-indicator.chat-state-needs-input::before { + border-color: var(--vscode-chat-sessionStateIndicator-needsInputBorder); + border-style: dashed; + box-shadow: 0 0 var(--vscode-spacing-size80) color-mix(in srgb, var(--vscode-chat-sessionStateIndicator-needsInputBorder) 60%, transparent); +} + +.monaco-workbench.hc-black .interactive-session.chat-session-state-indicator::before, +.monaco-workbench.hc-light .interactive-session.chat-session-state-indicator::before { + box-shadow: none; +} + +.monaco-reduce-motion .interactive-session.chat-session-state-indicator::before, +.monaco-workbench.monaco-reduce-motion .interactive-session.chat-session-state-indicator::before { + transition: none; +} + +.interactive-list > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row > .monaco-tl-row > .monaco-tl-twistie, +.interactive-list > .monaco-list > .monaco-scrollable-element > .monaco-tree-sticky-container .monaco-tree-sticky-row > .monaco-tl-row > .monaco-tl-twistie { + /* Hide twisties from chat tree rows, but not from nested trees within a chat response */ + display: none !important; +} + +.interactive-list > .monaco-list > .monaco-scrollable-element > .monaco-tree-sticky-container .monaco-tree-sticky-row:hover { + background-color: var(--vscode-chat-list-background) !important; +} + +.interactive-list > .monaco-list > .monaco-scrollable-element > .monaco-tree-sticky-container .monaco-tree-sticky-row { + overflow: hidden; +} + +.interactive-list > .monaco-list > .monaco-scrollable-element > .monaco-tree-sticky-container.source-node-partially-visible .monaco-tree-sticky-container-shadow { + display: none; +} + +.interactive-list > .monaco-list > .monaco-scrollable-element > .monaco-tree-sticky-container:not(.source-node-partially-visible) .monaco-tree-sticky-container-shadow { + pointer-events: none; + transform: translateY(var(--vscode-spacing-size80)); +} + +.interactive-list > .monaco-list > .monaco-scrollable-element > .monaco-tree-sticky-container:not(.source-node-partially-visible) .monaco-tree-sticky-container-shadow::before { + content: ""; + position: absolute; + inset-inline: 0; + inset-block-end: 100%; + height: var(--vscode-spacing-size80); + background-color: var(--vscode-chat-list-background); +} + +.interactive-list > .chat-scroll-down { + padding: 4px; +} + +.interactive-item-container { + padding: 12px 16px; + display: flex; + flex-direction: column; + color: var(--vscode-interactive-session-foreground); + + cursor: default; + user-select: text; + -webkit-user-select: text; +} + +.interactive-item-container:not(:has(.chat-extensions-content-part)) .header { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + margin-bottom: 8px; +} + +.interactive-item-container .header.hidden, +.interactive-item-container .header .avatar-container.hidden, +.interactive-item-container .header .username.hidden { + display: none; +} + +.interactive-item-container .header .user { + display: flex; + align-items: center; + gap: 8px; + + /* + Rendering the avatar icon as round makes it a little larger than the .user container. + Add padding so that the focus outline doesn't run into it, and counteract it with a negative margin so it doesn't actually take up any extra space */ + padding: 2px; + margin: -2px; +} + +.interactive-item-container .header .username { + margin: 0; + font-size: var(--vscode-fontSize-heading3); + font-weight: var(--vscode-fontWeight-semiBold); +} + +.interactive-item-container .detail-container { + font-family: var(--vscode-chat-font-family, inherit); + font-size: var(--vscode-chat-font-size-body-s); + color: var(--vscode-descriptionForeground); + overflow: hidden; +} + +.interactive-item-container .detail-container .detail .agentOrSlashCommandDetected A { + cursor: pointer; + color: var(--vscode-textLink-foreground); +} + +.interactive-item-container .chat-animated-ellipsis { + display: inline-block; + width: 2em; +} + +.interactive-item-container:not(.show-detail-progress) .chat-animated-ellipsis { + display: none; +} + +@keyframes ellipsis { + 0% { + content: ""; + } + + 25% { + content: "."; + } + + 50% { + content: ".."; + } + + 75% { + content: "..."; + } + + 100% { + content: ""; + } +} + +@keyframes chat-thinking-shimmer { + 0% { + background-position: 120% 0; + } + + 100% { + background-position: -120% 0; + } +} + +.interactive-item-container .chat-animated-ellipsis::after { + content: ''; + white-space: nowrap; + overflow: hidden; + width: 3em; + animation: ellipsis steps(4, end) 1s infinite; +} + +.interactive-item-container .header .avatar-container { + display: flex; + pointer-events: none; + user-select: none; +} + +.interactive-item-container .header .avatar { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border-radius: var(--vscode-cornerRadius-circle); + outline: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); +} + +.interactive-item-container .header .avatar.codicon-avatar { + background: var(--vscode-chat-avatarBackground); +} + +.interactive-item-container .header .avatar + .avatar { + margin-left: -8px; +} + +.interactive-item-container .header .avatar .icon { + width: 24px; + height: 24px; + border-radius: var(--vscode-cornerRadius-circle); + background-color: var(--vscode-chat-list-background); +} + +.interactive-item-container .header .avatar .codicon { + color: var(--vscode-chat-avatarForeground) !important; + font-size: var(--vscode-codiconFontSize); +} + +.interactive-item-container:not(:hover):not(:focus-within) .header .monaco-toolbar, +.interactive-item-container:not(:hover):not(:focus-within) .header .monaco-toolbar .action-label { + display: none; +} + +.interactive-item-container .header .monaco-toolbar .monaco-action-bar .actions-container { + gap: 4px; +} + +.interactive-item-container .header .monaco-toolbar .action-label { + box-sizing: border-box; + width: 22px; + height: 22px; + border: var(--vscode-strokeThickness) solid transparent; + padding: 0; + align-items: center; + justify-content: center; +} + +.interactive-item-container.interactive-response .header .monaco-toolbar { + position: absolute; + left: 0px; + background-color: var(--vscode-chat-list-background); +} + +.interactive-item-container.interactive-request .header .monaco-toolbar { + /* Take the partially-transparent background color override for request rows */ + background-color: inherit; +} + +.interactive-item-container .chat-footer-toolbar { + display: none; +} + +.interactive-item-container .chat-footer-toolbar.hidden { + display: none !important; +} + +.interactive-item-container .chat-footer-toolbar .monaco-action-bar .actions-container { + gap: 4px; +} + +.interactive-item-container .chat-footer-toolbar .menu-entry.chat-copy-action .action-label, +.interactive-result-code-block .interactive-result-code-block-toolbar .menu-entry.chat-copy-action .action-label { + position: relative; + overflow: hidden; +} + +.interactive-item-container .chat-footer-toolbar .menu-entry.chat-copy-action .chat-copy-action-icons, +.interactive-result-code-block .interactive-result-code-block-toolbar .menu-entry.chat-copy-action .chat-copy-action-icons { + display: grid; + place-items: center; + width: 16px; + height: 16px; +} + +.interactive-item-container .chat-footer-toolbar .menu-entry.chat-copy-action .chat-copy-action-icon, +.interactive-result-code-block .interactive-result-code-block-toolbar .menu-entry.chat-copy-action .chat-copy-action-icon { + grid-area: 1 / 1; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + opacity: 0; + transform: scale(0.92); + transition: + opacity 140ms cubic-bezier(0.2, 0, 0, 1), + transform 140ms cubic-bezier(0.2, 0, 0, 1); + will-change: opacity, transform; +} + +.interactive-item-container .chat-footer-toolbar .menu-entry.chat-copy-action:not(.copied) .chat-copy-action-icon-copy, +.interactive-result-code-block .interactive-result-code-block-toolbar .menu-entry.chat-copy-action:not(.copied) .chat-copy-action-icon-copy, +.interactive-item-container .chat-footer-toolbar .menu-entry.chat-copy-action.copied .chat-copy-action-icon-copied, +.interactive-result-code-block .interactive-result-code-block-toolbar .menu-entry.chat-copy-action.copied .chat-copy-action-icon-copied { + opacity: 1; + transform: scale(1); +} + +@media (prefers-reduced-motion: reduce) { + .interactive-result-code-block .interactive-result-code-block-toolbar .menu-entry.chat-copy-action .chat-copy-action-icon, + .interactive-item-container .chat-footer-toolbar .menu-entry.chat-copy-action .chat-copy-action-icon { + transform: none; + transition: none; + } +} + +.interactive-item-container .chat-footer-toolbar .checked.action-label, +.interactive-item-container .chat-footer-toolbar .checked.action-label:hover { + color: var(--vscode-inputOption-activeForeground) !important; + border-color: var(--vscode-inputOption-activeBorder); + background-color: var(--vscode-inputOption-activeBackground); +} + +.interactive-item-container.interactive-response:not(.chat-response-loading) .chat-footer-toolbar, +.interactive-item-container.interactive-response:not(.chat-response-loading) .chat-footer-toolbar .chat-footer-details { + /* Complete response only */ + display: block; + opacity: 0; + padding-top: 6px; + height: 22px; + transition: opacity 0.1s ease-in-out; +} + +.interactive-item-container.interactive-response.chat-persistent-progress { + --chat-response-footer-height: max(22px, calc(var(--vscode-chat-font-size-body-m) * 1.5)); +} + +.interactive-item-container.interactive-response.chat-persistent-progress:not(.chat-response-loading) .chat-footer-toolbar { + padding-top: var(--vscode-spacing-size160); + height: var(--chat-response-footer-height); + + .monaco-toolbar { + min-height: var(--chat-response-footer-height); + } + + .chat-footer-details { + padding-top: 0; + height: var(--chat-response-footer-height); + } +} + +/* Show toolbar on hover and last response. Keep it visible when keyboard focus moves inside the response. */ +.interactive-item-container.interactive-response.chat-most-recent-response:not(.chat-response-loading) .chat-footer-toolbar, +.interactive-item-container.interactive-response:not(.chat-response-loading):focus-within .chat-footer-toolbar, +.interactive-item-container.interactive-response:not(.chat-response-loading):focus-within .chat-footer-toolbar .chat-footer-details, +.interactive-item-container.interactive-response:not(.chat-response-loading).group-hovered .chat-footer-toolbar, +.interactive-item-container.interactive-response:not(.chat-response-loading).group-hovered .chat-footer-toolbar .chat-footer-details { + opacity: 1; + transition: opacity 0.1s ease-in-out; +} + +.interactive-item-container.interactive-response.chat-system-notification-response:not(.chat-response-loading) .chat-footer-toolbar { + display: none; +} + +/* Style the internal toolbar element to use flexbox */ +.interactive-item-container .chat-footer-toolbar .monaco-toolbar { + display: flex; + justify-content: space-between; + align-items: center; +} + +.interactive-item-container .chat-footer-details { + display: none; + padding: 0; + font-size: var(--vscode-chat-font-size-body-xs); + opacity: 0.7; + color: var(--vscode-descriptionForeground); + line-height: 16px; + margin-left: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.interactive-item-container.interactive-response:not(.chat-response-loading) .chat-footer-toolbar .chat-footer-details:not(.hidden) { + display: flex; + align-items: center; + gap: var(--vscode-spacing-size40); + min-width: 0; +} + +.interactive-item-container .chat-footer-details:focus-visible { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: var(--vscode-spacing-size20); +} + +.interactive-item-container .chat-response-timing { + display: inline-grid; + flex-shrink: 0; + overflow: hidden; +} + +.interactive-item-container .chat-response-timing > * { + grid-area: 1 / 1; + justify-self: end; + text-align: right; + transition: opacity 160ms ease, transform 160ms ease; +} + +.interactive-item-container .chat-response-flip-reset .chat-response-timing > * { + transition: none; +} + +.interactive-item-container .chat-response-timing .chat-response-alternate { + opacity: 0; + transform: translateY(100%); +} + +.interactive-item-container .chat-footer-details.chat-response-flip-down .chat-response-timing .chat-response-alternate { + transform: translateY(-100%); +} + +.interactive-item-container .chat-footer-details.chat-response-flip-active .chat-response-timing.has-alternate .chat-response-completed-at, +.interactive-item-container .chat-footer-details:focus-visible .chat-response-timing.has-alternate .chat-response-completed-at { + opacity: 0; + transform: translateY(-100%); +} + +.interactive-item-container .chat-footer-details.chat-response-flip-down.chat-response-flip-active .chat-response-timing.has-alternate .chat-response-completed-at { + transform: translateY(100%); +} + +.interactive-item-container .chat-footer-details.chat-response-flip-active .chat-response-timing.has-alternate .chat-response-alternate, +.interactive-item-container .chat-footer-details:focus-visible .chat-response-timing.has-alternate .chat-response-alternate { + opacity: 1; + transform: translateY(0); +} + +.interactive-item-container .chat-request-timing { + display: inline-grid; + overflow: hidden; +} + +.interactive-item-container .chat-request-timestamp:focus-visible { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: var(--vscode-spacing-size20); +} + +.interactive-item-container .chat-request-timing > * { + grid-area: 1 / 1; + justify-self: end; + text-align: right; + transition: opacity 160ms ease, transform 160ms ease; +} + +.interactive-item-container .chat-request-flip-reset .chat-request-timing > * { + transition: none; +} + +.interactive-item-container .chat-request-timing .chat-request-full-date { + opacity: 0; + transform: translateY(100%); +} + +.interactive-item-container .chat-request-timestamp.chat-request-flip-down .chat-request-timing .chat-request-full-date { + transform: translateY(-100%); +} + +.interactive-item-container .chat-request-timestamp.chat-request-flip-active .chat-request-timing.has-alternate .chat-request-relative, +.interactive-item-container .chat-request-timestamp:focus-visible .chat-request-timing.has-alternate .chat-request-relative { + opacity: 0; + transform: translateY(-100%); +} + +.interactive-item-container .chat-request-timestamp.chat-request-flip-down.chat-request-flip-active .chat-request-timing.has-alternate .chat-request-relative { + transform: translateY(100%); +} + +.interactive-item-container .chat-request-timestamp.chat-request-flip-active .chat-request-timing.has-alternate .chat-request-full-date, +.interactive-item-container .chat-request-timestamp:focus-visible .chat-request-timing.has-alternate .chat-request-full-date { + opacity: 1; + transform: translateY(0); +} + +.interactive-item-container .chat-response-model-details { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; +} + +.interactive-item-container.interactive-response .chat-footer-toolbar .chat-footer-details.hidden { + display: none; +} + +@media (prefers-reduced-motion: reduce) { + .interactive-item-container .chat-response-timing > *, + .interactive-item-container .chat-request-timing > * { + transition: none; + } +} + +.interactive-item-container.interactive-request:not(.show-verbose-details):not(.editing):not(.editing-input) .chat-request-timestamp-container { + display: none; +} + +.interactive-item-container .value { + width: 100%; +} + +.interactive-item-container .chat-request-timestamp-container { + width: 100%; +} + +.interactive-item-container.interactive-request.editing .chat-request-timestamp-container { + align-items: center; + height: 22px; + margin-top: -22px; + pointer-events: none; +} + +.interactive-item-container.interactive-request.editing .chat-request-timestamp { + pointer-events: auto; +} + +.monaco-workbench:not(.agent-sessions-workbench) .interactive-item-container.interactive-request.editing .chat-request-timestamp-container { + box-sizing: border-box; + padding-inline-end: var(--vscode-spacing-size160); +} + +.interactive-item-container .completed-response-disclosure { + width: 100%; + margin-bottom: var(--vscode-spacing-size80); + interpolate-size: allow-keywords; + + &::details-content { + block-size: 0; + box-sizing: border-box; + overflow: hidden; + opacity: 0; + margin-inline-start: var(--vscode-spacing-size60); + padding-inline-start: var(--vscode-spacing-size120); + border-inline-start: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); + border-image: linear-gradient(to bottom, var(--vscode-chat-requestBorder) 0 calc(100% - var(--vscode-spacing-size80)), transparent calc(100% - var(--vscode-spacing-size80))) 1; + transition: + block-size 180ms cubic-bezier(0.2, 0, 0, 1), + opacity 140ms cubic-bezier(0.2, 0, 0, 1), + content-visibility 180ms allow-discrete; + } + + &[open]::details-content { + block-size: auto; + opacity: 1; + } +} + +.interactive-item-container .completed-response-disclosure:not([open]) { + margin-bottom: var(--vscode-spacing-size160); +} + +.interactive-item-container .completed-response-summary { + display: flex; + align-items: center; + width: fit-content; + max-width: 100%; + padding: 0; + border-radius: var(--vscode-cornerRadius-small); + cursor: pointer; + font-variant-numeric: tabular-nums; + font-feature-settings: "tnum"; + list-style: none; + + > .monaco-button.monaco-icon-button { + margin-left: 0; + padding-left: 0; + } + + > .monaco-button .monaco-button-mdlabel { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.interactive-item-container .completed-response-summary * { + cursor: inherit; +} + +.interactive-item-container .completed-response-summary::-webkit-details-marker { + display: none; +} + +.interactive-item-container .completed-response-summary:focus-visible { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: calc(-1 * var(--vscode-strokeThickness)); +} + +.interactive-item-container .completed-response-summary .chat-collapsible-hover-chevron.codicon { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--vscode-codiconFontSize-compact); + height: var(--vscode-codiconFontSize-compact); + font-size: var(--vscode-codiconFontSize-compact); + line-height: 1; +} + +.interactive-item-container .completed-response-summary:hover .chat-collapsible-hover-chevron, +.interactive-item-container .completed-response-summary:focus-visible .chat-collapsible-hover-chevron, +.interactive-item-container .completed-response-summary:focus-within .chat-collapsible-hover-chevron { + opacity: 1; +} + +.interactive-item-container .completed-response-disclosure[open] .completed-response-summary .monaco-button { + color: var(--vscode-foreground); +} + +.interactive-item-container .completed-response-disclosure[open] .completed-response-summary { + padding-bottom: var(--vscode-spacing-size80); +} + +.interactive-item-container .completed-response-disclosure > :last-child, +.interactive-item-container .completed-response-disclosure > :last-child.rendered-markdown > :last-child { + margin-bottom: 0; +} + +.monaco-reduce-motion .completed-response-disclosure::details-content, +.monaco-workbench.monaco-reduce-motion .completed-response-disclosure::details-content { + transition: none; +} + +@media (prefers-reduced-motion: reduce) { + .completed-response-disclosure::details-content { + transition: none; + } +} + +.interactive-item-container > .value .chat-used-context { + margin-bottom: var(--vscode-spacing-size160); +} + +.interactive-item-container > .value .chat-used-context .chat-used-context-list { + margin-bottom: 0; +} + +.interactive-item-container .value .rendered-markdown:not(:has(.chat-extensions-content-part)) { + .codicon { + font-size: inherit; + } + + .interactive-result-code-block .codicon { + font-size: initial; + } +} + +.interactive-item-container .value .rendered-markdown blockquote { + margin: 0px; + padding: 0px 16px 0 10px; + border-left-width: 5px; + border-left-style: solid; + border-radius: var(--vscode-cornerRadius-xSmall); + background: var(--vscode-textBlockQuote-background); + border-color: var(--vscode-textBlockQuote-border); +} + +.interactive-item-container .value .rendered-markdown strong { + font-weight: var(--vscode-fontWeight-semiBold); +} + +.interactive-item-container .value .rendered-markdown .rendered-markdown-table-scroll-wrapper { + width: 100%; + margin-bottom: 16px; +} + +.interactive-item-container .value .rendered-markdown table { + text-align: left; + border-radius: var(--vscode-cornerRadius-medium); + overflow: hidden; + border-collapse: separate; + border-spacing: 0; + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); +} + +.interactive-item-container .value .rendered-markdown table td, +.interactive-item-container .value .rendered-markdown table th { + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); + border-top: none; + border-left: none; + padding: 4px 6px; +} + +.interactive-item-container .value .rendered-markdown table th { + white-space: normal; + overflow-wrap: break-word; +} + +.interactive-item-container .value .rendered-markdown table td:last-child, +.interactive-item-container .value .rendered-markdown table th:last-child { + border-right: none; +} + +.interactive-item-container .value .rendered-markdown table tbody tr:last-child td { + border-bottom: none; +} + +.interactive-item-container .value .rendered-markdown a, +.interactive-item-container .value .interactive-session-followups, +.interactive-item-container .value .rendered-markdown a code { + color: var(--vscode-textLink-foreground); +} + +.interactive-item-container .value .rendered-markdown .chat-extensions-content-part a { + color: inherit; +} + +.interactive-item-container .value .rendered-markdown a { + user-select: text; +} + +.interactive-item-container .value .rendered-markdown a:hover, +.interactive-item-container .value .rendered-markdown a:active { + color: var(--vscode-textLink-activeForeground); +} + +.hc-black .interactive-item-container .value .rendered-markdown a code, +.hc-light .interactive-item-container .value .rendered-markdown a code { + color: var(--vscode-textPreformat-foreground); +} + +.interactive-list { + overflow: hidden; + position: relative; + /* For the scroll down button */ +} + +.hc-black .interactive-request, +.hc-light .interactive-request { + border-left: 3px solid var(--vscode-chat-requestBorder); + border-right: 3px solid var(--vscode-chat-requestBorder); +} + +.interactive-item-container .value { + white-space: normal; + overflow-wrap: anywhere; +} + +.chat-list-at-bottom .chat-progress-reservable > .value:has(> .rendered-markdown:last-child) { + padding-bottom: calc(var(--vscode-spacing-size360) + var(--vscode-strokeThickness)); +} + +/* Hidden summaries must not keep the preceding content's trailing margin. */ +.interactive-item-container .value > :nth-last-child(1 of :not([hidden])), +.interactive-item-container .value > :nth-last-child(1 of :not([hidden])).rendered-markdown > :last-child, +.interactive-item-container.interactive-request .value .rendered-markdown > :last-child { + margin-bottom: 0px; +} + +.interactive-item-container .value .rendered-markdown hr { + border-color: color-mix(in srgb, var(--vscode-textSeparator-foreground) 33%, transparent); +} + +.interactive-item-container .value .rendered-markdown h1 { + font-size: var(--vscode-chat-font-size-body-xxl); + font-weight: var(--vscode-fontWeight-semiBold); + margin: 1.5em 0 0.875em 0; + font-family: var(--vscode-chat-font-family, inherit); + +} + +.interactive-item-container .value .rendered-markdown h2 { + font-size: var(--vscode-chat-font-size-body-xl); + font-weight: var(--vscode-fontWeight-semiBold); + margin: 1.5em 0 0.875em 0; + font-family: var(--vscode-chat-font-family, inherit); +} + +.interactive-item-container .value .rendered-markdown h3 { + font-size: var(--vscode-chat-font-size-body-l); + font-weight: var(--vscode-fontWeight-semiBold); + margin: 1.5em 0 0.875em 0; + font-family: var(--vscode-chat-font-family, inherit); +} + +.interactive-item-container.editing-session .value .rendered-markdown p:has(+ [data-code] > .chat-codeblock-pill-widget) { + margin-bottom: 8px; +} + +.interactive-item-container.editing-session .value .rendered-markdown h3 { + font-size: var(--vscode-chat-font-size-body-m); + margin: 1.5em 0 0.875em 0; +} + +/* Inline text icons align to the baseline; activity-gutter icons own their positioning. */ +.interactive-item-container .value .rendered-markdown:not(:has(.chat-extensions-content-part)) .codicon:where(:not(.chat-tool-call-icon)) { + position: relative; + top: 2px; +} + +.interactive-item-container .value .rendered-markdown { + .chat-codeblock-pill-widget .codicon { + top: -1px; + } + + /* But codicons in toolbars assume the natural position of the codicon */ + .monaco-toolbar .codicon { + position: initial; + top: initial; + } + + /* Code blocks at the beginning of an answer should not have a margin as it means it won't align with the agent icon*/ + > div[data-code]:first-child { + margin-top: 0; + + } + + /* Override the top to avoid the toolbar getting clipped by overflow:hidden */ + > div[data-code]:first-child .interactive-result-code-block .interactive-result-code-block-toolbar > .monaco-action-bar, + > div[data-code]:first-child .interactive-result-code-block .interactive-result-code-block-toolbar > .monaco-toolbar { + top: 6px; + } +} + +.interactive-item-container .value.inline-progress { + + .rendered-markdown { + display: inline-flex; + } + + /* not ideal but I cannot query the last div with this class... */ + .rendered-markdown:last-of-type > P > SPAN:empty { + display: inline-block; + width: 11px; + } + + .rendered-markdown:last-of-type > P > SPAN:empty::after { + content: ''; + white-space: nowrap; + overflow: hidden; + width: 3em; + animation: ellipsis steps(4, end) 1s infinite; + } +} + +.interactive-item-container .value .rendered-markdown { + line-height: 1.5em; + font-size: var(--vscode-chat-font-size-body-m); + font-family: var(--vscode-chat-font-family, inherit); +} + +.interactive-item-container.terminal-command-request > .value > .rendered-markdown { + font-family: var(--monaco-monospace-font); +} + +.interactive-item-container .value > .rendered-markdown p, +.interactive-item-container .value > .completed-response-disclosure > .rendered-markdown p { + /* Targetting normal text paras. `p` can also appear in other elements/widgets */ + margin: 0 0 16px 0; +} + +.interactive-item-container .value > .chat-tool-invocation-part, +.interactive-item-container .value > .completed-response-disclosure > .chat-tool-invocation-part { + .disclaimer { + margin-top: 6px; + margin-bottom: -6px; + + .rendered-markdown p:last-child { + margin-bottom: 0; + } + } + + .message .see-more { + display: none; + position: absolute; + right: 0; + bottom: 0; + + a { + color: var(--vscode-textLink-foreground); + text-decoration: underline; + cursor: pointer; + } + } + + .message.can-see-more { + position: relative; + + .message-wrapper { + /* Fade out the bottom edge so the "see more" link can overlay cleanly. */ + mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) calc(100% - 24px), rgba(0, 0, 0, 0) 100%); + pointer-events: none; + max-height: 96px; + overflow: hidden; + } + + .see-more { + display: block; + } + } + + .progress-container .rendered-markdown [data-code] { + margin: 0; + } + + .tool-input-output-part { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .tool-input-output-part .rendered-markdown p { + margin: inherit; + } + + .tool-input-output-part .expando { + display: flex; + align-items: center; + cursor: pointer; + } + + .tool-input-output-part .input-output { + display: none; + padding: 6px 0; + flex-basis: 100%; + width: 100%; + } + + .tool-input-output-part.expanded .input-output { + display: inherit; + } + + .tool-output-part { + border: var(--vscode-strokeThickness) solid var(--vscode-widget-border); + border-radius: var(--vscode-cornerRadius-medium); + background: var(--vscode-editor-background); + margin: 4px 0; + overflow: hidden; + + .output-title { + padding: 8px 12px; + background: var(--vscode-editorWidget-background); + border-bottom: var(--vscode-strokeThickness) solid var(--vscode-widget-border); + font-size: var(--vscode-chat-font-size-body-m); + } + + .webview-output { + position: relative; + } + + .progress-container { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + width: fit-content; + height: fit-content; + } + + .output-error { + margin: 6px 4px; + color: var(--vscode-errorForeground); + + .output-error-header { + display: flex; + align-items: center; + gap: var(--vscode-spacing-size80); + margin-bottom: 4px; + + .codicon-error { + color: var(--vscode-errorForeground) !important; + } + } + + .output-error-details { + font-family: var(--monaco-monospace-font); + font-size: var(--vscode-chat-font-size-body-xs); + } + } + } + + &:not(:last-child) { + margin-bottom: var(--vscode-spacing-size160); + } +} + +.interactive-item-container .value > .rendered-markdown li > p, +.interactive-item-container .value > .completed-response-disclosure > .rendered-markdown li > p { + margin: 0; +} + +/* #region list indent rules */ +.interactive-item-container .value .rendered-markdown ul { + /* Keep this in sync with the values for dedented codeblocks below */ + padding-inline-start: 24px; +} + +.interactive-item-container .value .rendered-markdown ol { + /* Keep this in sync with the values for dedented codeblocks below */ + padding-inline-start: 28px; +} + +.interactive-item-container .value .rendered-markdown li { + margin: 4px 0; +} + +/* Codeblocks only carry a bottom margin (see codeBlockPart.css) and rely on the previous element's bottom +margin for the space above them. Inside lists that margin is collapsed away to keep items tight, so a codeblock +following list content ends up with no space above it. Add a matching top margin in just those cases. */ +.interactive-item-container .value .rendered-markdown { + ul + [data-code], + ol + [data-code], + li > [data-code] { + margin-top: 16px; + } +} + +/* NOTE- We want to dedent codeblocks in lists specifically to give them the full width. No more elegant way to do this, these values +have to be updated for changes to the rules above, or to support more deeply nested lists. */ +.interactive-item-container .value .rendered-markdown ul .interactive-result-code-block { + margin-left: -24px; +} + +.interactive-item-container .value .rendered-markdown ul ul .interactive-result-code-block { + margin-left: -48px; +} + +.interactive-item-container .value .rendered-markdown ol .interactive-result-code-block { + margin-left: -28px; +} + +.interactive-item-container .value .rendered-markdown ol ol .interactive-result-code-block { + margin-left: -56px; +} + +.interactive-item-container .value .rendered-markdown ol ul .interactive-result-code-block, +.interactive-item-container .value .rendered-markdown ul ol .interactive-result-code-block { + margin-left: -52px; +} + +/* #endregion list indent rules */ + +.interactive-item-container .value .rendered-markdown img { + max-width: 100%; +} + +.chat-tool-hover, +.interactive-item-container { + + .monaco-tokenized-source, + code { + font-family: var(--monaco-monospace-font); + font-size: var(--vscode-chat-font-size-body-xs); + color: var(--vscode-textPreformat-foreground); + background-color: var(--vscode-textPreformat-background); + padding: var(--vscode-spacing-size20) var(--vscode-spacing-size40); + border-radius: var(--vscode-cornerRadius-small); + border: var(--vscode-strokeThickness) solid var(--vscode-textPreformat-border); + white-space: pre-wrap; + } +} + +.interactive-item-container.interactive-item-compact { + padding: 8px 20px; +} + +.interactive-item-container.interactive-item-compact .header { + height: 16px; +} + +.interactive-item-container.interactive-item-compact .header .avatar { + width: 18px; + height: 18px; +} + +.interactive-item-container.interactive-item-compact .header .avatar .icon { + width: 16px; + height: 16px; +} + +.interactive-item-container.interactive-item-compact .header .codicon-avatar .codicon { + font-size: var(--vscode-codiconFontSize-compact); +} + +.interactive-item-container.interactive-item-compact .header .avatar + .avatar { + margin-left: -4px; +} + +.interactive-item-container.interactive-item-compact .value { + min-height: 0; +} + +.interactive-item-container.interactive-item-compact .value > .rendered-markdown p, +.interactive-item-container.interactive-item-compact .value > .completed-response-disclosure > .rendered-markdown p { + margin: 0 0 8px 0; +} + +.interactive-item-container.interactive-item-compact .value > .rendered-markdown li > p, +.interactive-item-container.interactive-item-compact .value > .completed-response-disclosure > .rendered-markdown li > p { + margin: 0; +} + +.interactive-item-container.interactive-item-compact .value .rendered-markdown h1 { + margin: 8px 0; + +} + +.interactive-item-container.interactive-item-compact .value .rendered-markdown h2 { + margin: 8px 0; +} + +.interactive-item-container.interactive-item-compact .value .rendered-markdown h3 { + margin: 8px 0; +} + +.interactive-item-container.minimal { + flex-direction: row; +} + +.interactive-item-container.minimal .column.left { + padding-top: 2px; + display: inline-block; + flex-grow: 0; +} + +.interactive-item-container.minimal .column.right { + display: inline-block; + flex-grow: 1; +} + +.interactive-item-container.interactive-request.minimal .rendered-markdown .chat-animated-ellipsis { + display: inline-flex; +} + +.interactive-item-container.minimal .user > .username { + display: none; +} + +.interactive-item-container.minimal .detail-container { + font-size: unset; +} + +.interactive-item-container.minimal > .header { + position: absolute; + right: 0; +} + +.chat-dnd-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + + display: none; +} + +.chat-dnd-overlay.visible { + display: flex; + align-items: center; + justify-content: center; +} + +.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; +} + +.chat-dnd-overlay .attach-context-overlay-text .codicon { + height: var(--vscode-codiconFontSize-compact); + font-size: var(--vscode-codiconFontSize-compact); + margin-right: var(--vscode-spacing-size40); +} + +/* + * How round the chat input run is. + * + * Declared on the part that wraps the whole stack rather than on the input + * itself. Everything docked above the input joins it into a single surface, so + * those members have to round their outer corners to the same value - and a + * custom property only reaches them from a shared ancestor. `chatInputStack.css` + * republishes this as the run's outer radius; members read it from there. + * + * The three rules below are ordered, not just specific: `.compact` and the + * quick input scope both match at the same specificity and a compact input + * inside the quick input widget must round like a compact one, so `.compact` + * comes last. Keep them adjacent and in this order. + */ +.interactive-session .interactive-input-part { + --chat-input-radius: var(--vscode-cornerRadius-large); +} + +.quick-input-widget .interactive-session .interactive-input-part { + --chat-input-radius: var(--vscode-cornerRadius-xSmall); +} + +.interactive-session .interactive-input-part.compact { + --chat-input-radius: var(--vscode-cornerRadius-small); +} + +.monaco-workbench .interactive-session .chat-input-container { + box-sizing: border-box; + cursor: text; + background-color: var(--vscode-input-background); + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, transparent); + /* Top corners follow the stack, so a docked widget can square them. The + fallback keeps an input rendered outside a chat input part rounded. */ + --chat-input-own-radius: var(--chat-input-radius, var(--vscode-cornerRadius-large)); + border-radius: + var(--chat-input-stack-radius-top, var(--chat-input-own-radius)) + var(--chat-input-stack-radius-top, var(--chat-input-own-radius)) + var(--chat-input-own-radius) + var(--chat-input-own-radius); + padding: 0 6px 6px 6px; + /* top padding is inside the editor widget */ + width: 100%; + position: relative; + transition: box-shadow 350ms ease; + /* Duration of the working/progress border comet animation. Set + dynamically by `ChatInputPart#layout` to keep the comet's linear + travel speed roughly constant regardless of input width — wider + inputs would otherwise feel sluggish at a fixed duration. */ + --chat-input-anim-duration: 4s; + /* Allow host surfaces (like inactive sessions) to tone down the animation + accent without overriding the global chat theme token. */ + --chat-input-working-border-color1: var(--vscode-chat-inputWorkingBorderColor1); +} + +/* Prevent contents from covering border corners. Not applied in compact mode + because overflow:hidden creates a BFC that causes a ResizeObserver ↔ layout + feedback loop when toolbars share width with the editor. */ +.interactive-session .interactive-input-part:not(.compact) .chat-input-container { + /* Prevent contents from covering border corner */ + overflow: hidden; +} + +@keyframes chat-input-working-border-spin { + from { + transform: translate(-50%, -50%) rotate(0deg); + } + + to { + transform: translate(-50%, -50%) rotate(360deg); + } +} + +/* Keep the ring mask fixed while its gradient rotates on the compositor. */ +.monaco-workbench .interactive-session .chat-input-container > .chat-input-working-border { + --chat-input-working-border-width: var(--vscode-strokeThickness); + position: absolute; + inset: -1px; + border-radius: inherit; + padding: var(--chat-input-working-border-width); + container-type: size; + /* Masking alone does not keep the oversized gradient out of ancestor scroll areas. */ + overflow: clip; + -webkit-mask: + linear-gradient(#000 0 0) content-box, + linear-gradient(#000 0 0); + mask: + linear-gradient(#000 0 0) content-box, + linear-gradient(#000 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + opacity: 0; + transition: opacity 350ms ease; + pointer-events: none; + z-index: 2; +} + +.monaco-workbench .interactive-session .chat-input-container > .chat-input-working-border::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + /* Cover the mask's diagonal at every rotation angle. */ + width: hypot(calc(100cqw + 2 * var(--chat-input-working-border-width)), calc(100cqh + 2 * var(--chat-input-working-border-width))); + aspect-ratio: 1; + transform: translate(-50%, -50%); + background: conic-gradient(from 135deg, + transparent 0deg, + color-mix(in srgb, var(--chat-input-working-border-color1) 90%, transparent) 20deg, + var(--chat-input-working-border-color1) 30deg, + color-mix(in srgb, var(--chat-input-working-border-color1) 60%, transparent) 50deg, + transparent 90deg, + transparent 360deg); +} + +.monaco-workbench .interactive-session .chat-input-container > .chat-input-working-border-glow { + --chat-input-working-border-width: 2px; + filter: blur(1.5px); + z-index: 1; +} + +.monaco-workbench .interactive-session .chat-input-container > .chat-input-working-border-glow::before { + background: conic-gradient(from 135deg, + transparent 0deg, + color-mix(in srgb, var(--chat-input-working-border-color1) 60%, transparent) 25deg, + color-mix(in srgb, var(--chat-input-working-border-color1) 35%, transparent) 50deg, + transparent 90deg, + transparent 360deg); +} + +.monaco-workbench .interactive-session .chat-input-container.working { + /* Keep a faint, persistent ring around the input while the comet + animates around it. This preserves a visible boundary for the + input throughout the animation (including the dim portion of the + perimeter behind the comet) and improves contrast for users who + rely on a visible focus/container outline for accessibility. */ + border-color: var(--vscode-input-border, transparent); + overflow: visible; + + > .chat-editor-container { + overflow: hidden; + } +} + +.monaco-workbench .interactive-session .interactive-input-part:not(.compact) .chat-input-container.working > .chat-editor-container { + margin-right: calc(-1 * var(--vscode-spacing-size60)); + padding-right: var(--vscode-spacing-size60); + border-top-right-radius: inherit; +} + +.monaco-workbench .interactive-session .chat-input-container.working.focused { + border-color: color-mix(in srgb, var(--vscode-focusBorder) 40%, transparent); +} + +.monaco-workbench .interactive-session .chat-input-container.working .interactive-input-editor .monaco-editor, +.monaco-workbench .interactive-session .chat-input-container.working .interactive-input-editor .monaco-editor .monaco-editor-background { + background-color: transparent; +} + +.monaco-workbench .interactive-session .chat-input-container.working > .chat-input-working-border { + opacity: 1; +} + +.monaco-workbench .interactive-session .chat-input-container.working > .chat-input-working-border::before { + animation: chat-input-working-border-spin var(--chat-input-anim-duration) linear infinite; +} + +.monaco-workbench .interactive-session .chat-input-container.working.chat-input-anim-paused > .chat-input-working-border::before { + animation-play-state: paused; +} + +/* Marker class toggled briefly by `ChatInputPart#_updateWorkingProgressAnimationDuration` + to force a restart of the comet animations so a new + `--chat-input-anim-duration` takes effect mid-flight (browsers cache + animation-duration at start time when sourced from a custom property). */ +.monaco-workbench .interactive-session .chat-input-container.working.chat-input-anim-restart > .chat-input-working-border::before { + animation: none; +} + +@media (prefers-reduced-motion: reduce) { + .monaco-workbench .interactive-session .chat-input-container.working > .chat-input-working-border::before { + animation: none; + } +} + +/* Context usage widget container - positioned in the secondary toolbar below input */ +.interactive-session .chat-input-toolbars .chat-context-usage-container, +.interactive-session .chat-secondary-toolbar .chat-context-usage-container { + display: flex; + align-items: center; + flex-shrink: 0; + margin-left: auto; + order: 1; +} + +/* Status indicator container — sits at the rightmost end of the secondary toolbar, next to the context usage button. Intentionally non-responsive so contributed status items never collapse into an overflow menu. */ +.interactive-session .chat-secondary-toolbar .chat-input-status-container { + display: flex; + align-items: center; + flex-shrink: 0; + order: 2; +} + +.interactive-session .chat-secondary-toolbar .chat-input-status-container:empty, +.interactive-session .chat-secondary-toolbar .chat-input-status-container.has-no-actions { + display: none; +} + +/* When context usage is inside the toolbars (compact mode), keep the ordering */ +.interactive-session .chat-input-toolbars .chat-context-usage-container { + order: 1; +} + +.interactive-session .chat-input-toolbars > .chat-execute-toolbar { + order: 2; + flex-shrink: 0; +} + +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .actions-container { + gap: var(--vscode-spacing-size40); +} + +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button { + position: relative; + border-radius: var(--vscode-cornerRadius-circle); +} + +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label { + box-sizing: border-box; + width: var(--chat-input-control-height); + height: var(--chat-input-control-height); + justify-content: center; + font-size: var(--vscode-codiconFontSize-compact); + /* Keep the fully-rounded shape in both states — the enabled rule below only + adds the filled background, it shouldn't be what defines the shape. */ + border-radius: var(--vscode-cornerRadius-circle); + transition: background-color 250ms ease, color 250ms ease; +} + +/* Nudge icon position to ensure it looks optically aligned within the button */ +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label.codicon-arrow-up-compact::before { + display: inline-block; + transform: translateY(0.5px); +} + +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label.codicon-plus::before { + transform: translateX(0.5px); +} + +/* Focus indicator drawn on the action-item wrapper so it sits cleanly around + the button surface with a small offset. */ +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled):has(> .action-label:focus-visible) { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: 1px; + border-radius: var(--vscode-cornerRadius-circle); +} + +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label:focus, +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label:focus-visible { + outline: none; +} + +/* Idle: solid primary button background. */ +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled) > .action-label { + background: var(--vscode-button-background); + color: var(--vscode-button-foreground) !important; + transition: background-color 120ms ease; +} + +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled) > .action-label:hover, +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled) > .action-label:focus-visible { + background: var(--vscode-button-hoverBackground); +} + +.interactive-session .chat-editing-session { + width: 100%; + position: relative; +} + +.monaco-workbench .interactive-session .chat-editing-session .chat-editing-session-container { + padding: var(--vscode-spacing-size40); + box-sizing: border-box; + background-color: var(--vscode-editor-background); + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, transparent); + border-bottom: none; + border-radius: var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) 0 0; + display: flex; + flex-direction: column; + gap: 2px; + overflow: hidden; +} + +.interactive-session .chat-editing-session .monaco-list-row .chat-collapsible-list-action-bar { + padding-left: var(--vscode-spacing-size60); + display: none; +} + +.interactive-session .chat-editing-session .monaco-list-row:hover .chat-collapsible-list-action-bar:not(.has-no-actions), +.interactive-session .chat-editing-session .monaco-list-row.focused .chat-collapsible-list-action-bar:not(.has-no-actions), +.interactive-session .chat-editing-session .monaco-list-row.selected .chat-collapsible-list-action-bar:not(.has-no-actions) { + display: inherit; +} + +.interactive-session .chat-editing-session .chat-editing-session-container.show-file-icons .monaco-scrollable-element .monaco-list-rows .monaco-list-row { + border-radius: var(--vscode-cornerRadius-xSmall); +} + +/* Toggled in chatInputPart.ts when the working set overflows. Do not replace + * with :has(): workbench-wide invalidation hazard (microsoft/vscode#324985). */ +.interactive-session .chat-editing-session .chat-editing-session-container.show-file-icons .chat-editing-session-list.overflowing .monaco-list-row .monaco-icon-label { + padding-right: 12px; +} + +.interactive-session .chat-editing-session .chat-editing-session-container .chat-editing-session-overview { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 6px; + padding-right: var(--vscode-spacing-size20); + height: 22px; + line-height: 22px; + cursor: pointer; +} + +.interactive-session .chat-editing-session .chat-editing-session-container .chat-editing-session-overview > .working-set-title { + color: var(--vscode-descriptionForeground); + font-size: var(--vscode-fontSize-label1); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + align-content: center; +} + +/* Inline added/removed line count styling */ +.interactive-session .chat-editing-session .chat-editing-session-container .chat-editing-session-overview .working-set-line-counts { + display: inline-flex; + gap: 4px; + margin-left: 6px; + font-size: var(--vscode-fontSize-label2); + font-weight: var(--vscode-fontWeight-semiBold); +} + +.interactive-session .chat-editing-session .chat-editing-session-container .chat-editing-session-overview .working-set-line-counts .working-set-lines-added { + color: var(--vscode-chat-linesAddedForeground); +} + +.interactive-session .chat-editing-session .chat-editing-session-container .chat-editing-session-overview .working-set-line-counts .working-set-lines-removed { + color: var(--vscode-chat-linesRemovedForeground); +} + +.interactive-session .chat-editing-session .chat-editing-session-list .working-set-line-counts { + margin: 0 6px; + display: inline-flex; + gap: 4px; + font-size: var(--vscode-fontSize-label2); +} + +.interactive-session .chat-editing-session .chat-editing-session-list .working-set-line-counts .working-set-lines-added { + color: var(--vscode-chat-linesAddedForeground); +} + +.interactive-session .chat-editing-session .chat-editing-session-list .working-set-line-counts .working-set-lines-removed { + color: var(--vscode-chat-linesRemovedForeground); +} + +.interactive-session .chat-editing-session .working-set-title { + + .monaco-button { + padding: 2px 6px 2px 0px; + border-radius: var(--vscode-cornerRadius-xSmall); + border: none; + background-color: unset; + color: var(--vscode-descriptionForeground); + } + + .monaco-button:focus-visible { + outline-offset: -1px !important; + } +} + + +.interactive-session .chat-editing-session .chat-editing-session-container .monaco-progress-container { + position: relative; +} + +.interactive-session .chat-editing-session .chat-editing-session-actions { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + gap: 6px; + align-items: center; +} + +.interactive-session .chat-editing-session .monaco-button { + width: fit-content; +} + +.chat-attachments-container { + display: flex; + flex-direction: row; + gap: 4px; + margin-top: 6px; + flex-wrap: wrap; + cursor: default; +} + +.interactive-session .chat-editing-session .chat-editing-session-actions .monaco-button.secondary.monaco-text-button.codicon { + cursor: pointer; + padding: 2px; + border-radius: var(--vscode-cornerRadius-small); + display: inline-flex; +} + +.interactive-session .chat-editing-session .chat-editing-session-actions .monaco-button.secondary.monaco-text-button { + background-color: var(--vscode-button-secondaryBackground); + color: var(--vscode-button-secondaryForeground); +} + +.interactive-session .chat-editing-session .chat-editing-session-actions .monaco-button.secondary:hover { + background-color: var(--vscode-button-secondaryHoverBackground); + color: var(--vscode-button-secondaryForeground); +} + +.interactive-session .chat-editing-session .chat-editing-session-actions .monaco-button { + overflow: hidden; + text-wrap: nowrap; +} + +.interactive-session .interactive-input-part .chat-artifacts-widget-container { + width: 100%; + position: relative; +} + + +/* Chat Todo List Widget Container - mirrors chat-editing-session styling */ +.interactive-session .interactive-input-part .chat-todo-list-widget-container { + width: 100%; + position: relative; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget { + padding: var(--vscode-spacing-size40); + box-sizing: border-box; + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, transparent); + background-color: var(--vscode-editor-background); + border-bottom: none; + border-radius: var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) 0 0; + flex-direction: column; + gap: 2px; + overflow: hidden; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-expand { + width: 100%; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-expand .monaco-button { + display: flex; + align-items: center; + gap: 4px; + cursor: pointer; + justify-content: space-between; + width: 100%; + background-color: transparent; + border-color: transparent; + color: var(--vscode-foreground); + padding: 0; + min-width: unset; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-expand .monaco-button:focus:not(:focus-visible) { + outline: none; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-expand .todo-list-title-section { + padding-left: var(--vscode-spacing-size40); + display: flex; + align-items: center; + flex: 1; + font-size: var(--vscode-fontSize-label1); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 22px; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-expand .todo-list-title-section .codicon { + font-size: var(--vscode-codiconFontSize); + line-height: 22px; + flex-shrink: 0; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-clear-button-container { + padding-right: 2px; + display: flex; + align-items: center; + height: 22px; + opacity: 1; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-clear-button-container .monaco-button { + background-color: transparent; + border-color: transparent; + color: var(--vscode-foreground); + cursor: pointer; + box-sizing: border-box; + width: 22px; + height: 22px; + min-width: 22px; + padding: 0; + border-radius: var(--vscode-cornerRadius-xSmall); + display: inline-flex; + align-items: center; + justify-content: center; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-clear-button-container .monaco-button:hover { + background-color: var(--vscode-toolbar-hoverBackground); +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-clear-button-container .monaco-button:focus { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: 1px; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-clear-button-container .monaco-button .codicon { + font-size: var(--vscode-codiconFontSize-compact); + color: var(--vscode-foreground); +} + + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .expand-icon { + flex-shrink: 0; + margin-right: var(--vscode-spacing-size40); +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-title { + font-weight: var(--vscode-fontWeight-regular); + font-size: var(--vscode-fontSize-label1); + display: flex; + align-items: center; + overflow: hidden; + text-overflow: ellipsis; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list-container { + margin-top: 2px; + max-height: calc(6.5 * 21px); + /* 6.5 items to show half-line affordance */ + overflow-y: auto; + overscroll-behavior: contain; + scroll-behavior: smooth; + scroll-padding-top: 24px; + /* Half item height to show partial next item */ + scroll-padding-bottom: 24px; + /* Half item height to show partial previous item */ +} + + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-list { + display: flex; + flex-direction: column; + gap: 4px; + scroll-snap-type: y proximity; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-item { + display: flex; + align-items: center; + gap: 6px; + scroll-snap-align: start; + min-height: 22px; + font-size: var(--vscode-chat-font-size-body-m); + padding: 0 var(--vscode-spacing-size40); + border-radius: var(--vscode-cornerRadius-xSmall); + cursor: pointer; +} + + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-item:focus { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: -1px; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-item.focused { + background-color: var(--vscode-list-focusBackground); +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-item > .todo-status-icon.codicon { + flex-shrink: 0; + font-size: var(--vscode-codiconFontSize); +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .todo-content { + flex-grow: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + min-width: 0; +} + +.interactive-session .interactive-input-part .chat-todo-list-widget-container .chat-todo-list-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row { + border-radius: var(--vscode-cornerRadius-small); +} + +.interactive-session .interactive-input-part.compact .chat-input-container { + display: flex; + justify-content: space-between; + padding-bottom: 0; + /* no scrollbar */ + padding-right: 6px; +} + +.interactive-session .interactive-input-and-side-toolbar { + display: flex; + gap: 4px; + align-items: center; + position: relative; +} + +.interactive-session .chat-input-container.focused { + border-color: var(--vscode-focusBorder); +} + +.chat-editor-container { + padding: 0 0 0 4px; +} + +/* Enable container query units for placeholder truncation. Scoped to + non-compact inputs (panel chat) because applying `container-type` in + compact contexts (inline chat, quick chat) interferes with Monaco's + view-line layout and causes the placeholder decoration to render + with zero width. */ +.interactive-session .interactive-input-part:not(.compact) .chat-editor-container { + container-type: inline-size; +} + +.interactive-session .interactive-input-part.compact .chat-editor-container { + /* No scrollbar */ + padding-right: 4px; +} + +.chat-editor-container .monaco-editor .mtk1 { + color: var(--vscode-input-foreground); +} + +/* Truncate the chat input placeholder with an ellipsis in narrow views + instead of letting it overflow off the right edge of the input. + The placeholder is rendered as a Monaco contentText decoration with + class prefix "ced-chat-session-detail" inside the view-line spans; + style the decoration element directly so we don't pay :has() cost + across every view-line on each typed character. Scoped to non-compact + inputs because the inline-block + container query sizing breaks the + placeholder rendering in compact contexts (inline chat, quick chat). */ +.interactive-session .interactive-input-part:not(.compact) .chat-editor-container .monaco-editor .ced-chat-session-detail-4 { + display: inline-block; + max-width: 100%; + /* fallback for environments without container query units */ + max-width: 100cqi; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: bottom; + color: var(--vscode-input-placeholderForeground); +} + +.interactive-session .chat-editor-container .monaco-editor .chat-prompt-spinner { + transform-origin: 6px 6px; + font-size: var(--vscode-codiconFontSize-compact); +} + +.interactive-session .interactive-input-part .chat-editor-container .interactive-input-editor .monaco-editor, +.interactive-session .interactive-input-part .chat-editor-container .interactive-input-editor .monaco-editor .monaco-editor-background { + background-color: var(--vscode-input-background); +} + +.interactive-session .interactive-input-part.editing .chat-input-container .chat-editor-container .monaco-editor, +.interactive-session .interactive-input-part.editing .chat-input-container .chat-editor-container .monaco-editor .monaco-editor-background, +.interactive-session .interactive-request.editing .interactive-input-part .chat-input-container .chat-editor-container .monaco-editor, +.interactive-session .interactive-request.editing .interactive-input-part .chat-input-container .chat-editor-container .monaco-editor .monaco-editor-background { + background-color: transparent; +} + +.interactive-session .interactive-input-part.editing .chat-input-container, +.interactive-session .interactive-request.editing .interactive-input-part .chat-input-container { + background-color: var(--vscode-chat-requestBubbleBackground); +} + + +.interactive-session .chat-editor-container .monaco-editor .cursors-layer { + padding-left: 4px; +} + +.interactive-session .chat-input-toolbars { + display: flex; + align-items: center; + gap: 2px; + margin-top: 4px; +} + +.interactive-session .chat-secondary-toolbar { + display: flex; + align-items: center; + gap: 2px; + padding: 0 4px; +} + +.interactive-session .chat-secondary-toolbar:empty { + display: none; +} + +.interactive-session .chat-secondary-toolbar .chat-responsive-picker-container { + display: flex; + align-items: center; + flex: 1 1 0; + min-width: 0; + gap: 2px; +} + +.interactive-session .chat-secondary-toolbar .chat-secondary-generic-chips { + display: flex; + align-items: center; + flex-shrink: 0; + gap: 2px; +} + +.interactive-session .chat-secondary-toolbar .chat-secondary-generic-chips:empty { + display: none; +} + +.interactive-session .chat-secondary-toolbar .action-label, +.interactive-session .chat-secondary-toolbar .chat-context-usage-widget { + box-sizing: border-box; + height: var(--chat-input-control-height); + align-items: center; +} + +.interactive-session .chat-secondary-toolbar .chat-secondary-input-toolbar { + overflow: hidden; + min-width: 0px; + flex: 0 1 auto; + color: var(--vscode-icon-foreground); + + .monaco-action-bar .action-item .codicon { + color: var(--vscode-icon-foreground); + font-size: var(--vscode-codiconFontSize-compact); + width: auto; + height: auto; + } + + .chat-input-picker-item { + min-width: 0px; + overflow: visible; + flex-shrink: 0; + + .action-label { + min-width: 0px; + overflow: visible; + position: relative; + + .chat-input-picker-label { + flex-shrink: 0; + overflow: visible; + text-overflow: clip; + white-space: nowrap; + } + + .codicon + .chat-input-picker-label { + margin-left: 6px; + } + + .codicon { + font-size: var(--vscode-codiconFontSize-compact); + } + } + + .codicon { + flex-shrink: 0; + } + } +} + +.interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label { + box-sizing: border-box; + height: var(--chat-input-control-height); + padding: 0 var(--vscode-spacing-size60); + border-radius: var(--vscode-cornerRadius-small); + display: flex; + align-items: center; + color: var(--vscode-icon-foreground); +} + +.chat-input-picker-item .chat-input-picker-sandbox-icon { + flex-shrink: 0; + margin-left: var(--vscode-spacing-size60); +} + +.interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label.warning { + color: var(--vscode-problemsWarningIcon-foreground); +} + +.interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label.warning .codicon { + color: var(--vscode-problemsWarningIcon-foreground) !important; +} + +.interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label.info { + color: var(--vscode-problemsInfoIcon-foreground); +} + +.interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label.info .codicon { + color: var(--vscode-problemsInfoIcon-foreground) !important; +} + +.monaco-workbench .interactive-session .chat-secondary-toolbar .chat-input-picker-item .action-label .codicon-chevron-down { + font-size: var(--vscode-codiconFontSize-compact); + margin-left: 4px; + opacity: 0.75; +} + +.interactive-session .chat-input-toolbars :not(.responsive.chat-input-toolbar) .actions-container:first-child { + margin-right: auto; +} + +.interactive-session .chat-input-toolbars > .chat-input-toolbar .actions-container:first-child { + margin-right: 0; +} + +.interactive-session .chat-input-toolbars > .chat-input-toolbar { + order: 0; + overflow: hidden; + min-width: 0px; + flex: 1 1 0; + color: var(--vscode-icon-foreground); + + .monaco-action-bar .action-item .codicon { + color: var(--vscode-icon-foreground); + } + + .chat-input-picker-item { + min-width: 0px; + overflow: visible; + flex-shrink: 0; + + .action-label { + min-width: 0px; + overflow: visible; + position: relative; + + .chat-input-picker-label { + flex-shrink: 0; + overflow: visible; + text-overflow: clip; + white-space: nowrap; + } + + .model-picker-badge { + display: inline-flex; + align-items: center; + margin-left: 4px; + flex-shrink: 0; + font-size: var(--vscode-codiconFontSize-compact); + + .codicon.codicon-info { + color: var(--vscode-problemsInfoIcon-foreground) !important; + } + + .codicon.codicon-warning-compact { + color: var(--vscode-problemsWarningIcon-foreground) !important; + } + } + + .codicon + .chat-input-picker-label { + margin-left: var(--vscode-spacing-size60); + } + + .codicon { + font-size: var(--vscode-codiconFontSize-compact); + } + } + + .action-label.disabled { + .codicon { + color: var(--vscode-disabledForeground); + } + } + + .codicon { + flex-shrink: 0; + } + } +} + +.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label, +.interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label { + box-sizing: border-box; + height: var(--chat-input-control-height); + padding: 0 var(--vscode-spacing-size60); + border-radius: var(--vscode-cornerRadius-small); + display: flex; + align-items: center; + color: var(--vscode-icon-foreground); +} + +.interactive-session .chat-secondary-input-toolbar .chat-sessionPicker-item .action-label { + box-sizing: border-box; + height: var(--chat-input-control-height); + padding: 0 var(--vscode-spacing-size60); + border-radius: var(--vscode-cornerRadius-small); + display: flex; + align-items: center; + color: var(--vscode-icon-foreground); +} + +/* Keep hover background while picker dropdown is open */ +.interactive-session .chat-input-toolbar .action-label[aria-expanded="true"], +.interactive-session .chat-secondary-toolbar .action-label[aria-expanded="true"] { + background-color: var(--vscode-toolbar-hoverBackground); +} + +/* Compact picker controls match the 22px toolbar control tier. */ +.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.icon-only, +.interactive-session .chat-secondary-input-toolbar .chat-input-picker-item .action-label.icon-only, +.interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label.icon-only, +.interactive-session .chat-secondary-input-toolbar .chat-sessionPicker-item .action-label.icon-only { + width: var(--chat-input-control-height); + min-width: var(--chat-input-control-height); + height: var(--chat-input-control-height); + padding: 0; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + + .codicon { + width: var(--vscode-codiconFontSize-compact); + height: var(--vscode-codiconFontSize-compact); + line-height: var(--vscode-codiconFontSize-compact); + justify-content: center; + } +} + +/* Icon-only chips in the primary input toolbar (add context, configure tools, + MCP servers) all sit on the compact tier, so the row reads as one dense strip + of chrome instead of a 16px glyph towering over the 12px send / mic buttons + across the toolbar. The base action-bar rule gives these labels a fixed 16px + box with no inline centering, so a 12px glyph would otherwise sit flush left + inside it — center it explicitly. Scoped to labels that are *themselves* + codicons, so the text chips (mode / model pickers) keep their own type size. */ +.monaco-workbench .interactive-session .chat-input-toolbar .monaco-action-bar .action-item > .action-label.codicon[class*='codicon-'] { + justify-content: center; + font-size: var(--vscode-codiconFontSize-compact); +} + +.monaco-workbench .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label .codicon-chevron-down, +.monaco-workbench .interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label .codicon-chevron-down, +.monaco-workbench .interactive-session .chat-secondary-input-toolbar .chat-sessionPicker-item .action-label .codicon-chevron-down { + font-size: var(--vscode-codiconFontSize-compact); + margin-left: 4px; + opacity: 0.75; +} + +.interactive-session .chat-input-toolbars .monaco-action-bar .actions-container { + display: flex; + gap: var(--vscode-spacing-size40); +} + +.interactive-session .chat-secondary-toolbar .monaco-action-bar .actions-container { + display: flex; + gap: 2px; +} + +.interactive-session .chat-input-toolbars .chat-sessionPicker-container, +.interactive-session .chat-secondary-toolbar .chat-sessionPicker-container { + display: flex; + gap: 4px; + max-width: 100%; +} + +.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-icon-foreground) !important; +} + +.monaco-workbench .interactive-session .chat-input-toolbars .monaco-action-bar .action-item.disabled .codicon, +.monaco-workbench .interactive-session .chat-input-toolbars .action-label.disabled .codicon { + color: var(--vscode-disabledForeground) !important; +} + +.interactive-session :is(.chat-input-toolbars, .chat-secondary-toolbar) .monaco-action-bar .action-item .action-label .codicon { + font-size: var(--vscode-codiconFontSize-compact); + width: var(--vscode-codiconFontSize-compact); + height: var(--vscode-codiconFontSize-compact); + line-height: var(--vscode-codiconFontSize-compact); +} + +.interactive-session .chat-input-toolbars .codicon-debug-stop { + color: var(--vscode-icon-foreground) !important; +} + +.interactive-response .interactive-result-code-block .interactive-result-editor .monaco-editor, +.interactive-response .interactive-result-code-block .interactive-result-editor .monaco-editor .margin, +.interactive-response .interactive-result-code-block .interactive-result-editor .monaco-editor .monaco-editor-background { + background-color: var(--vscode-interactive-result-editor-background-color) !important; +} + +.interactive-item-compact .interactive-result-code-block { + margin: 0 0 8px 0; +} + +.interactive-item-container .interactive-result-code-block .monaco-toolbar .monaco-action-bar .actions-container { + padding-inline-start: unset; +} + + +@keyframes kf-chat-editing-atomic-edit { + 0% { + opacity: 0.8; + } + + 100% { + opacity: 0; + } +} + +.monaco-editor .chat-editing-atomic-edit { + z-index: 1; + opacity: 0.8; + background-color: var(--vscode-editor-background); + animation: 350ms kf-chat-editing-atomic-edit ease-out; +} + +.monaco-editor .chat-editing-pending-edit { + z-index: 1; + opacity: 0.6; + background-color: var(--vscode-editor-background); +} + +.monaco-editor .chat-editing-last-edit { + background-color: var(--vscode-editor-rangeHighlightBackground); + box-sizing: border-box; + border: var(--vscode-strokeThickness) solid var(--vscode-editor-rangeHighlightBorder); +} + +@property --chat-editing-last-edit-shift { + syntax: ''; + initial-value: 100%; + inherits: false; +} + +@keyframes kf-chat-editing-last-edit-shift { + 0% { + --chat-editing-last-edit-shift: 100%; + } + + 50% { + --chat-editing-last-edit-shift: 7%; + } + + 100% { + --chat-editing-last-edit-shift: 100%; + } +} + +.monaco-editor .chat-editing-last-edit-line { + --chat-editing-last-edit-shift: 100%; + background: linear-gradient(45deg, var(--vscode-editor-rangeHighlightBackground), var(--chat-editing-last-edit-shift), transparent); + animation: 2.3s kf-chat-editing-last-edit-shift ease-in-out infinite; + animation-delay: 330ms; +} + + +.chat-notification-widget .chat-info-codicon, +.chat-notification-widget .chat-error-codicon, +.chat-notification-widget .chat-warning-codicon { + display: flex; + align-items: start; + gap: 8px; +} + +.interactive-item-container .value .chat-notification-widget .rendered-markdown p { + margin: 0; +} + +.chat-used-context-list .codicon-warning { + color: var(--vscode-notificationsWarningIcon-foreground); + /* Have to override default styles which apply to all lists */ +} + +.chat-used-context-list .monaco-icon-label-container { + color: var(--vscode-interactive-session-foreground); +} + +.chat-attached-context .chat-attached-context-attachment .monaco-icon-name-container.warning, +.chat-attached-context .chat-attached-context-attachment .monaco-icon-suffix-container.warning, +.chat-used-context-list .monaco-icon-name-container.warning, +.chat-used-context-list .monaco-icon-suffix-container.warning { + color: var(--vscode-notificationsWarningIcon-foreground); +} + +.chat-attached-context .chat-attached-context-attachment.show-file-icons.warning, +.chat-attached-context .chat-attached-context-attachment.show-file-icons.partial-warning, +.chat-attached-context .chat-attached-context-attachment.show-file-icons.auto-image-warning { + border-color: var(--vscode-notificationsWarningIcon-foreground); +} + +/** + * Styles for the `reusable prompts` attachment widget. + */ +.chat-attached-context-attachment .prompt-type { + opacity: 0.7; + font-size: .9em; + margin-left: 0.5em; +} + +.chat-attached-context-attachment.warning { + color: var(--vscode-notificationsWarningIcon-foreground); +} + +.chat-attached-context-attachment.error { + color: var(--vscode-notificationsErrorIcon-foreground); +} + +.chat-attached-context-attachment .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix { + color: var(--vscode-peekViewTitleDescription-foreground); + opacity: 1; +} + +.chat-notification-widget .chat-warning-codicon .codicon-warning, +.chat-quota-error-widget .codicon-warning { + color: var(--vscode-notificationsWarningIcon-foreground) !important; + /* Have to override default styles which apply to all lists */ +} + +.chat-rate-limited-widget .codicon-info { + color: var(--vscode-notificationsInfoIcon-foreground) !important; + /* Have to override default styles which apply to all lists */ +} + +.chat-notification-widget .chat-error-codicon .codicon-error { + color: var(--vscode-errorForeground) !important; + /* Have to override default styles which apply to all lists */ +} + +.chat-notification-widget .chat-info-codicon .codicon-info { + color: var(--vscode-notificationsInfoIcon-foreground) !important; + /* Have to override default styles which apply to all lists */ +} + +.interactive-session .interactive-input-part { + margin: 0px 12px; + padding: 4px 0 4px 0px; + position: relative; +} + +/* The docked stack joins surfaces without gaps inside the regularly spaced + input-area surface stack. */ +.interactive-session .chat-input-stack { + display: flex; + flex-direction: column; +} + +.interactive-session:not(.chat-floating-persistent-content) .interactive-input-part:not(.chat-input-hidden) > .chat-input-persistent-content { + display: contents; +} + +/* Opted in via `IChatWidgetViewOptions.persistentContentHeight`: the content + floats above the input so the transcript scrolls underneath it. Its bottom + padding occupies the input part's top inset, leaving one shared spacing tier + before the first visible surface. */ +.interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-input-persistent-content { + position: absolute; + inset-inline: 0; + bottom: calc(100% - var(--vscode-spacing-size40)); + /* Match the input part's own horizontal padding. */ + padding-inline: inherit; + box-sizing: border-box; + /* Clicks fall through to the transcript; the pills opt back in. */ + pointer-events: none; + isolation: isolate; + z-index: 0; +} + +/* Separate floating controls from transcript content without masking the list, + so the treatment remains stable while content streams or scrolls. During the + pet's run cycle, the overlay paints the same fade beneath the pet. */ +.interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-input-persistent-content.chat-persistent-content-visible::before, +.interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-pet-overlay.chat-pet-run-layer::before { + content: ''; + position: absolute; + inset-inline: 0; + z-index: 0; + pointer-events: none; + background: linear-gradient( + to bottom, + transparent 0, + var(--vscode-chat-list-background, var(--vscode-editor-background)) var(--vscode-spacing-size160) + ); +} + +.interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-input-persistent-content.chat-persistent-content-visible::before { + top: calc(-1 * var(--vscode-spacing-size160)); + bottom: 0; +} + +.interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-pet-overlay.chat-pet-run-layer::before { + bottom: calc(100% - var(--vscode-spacing-size40)); + height: calc(var(--vscode-chat-persistent-content-height, 0px) + var(--vscode-spacing-size160)); +} + +.interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-pet-overlay.chat-pet-run-layer ~ .chat-input-persistent-content.chat-persistent-content-visible::before { + content: none; +} + +.interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-input-persistent-content > * { + position: relative; + z-index: 1; +} + +.hc-black .interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-input-persistent-content.chat-persistent-content-visible::before, +.hc-light .interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-input-persistent-content.chat-persistent-content-visible::before, +.hc-black .interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-pet-overlay.chat-pet-run-layer::before, +.hc-light .interactive-session.chat-floating-persistent-content .interactive-input-part > .chat-pet-overlay.chat-pet-run-layer::before { + background: var(--vscode-chat-list-background, var(--vscode-editor-background)); + border-top: var(--vscode-strokeThickness) solid var(--vscode-contrastBorder); + box-sizing: border-box; +} + +.interactive-session .interactive-input-part.chat-input-hidden > :not(.chat-input-persistent-content, .chat-tool-confirmation-carousel-container) { + display: none; +} + +.interactive-session .interactive-input-part.chat-input-hidden:not(:has(> .chat-input-persistent-content > :not(.hidden), > .chat-tool-confirmation-carousel-container:not(.hidden))) { + display: none; +} + +.interactive-session .interactive-input-part.compact { + margin: 0; + padding: 8px 0 0 0 +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment { + display: flex; + overflow: hidden; + font-size: var(--vscode-fontSize-label2); + padding: 0 4px 0 0; + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder, var(--vscode-input-background, transparent)); + border-radius: var(--vscode-cornerRadius-small); + height: 18px; + max-width: 100%; + width: fit-content; +} + +.interactive-session .interactive-list .chat-attached-context .chat-attached-context-attachment { + font-family: var(--vscode-chat-font-family, inherit); + font-size: var(--vscode-chat-font-size-body-xs); +} + +.action-item.chat-mcp { + min-width: 22px !important; + + .chat-mcp-state-indicator { + position: absolute; + bottom: 0; + left: 12px; + font-size: var(--vscode-codiconFontSize-compact) !important; + background: var(--vscode-input-background); + width: fit-content; + height: fit-content; + border-radius: var(--vscode-cornerRadius-circle); + pointer-events: none; + + &.chat-mcp-state-new { + color: var(--vscode-button-foreground); + } + + &.chat-mcp-state-error { + color: var(--vscode-problemsErrorIcon-foreground); + } + + &.chat-mcp-state-refreshing { + color: var(--vscode-button-foreground); + } + } +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button { + display: flex; + align-items: center; + margin-top: -2px; + padding-right: 2px; + padding-left: var(--vscode-spacing-size40); + height: calc(100% + 4px); + outline-offset: -4px; + font-size: var(--vscode-codiconFontSize-compact); +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button.codicon.codicon-add-compact { + font-size: var(--vscode-codiconFontSize-compact); +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button:hover { + cursor: pointer; + background: var(--vscode-toolbar-hoverBackground); +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment.implicit.disabled .monaco-button:hover { + cursor: pointer; + background: transparent; +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label-container { + display: flex; + + .monaco-icon-suffix-container { + overflow: hidden; + text-overflow: ellipsis; + } +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label-container .monaco-highlighted-label { + display: inline-flex; + align-items: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-decoration: inherit; +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label .monaco-button.codicon.codicon-close-compact, +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button.codicon.codicon-close-compact, +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label .monaco-button.codicon.codicon-add-compact, +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-button.codicon.codicon-add-compact { + color: var(--vscode-descriptionForeground); + cursor: pointer; +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .chat-attached-context-download-button { + display: none; +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label .codicon { + font-size: var(--vscode-codiconFontSize-compact); +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label .monaco-icon-label-iconpath.codicon { + padding-top: 2px; +} + +.interactive-session .chat-input-container .chat-attached-context { + display: contents; +} + +.interactive-session .chat-attached-context { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +.interactive-session .interactive-input-part.compact .chat-attached-context { + padding-bottom: 0px; + display: flex; + gap: 4px; + flex-wrap: wrap; +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment.implicit.disabled { + border-style: dashed; +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment.implicit.disabled:focus { + outline: none; + border-color: var(--vscode-focusBorder); +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment.implicit.disabled .monaco-icon-label .label-name { + font-style: italic; + opacity: 0.8; +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label { + gap: 4px; +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label::before { + height: auto; + padding: 0; + line-height: 100% !important; + align-self: center; + + background-size: contain; + background-position: center; + background-repeat: no-repeat; +} + +.monaco-workbench .interactive-session .chat-attached-context .chat-attached-context-attachment.show-file-icons .monaco-icon-label.file-icon::before { + mask-size: var(--vscode-codiconFontSize-compact); + mask-position: center; + -webkit-mask-size: var(--vscode-codiconFontSize-compact); + -webkit-mask-position: center; +} + +.interactive-session .chat-attached-context .chat-attached-context-attachment .monaco-icon-label.predefined-file-icon::before { + padding: 0 0 0 2px; + align-content: center; +} + +.interactive-session .interactive-item-container.interactive-request .chat-attached-context .chat-attached-context-attachment { + padding: 0 6px 0 4px; +} + +.interactive-session-followups { + display: flex; + flex-direction: column; + gap: 6px; + align-items: start; +} + +.interactive-session-followups .monaco-button { + text-align: left; + width: initial; +} + +.interactive-session-followups .monaco-button .codicon { + margin-left: 0; + margin-top: var(--vscode-spacing-size20); +} + +/* .interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups { + margin-bottom: 4px; +} */ + +.interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups .monaco-button { + display: block; + color: var(--vscode-textLink-foreground); + font-size: var(--vscode-fontSize-label1); + + /* clamp to max 3 lines */ + display: -webkit-box; + line-clamp: 3; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups code { + font-family: var(--monaco-monospace-font); + font-size: var(--vscode-fontSize-body2); +} + +.interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups .monaco-button .codicon { + font-size: var(--vscode-codiconFontSize-compact); +} + +.interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups .monaco-button .codicon-sparkle-compact { + float: left; +} + +.interactive-session-followups .monaco-button.interactive-followup-reply { + padding: 0px; + border: none; +} + +.interactive-item-container .monaco-toolbar .codicon { + /* Very aggressive list styles try to apply focus colors to every codicon in a list row. */ + color: var(--vscode-icon-foreground) !important; +} + +/* #region Quick Chat */ + +.quick-input-widget .interactive-session { + width: 100%; +} + +.quick-input-widget .interactive-session .interactive-input-part { + padding: 8px 6px 8px 6px; + margin: 0 var(--vscode-spacing-size40); +} + +.quick-input-widget .interactive-session .interactive-input-part .chat-input-toolbars .monaco-toolbar, +.quick-input-widget .interactive-session .interactive-input-part .chat-input-toolbars .actions-container { + height: initial; +} + +.quick-input-widget .interactive-session .interactive-input-part .chat-input-toolbars { + margin-bottom: var(--vscode-spacing-size20); + align-items: flex-end; +} + +.quick-input-widget .interactive-session .chat-input-container { + margin: 0; + padding: 0 4px 0 6px; +} + +.quick-input-widget .interactive-list { + border-bottom-right-radius: var(--vscode-cornerRadius-medium); + border-bottom-left-radius: var(--vscode-cornerRadius-medium); +} + +.quick-input-widget .interactive-response { + min-height: 86px; +} + +.quick-input-widget .interactive-session .disclaimer { + margin: 8px 12px; + color: var(--vscode-descriptionForeground); + font-size: var(--vscode-fontSize-label1); + + a { + color: var(--vscode-textLink-foreground); + } + + p { + margin: 0; + } +} + +/* #endregion */ + +.interactive-response-progress-tree .monaco-list-row:not(.selected) .monaco-tl-row:hover { + background-color: var(--vscode-list-hoverBackground); +} + +.interactive-response-progress-tree { + margin: 16px 0px; +} + +.interactive-response-progress-tree.focused { + border-color: var(--vscode-focusBorder, transparent); +} + +.chat-used-context-list .monaco-list { + border: none; + border-radius: var(--vscode-cornerRadius-small); + width: auto; +} + +.interactive-item-container .chat-resource-widget { + background-color: var(--vscode-chat-slashCommandBackground); + color: var(--vscode-chat-slashCommandForeground); +} + + +.interactive-item-container .chat-resource-widget, +.interactive-item-container .chat-agent-widget .monaco-button { + border-radius: var(--vscode-cornerRadius-small); + padding: var(--vscode-spacing-size20) var(--vscode-spacing-size40); +} + +.interactive-item-container .chat-agent-command { + background-color: var(--vscode-chat-slashCommandBackground); + color: var(--vscode-chat-slashCommandForeground); + display: inline-flex; + align-items: center; + margin-right: 0.5ch; + border-radius: var(--vscode-cornerRadius-small); + padding: 0 0 0 var(--vscode-spacing-size40); +} + +.interactive-item-container .chat-agent-command > .monaco-button { + display: flex; + align-self: stretch; + align-items: center; + cursor: pointer; + padding: 0 2px; + margin-left: 2px; + border-top-right-radius: var(--vscode-cornerRadius-small); + border-bottom-right-radius: var(--vscode-cornerRadius-small); +} + +.interactive-item-container .chat-agent-command > .monaco-button:hover { + background: var(--vscode-toolbar-hoverBackground); +} + +.interactive-item-container .chat-agent-widget .monaco-text-button { + display: inline; + border: none; +} + +/* Chat artifacts widget — collapsible list of session artifacts */ +.chat-artifacts-widget { + padding: var(--vscode-spacing-size40); + box-sizing: border-box; + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, transparent); + background-color: var(--vscode-editor-background); + border-bottom: none; + border-radius: var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) var(--chat-input-stack-radius-top, var(--vscode-cornerRadius-large)) 0 0; + display: flex; + flex-direction: column; + gap: 2px; + overflow: hidden; +} + +.chat-artifacts-widget .chat-artifacts-expand { + width: 100%; +} + +.chat-artifacts-widget .chat-artifacts-expand .monaco-button { + display: flex; + align-items: center; + gap: 4px; + cursor: pointer; + justify-content: space-between; + width: 100%; + background-color: transparent; + border-color: transparent; + color: var(--vscode-foreground); + padding: 0; + min-width: unset; +} + +.chat-artifacts-widget .chat-artifacts-expand .monaco-button:focus:not(:focus-visible) { + outline: none; +} + +.chat-artifacts-widget .chat-artifacts-expand .chat-artifacts-title-section { + padding-left: var(--vscode-spacing-size40); + display: flex; + align-items: center; + flex: 1; + font-size: var(--vscode-fontSize-label1); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 22px; +} + +.chat-artifacts-widget .chat-artifacts-expand .chat-artifacts-title-section .codicon { + font-size: var(--vscode-codiconFontSize); + line-height: 22px; + flex-shrink: 0; + margin-right: var(--vscode-spacing-size40); +} + +.chat-artifacts-widget .chat-artifacts-list { + width: 100%; + padding: 0; + box-sizing: border-box; +} + +.chat-artifacts-widget .chat-artifacts-list .monaco-list .monaco-list-row { + border-radius: var(--vscode-cornerRadius-small); +} + +.chat-artifacts-widget .chat-artifacts-list .monaco-list .monaco-list-row:hover { + background-color: var(--vscode-list-hoverBackground) !important; +} + +.chat-artifacts-widget .chat-artifacts-list-row { + display: flex; + align-items: center; + gap: 6px; + padding: 0 6px; + height: 100%; + cursor: pointer; +} + +.chat-artifacts-widget .chat-artifacts-list-icon { + font-size: var(--vscode-codiconFontSize-compact); + display: flex; + align-items: center; +} + +.chat-artifacts-widget .chat-artifacts-list-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: var(--vscode-fontSize-body1); + flex-shrink: 1; + min-width: 0; +} + +.chat-artifacts-widget .chat-artifacts-list-description { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: var(--vscode-fontSize-label1); + opacity: 0.7; + margin-left: 6px; + flex-shrink: 0; +} + +.chat-artifacts-widget .chat-artifacts-list-actions { + display: none; + margin-left: auto; + flex-shrink: 0; +} + +.chat-artifacts-widget .chat-artifacts-list-actions .monaco-action-bar .actions-container { + gap: 4px; +} + +.chat-artifacts-widget .chat-artifacts-list-row:hover .chat-artifacts-list-actions, +.chat-artifacts-widget .chat-artifacts-list-row.force-hover .chat-artifacts-list-actions { + display: flex; +} + +.chat-artifacts-widget .chat-artifacts-list-actions .action-item .action-label { + padding: 2px; + border-radius: var(--vscode-cornerRadius-xSmall); + cursor: pointer; +} + +.chat-artifacts-widget .chat-artifacts-list-actions .action-item .action-label:hover { + background-color: var(--vscode-toolbar-hoverBackground); +} + +.interactive-session .checkpoint-file-changes-summary { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; + border-radius: var(--vscode-cornerRadius-small); + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); + + .chat-view-changes-icon { + box-sizing: border-box; + width: 22px; + height: 22px; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; + float: right; + cursor: pointer; + } + + .chat-view-changes-icon:hover { + border-radius: var(--vscode-cornerRadius-small); + background-color: var(--vscode-toolbar-hoverBackground); + } + + .insertions-and-deletions { + display: flex; + margin-right: var(--vscode-spacing-size60); + font-size: var(--vscode-fontSize-label1); + } + + .checkpoint-file-changes-summary-header { + min-height: 22px; + padding: 0 var(--vscode-spacing-size40); + width: 100%; + display: flex; + align-items: center; + box-sizing: border-box; + justify-content: space-between; + } + + .checkpoint-file-changes-summary-header .monaco-button-mdlabel { + display: flex; + width: 100%; + text-align: left; + align-items: center; + } + + .checkpoint-file-changes-summary-header .chat-file-changes-label { + width: 100%; + float: left; + } + + .checkpoint-file-changes-summary-header .chat-file-changes-label .monaco-button { + width: 100%; + } + + .checkpoint-file-changes-summary-header .chat-file-changes-label .monaco-button .codicon { + font-size: var(--vscode-codiconFontSize); + } + + .chat-summary-list { + width: 100%; + max-width: 100%; + padding: 0px; + margin-bottom: 0px; + border-bottom: 0px; + border-left: 0px; + border-right: 0px; + box-sizing: border-box; + border-radius: 0px; + } + + .chat-summary-list .monaco-icon-label { + display: flex; + } + + .chat-summary-list .monaco-scrollable-element { + border-radius: var(--vscode-cornerRadius-small); + } + + .insertions { + color: var(--vscode-chat-linesAddedForeground); + font-weight: var(--vscode-fontWeight-semiBold); + padding-left: var(--vscode-spacing-size60); + padding-right: var(--vscode-spacing-size60); + } + + .deletions { + color: var(--vscode-chat-linesRemovedForeground); + font-weight: var(--vscode-fontWeight-semiBold); + } +} + +.interactive-session .checkpoint-file-changes-summary.checkpoint-file-changes-compact { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: stretch; + width: 100%; + border: none; + border-radius: 0; + + .checkpoint-file-changes-disclosure { + width: 100%; + interpolate-size: allow-keywords; + + &::details-content { + block-size: 0; + overflow: hidden; + opacity: 0; + transition: + block-size 180ms cubic-bezier(0.2, 0, 0, 1), + opacity 140ms cubic-bezier(0.2, 0, 0, 1), + content-visibility 180ms allow-discrete; + } + + &[open]::details-content { + block-size: auto; + opacity: 1; + } + } + + .chat-view-changes-icon { + flex: none; + width: 20px; + height: 20px; + padding: var(--vscode-spacing-size20); + border: none; + border-radius: var(--vscode-cornerRadius-small); + color: inherit; + background: transparent; + font-size: var(--vscode-codiconFontSize-compact); + cursor: pointer; + } + + .chat-view-changes-icon:hover { + background-color: var(--vscode-toolbar-hoverBackground); + } + + .chat-view-changes-icon:focus-visible, + .checkpoint-file-changes-summary-header:focus-visible { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: calc(-1 * var(--vscode-strokeThickness)); + } + + .insertions-and-deletions { + display: flex; + gap: var(--vscode-spacing-size40); + margin: 0 var(--vscode-spacing-size60); + font-size: var(--vscode-fontSize-body2); + font-weight: var(--vscode-fontWeight-regular); + /* Keep numeric changes aligned even when rows contain different digit counts. */ + font-variant-numeric: tabular-nums; + font-feature-settings: "tnum"; + + .insertions, + .deletions { + font-weight: var(--vscode-fontWeight-regular); + padding: var(--vscode-spacing-sizeNone); + } + } + + .checkpoint-file-changes-summary-header { + min-height: 20px; + max-width: 100%; + width: fit-content; + padding: 0; + display: flex; + gap: var(--vscode-spacing-size40); + align-items: center; + box-sizing: border-box; + justify-content: initial; + border-radius: var(--vscode-cornerRadius-small); + color: var(--vscode-descriptionForeground); + font-size: var(--vscode-chat-font-size-body-s); + font-weight: var(--vscode-fontWeight-regular); + line-height: 1.5em; + cursor: pointer; + list-style: none; + } + + .checkpoint-file-changes-summary-header::-webkit-details-marker { + display: none; + } + + .checkpoint-file-changes-summary-header:hover, + .checkpoint-file-changes-summary-header:focus-visible { + color: var(--vscode-foreground); + } + + .chat-file-changes-chevron { + flex: none; + font-size: var(--vscode-codiconFontSize-compact); + opacity: 0; + } + + .checkpoint-file-changes-summary-header:hover .chat-file-changes-chevron, + .checkpoint-file-changes-summary-header:focus-visible .chat-file-changes-chevron { + opacity: 1; + } + + .chat-file-changes-label { + width: auto; + float: none; + margin-right: var(--vscode-spacing-size40); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .chat-file-changes-counts { + display: flex; + flex: none; + gap: var(--vscode-spacing-sizeNone); + + .insertions, + .deletions { + font-weight: var(--vscode-fontWeight-regular); + padding: var(--vscode-spacing-sizeNone); + } + + .deletions { + padding-left: var(--vscode-spacing-size40); + } + } + + .chat-summary-list { + width: 100%; + max-width: 100%; + padding: var(--vscode-spacing-size40); + margin-top: var(--vscode-spacing-size40); + margin-bottom: var(--vscode-spacing-size80); + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); + box-sizing: border-box; + border-radius: var(--vscode-cornerRadius-small); + } + + .chat-summary-list .monaco-icon-label { + display: flex; + } + + .chat-summary-list .insertions-and-deletions > .insertions, + .chat-summary-list .insertions-and-deletions > .deletions { + flex: none; + text-align: right; + } + + .chat-summary-list .monaco-scrollable-element { + border-radius: var(--vscode-cornerRadius-small); + } + + .insertions { + color: var(--vscode-chat-linesAddedForeground); + } + + .deletions { + color: var(--vscode-chat-linesRemovedForeground); + } +} + +.monaco-reduce-motion .checkpoint-file-changes-disclosure::details-content, +.monaco-workbench.monaco-reduce-motion .checkpoint-file-changes-disclosure::details-content { + transition: none; +} + +@media (prefers-reduced-motion: reduce) { + .checkpoint-file-changes-disclosure::details-content { + transition: none; + } +} + +.interactive-session .checkpoint-file-changes-summary.chat-file-changes-collapsed .chat-summary-list, +.interactive-session .chat-used-context.chat-used-context-collapsed .chat-used-context-list { + display: none; +} + +/* Turn changes summary: reuses the compact checkpoint summary styling. The +/- counts + are themselves the "View All File Changes" button, so reset the native button chrome + and add the standard toolbar hover/focus affordances. */ +.interactive-session .chat-turn-pills-part .chat-file-changes-counts { + align-items: center; + padding: var(--vscode-spacing-sizeNone) var(--vscode-spacing-size20); + border: none; + border-radius: var(--vscode-cornerRadius-small); + color: inherit; + background: transparent; + font: inherit; + cursor: pointer; +} + +.interactive-session .chat-turn-pills-part .chat-file-changes-counts:hover { + background-color: var(--vscode-toolbar-hoverBackground); +} + +.interactive-session .chat-turn-pills-part .chat-file-changes-counts:focus-visible { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: calc(-1 * var(--vscode-strokeThickness)); +} + +/* The header already spaces its children with `gap`, so the label's own margin + needed in the standalone checkpoint summary is redundant here. */ +.interactive-session .chat-turn-pills-part .chat-file-changes-label { + margin-right: 0; + flex: 1 1 auto; + min-width: 0; +} + +/* Per-row action bar in the changed-files list (e.g. the "Preview" action). The + row becomes a flex row so the file label fills the remaining width, followed + by the actions and the right-aligned change counts. Scoped via the class the + renderer adds only when a row-action provider is supplied. */ +.interactive-session .chat-summary-list .monaco-list-row.chat-summary-list-row-with-actions, +.interactive-session .chat-summary-list-row-with-actions { + display: flex; + align-items: center; +} + +.interactive-session .chat-summary-list-row-with-actions > .monaco-icon-label { + flex: 1 1 auto; + min-width: 0; +} + +.interactive-session .chat-summary-list-row-with-actions > .chat-summary-list-actions { + flex: 0 0 auto; + padding-right: var(--vscode-spacing-size40); +} + +.interactive-session .chat-summary-list-row-with-actions > .insertions-and-deletions { + flex: 0 0 auto; +} + +.interactive-session .chat-summary-list-actions .action-label { + color: var(--vscode-textLink-foreground); + cursor: pointer; +} + +.interactive-session .chat-summary-list-actions .action-label:hover { + color: var(--vscode-textLink-activeForeground); +} + +.interactive-session .chat-used-context { + display: flex; + flex-direction: column; + gap: 2px; + line-height: 1.5em; +} + +.interactive-response-progress-tree, +.chat-notification-widget, +.chat-summary-list, +.chat-used-context-list, +.chat-quota-error-widget, +.chat-rate-limited-widget { + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); + border-radius: var(--vscode-cornerRadius-small); + margin-bottom: 8px; +} + +.interactive-response-progress-tree, +.interactive-session .chat-summary-list, +.interactive-session .chat-used-context-list { + padding: var(--vscode-spacing-size40); + + .monaco-icon-label { + padding: 0 var(--vscode-spacing-size40); + + &::before { + width: var(--vscode-codiconFontSize); + } + } +} + +.interactive-session .chat-editing-session-list { + + .monaco-icon-label { + padding: 0 var(--vscode-spacing-size20) 0 var(--vscode-spacing-size40); + } + + .monaco-icon-label.excluded { + color: var(--vscode-notificationsWarningIcon-foreground) + } +} + +.interactive-session .chat-editing-session-list.collapsed { + display: none; +} + +.interactive-session .chat-session-working-set .chat-summary-list { + width: 100%; + box-sizing: border-box; + border: none; + margin: 0; + padding: 0; +} + +.interactive-session .chat-session-working-set .monaco-icon-label { + display: flex; + min-width: 0; +} + +.interactive-session .chat-session-working-set .chat-summary-list.overflowing .monaco-icon-label { + padding-right: var(--vscode-spacing-size120); +} + +.interactive-session .chat-session-working-set .working-set-title .monaco-button .codicon { + font-size: var(--vscode-codiconFontSize-compact); +} + +.interactive-session .chat-session-working-set .insertions-and-deletions { + display: flex; + flex-shrink: 0; + gap: var(--vscode-spacing-size40); + margin-left: var(--vscode-spacing-size80); + font-size: var(--vscode-fontSize-label2); +} + +.interactive-session .chat-session-working-set .insertions-and-deletions > .insertions, +.interactive-session .chat-session-working-set .insertions-and-deletions > .deletions { + text-align: right; +} + +.interactive-session .chat-session-working-set .insertions { + color: var(--vscode-chat-linesAddedForeground); +} + +.interactive-session .chat-session-working-set .deletions { + color: var(--vscode-chat-linesRemovedForeground); +} + +.interactive-session .chat-summary-list .monaco-list .monaco-list-row { + border-radius: var(--vscode-cornerRadius-small); +} + +.interactive-session .chat-summary-list .monaco-list .monaco-list-row:hover { + background-color: var(--vscode-list-hoverBackground) !important; +} + +.interactive-session .chat-used-context-list .monaco-list .monaco-list-row { + border-radius: var(--vscode-cornerRadius-xSmall); +} + +.interactive-session .chat-file-changes-label { + user-select: none; +} + +.interactive-session .chat-used-context-label { + font-size: var(--vscode-chat-font-size-body-m); + font-family: var(--vscode-chat-font-family, inherit); + color: var(--vscode-descriptionForeground); + user-select: none; + + a { + color: var(--vscode-descriptionForeground); + } + + code { + font-size: var(--vscode-chat-font-size-body-xs); + } +} + +.interactive-session .chat-file-changes-label:hover, +.interactive-session .chat-used-context-label:hover { + opacity: unset; +} + +.interactive-session .chat-file-changes-label .monaco-button, +.interactive-session .chat-used-context-label .monaco-button { + width: fit-content; + border: none; + border-radius: var(--vscode-cornerRadius-small); + gap: 0; + text-align: initial; + justify-content: initial; +} + +.interactive-session .chat-used-context-label .monaco-button { + /* unset Button styles */ + display: inline-flex; + max-width: 100%; + min-width: 0; + overflow-wrap: anywhere; +} + +.interactive-session .chat-used-context-label .monaco-button-mdlabel { + min-width: 0; + white-space: normal; +} + +.interactive-session .chat-file-changes-label .monaco-button { + padding: 2px 2px 2px 2px; +} + +.interactive-session .chat-used-context-label .monaco-button { + padding: 2px 6px 2px 2px; + margin-left: -2px; + font-size: var(--vscode-chat-font-size-body-s); + line-height: unset; +} + +.interactive-session .chat-used-context.show-checkmarks .chat-used-context-label .monaco-button { + gap: 4px; + margin-left: 0; +} + +.interactive-session .chat-file-changes-label .monaco-button:hover { + background-color: var(--vscode-toolbar-hoverBackground); +} + +.interactive-session .chat-used-context:not(.chat-used-context-collapsed) .chat-used-context-label .monaco-button, +.interactive-session .chat-used-context-label .monaco-button:hover { + color: var(--vscode-foreground); +} + +.interactive-session .chat-file-changes-label .monaco-text-button:focus, +.interactive-session .chat-used-context-label .monaco-text-button:focus { + outline: none; +} + +.interactive-session .chat-file-changes-label .monaco-text-button:focus-visible, +.interactive-session .chat-used-context-label .monaco-text-button:focus-visible { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); +} + +.interactive-session .chat-file-changes-label .monaco-button .codicon, +.interactive-session .chat-used-context-label .monaco-button .codicon { + font-size: var(--vscode-codiconFontSize-compact); + color: var(--vscode-icon-foreground) !important; +} + +/* Hide the leading icon on collapsible parts by default; show-checkmarks restores it */ +.interactive-session .chat-used-context-label .monaco-icon-button > .codicon:first-child:not(.chat-collapsible-hover-chevron):not(.codicon-error-compact):not(.codicon-warning-compact) { + display: none; +} + +.interactive-session .chat-used-context.show-checkmarks .chat-used-context-label .monaco-icon-button > .codicon:first-child:not(.chat-collapsible-hover-chevron) { + display: inline-block; +} + +/* Hover chevron indicator for collapsible parts */ +.chat-used-context-label .chat-collapsible-hover-chevron.codicon { + font-size: var(--vscode-codiconFontSize-compact); + flex-shrink: 0; +} + +.chat-collapsible-hover-chevron { + font-size: var(--vscode-codiconFontSize-compact); + opacity: 0; + transform: rotate(0deg); + transform-origin: center; + transition: + opacity 100ms ease-in-out, + transform 180ms cubic-bezier(0.2, 0, 0, 1); + color: var(--vscode-descriptionForeground); +} + +.chat-collapsible-hover-chevron.expanded { + opacity: 1; + transform: rotate(90deg); +} + +.interactive-session .chat-used-context-label .monaco-button:hover .chat-collapsible-hover-chevron { + opacity: 1; +} + +.monaco-reduce-motion .chat-collapsible-hover-chevron, +.monaco-workbench.monaco-reduce-motion .chat-collapsible-hover-chevron { + transition: none; +} + +@media (prefers-reduced-motion: reduce) { + .chat-collapsible-hover-chevron { + transition: none; + } +} + +.interactive-item-container .progress-container > .chat-progress-action { + flex-shrink: 0; + white-space: nowrap; + color: var(--vscode-descriptionForeground); + font-size: var(--vscode-chat-font-size-body-s); +} + +.interactive-item-container .progress-container { + display: flex; + /* Keep the icon on the first line: a wrapped message must not drag it down + to the middle of the block. */ + align-items: flex-start; + gap: 4px; + margin: 0 0 var(--vscode-spacing-size160) 0; + font-size: var(--vscode-chat-font-size-body-m); + + /* Tool calls transition from a progress to a collapsible list part, which needs to have this top padding. + The working progress also can be replaced by a tool progress part. So align this padding so the text doesn't appear to shift. */ + padding-top: 2px; + + > .codicon[class*='codicon-'] { + font-size: var(--vscode-codiconFontSize-compact); + /* Makes the glyph box exactly one text line tall, so it stays optically + centred on the first line at any font size. */ + line-height: inherit; + + &::before { + font-size: var(--vscode-codiconFontSize-compact); + } + } + + > .codicon.codicon-check-compact { + display: none; + } + + .codicon { + /* Very aggressive list styles try to apply focus colors to every codicon in a list row. */ + color: var(--vscode-icon-foreground) !important; + /* Matching the margin on all .monaco-text-button .codicon */ + margin: 0 .2em; + + &.codicon-error-compact:not(.chat-tool-call-error *) { + color: var(--vscode-editorError-foreground) !important; + } + } + + .rendered-markdown.progress-step { + min-width: 0; + white-space: normal; + + &.chat-progress-with-origin { + min-width: 0; + overflow-wrap: anywhere; + + > p { + display: inline; + } + } + + .chat-progress-origin { + color: var(--vscode-descriptionForeground); + font-size: var(--vscode-fontSize-body2); + font-weight: var(--vscode-fontWeight-regular); + opacity: 0.7; + + &::before { + content: ' \2013 '; + } + + .rendered-markdown, + p { + display: inline; + } + } + + & > p { + color: var(--vscode-descriptionForeground); + font-size: var(--vscode-chat-font-size-body-s); + margin: 0; + /* Fixed-width digits so a streaming count (e.g. "84 lines") doesn't jitter as it changes. */ + font-variant-numeric: tabular-nums; + font-feature-settings: "tnum"; + + code { + font-size: var(--vscode-chat-font-size-body-xs); + } + } + + .chat-inline-anchor-widget { + display: inline; + } + } + + /* Ordinary shimmer rows use the text as their progress affordance. */ + &.shimmer-progress:where(:not(.chat-working-progress)) > .codicon { + display: none; + } + + /* shimmer animation for shimmer progress */ + &.shimmer-progress .rendered-markdown.progress-step:not(.chat-progress-partial-shimmer) > p, + &.shimmer-progress .rendered-markdown.progress-step.chat-progress-partial-shimmer .chat-progress-shimmer-text { + background: linear-gradient(90deg, + var(--vscode-descriptionForeground) 0%, + var(--vscode-descriptionForeground) 30%, + var(--vscode-chat-thinkingShimmer) 50%, + var(--vscode-descriptionForeground) 70%, + var(--vscode-descriptionForeground) 100%); + background-size: 400% 100%; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: chat-thinking-shimmer 2s steps(60, end) infinite; + will-change: background-position; + } + + &.shimmer-progress.chat-progress-shimmer-paused .rendered-markdown.progress-step:not(.chat-progress-partial-shimmer) > p, + &.shimmer-progress.chat-progress-shimmer-paused .rendered-markdown.progress-step.chat-progress-partial-shimmer .chat-progress-shimmer-text { + animation-play-state: paused; + } + + &.shimmer-progress.chat-progress-animation .rendered-markdown.progress-step:not(.chat-progress-partial-shimmer) > p, + &.shimmer-progress.chat-progress-animation .rendered-markdown.progress-step.chat-progress-partial-shimmer .chat-progress-shimmer-text { + animation-timing-function: linear; + animation-play-state: paused; + } +} + +.hc-black .interactive-item-container .progress-container .progress-step .chat-progress-origin, +.hc-light .interactive-item-container .progress-container .progress-step .chat-progress-origin { + opacity: 1; +} + +.interactive-item-container .progress-container > .chat-working-progress-icon-stable { + color: var(--vscode-chat-workingProgressStableIconForeground); + -webkit-text-fill-color: var(--vscode-chat-workingProgressStableIconForeground); +} + +.interactive-item-container .progress-container > .chat-working-progress-icon-insiders { + color: var(--vscode-chat-workingProgressInsidersIconForeground); + -webkit-text-fill-color: var(--vscode-chat-workingProgressInsidersIconForeground); +} + +.interactive-item-container .progress-container.chat-working-progress > .chat-progress-icon::before { + display: none; +} + +.interactive-item-container .progress-container.chat-working-progress > .chat-progress-icon { + display: inline-flex; + align-items: center; + flex-shrink: 0; + min-height: 1lh; +} + +/* Reduced motion: render the shimmer text as static, solid progress text. */ +.monaco-reduce-motion .interactive-item-container .progress-container.shimmer-progress .rendered-markdown.progress-step:not(.chat-progress-partial-shimmer) > p, +.monaco-reduce-motion .interactive-item-container .progress-container.shimmer-progress .rendered-markdown.progress-step.chat-progress-partial-shimmer .chat-progress-shimmer-text { + animation: none; + background: none; + -webkit-text-fill-color: currentColor; + color: var(--vscode-descriptionForeground); +} + +/* A persistent response indicator owns the only active shimmer in its response. */ +.interactive-item-container.chat-persistent-progress .progress-container.shimmer-progress:not(.chat-working-progress) .rendered-markdown.progress-step > p, +.interactive-item-container.chat-persistent-progress .progress-container.shimmer-progress:not(.chat-working-progress) .rendered-markdown.progress-step.chat-progress-partial-shimmer .chat-progress-shimmer-text, +.interactive-item-container.chat-persistent-progress .chat-confirmation-widget.shimmer-progress .chat-confirmation-widget-title-inner > .rendered-markdown > p { + animation: none; + background: none; + -webkit-text-fill-color: currentColor; + color: var(--vscode-descriptionForeground); + will-change: auto; +} + +.interactive-item-container.chat-persistent-progress .codicon-modifier-spin:not(.chat-working-progress-icon-stable):not(.chat-working-progress-icon-insiders):not(.chat-subagent-pill-widget *):not(.chat-terminal-progress-row *):not(.chat-terminal-thinking-collapsible *) { + animation: none; +} + +.show-checkmarks .progress-container > .codicon.codicon-check-compact, +.progress-container.show-checkmarks > .codicon.codicon-check-compact { + display: inline-flex; + margin-left: 4px; +} + +.interactive-item-container .chat-command-button { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 16px; +} + +.interactive-item-container .chat-notification-widget { + display: flex; + align-items: center; + flex-direction: row; + padding: 8px 12px; + gap: 6px; +} + +.interactive-item-container .chat-confirmation-widget .interactive-result-code-block, +.interactive-item-container .chat-confirmation-widget .chat-attached-context { + margin-bottom: 8px; +} + +.interactive-item-container .chat-command-button .monaco-button .codicon { + margin-left: 0; + margin-top: var(--vscode-spacing-size20); +} + +.chat-code-citation-label { + opacity: 0.7; + white-space: pre-wrap; +} + +.chat-code-citation-button-container { + display: inline; +} + +.chat-code-citation-button-container .monaco-button { + display: inline; + border: none; + padding: 0; + color: var(--vscode-textLink-foreground); +} + +/* Element hover (DevTools-style) */ +.chat-element-hover { + max-width: 400px; + min-width: 250px; +} + +.monaco-hover.workbench-hover.chat-element-data-hover .hover-contents.html-hover-contents { + padding: 0; +} + +.monaco-hover.workbench-hover.chat-element-data-hover .chat-element-hover-scrollable { + width: 100%; +} + +.chat-element-hover.chat-attached-context-hover { + padding: 6px 0 6px 6px; +} + +.chat-element-hover-content { + max-height: 500px; + box-sizing: border-box; + padding-right: 10px; + padding-bottom: var(--vscode-spacing-size160); +} + +.chat-element-hover .chat-element-hover-section { + padding: 4px 6px; +} + +.chat-element-hover .chat-element-hover-section + .chat-element-hover-section { + border-top: var(--vscode-strokeThickness) solid var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.2)); +} + +.chat-element-hover .chat-element-hover-screenshot .chat-attached-context-hover { + width: fit-content; + max-width: min(100%, 240px); + margin: 0 auto; + padding: 0; +} + +.chat-element-hover .chat-element-hover-screenshot .chat-attached-context-image-container { + width: auto; + padding: 0; +} + +.chat-element-hover .chat-element-hover-screenshot .chat-attached-context-image { + width: auto; + height: auto; + max-height: 160px; + min-width: 0; + min-height: 0; +} + +.chat-element-hover .chat-element-hover-header { + font-size: var(--vscode-fontSize-label2); + font-weight: var(--vscode-fontWeight-semiBold); + text-transform: uppercase; + color: var(--vscode-descriptionForeground); + letter-spacing: 0.5px; + margin-bottom: 4px; +} + +.chat-element-hover .chat-element-hover-code { + margin: 0; + padding: 4px 6px; + background: var(--vscode-textCodeBlock-background); + border-radius: var(--vscode-cornerRadius-medium); + font-family: var(--monaco-monospace-font); + font-size: var(--vscode-fontSize-label1); + line-height: 1.5; + white-space: pre; + overflow: hidden; + color: var(--vscode-editor-foreground); +} + +.chat-element-hover .chat-element-hover-code code { + font-family: inherit; + font-size: inherit; + background: transparent; + padding: 0; + border-radius: 0; + display: block; +} + +.chat-element-hover .chat-element-hover-table { + display: grid; + grid-template-columns: auto 1fr; + gap: 2px 8px; +} + +.chat-element-hover .chat-element-hover-row { + display: contents; +} + +.chat-element-hover .chat-element-hover-label { + font-family: var(--monaco-monospace-font); + font-size: var(--vscode-fontSize-label1); + color: var(--vscode-debugTokenExpression-name); + white-space: nowrap; +} + +.chat-element-hover .chat-element-hover-value { + font-family: var(--monaco-monospace-font); + font-size: var(--vscode-fontSize-label1); + color: var(--vscode-editor-foreground); + word-break: break-all; + display: flex; + align-items: center; + gap: 4px; +} + +.chat-element-hover .chat-element-hover-color-swatch { + display: inline-block; + width: 12px; + height: 12px; + border: var(--vscode-strokeThickness) solid var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.4)); + border-radius: var(--vscode-cornerRadius-xSmall); + flex-shrink: 0; +} + +.chat-element-hover .chat-element-hover-text { + font-family: var(--monaco-monospace-font); + font-size: var(--vscode-fontSize-label1); + color: var(--vscode-editor-foreground); + white-space: pre-wrap; + word-break: break-word; +} + +.chat-element-hover .chat-element-hover-show-more { + background: none; + border: none; + padding: 0; + margin-top: 6px; + color: var(--vscode-textLink-foreground); + cursor: pointer; + font-size: var(--vscode-fontSize-label1); + text-decoration: none; +} + +.chat-element-hover .chat-element-hover-show-more:hover, +.chat-element-hover .chat-element-hover-show-more:focus-visible { + color: var(--vscode-textLink-activeForeground); +} + + +.chat-attached-context-attachment .chat-attached-context-pill { + font-size: var(--vscode-fontSize-label1); + display: inline-flex; + align-items: center; + padding: 2px 0 2px 0px; + border-radius: var(--vscode-cornerRadius-xSmall); + margin-right: var(--vscode-spacing-size20); + user-select: none; + outline: none; + border: none; + + .codicon.codicon-file-media-compact, + .codicon.codicon-warning, + .codicon.codicon-warning-compact { + font-size: var(--vscode-codiconFontSize-compact); + margin-right: 2px; + } +} + +.chat-attached-context-attachment .attachment-additional-info { + opacity: 0.7; + font-size: .9em; + padding-left: 4px; +} + +.chat-attached-context-attachment .chat-attached-context-pill-image { + width: 13px; + height: 13px; + border-radius: var(--vscode-cornerRadius-xSmall); + object-fit: cover; + margin-right: var(--vscode-spacing-size40); +} + +.chat-attached-context-attachment .chat-attached-context-custom-text { + vertical-align: middle; + user-select: none; + outline: none; + border: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + display: inline-block; +} + +.chat-attached-context-attachment .chat-attached-context-image-status { + color: var(--vscode-descriptionForeground); + white-space: normal; + overflow-wrap: anywhere; +} + +.chat-attached-context-attachment.image-load-error .chat-attached-context-image-status { + color: var(--vscode-errorForeground); +} + +.chat-attached-context-attachment.show-file-icons.warning .chat-attached-context-custom-text { + color: var(--vscode-notificationsWarningIcon-foreground); + text-decoration: line-through; +} + +.chat-attached-context-attachment.show-file-icons.partial-warning .chat-attached-context-custom-text { + color: var(--vscode-notificationsWarningIcon-foreground); +} + +.chat-collapsible-io-resource-group { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.chat-collapsible-io-resource-items .chat-attached-context { + gap: 8px; + padding-bottom: 0; +} + +.chat-collapsible-io-resource-items .chat-attached-context-attachment.image-attachment { + box-sizing: border-box; + width: 88px; + height: 88px; + border-radius: var(--vscode-cornerRadius-large); + padding: 0; + background-color: var(--vscode-input-background); + border-color: var(--vscode-chat-requestBorder, var(--vscode-input-border, transparent)); + overflow: hidden; + justify-content: center; +} + +.chat-collapsible-io-resource-items .chat-attached-context-attachment.image-attachment .chat-attached-context-pill { + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} + +.chat-collapsible-io-resource-items .chat-attached-context-attachment.image-attachment .chat-attached-context-pill-image { + width: 100%; + height: 100%; + border-radius: calc(var(--vscode-cornerRadius-large) - var(--vscode-strokeThickness)); + margin: 0; + object-fit: cover; +} + +.chat-collapsible-io-resource-items .chat-attached-context-attachment.image-attachment .chat-attached-context-custom-text { + display: none; +} + +.chat-collapsible-io-resource-items .chat-attached-context-attachment.image-attachment .chat-attached-context-download-button { + display: none !important; +} + +.chat-collapsible-io-resource-actions { + align-self: center; +} + +.chat-generated-image-result { + --chat-generated-image-max-height: min(60vh, 400px); + margin: var(--vscode-spacing-size80) 0 var(--vscode-spacing-size40); + + .chat-collapsible-io-resource-group { + width: fit-content; + max-width: 100%; + gap: var(--vscode-spacing-size80); + } + + .chat-collapsible-io-resource-actions { + flex-shrink: 0; + } + + .chat-collapsible-io-resource-items, + .chat-attached-context { + min-width: 0; + max-width: 512px; + } + + .chat-collapsible-io-resource-items .chat-attached-context-attachment.image-attachment { + width: fit-content; + height: auto; + background: transparent; + + &[aria-busy="true"]:not(:focus-visible), + &.image-load-error:not(:focus-visible) { + border-color: transparent; + } + } + + .chat-collapsible-io-resource-items .chat-attached-context-attachment.image-attachment .chat-attached-context-pill { + min-width: 0; + width: auto; + height: auto; + } + + .chat-collapsible-io-resource-items .chat-attached-context-attachment.image-attachment .chat-attached-context-pill-image { + display: block; + width: auto; + max-width: 100%; + height: auto; + max-height: var(--chat-generated-image-max-height); + object-fit: contain; + } + + &.multiple .chat-attached-context { + display: grid; + grid-template-columns: repeat(2, minmax(0, auto)); + } + + &.multiple .chat-collapsible-io-resource-items .chat-attached-context-attachment.image-attachment { + max-width: min(100%, 252px); + } +} + +.interactive-session .chat-scroll-down { + display: none; + position: absolute; + /* Clear any content floating above the input. */ + bottom: calc(7px + var(--vscode-chat-persistent-content-height, 0px)); + right: 12px; + border-radius: var(--vscode-cornerRadius-circle); + width: var(--vscode-spacing-size280); + height: var(--vscode-spacing-size280); + + .codicon { + margin: 0; + } + + .codicon::before { + display: inline-block; + transform: translateY(1px); + } +} + +.interactive-session .chat-scroll-down:hover, +.interactive-session .chat-scroll-down:focus { + background-color: var(--vscode-chat-list-background, var(--vscode-button-secondaryBackground)); + background-image: linear-gradient(var(--vscode-button-secondaryHoverBackground), var(--vscode-button-secondaryHoverBackground)); +} + +.chat-quota-error-widget, +.chat-rate-limited-widget { + padding: 8px 12px; + display: flex; + gap: 6px; + + .monaco-button { + width: fit-content; + } + + .chat-quota-error-button, + .chat-rate-limited-button { + margin-top: 6px; + margin-bottom: 2px; + } + + .chat-quota-error-message, + .chat-rate-limited-message { + .rendered-markdown p { + margin: 0px; + } + } +} + +.hideSuggestTextIcons .suggest-widget .monaco-list .monaco-list-row .suggest-icon.codicon-symbol-text::before { + display: none; +} + +.interactive-session:not(.chat-widget > .interactive-session) { + + .interactive-item-container { + padding: var(--vscode-spacing-size60) var(--vscode-spacing-size160); + } + + .interactive-item-container.interactive-request { + align-items: flex-end; + + } + + .interactive-item-container.interactive-request:not(.editing):hover .request-hover { + opacity: 1 !important; + } + + .interactive-item-container.interactive-request.confirmation-message { + align-items: flex-start; + + .checkpoint-container { + display: none; + } + } + + .interactive-item-container.interactive-request .value { + display: flex !important; + flex-direction: column !important; + align-items: flex-end !important; + } + + .interactive-item-container.interactive-request .value .rendered-markdown { + background-color: var(--vscode-chat-requestBubbleBackground); + border-radius: var(--vscode-cornerRadius-medium); + padding: 8px 12px; + max-width: 90%; + margin-left: auto; + width: fit-content; + margin-bottom: var(--vscode-spacing-size60); + position: relative; + } + + .chat-request-disclosure { + width: 100%; + } + + .chat-request-disclosure > summary { + width: fit-content; + max-width: 100%; + margin-left: auto; + margin-bottom: var(--vscode-spacing-size60); + padding: var(--vscode-spacing-size40) var(--vscode-spacing-size80); + border-radius: var(--vscode-cornerRadius-small); + border: var(--vscode-strokeThickness) solid var(--vscode-contrastBorder, transparent); + color: var(--vscode-descriptionForeground); + cursor: pointer; + } + + .chat-request-disclosure > summary:hover { + background-color: var(--vscode-toolbar-hoverBackground); + } + + .chat-request-disclosure > summary:focus-visible { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: -1px; + } + + .monaco-tree-sticky-row .interactive-item-container.interactive-request .value .rendered-markdown .chat-request-text, + .monaco-tree-sticky-row .interactive-item-container.interactive-request .value > .chat-markdown-part.rendered-markdown > p:first-child { + /* Clamp request text to 2 lines — only in sticky scroll */ + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .monaco-tree-sticky-row .interactive-item-container.interactive-request .value > .chat-markdown-part.rendered-markdown > p:first-child ~ * { + display: none; + } + + .monaco-tree-sticky-row .interactive-item-container.interactive-request .value > .chat-markdown-part.rendered-markdown > p:first-child { + margin-block-end: 0; + } + + .monaco-tree-sticky-row .interactive-item-container.interactive-request .value > .chat-markdown-part.rendered-markdown.chat-request-has-more > p:first-child::after { + content: '\2026'; + } + + .monaco-tree-sticky-row .interactive-item-container.interactive-request { + padding-block: var(--vscode-spacing-size80) 0; + } + + .monaco-tree-sticky-row .interactive-item-container.interactive-request .value .rendered-markdown { + margin-bottom: 0; + } + + .monaco-tree-sticky-row.source-node-partially-visible .interactive-item-container.interactive-request .value .rendered-markdown { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + .monaco-tree-sticky-row .interactive-item-container.interactive-request .value .rendered-markdown .chat-request-text.sticky-editing { + font-style: italic; + } + + .interactive-item-container.interactive-request .value .rendered-markdown { + margin-left: auto; + } + + .interactive-item-container.interactive-request .value .rendered-markdown.clickable:hover, + .interactive-item-container.interactive-request.request-bubble-hovered .value .rendered-markdown.clickable { + cursor: pointer; + background-color: var(--vscode-chat-requestBubbleHoverBackground); + } + + .hc-black .interactive-item-container.interactive-request .value .rendered-markdown, + .hc-light .interactive-item-container.interactive-request .value .rendered-markdown { + border: var(--vscode-strokeThickness) dotted var(--vscode-focusBorder); + } + + .interactive-item-container.interactive-request .value .rendered-markdown > :first-child { + margin-top: 0px; + } + + .interactive-item-container.interactive-request .value .rendered-markdown > :last-child { + margin-bottom: 0px; + } + + .interactive-item-container.interactive-request .value > .rendered-markdown p { + width: fit-content; + } + + .interactive-item-container.interactive-request .chat-request-timestamp { + color: var(--vscode-descriptionForeground); + font-size: var(--vscode-fontSize-label3); + line-height: var(--vscode-fontSize-label3); + opacity: 0.7; + transition: opacity 0.1s ease-in-out; + } + + .interactive-item-container.interactive-request .chat-request-timestamp-container { + display: flex; + justify-content: flex-end; + } + + .interactive-item-container.interactive-request:not(.group-hovered):not(.editing):not(.editing-input) .chat-request-timestamp { + opacity: 0; + transition: opacity 0.1s ease-in-out; + } + + .interactive-item-container.interactive-request:not(.group-hovered) .chat-request-timestamp:focus { + opacity: 0.7; + transition: opacity 0.1s ease-in-out; + } + + .interactive-item-container.interactive-request .chat-attached-context { + max-width: 100%; + width: fit-content; + justify-content: flex-end; + margin-left: auto; + padding-bottom: var(--vscode-spacing-size60); + } + + .interactive-item-container.interactive-request .value > .chat-request-attachment-cards { + width: fit-content; + flex: 0 0 auto; + max-width: 90%; + margin-left: auto; + margin-bottom: 6px; + padding-bottom: 0; + background: transparent; + border: 0; + justify-content: flex-end; + gap: 8px; + } + + .interactive-item-container.interactive-request .value > .chat-request-image-attachments, + .interactive-item-container.interactive-request .value > .chat-request-file-attachments, + .interactive-item-container.interactive-request .value > .rendered-markdown { + flex: 0 0 auto; + } + + .interactive-item-container.interactive-request .value > .chat-request-file-attachments { + flex-direction: column !important; + align-items: flex-end !important; + flex-wrap: nowrap !important; + gap: 6px; + } + + .interactive-item-container.interactive-request .value .chat-request-file-attachments .chat-attached-context-attachment { + position: relative; + margin-left: 24px; + overflow: visible; + } + + .interactive-item-container.interactive-request .value .chat-request-file-attachments .chat-attached-context-attachment::before { + content: ''; + position: absolute; + left: -24px; + top: 0; + bottom: 0; + width: 24px; + } + + .interactive-item-container.interactive-request .value .chat-request-file-attachments .chat-attached-context-attachment .chat-attached-context-download-button { + display: flex; + visibility: hidden; + opacity: 0; + position: absolute; + left: -22px; + top: 50%; + transform: translateY(-50%); + width: 18px; + height: 18px; + min-width: 18px; + margin: 0; + padding: 0; + align-items: center; + justify-content: center; + background: transparent; + color: var(--vscode-descriptionForeground); + border-radius: var(--vscode-cornerRadius-small); + z-index: 1; + transition: opacity 80ms ease-out; + } + + .interactive-item-container.interactive-request .value .chat-request-file-attachments .chat-attached-context-attachment:hover .chat-attached-context-download-button, + .interactive-item-container.interactive-request .value .chat-request-file-attachments .chat-attached-context-attachment:focus-within .chat-attached-context-download-button { + visibility: visible; + opacity: 1; + } + + .interactive-item-container.interactive-request .value .chat-request-file-attachments .chat-attached-context-attachment .chat-attached-context-download-button:hover { + background-color: var(--vscode-toolbar-hoverBackground); + } + + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment { + box-sizing: border-box; + width: 88px; + height: 88px; + border-radius: var(--vscode-cornerRadius-large); + padding: 0; + background-color: var(--vscode-input-background); + border-color: var(--vscode-chat-requestBorder, var(--vscode-input-border, transparent)); + overflow: hidden; + justify-content: center; + } + + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment.warning, + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment.partial-warning, + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment.auto-image-warning { + border-color: var(--vscode-notificationsWarningIcon-foreground); + } + + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment .chat-attached-context-pill { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + } + + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment.warning .chat-attached-context-pill { + justify-content: center; + } + + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment.warning .chat-attached-context-pill .codicon-warning { + margin: 0; + font-size: var(--vscode-codiconFontSize); + } + + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment .chat-attached-context-pill-image { + width: 100%; + height: 100%; + border-radius: calc(var(--vscode-cornerRadius-large) - var(--vscode-strokeThickness)); + margin: 0; + object-fit: cover; + } + + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment .chat-attached-context-custom-text { + display: none; + } + + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment .chat-attached-context-download-button { + display: flex !important; + visibility: hidden; + opacity: 0; + position: absolute; + right: 6px; + top: 6px; + width: 28px !important; + height: 28px !important; + min-width: 28px !important; + margin: 0 !important; + padding: 0 !important; + border-radius: var(--vscode-cornerRadius-circle); + background-color: var(--vscode-input-background); + color: var(--vscode-foreground); + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, var(--vscode-contrastBorder, transparent)); + box-shadow: 0 1px 4px var(--vscode-widget-shadow); + align-items: center; + justify-content: center; + transition: opacity 80ms ease-out; + } + + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment .chat-attached-context-download-button .codicon { + color: var(--vscode-foreground) !important; + font-size: var(--vscode-codiconFontSize); + margin: 0 !important; + } + + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment:hover .chat-attached-context-download-button, + .interactive-item-container.interactive-request .value .chat-request-attachment-cards .chat-attached-context-attachment.image-attachment:focus-within .chat-attached-context-download-button { + visibility: visible; + opacity: 1; + } + + .interactive-request .header.header-disabled, + .request-hover.has-no-actions, + .request-hover.hidden, + .request-hover.checkpoints-enabled.has-no-actions, + .checkpoint-container.hidden, + .checkpoint-container.has-no-actions, + .checkpoint-restore-container.hidden { + display: none; + } + + .interactive-request .header.partially-disabled .avatar-container, + .interactive-request .header.partially-disabled .username { + display: none; + } + + .interactive-request .header.partially-disabled .detail-container { + margin-left: 0px; + } + + .interactive-item-container .header .detail .codicon-check { + margin-right: var(--vscode-spacing-size80); + vertical-align: middle; + font-size: var(--vscode-codiconFontSize-compact); + display: none; + } + + .interactive-item-container.show-checkmarks .header.partially-disabled .detail { + margin-left: 4px; + + .codicon-check { + display: inline; + } + } + + /* System-initiated requests render as compact progress-style messages, not bubbles */ + .interactive-item-container.interactive-request.system-initiated-request { + align-items: flex-start; + } + + .interactive-item-container.interactive-request.system-initiated-request .value .rendered-markdown { + background-color: transparent; + border-radius: 0; + padding: 0; + max-width: 100%; + margin-left: 0; + width: auto; + } + + + .request-hover { + position: absolute; + overflow: hidden; + z-index: 100; + background-color: var(--vscode-interactive-result-editor-background-color, var(--vscode-editor-background)); + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder); + top: -13px; + right: 20px; + border-radius: var(--vscode-cornerRadius-large); + height: 26px; + } + + .request-hover.expanded:not(.checkpoints-enabled) { + width: 50px; + } + + .request-hover.checkpoints-enabled { + top: 15px; + } + + .request-hover.editing { + opacity: 1 !important; + } + + .request-hover:not(.expanded) .actions-container { + height: 22px; + } + + .request-hover.expanded .actions-container { + padding: 0 var(--vscode-spacing-size40); + } + + .request-hover:not(.expanded) .actions-container { + .action-label { + box-sizing: border-box; + width: 22px; + height: 22px; + margin: 4px 2px 0; + padding: 0; + align-items: center; + justify-content: center; + } + } + + .request-hover:focus-within { + opacity: 1 !important; + } + + + .checkpoint-container, + .checkpoint-restore-container { + display: flex; + width: 100%; + position: relative; + align-items: center; + gap: 4px; + margin-top: 0; + margin-bottom: 8px; + + .checkpoint-line-left, + .checkpoint-line-right { + flex: 1; + height: var(--vscode-strokeThickness); + background-color: var(--vscode-chat-requestBorder, var(--vscode-input-background)); + } + + .checkpoint-line-left { + mask-image: linear-gradient(to right, transparent, black); + -webkit-mask-image: linear-gradient(to right, transparent, black); + } + + .checkpoint-line-right { + mask-image: linear-gradient(to left, transparent, black); + -webkit-mask-image: linear-gradient(to left, transparent, black); + } + + .monaco-toolbar { + height: fit-content; + width: fit-content; + user-select: none; + flex-shrink: 0; + gap: 4px; + } + + .monaco-toolbar .action-label { + box-sizing: border-box; + width: fit-content; + min-width: 22px; + height: 22px; + font-size: var(--vscode-fontSize-label1); + line-height: 18px; + color: var(--vscode-descriptionForeground); + border: var(--vscode-strokeThickness) solid transparent; + background-color: transparent; + padding: 0 var(--vscode-spacing-size60); + margin-right: var(--vscode-spacing-size60); + } + + .monaco-toolbar .action-label.codicon, + .monaco-toolbar .action-label .codicon { + font-size: var(--vscode-codiconFontSize-compact); + } + + .monaco-toolbar .action-label.chat-fork-action-label { + padding: 0 var(--vscode-spacing-size60); + + .chat-fork-action-icon { + justify-content: center; + } + } + + .monaco-toolbar .actions-container > .action-item:last-child .action-label { + margin-right: 0; + } + + .monaco-toolbar .actions-container > .action-item.chat-fork-action-item:not(:first-child) { + display: flex; + align-items: center; + position: relative; + /* Reserves the gutter the absolutely positioned separator is drawn into. */ + margin-left: var(--vscode-spacing-size80); + } + + .monaco-toolbar .actions-container > .action-item.chat-fork-action-item:not(:first-child)::before { + content: '\00B7'; + position: absolute; + right: 100%; + top: 0; + bottom: 0; + display: flex; + align-items: center; + margin-right: var(--vscode-spacing-size40); + font-size: var(--vscode-fontSize-label1); + line-height: 18px; + color: var(--vscode-descriptionForeground); + pointer-events: none; + } + + .monaco-toolbar .action-label:hover { + color: var(--vscode-foreground); + border-color: var(--vscode-chat-requestBorder, var(--vscode-input-background)); + background-color: var(--vscode-sideBar-background); + } + + .monaco-toolbar .action-item.chat-restore-checkpoint-item { + display: flex; + align-items: stretch; + margin-left: var(--vscode-spacing-size60); + } + + .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming { + border: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder, var(--vscode-input-background)); + background-color: var(--vscode-sideBar-background); + border-radius: var(--vscode-cornerRadius-medium); + overflow: hidden; + margin-right: var(--vscode-spacing-size60); + } + + .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming .action-label:first-child, + .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming .action-label.chat-restore-checkpoint-cancel { + color: var(--vscode-foreground); + border: none; + border-radius: 0; + margin: 0; + background-color: transparent; + } + + .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming .action-label:first-child { + align-items: center; + padding: 0 var(--vscode-spacing-size100); + background: linear-gradient(90deg, + var(--vscode-foreground) 0%, + var(--vscode-foreground) 30%, + var(--vscode-focusBorder) 50%, + var(--vscode-foreground) 70%, + var(--vscode-foreground) 100%); + background-size: 400% 100%; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming .action-label:first-child .codicon { + margin-right: 4px; + } + + .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming .action-label.chat-restore-checkpoint-cancel .codicon { + margin-right: 0; + } + + .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming .action-label.chat-restore-checkpoint-cancel { + border-left: var(--vscode-strokeThickness) solid var(--vscode-chat-requestBorder, var(--vscode-input-background)); + } + + .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming .action-label:first-child:hover { + box-shadow: inset 0 0 0 100px var(--vscode-toolbar-hoverBackground); + } + + .monaco-toolbar .action-item.chat-restore-checkpoint-item.confirming .action-label.chat-restore-checkpoint-cancel:hover { + background-color: var(--vscode-toolbar-hoverBackground); + } + + .monaco-toolbar .action-label.chat-restore-checkpoint-cancel { + display: flex; + align-items: center; + justify-content: center; + align-self: stretch; + margin-right: 0; + margin-left: 0; + padding: 0 var(--vscode-spacing-size60); + } + + .monaco-toolbar .action-label.chat-restore-checkpoint-cancel.hidden { + display: none; + } + } + + .checkpoint-container { + opacity: 0; + transition: opacity 0.1s ease-in-out; + } + + .checkpoint-restore-container { + margin-top: 10px; + + .checkpoint-label-text { + box-sizing: border-box; + height: 22px; + font-size: var(--vscode-fontSize-label1); + line-height: 18px; + color: var(--vscode-descriptionForeground); + display: flex; + align-items: center; + flex-shrink: 0; + padding: 0 var(--vscode-spacing-size60); + border: var(--vscode-strokeThickness) solid transparent; + } + + .checkpoint-dot-separator { + font-size: var(--vscode-fontSize-label1); + line-height: 18px; + color: var(--vscode-descriptionForeground); + flex-shrink: 0; + } + } + + .checkpoint-container:focus-within, + .checkpoint-container.group-hovered, + .checkpoint-container:has(.chat-restore-checkpoint-item.confirming), + .interactive-item-container.interactive-request:not(.editing):hover .checkpoint-container, + .monaco-tree-sticky-row .interactive-item-container.interactive-request .request-hover { + opacity: 1; + } + + .interactive-item-container.interactive-request.editing .checkpoint-container { + display: none; + } + + .interactive-list > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row { + overflow: visible !important; + } + + .interactive-list > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused.request { + outline: none !important; + } + + div[data-index="0"]:not(.monaco-tree-sticky-row) .monaco-tl-contents { + .interactive-item-container.interactive-request:not(.editing) { + padding-top: var(--vscode-spacing-size200); + } + + .request-hover { + top: 0px; + } + } + + .interactive-list > .monaco-list:focus > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused.request { + outline: none !important; + + .interactive-item-container .value .rendered-markdown { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + } + } + + .interactive-request.editing .rendered-markdown, + .interactive-request.editing .value { + display: none; + } + + .interactive-request.editing-input .rendered-markdown { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + } + + .interactive-request.editing { + padding: 0px; + + .interactive-input-part .chat-input-container .interactive-input-editor .monaco-editor .native-edit-context { + opacity: 0; + } + } +} + +.editor-instance .interactive-session .interactive-item-container.interactive-response .checkpoint-restore-container { + + .checkpoint-label-text, + .monaco-toolbar { + background-color: var(--vscode-editor-background); + } +} + +.chat-buttons-container { + display: flex; + gap: 8px; + margin-top: 0px; + flex-wrap: wrap; + flex-basis: 100%; + padding: 0 8px; + margin: 8px 0; + + & .monaco-button.monaco-dropdown-button { + padding: 0 var(--vscode-spacing-size40); + } +} + +.interactive-item-container .chat-command-button .monaco-button, +.chat-buttons-container .monaco-button:not(.monaco-dropdown-button) { + text-align: left; + width: initial; +} + +.interactive-item-container .chat-edit-input-container { + width: 100%; +} + +.interactive-session .interactive-item-container.interactive-request.editing > .value > .chat-attached-context { + padding: 0px 16px; +} + +.chat-row-disabled-overlay, +.interactive-item-container .chat-edit-input-container .chat-editing-session, +.chat-input-overlay { + display: none; +} + +.chat-row-disabled-overlay.disabled, +.chat-input-overlay.disabled { + position: absolute; + inset: 0; + background-color: var(--vscode-sideBar-background); + opacity: 0.6; + display: flex; + z-index: 101; + user-select: none; + cursor: default; +} + +/* Scrim the content floating above the input along with the composer. */ +.chat-input-overlay.disabled { + top: calc(-1 * var(--vscode-chat-persistent-content-height, 0px)); +} + +.interactive-session .focused-input-dom { + position: absolute; + top: -50000px; + width: 1px; + height: 1px; +} + + +.interactive-session .chat-attached-context .chat-attached-context-attachment.implicit.disabled:hover { + cursor: pointer; + border-style: solid; + background-color: var(--vscode-toolbar-hoverBackground); +} + +/* Chat Suggest Next Widget */ +/* Suggested Actions widget - reuses chat-welcome-view-suggested-prompts styling */ + +.interactive-session > .chat-suggest-next-widget { + /* Override positioning from welcome view styles (relative instead of absolute) */ + position: relative; + bottom: auto; + left: auto; + right: auto; + margin: 0 0 0 0; + /* Keep standard padding with space for title */ + padding: 32px 16px 8px 16px; + /* Grow the box, not the margin (which the layout measurement excludes), to + clear the content floating above the input. */ + padding-bottom: calc(8px + var(--vscode-chat-persistent-content-height, 0px)); + /* Left align buttons to match standard welcome view */ + justify-content: flex-start; + /* Ensure flex layout is properly applied */ + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.chat-welcome-view-suggested-prompt.chat-suggest-next-has-dropdown { + padding-right: 12px; +} + +/* Dropdown container for chevron in suggested prompt buttons - provides larger hit area */ +.chat-welcome-view-suggested-prompt > .chat-suggest-next-dropdown { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + margin: -1px -8px -1px 0; + /* Extend to button edge, accounting for button padding */ + padding: 0 4px 0 2px; + gap: 4px; + cursor: pointer; + border-top-right-radius: var(--vscode-cornerRadius-small); + border-bottom-right-radius: var(--vscode-cornerRadius-small); + box-sizing: border-box; +} + +.chat-welcome-view-suggested-prompt > .chat-suggest-next-dropdown:hover { + background-color: var(--vscode-toolbar-hoverBackground); +} + +.chat-welcome-view-suggested-prompt > .chat-suggest-next-dropdown:focus { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: -1px; +} + +/* Chevron icon in dropdown container */ +.chat-welcome-view-suggested-prompt .codicon-chevron-down-compact.dropdown-chevron { + font-size: var(--vscode-codiconFontSize-compact); + opacity: 0.7; + flex-shrink: 0; +} + +.chat-welcome-view-suggested-prompt > .chat-suggest-next-dropdown:hover .dropdown-chevron, +.chat-welcome-view-suggested-prompt > .chat-suggest-next-dropdown:focus .dropdown-chevron { + opacity: 1; +} + +/* Vertical separator between label and chevron in suggested next actions */ +.chat-suggest-next-dropdown > .chat-suggest-next-separator { + width: var(--vscode-strokeThickness); + height: 16px; + background-color: currentColor; + opacity: 0.5; + border-radius: var(--vscode-cornerRadius-circle); + align-self: center; + flex-shrink: 0; +} + +/* Show more attachments button styling */ +.chat-attachments-show-more-button { + opacity: 0.8; + transition: opacity 0.2s ease; +} + +.chat-attachments-show-more-button:hover { + opacity: 1; + background-color: var(--vscode-list-hoverBackground) !important; +} + +.chat-attachments-show-more-button:focus { + outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder); + outline-offset: -1px; +} + +.chat-attachments-show-more-button .chat-attached-context-custom-text { + font-style: italic; + color: var(--vscode-descriptionForeground); +} + +/* Pending request styles */ +.interactive-item-container.pending-request { + opacity: 0.7; + + .request-hover { + top: -17px !important; + } +} + +/* Drag handle for reordering pending messages */ +.interactive-item-container .chat-pending-drag-handle { + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 16px; + display: flex; + align-items: center; + justify-content: center; + cursor: grab; + opacity: 0; + transition: opacity 0.15s; + color: var(--vscode-descriptionForeground); + margin-top: -4px; + /* visually center with overlaid top controls */ +} + +.interactive-item-container.pending-request:hover .chat-pending-drag-handle { + opacity: 1; +} + +/* Dragging state */ +.interactive-item-container.chat-pending-dragging { + opacity: 0.4; +} + +/* Insertion indicator */ +.chat-pending-insert-indicator { + position: absolute; + height: 2px; + background: var(--vscode-focusBorder); + pointer-events: none; + z-index: 100; + display: none; +} + +/* Pending divider styles */ +.interactive-item-container.pending-divider { + padding: 8px 16px; +} + +.interactive-item-container.pending-divider .pending-divider-content { + display: flex; + align-items: center; + gap: 8px; +} + +.interactive-item-container.pending-divider .pending-divider-label { + font-size: var(--vscode-chat-font-size-body-xs); + font-weight: var(--vscode-fontWeight-semiBold); + color: var(--vscode-descriptionForeground); +} + +/* Outline removal except for HC themes */ +.monaco-workbench:not(.hc-black):not(.hc-light) .interactive-list > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused.response { + outline: none !important; +} + +/* Standalone dictation / Voice Mode buttons (shown when the segmented voice pill + isn't active). Give them the same control tier as the send button they sit + beside — a 22×22 surface with the compact 12px glyph used by the agent / + model pickers — so the mic group reads as one consistent row in every state: + dictation idle / recording / preparing / connecting, and Voice Mode idle / + connecting / listening / speaking / disconnect. + + When both modes are available, their outlines identify them as a paired + control. A lone action is left borderless to match the send button. */ +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item > .action-label.codicon-mic-compact, +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item > .action-label.codicon-mic-filled, +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item > .action-label.codicon-mic-download-compact, +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item > .action-label.codicon-voice-mode-compact, +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item > .action-label.codicon-loading-compact, +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item > .action-label.codicon-debug-disconnect-compact { + box-sizing: border-box; + width: 22px; + height: 22px; + justify-content: center; + border-radius: var(--vscode-cornerRadius-circle); + font-size: var(--vscode-codiconFontSize-compact); +} + +.chat-execute-toolbar.chat-voice-input-actions-multiple .monaco-action-bar .action-item > .action-label.codicon-mic-compact, +.chat-execute-toolbar.chat-voice-input-actions-multiple .monaco-action-bar .action-item > .action-label.codicon-mic-filled, +.chat-execute-toolbar.chat-voice-input-actions-multiple .monaco-action-bar .action-item > .action-label.codicon-mic-download-compact, +.chat-execute-toolbar.chat-voice-input-actions-multiple .monaco-action-bar .action-item > .action-label.codicon-voice-mode-compact, +.chat-execute-toolbar.chat-voice-input-actions-multiple .monaco-action-bar .action-item > .action-label.codicon-loading-compact, +.chat-execute-toolbar.chat-voice-input-actions-multiple .monaco-action-bar .action-item > .action-label.codicon-debug-disconnect-compact { + border: var(--vscode-strokeThickness) solid var(--vscode-input-border, var(--vscode-editorWidget-border)); +} + +@keyframes chat-voice-icon-glow { + 0%, + 100% { + box-shadow: 0 0 2px var(--chat-voice-icon-glow-color); + } + + 50% { + box-shadow: 0 0 5px var(--chat-voice-icon-glow-color); + } +} + +/* Voice mode mic glyph: tinted with the same theme-derived accent as the ambient + glow (published as `--voice-accent` by the glow controller). The glow keeps the + button's resting shape — only its color and the pulse change between states, so + the control never morphs from a circle into a rounded square mid-session. */ +.chat-input-container.voice-active .chat-input-toolbars .action-label.codicon-voice-mode-compact { + --chat-voice-icon-glow-color: color-mix(in srgb, var(--voice-accent, var(--vscode-charts-blue, #58a6ff)) 40%, transparent); + color: var(--voice-accent, var(--vscode-charts-blue, #58a6ff)) !important; + border-radius: var(--vscode-cornerRadius-circle); +} + +.monaco-workbench.monaco-enable-motion .chat-input-container.voice-active.voice-listening .chat-input-toolbars .action-label.codicon-voice-mode-compact, +.monaco-workbench.monaco-enable-motion .chat-input-container.voice-active.voice-speaking .chat-input-toolbars .action-label.codicon-voice-mode-compact { + animation: chat-voice-icon-glow 1.4s ease-in-out infinite; +} + +/* Voice mode: green disconnect button. This has to out-specify the blanket + `icon-foreground !important` rule that colors every toolbar codicon, so it + carries the full toolbar path rather than a short `.chat-input-container` + prefix — with equal `!important` the higher specificity wins, and the short + form silently lost the cascade and rendered grey. */ +.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item > .action-label.codicon-debug-disconnect-compact { + color: var(--vscode-charts-green, #3fb950) !important; +} + +/* + * Voice mode connecting indicator: only spin the spinner glyph, not the whole + * button. Otherwise the action-label (including its hover background) rotates + * along with the icon. + */ +.chat-input-container .chat-input-toolbars .action-label.codicon-loading, +.chat-input-container .chat-input-toolbars .action-label.codicon-loading-compact { + animation: none; +} + +.chat-input-container .chat-input-toolbars .action-label.codicon-loading::before, +.chat-input-container .chat-input-toolbars .action-label.codicon-loading-compact::before { + display: inline-block; + transform-origin: center center; + animation: codicon-spin 1.5s steps(30) infinite; +} + +.monaco-reduce-motion .chat-input-container .chat-input-toolbars .action-label.codicon-loading::before, +.monaco-reduce-motion .chat-input-container .chat-input-toolbars .action-label.codicon-loading-compact::before { + animation: none; +} + +.monaco-reduce-motion .action-item.chat-restore-checkpoint-item.confirming .action-label:first-child { + animation: none; + background: none; + -webkit-text-fill-color: currentColor; + color: var(--vscode-foreground); +} + +/* Dictation model download: while the on-device speech-to-text model downloads + on first use, the toolbar shows a download icon wrapped by a circular + progress ring (see DictationDownloadActionViewItem) instead of a spinning + mic, so the wait reads as a determinate download rather than a hang. */ +.monaco-action-bar .action-item.dictation-download-item { + position: relative; +} + +.monaco-action-bar .action-item.dictation-download-item > .dictation-download-ring { + position: absolute; + top: 50%; + left: 50%; + /* Sized to hug the compact 12px download glyph rather than the full button. */ + width: 16px; + height: 16px; + transform: translate(-50%, -50%) rotate(-90deg); + pointer-events: none; +} + +.monaco-action-bar .action-item.dictation-download-item > .dictation-download-ring .dictation-download-ring-track { + fill: none; + stroke: var(--vscode-progressBar-background); + stroke-width: 1.5; + opacity: 0.25; +} + +/* In high-contrast themes progressBar.background is the solid contrastBorder; + keep the track fully opaque so it stays visible against the arc. */ +.hc-black .action-item.dictation-download-item > .dictation-download-ring .dictation-download-ring-track, +.hc-light .action-item.dictation-download-item > .dictation-download-ring .dictation-download-ring-track { + opacity: 1; +} + +.monaco-action-bar .action-item.dictation-download-item > .dictation-download-ring .dictation-download-ring-progress { + fill: none; + stroke: var(--vscode-progressBar-background); + stroke-width: 1.5; + stroke-linecap: round; +} + +.monaco-workbench.monaco-enable-motion .action-item.dictation-download-item > .dictation-download-ring .dictation-download-ring-progress { + transition: stroke-dashoffset 120ms ease; +} + +/* Keep the progress arc moving while the model downloads or loads so the + affordance reads as active even between percentage updates. Gated on + enable-motion to respect reduced motion. */ +.monaco-workbench.monaco-enable-motion .dictation-download-ring { + animation: dictation-download-ring-spin 1.2s linear infinite; +} + +.monaco-workbench.monaco-enable-motion .action-item.dictation-download-item > .dictation-download-ring.indeterminate .dictation-download-ring-progress { + transition: none; +} + +@keyframes dictation-download-ring-spin { + from { + transform: translate(-50%, -50%) rotate(-90deg); + } + to { + transform: translate(-50%, -50%) rotate(270deg); + } +}