/*! modern-normalize v3.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
	box-sizing: border-box;
}

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}

body {
  margin: 0;
}
.Terminal {
  position: relative;
  contain: strict;
  width: 780px;
  height: 625px;
  background: black;
}

.TerminalLayers {
  width: 100%;
  height: 100%;
  position: relative;
}
.TerminalCanvasText,
.TerminalCanvasCursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.TerminalCanvasCursor {
  opacity: 0.5;
}

.TerminalTextArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
}

/*************/
/* _Global.css */
/*************/
@font-face {
  font-family: 'Fira Code';
  src: url(/2971fc5/fonts/FiraCode-VariableFont.ttf) format('truetype');
}

/* TODO check if contain strict also makes sense for html and body */

html,
body {
  height: 100%;
  contain: strict;
}

body {
  font-family:
    system-ui,
    Ubuntu,
    Droid Sans,
    sans-serif;
  user-select: none;
  color: var(--WorkbenchForeground);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--vscode-scrollbarSlider-background) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--vscode-scrollbarSlider-background);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--vscode-scrollbarSlider-hoverBackground);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--vscode-scrollbarSlider-activeBackground);
}
/*************/
/* Actions.css */
/*************/
.Actions {
  display: flex;
  margin-left: auto;
  align-items: center;
  contain: content;
}

.SelectWrapper {
  contain: content;
  position: relative;
  height: 21px;
}

.SelectIcon {
  position: absolute;
  inset: 0 6px 0 auto;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-size: var(--MaskIconSize);
  mask-position: 50% 50%;
  mask-image: url(/2971fc5/icons/chevron-down.svg);
  pointer-events: none;
  width: 16px;
  height: 16px;
  contain: strict;
  margin: auto 0;
}
/*************/
/* ActivityBarItem.css */
/*************/
.ActivityBarItem {
  position: relative;
  outline: none;
  width: 48px;
  height: 48px;
  contain: strict;
  flex-shrink: 0;
  --MaskIconSize: 24px;
  mask-repeat: no-repeat;
  mask-size: var(--MaskIconSize);
  mask-position: 50% 50%;
  background: currentColor;
  cursor: pointer;
}

.ActivityBarItem:hover {
  /* background: #878f8c; */
}

.ActivityBarItemSelected,
.ActivityBarItem:hover {
  color: var(--ActivityBarActiveForeground);
}

.ActivityBarItemSelected {
  background: var(--ActivityBarActiveBackground);
}

.ActivityBarItemNested {
  background: var(--ActivityBarBackground);
}

.ActivityBarItem:focus-visible {
  /* background: var(--ActivityBarActiveBackground); */
  color: var(--ActivityBarActiveForeground);
}

.ActivityBarItemBadge {
  background: var(--BadgeBackground);
  border-radius: 100%;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  right: 0px;
  bottom: 0px;
  color: var(--BadgeForeground);
  font-size: 9px;
  font-weight: 600;
  display: flex;
  padding: 2px;
  justify-content: center;
  align-items: center;
}

.MarginTopAuto {
  margin-top: auto;
}

.ActivityBarBadgeIcon {
  contain: content;
}

.BadgeContent {
  width: 16px;
  height: 16px;
  contain: strict;
  --MaskIconSize: 16px;
}
/*************/
/* Alignment.css */
/*************/
.AlignBottom {
  margin-top: auto;
}

.AlignRight {
  margin-left: auto;
}

.Grow {
  flex: 1;
}
/*************/
/* AriaAlert.css */
/*************/
/* Alert  */
.AriaAlert {
  position: absolute;
  left: -999em;
  top: 0;
}

.AriaContainer {
  width: 0;
  height: 0;
}
/*************/
/* BackDrop.css */
/*************/
.BackDrop {
  position: fixed;
  cursor: initial;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: all;
}
/*************/
/* Badge.css */
/*************/
.Badge {
  contain: content;
  background: var(--BadgeBackground, rgb(160, 63, 155));
  color: var(--BadgeForeground, #eeeeee);
  border-radius: 11px;
  font-size: 11px;
  font-weight: 400;
  height: 18px;
  min-width: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 6px;
}
/*************/
/* Button.css */
/*************/
.Button {
  contain: content;
  display: flex;
  border-radius: 2px;
  border: none;
  place-content: center;
  place-items: center;
  padding: 5px 10px;
  white-space: nowrap;
}

.Button:where(:focus-visible) {
  background: var(
    --ButtonHoverBackground,
    var(--SplitButtonHoverBackground, color-mix(in srgb, var(--FocusBorder, var(--WorkbenchForeground)) 24%, transparent))
  );
  outline: 1px solid var(--FocusBorder);
  outline-offset: 2px;
}

.ButtonPrimary {
  background: var(
    --ButtonBackground,
    var(--SplitButtonBackground, color-mix(in srgb, var(--FocusBorder, var(--WorkbenchForeground)) 34%, var(--MainBackground)))
  );
  color: var(--ButtonForeground, var(--SplitButtonForeground, var(--WorkbenchForeground)));
  cursor: pointer;
}

.ButtonPrimary:where(:hover),
.ButtonPrimary:where(:focus) {
  background: var(
    --ButtonHoverBackground,
    var(--SplitButtonHoverBackground, color-mix(in srgb, var(--FocusBorder, var(--WorkbenchForeground)) 44%, var(--MainBackground)))
  );
}

.ButtonSecondary {
  background: var(--ButtonSecondaryBackground, color-mix(in srgb, var(--WorkbenchForeground) 10%, var(--MainBackground)));
  color: var(--ButtonSecondaryForeground, var(--WorkbenchForeground));
  cursor: pointer;
}

.ButtonSecondary:where(:hover),
.ButtonSecondary:where(:focus) {
  background: var(
    --ButtonSecondaryHoverBackground,
    var(--ListHoverBackground, color-mix(in srgb, var(--WorkbenchForeground) 16%, var(--MainBackground)))
  );
}

.ButtonNarrow {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.ButtonWide {
  max-width: 300px;
}

.ButtonDisabled {
  background: gray;
  cursor: not-allowed;
}
/*************/
/* Chevron.css */
/*************/
.Chevron {
  width: 16px;
  height: 16px;
  contain: strict;
  position: relative;
  mask-size: 16px;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  background: currentColor;
  flex-shrink: 0;
}
/*************/
/* ChatAttachments.css */
/*************/
.ChatAttachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ChatAttachment {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
  padding: 4px 10px;
  background: var(--vscode-badge-background, color-mix(in srgb, var(--vscode-editor-background) 88%, white));
  color: var(--vscode-badge-foreground, var(--vscode-foreground));
  font-size: 12px;
}

.ChatAttachmentLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ChatAttachmentPreview {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 4px;
  object-fit: cover;
}

.ChatAttachmentImage {
  border-color: var(--vscode-charts-blue);
}

.ChatAttachmentInvalidImage {
  border-color: var(--vscode-inputValidation-errorBorder, var(--vscode-errorForeground));
  color: var(--vscode-errorForeground, var(--vscode-foreground));
}

.ChatAttachmentTextFile {
  border-color: var(--vscode-charts-green, var(--vscode-widget-border, var(--vscode-panel-border)));
}

.ChatImageMessageContent {
  padding: 6px;
  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
  border-radius: 12px;
  background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
  overflow: hidden;
}

.ChatMessageImage {
  display: block;
  max-width: min(320px, 100%);
  max-height: min(320px, calc(100vh - 220px));
  border-radius: 8px;
  object-fit: contain;
  background: color-mix(in srgb, var(--vscode-editor-background) 88%, black);
}

.ChatMessages > .MessageUser .ChatAttachments {
  justify-content: flex-end;
}
/*************/
/* ChatComposerAttachments.css */
/*************/
.ChatComposerAttachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.ChatComposerAttachment {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
  padding: 4px 10px;
  background: var(--vscode-badge-background, color-mix(in srgb, var(--vscode-editor-background) 88%, white));
  color: var(--vscode-badge-foreground, var(--vscode-foreground));
  font-size: 12px;
}

.ChatComposerAttachmentLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ChatComposerAttachmentPreview {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 4px;
  object-fit: cover;
}

.ChatComposerAttachmentRemoveButton {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  font: inherit;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.ChatComposerAttachmentImage {
  border-color: var(--vscode-charts-blue);
}

.ChatComposerAttachmentInvalidImage {
  border-color: var(--vscode-inputValidation-errorBorder, var(--vscode-errorForeground));
  color: var(--vscode-errorForeground, var(--vscode-foreground));
}

.ChatComposerAttachmentTextFile {
  border-color: var(--vscode-charts-green, var(--vscode-widget-border, var(--vscode-panel-border)));
}

.ChatComposerAttachmentPreviewOverlay {
  position: absolute;
  left: calc(var(--ChatSendAreaPaddingLeft) + 8px);
  bottom: calc(var(--ChatSendAreaHeight) - 12px);
  z-index: 6;
  width: 240px;
  min-width: 160px;
  min-height: 160px;
  max-width: calc(100% - var(--ChatSendAreaPaddingLeft) - var(--ChatSendAreaPaddingRight) - 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
  border-radius: 12px;
  background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--vscode-editor-background) 45%, black);
  overflow: hidden;
}

.ChatComposerAttachmentPreviewOverlayImage {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: min(320px, calc(100vh - 200px));
  object-fit: contain;
  background: color-mix(in srgb, var(--vscode-editor-background) 88%, black);
}

.ChatComposerAttachmentPreviewOverlayError {
  padding: 12px;
  color: var(--vscode-errorForeground, var(--vscode-foreground));
}/*************/
/* ChatHeader.css */
/*************/
.ChatHeader {
  contain: strict;
  display: flex;
  gap: 8px;
  padding: 8px;
  height: 50px;
  justify-content: space-between;
  padding-bottom: 20px;
}

.ChatHeader .IconButton {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ChatHeader .Label,
.ChatHeaderLabel {
  text-decoration: underline;
  text-underline-offset: 5px;
  font-weight: 400;
  font-size: 13px;
}

.ChatHeaderLabel {
  margin: 0;
  font-size: 14px;
}

.ChatHeaderLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ChatHeaderAuth {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.ChatHeaderAuthName {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ChatHeaderAuth .Button {
  white-space: nowrap;
}
/*************/
/* ChatModelPickerList.css */
/*************/
.ChatModelPickerList {
  flex: 1;
  margin: 0;
  min-height: 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6)) transparent;
}
/*************/
/* ChatModelPickerItem.css */
/*************/
.ChatModelPickerItem {
  align-items: center;
  background: transparent;
  border: none;
  color: var(--vscode-foreground);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 8px;
  height: 28px;
  justify-content: flex-start;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}

.ChatModelPickerItemLabel {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ChatModelPickerItemUsageCost {
  margin-left: auto;
  color: var(--vscode-descriptionForeground);
  opacity: 0.6;
}

.ChatModelPickerItem:hover,
.ChatModelPickerItemSelected {
  background: var(--ListHoverBackground);
  color: var(--ListHoverForeground);
}

/*
.ChatModelPickerItem > * {
  pointer-events: none;
}
*/
/*************/
/* ChatListItem.css */
/*************/
:root {
  --ChatListItemBorderRadius: 6px;
  --ChatListItemNameForeground: rgb(188, 190, 190);
  --DescriptionForeground: rgba(156, 162, 160, 0.7);
  --ChatListItemActionDisplay: none;
}

.ChatListItemLabel {
  contain: content;
}

.ChatListItem {
  contain: strict;
  display: flex;
  height: var(--ChatListItemHeight, 40px);
  background: transparent;
  padding-left: 10px;
  border-radius: var(--ChatListItemBorderRadius);
}

.ChatListItem:hover {
  background: var(--ListHoverBackground);
  color: var(--ListHoverForeground);
  --ChatListItemActionDisplay: flex;
}

.ChatListItem .ChatActions {
  display: var(--ChatListItemActionDisplay);
}

.ChatListItemFocused {
  background: var(--vscode-list-activeSelectionBackground);
  color: var(--vscode-list-activeSelectionForeground);
}

.ChatListItemContent {
  contain: strict;
  flex: 1;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.ChatListItemStatusRow {
  width: 16px;
  min-width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ChatListItemStatusIcon {
  font-size: 10px;
}

.ChatListItemStatusStopped {
  color: var(--vscode-disabledForeground);
}

.ChatListItemStatusInProgress {
  color: var(--vscode-charts-blue);
}

.ChatListItemStatusFinished {
  color: var(--vscode-testing-iconPassed);
}

.ChatListItemTitle {
  color: var(--ChatListItemNameForeground);
}

.ChatListItemTime {
  color: var(--DescriptionForeground);
  font-size: 12px;
}
/*************/
/* ChatSendArea.css */
/*************/
:root {
  --ToolBarHoverBackground: rgba(90, 93, 94, 0.31);
  --SendButtonDisabledForeground: rgba(204, 204, 204, 0.5);
  --ChatSendAreaBorder: 1px solid #37413f;
  --ChatSendAreaFocusedBorderColor: #3d5252;
}

.ChatSendArea {
  display: flex;
  gap: 10px;
  padding: var(--ChatSendAreaPaddingTop, 10px) var(--ChatSendAreaPaddingRight, 10px) var(--ChatSendAreaPaddingBottom, 10px)
    var(--ChatSendAreaPaddingLeft, 10px);
  flex-direction: column;
  height: var(--ChatSendAreaHeight, 90px);
  contain: strict;
}

.ChatSendAreaContent {
  position: relative;
  background: var(--InputBoxBackground, var(--vscode-input-background, var(--vscode-editorWidget-background, transparent)));
  border-radius: 5px;
  padding: 10px;
  flex: 1;
  contain: strict;
}

.ChatSendAreaContent {
  border: var(--ChatSendAreaBorder);
}

.ChatSendAreaContentFocused {
  border-color: var(--ChatSendAreaFocusedBorderColor);
}

.InputInvalid {
  border-color: var(--InputValidationErrorBorder, red);
}

.ChatSendArea .MultilineInputBox {
  height: var(--ChatTextAreaHeight, var(--ChatInputBoxHeight, 20px));
  min-height: var(--ChatTextAreaHeight, var(--ChatInputBoxHeight, 20px));
  padding: var(--ChatTextAreaPaddingTop, 0) var(--ChatTextAreaPaddingRight, 0) var(--ChatTextAreaPaddingBottom, 0) var(--ChatTextAreaPaddingLeft, 0);
}

.ChatSendAreaBottom {
  align-items: center;
  display: flex;
  contain: strict;
  gap: 8px;
  height: 20px;
  justify-content: space-between;
}

.ChatSendAreaPrimaryControls {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ChatInputBox {
  width: 100%;
  margin: 0;
  border: none;
  outline: none;
  flex: 1;
  background: var(--InputBoxBackground, var(--vscode-input-background, var(--vscode-editorWidget-background, transparent)));
  color: var(--InputBoxForeground, var(--vscode-input-foreground, var(--vscode-foreground, inherit)));
  font-family: inherit;
  font-size: 13px;
  height: 24px;
  line-height: 24px;
  contain: strict;
  resize: none;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}

.ChatInputBox::selection {
  background: rgba(255, 255, 255, 0.2);
}

.ChatInputBox::-moz-selection {
  background: rgba(255, 255, 255, 0.2);
}

.ChatSendArea:focus-within {
  border-color: darkcyan;
}

.SendButtonDisabled {
  color: var(--SendButtonDisabledForeground);
  cursor: default;
}
/*************/
/* ChatSelect.css */
/*************/
:root {
  --ToolBarHoverBackground: rgba(90, 93, 94, 0.31);
}

.ChatSelect {
  background: transparent;
  border-radius: 4px;
  border: none;
  color: var(--vscode-descriptionForeground, var(--vscode-disabledForeground));
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 0 !important;
  position: relative;
  flex-shrink: 0;
}

.ChatSelect .MaskIcon {
  width: 10px;
  height: 10px;
  pointer-events: none;
}

.ChatSelect {
  padding: 4px !important;
  cursor: pointer;
}

.ChatSelect:hover {
  background: var(--ToolBarHoverBackground);
}
/*************/
/* ChatTool.css */
/*************/
.Chat {
  --TextLinkForeground: dodgerblue;
}

.ChatToolCalls {
  position: relative;
  border: 1px solid var(--vscode-editorWidget-border);
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 10px 8px 6px;
  background: var(--vscode-editorWidget-background);
}

.ChatToolCallsLabel {
  top: -8px;
  left: 8px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--vscode-editor-background);
  color: var(--vscode-descriptionForeground);
  font-size: 10px;
  line-height: 14px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  height: 14px;
  contain: strict;
}

.ChatToolCallReadFileLink {
  color: var(--TextLinkForeground);
  text-decoration: underline;
}

.ChatToolCallFileName {
  cursor: pointer;
}

.ChatToolCallFileName:hover {
  color: var(--TextLinkForeground);
}

.ChatToolCalls .ChatOrderedList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ChatToolCalls .ChatOrderedListItem {
  align-items: flex-start;
  display: flex;
  gap: 8px;
}

.ChatToolCalls .ChatOrderedListMarker {
  flex: none;
  min-width: 1.5em;
}

.ChatToolCalls .ChatOrderedListItemContent {
  flex: 1;
  min-width: 0;
}

.ChatToolCallRenderHtmlLabel {
  margin-bottom: 6px;
  color: var(--vscode-descriptionForeground);
  font-size: 12px;
}

.ChatToolCallRenderHtmlContent {
  border: 1px solid var(--vscode-editorWidget-border);
  border-radius: 6px;
  background: var(--vscode-editor-background);
  overflow: hidden;
}

.ChatToolCallRenderHtmlBody {
  min-height: 180px;
  padding: 12px;
}

.ChatToolCallRenderHtmlBody hr {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ColorBorder, #3a3d41) 78%, transparent);
  display: block;
  height: 0;
  margin: 12px 0;
  width: 100%;
}

.ChatToolCallRenderHtmlBody * {
  box-sizing: border-box;
}

.ChatToolCallQuestionText {
  margin-bottom: 6px;
}

.ChatToolCallQuestionOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ChatToolCallQuestionOption {
  background: color-mix(in srgb, var(--ColorBadgeBackground, #2f3640) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--ColorBorder, #3a3d41) 70%, transparent);
  border-radius: 999px;
  color: var(--ColorForeground, #d5dbe3);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*************/
/* CompletionItem.css */
/*************/
.CompletionItem {
  height: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  contain: strict;
  gap: 5px;
  padding-left: 1px;
  position: absolute;
  cursor: pointer;
}

/* TODO reuse same highlight css for quickpick */
.CompletionItemHighlight {
  color: var(--CompletionHighlightForeground, #e1b974);
  font-weight: 700;
  contain: content;
}

.CompletionItem:where(:hover) {
  background: var(--CompletionListItemHoverBackground, rgba(64, 92, 80, 0.2));
}

.CompletionItemFocused {
  background: var(--CompletionListItemActiveBackground, #405c50);
  color: var(--CompletionListItemActiveForeground);
}

.CompletionItemDeprecated {
  text-decoration: line-through;
}
/*************/
/* ContextMenu.css */
/*************/
:root {
  --ContextMenuBackground: rgb(60, 60, 60);
}

#ContextMenu {
  top: 0;
  left: 0;
  position: absolute;
  background: var(--ContextMenuBackground);
  color: var(--ContextMenuForeground, white);
  box-shadow: var(--MenuBoxShadow, rgb(0, 0, 0) 0px 2px 4px);
  user-select: none;
  min-width: 150px;
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  z-index: 1;
  outline: none;
  pointer-events: all;
  contain: strict;
}

#MenuBackDrop {
  position: fixed;
  cursor: initial;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: all;
}
/*************/
/* Drag.css */
/*************/
.DragImage {
  width: 100px;
  height: 20px;
  background: var(--SideBarBackground); /* TODO */
  position: absolute;
  padding: 0 4px;
  translate: -999px -999px;
  willchange: translate;
  contain: strict;
}
/*************/
/* EditorTabs.css */
/*************/
.MainTabs {
  height: 35px;
  display: flex;
  contain: strict;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--TabsBackground); /* TODO variable name should match class name */
  overflow: hidden;
  overflow-x: auto;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}

.MainTab {
  border-right: 1px solid var(--TabBorder, rgb(34, 34, 34));
  background: var(--TabBackground);
  color: var(--TabForeground);
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 13px;
  white-space: nowrap;
  max-width: 200px;
  contain: content;
  height: 100%;
  flex-shrink: 0;
  padding-left: 5px;
  border-bottom: 1px solid transparent;
}

.MainTabPreview {
  font-style: italic;
}

.MainTabSelected {
  border-right: 1px solid var(--TabBorder, rgb(34, 34, 34));
  border-bottom-color: var(--TabBorderBottom, transparent);
  background: var(--TabActiveBackground);
  color: var(--TabActiveForeground);
}

.ManiTabLabel {
  pointer-events: none;
  contain: content;
}

.EditorTabCloseButton {
  contain: strict;
  border: none;
  padding: 0;
  width: 23px;
  height: 23px;
  position: relative;
  background: transparent;
  border-radius: 4px;
  display: flex;
  flex-shrink: 0;
  color: var(--TabForeground);
}

.EditorTabCloseButton:hover {
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.1s;
}

.EditorTabStatus {
  width: 22px;
  height: 15px;
}

/* TODO investigate whether classNames vs data-attribute makes a difference here (performance-wise) */
.EditorTabStatus[data-status='1'] /* default */ {
  display: none;
}

.EditorTabStatus[data-status='2'] /* modified */ {
  background: white;
  mask: url(/packages/renderer-process/assets/icons/circle-filled.svg) 100% 50% / 15px no-repeat;
}

.DragOver {
  background-color: rgba(83, 89, 93, 0.5);
}

.TabLabel {
  white-space: nowrap;
  contain: content;
  overflow: hidden;
  min-width: 0;
  flex: 1;
  pointer-events: none;
}

.TabIcon {
  contain: strict;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  /* background: currentColor; */
  mask-repeat: no-repeat;
  mask-size: 16px;
  mask-position: 50% 50%;
  pointer-events: none;
}

.TabDragHighlight {
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  contain: strict;
  background: dodgerblue;
}

.TabTitle {
  pointer-events: none;
  padding-right: 4px;
  contain: content;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.EditorContainer {
  width: 100%;
  display: flex;
  contain: strict;
  flex: 1;
}

.iframe-wrapper {
  display: flex;
  flex: 1;
}

.iframe-wrapper iframe {
  flex: 1;
}

.EditorGroupActions {
  display: flex;
  contain: content;
  align-items: center;
  background: var(--TabsBackground);
}
/*************/
/* ExplorerInputBox.css */
/*************/
:root {
  --ErrorBackground: #5a1d1d;
  --ErrorForeground: #9ca2a0;
  --InputValidationErrorBorder: #be1100;
  --DisabledForeground: rgba(204, 204, 204, 0.5);
}

.ExplorerInputBox {
  width: 100%;
  margin: 0;
  border: none;
  outline: none;
  flex: 1;
  background: var(--InputBoxBackground);
  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
  padding: 0;
  color: var(--InputBoxForeground);
  font-size: 13px;
  height: 22px;
  contain: strict;
}

.ExplorerInputBox::placeholder {
  color: var(--InputBoxPlaceholderForeground, rgba(255, 255, 255, 0.3));
}

.ExplorerInputBox:where(:focus) {
  border-color: var(--FocusOutline, lightgray);
}

.InputValidationError {
  border-color: var(--InputValidationErrorBorder);
}

.ExplorerErrorMessage {
  position: absolute;
  top: var(--ErrorMessageTop);
  left: var(--ErrorMessageLeft);
  width: var(--ErrorMessageWidth);
  right: 0;
  background: var(--ErrorBackground);
  color: var(--ErrorForeground);
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid var(--InputValidationErrorBorder);
  line-height: 20px;
  contain: content;
}
/*************/
/* FileIcon.css */
/*************/
.FileIcon {
  contain: strict;
  pointer-events: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/*************/
/* Filter.css */
/*************/
.Filter {
  display: flex;
  min-width: 214px;
  contain: strict;
  height: 24px;
  align-items: center;
  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
}

/* TODO avoid css nesting */
.Filter .InputBox {
  border: none;
}

.FilterBadge {
  background: var(--BadgeBackground, rgb(160, 63, 155));
  color: var(--BadgeForeground, #eeeeee);
  padding: 0 4px;
  border-radius: 2px;
}
/*************/
/* Focus.css */
/*************/
/* hack to increase css specificity over listitems */
.FocusOutline.FocusOutline {
  outline-color: var(--FocusOutline, lightgray);
  outline-offset: -1px;
  outline-style: solid;
  outline-width: 1px;
}
/*************/
/* Highlight.css */
/*************/
.Highlight {
  background: var(--HighlightBackground, rgba(129, 85, 14, 0.4));
  contain: content;
}

.HighlightInserted {
  background: var(--HighlightInsertedBackground, rgba(156, 204, 44, 0.2));
  text-decoration: none;
  border: 1px solid rgba(155, 185, 85, 0.2);
  contain: content;
}

.HighlightDeleted {
  background: var(--HighlightDeletedBackground, rgba(255, 0, 0, 0.2));
  border: 1px solid rgba(255, 0, 0, 0.2);
  contain: content;
  text-decoration: line-through;
}
/*************/
/* IconButton.css */
/*************/
:root {
  --IconButtonDisabledForeground: rgba(204, 204, 204, 0.5);
}

.IconButton {
  width: 22px;
  height: 22px;
  contain: strict;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #c5c5c5;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  padding: 0;
  --MaskIconSize: 16px;
}

.IconButton:enabled:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
}

.IconButton:focus-visible {
  outline: 1px solid #3d5252;
  outline-offset: -1px;
}

.IconButtonDisabled {
  color: var(--IconButtonDisabledForeground);
}
/*************/
/* InputBox.css */
/*************/
:root {
  --InputBoxForeground: #e1e1e1;
}

.InputBox {
  width: 100%;
  margin: 0;
  border: none;
  outline: none;
  flex: 1;
  background: var(--InputBoxBackground);
  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
  padding: 4px 6px;
  color: var(--InputBoxForeground);
  font-size: 13px;
  height: 24px;
  contain: strict;
}

/* hide small "x" on chromium  */
.InputBox::-webkit-search-decoration,
.InputBox::-webkit-search-cancel-button,
.InputBox::-webkit-search-results-button,
.InputBox::-webkit-search-results-decoration,
.MultilineInputBox::-webkit-search-decoration,
.MultilineInputBox::-webkit-search-cancel-button,
.MultilineInputBox::-webkit-search-results-button,
.MultilineInputBox::-webkit-search-results-decoration {
  display: none;
}

.InputBox::-webkit-outer-spin-button,
.InputBox::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.SearchFieldInput {
  flex: 1;
  resize: none;
  color: var(--InputBoxForeground);
  border: none;
  font-size: 13px;
  height: 24px;
  contain: strict;
  line-height: 24px;
  width: 100%;
  padding: 4px 6px;
}

.SearchFieldInput {
  background: transparent;
}

.MultilineInputBox {
  width: 100%;
  margin: 0;
  border: none;
  outline: none;
  flex: 1;
  background: var(--InputBoxBackground);
  padding: 4px 6px;
  color: var(--InputBoxForeground);
  font-size: 13px;
  height: 24px;
  contain: strict;
  resize: none;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}

.InputBox::placeholder,
.MultilineInputBox::placeholder {
  color: var(--InputBoxPlaceholderForeground, rgba(255, 255, 255, 0.3));
}

.InputBox:focus {
  border-color: var(--FocusOutline, lightgray);
}
/*************/
/* Label.css */
/*************/
.Label {
  white-space: nowrap;
  contain: content;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  white-space: pre;
}

.LabelDetail {
  font-size: 0.9em;
  opacity: 0.7;
  contain: content;
  margin-left: 4px;
}

.StrikeThrough {
  text-decoration: line-through;
}

.LabelCut {
  opacity: 0.5;
}
/*************/
/* MaskIcon.css */
/*************/
.MaskIcon,
.Icon {
  display: block;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-size: var(--MaskIconSize);
  mask-position: 50% 50%;
  pointer-events: none;
  contain: strict;
  width: 100%;
  height: 100%;
}

.ColoredMaskIcon {
  width: 20px;
  height: 20px;
  contain: strict;
  display: block;
  background: currentColor;
  color: var(--TitleBarForeground, rgb(204, 204, 204));
  mask-repeat: no-repeat;
  mask-size: 16px;
  mask-position: 50% 50%;
  pointer-events: none;
  contain: strict;
  flex-shrink: 0;
}

.MaskIconMinimize,
.IconMinimize {
  mask-image: url(/2971fc5/icons/chrome-minimize.svg);
}

.MaskIconMaximize,
.IconMaximize {
  mask-image: url(/2971fc5/icons/chrome-maximize.svg);
}

.MaskIconRestore,
.IconRestore {
  mask-image: url(/2971fc5/icons/chrome-restore.svg);
}

.MaskIconPlay,
.IconPlay {
  mask-image: url(/2971fc5/icons/play.svg);
}

.MaskIconChromeClose,
.IconChromeClose {
  mask-image: url(/2971fc5/icons/chrome-close.svg);
}

.MaskIconFiles,
.IconFiles {
  mask-image: url(/2971fc5/icons/files.svg);
}

.MaskStopCircle,
.StopCircle {
  mask-image: url(/2971fc5/icons/stop-circle.svg);
}
.MaskIconArchive,
.IconArchive {
  mask-image: url(/2971fc5/icons/archive.svg);
}

.MaskIconSearch,
.IconSearch {
  mask-image: url(/2971fc5/icons/search.svg);
}

.MaskIconAccount,
.IconAccount {
  mask-image: url(/2971fc5/icons/account.svg);
}

.MaskIconSourceControl,
.IconSourceControl {
  mask-image: url(/2971fc5/icons/source-control.svg);
}

.MaskIconDebugAlt2,
.IconDebugAlt2 {
  mask-image: url(/2971fc5/icons/debug-alt-2.svg);
}

.MaskIconExtensions,
.IconExtensions {
  mask-image: url(/2971fc5/icons/extensions.svg);
}

.MaskIconSettingsGear,
.IconSettingsGear {
  mask-image: url(/2971fc5/icons/settings-gear.svg);
}

.MaskIconEllipsis,
.IconEllipsis {
  mask-image: url(/2971fc5/icons/ellipsis.svg);
}

.MaskIconArrowDown,
.IconArrowDown {
  mask-image: url(/2971fc5/icons/arrow-down.svg);
}

.MaskIconArrowUp,
.IconArrowUp {
  mask-image: url(/2971fc5/icons/arrow-up.svg);
}

.MaskIconClose,
.IconClose,
.EditorTabCloseButton:hover .MaskIconCircleFilled,
.IconCircleFilled {
  mask-image: url(/2971fc5/icons/close.svg);
}

.MaskIconCaseSensitive,
.IconCaseSensitive {
  mask-image: url(/2971fc5/icons/case-sensitive.svg);
}

.MaskIconWholeWord,
.IconWholeWord {
  mask-image: url(/2971fc5/icons/whole-word.svg);
}

.MaskIconRegex,
.IconRegex {
  mask-image: url(/2971fc5/icons/regex.svg);
}

.MaskIconChevronRight,
.IconChevronRight {
  mask-image: url(/2971fc5/icons/chevron-right.svg);
}

.MaskIconChevronDown,
.IconChevronDown {
  mask-image: url(/2971fc5/icons/chevron-down.svg);
}

.MaskIconRefresh,
.IconRefresh {
  mask-image: url(/2971fc5/icons/refresh.svg);
}

.MaskIconClearAll,
.IconClearAll {
  mask-image: url(/2971fc5/icons/clear-all.svg);
}

.MaskIconCloud {
  mask-image: url(/2971fc5/icons/cloud.svg);
}

.MaskIconTag {
  mask-image: url(/2971fc5/icons/tag.svg);
}

.MaskIconNewFile,
.IconNewFile {
  mask-image: url(/2971fc5/icons/new-file.svg);
}

.MaskIconSend,
.IconSend {
  mask-image: url(/2971fc5/icons/send.svg);
}

.MaskIconStopCircle,
.IconStopCircle {
  mask-image: url(/2971fc5/icons/stop-circle.svg);
}

.MaskIconNewFolder,
.IconNewFolder {
  mask-image: url(/2971fc5/icons/new-folder.svg);
}

.MaskIconListFlat,
.IconListFlat {
  mask-image: url(/2971fc5/icons/list-flat.svg);
}

.MaskIconCollapseAll,
.IconCollapseAll {
  mask-image: url(/2971fc5/icons/collapse-all.svg);
}

.MaskIconFilter,
.IconFilter {
  mask-image: url(/2971fc5/icons/filter.svg);
}

.MaskIconBlank,
.IconBlank {
  mask-image: url(/2971fc5/icons/blank.svg);
}

.MaskIconCheck,
.IconCheck {
  mask-image: url(/2971fc5/icons/check.svg);
}

.MaskIconLock,
.IconLock {
  mask-image: url(/2971fc5/icons/lock.svg);
}

.MaskIconEllipsis,
.IconEllipsis {
  mask-image: url(/2971fc5/icons/ellipsis.svg);
}

.MaskIconBook,
.IconBook {
  mask-image: url(/2971fc5/icons/book.svg);
}

.MaskIconAdd,
.IconAdd {
  mask-image: url(/2971fc5/icons/add.svg);
}

.MaskIconTrash,
.IconTrash {
  mask-image: url(/2971fc5/icons/trash.svg);
}

.MaskIconSplitHorizontal,
.IconSplitHorizontal {
  mask-image: url(/2971fc5/icons/split-horizontal.svg);
}

.MaskIconReplace,
.IconReplace {
  mask-image: url(/2971fc5/icons/replace.svg);
}

.MaskIconReplaceAll,
.IconReplaceAll {
  mask-image: url(/2971fc5/icons/replace-all.svg);
}

.MaskIconChevronUp,
.IconChevronUp {
  mask-image: url(/2971fc5/icons/chevron-up.svg);
}

.MaskIconArrowLeft,
.IconArrowLeft {
  mask-image: url(/2971fc5/icons/arrow-left.svg);
}

.MaskIconArrowRight,
.IconArrowRight {
  mask-image: url(/2971fc5/icons/arrow-right.svg);
}

.MaskIconLinkExternal,
.IconLinkExternal {
  mask-image: url(/2971fc5/icons/link-external.svg);
}

.MaskIconExclude,
.IconExclude {
  mask-image: url(/2971fc5/icons/exclude.svg);
}

.MaskIconGoToFile,
.IconGoToFile {
  mask-image: url(/2971fc5/icons/go-to-file.svg);
}

.MaskIconDiscard,
.IconDiscard {
  mask-image: url(/2971fc5/icons/discard.svg);
}

.MaskIconRemove,
.IconRemove {
  mask-image: url(/2971fc5/icons/remove.svg);
}

.MaskIconError,
.IconError {
  mask-image: url(/2971fc5/icons/error.svg);
}

.MaskIconWarning,
.IconWarning {
  mask-image: url(/2971fc5/icons/warning.svg);
}

.MaskIconCircleFilled,
.IconCircleFilled {
  mask-image: url(/2971fc5/icons/circle-filled.svg);
}

.MaskIconInfo,
.IconInfo {
  mask-image: url(/2971fc5/icons/info.svg);
}

.MaskIconSymbolValue,
.IconSymbolValue,
.MaskIconSymbolDefault,
.IconSymbolDefault {
  mask-image: url(/2971fc5/icons/symbol-enum.svg);
}

.MaskIconSymbolProperty,
.IconSymbolProperty {
  mask-image: url(/2971fc5/icons/symbol-property.svg);
}

.MaskIconSymbolFunction,
.IconSymbolFunction {
  mask-image: url(/2971fc5/icons/symbol-method.svg);
}

.MaskIconSymbolVariable,
.IconSymbolVariable {
  mask-image: url(/2971fc5/icons/symbol-variable.svg);
}

.MaskIconPreview {
  mask-image: url(/2971fc5/icons/open-preview.svg);
}

.MaskIconSymbolKeyword,
.IconSymbolKeyword {
  mask-image: url(/2971fc5/icons/symbol-keyword.svg);
}

.MaskIconSymbolField,
.IconSymbolField {
  mask-image: url(/2971fc5/icons/symbol-field.svg);
}

.MaskIconEdit,
.IconEdit {
  mask-image: url(/2971fc5/icons/edit.svg);
}

.MaskIconSymbolFile,
.IconSymbolFile {
  mask-image: url(/2971fc5/icons/symbol-file.svg);
}

.MaskIconDebugPause {
  mask-image: url(/2971fc5/icons/debug-pause.svg);
}

.MaskIconDebugStepOver {
  mask-image: url(/2971fc5/icons/debug-step-over.svg);
}

.MaskIconDebugStepInto {
  mask-image: url(/2971fc5/icons/debug-step-into.svg);
}

.MaskIconDebugStepOut {
  mask-image: url(/2971fc5/icons/debug-step-out.svg);
}

.MaskIconDebugContinue {
  mask-image: url(/2971fc5/icons/debug-continue.svg);
}

.MaskIconTriangleRight {
  mask-image: url(/2971fc5/icons/triangle-right.svg);
}

.MaskIconTriangleDown {
  mask-image: url(/2971fc5/icons/triangle-down.svg);
}

.MaskIconDebugRestart {
  mask-image: url(/2971fc5/icons/debug-restart.svg);
}

.MaskIconDebugStop {
  mask-image: url(/2971fc5/icons/debug-stop.svg);
}

.MaskIconPreserveCase {
  mask-image: url(/2971fc5/icons/preserve-case.svg);
}

.MaskIconListTree {
  mask-image: url(/2971fc5/icons/list-tree.svg);
}

.MaskIconProgress {
  mask-image: url(/2971fc5/icons/progress.svg);
}

.MaskIconRepo {
  mask-image: url(/2971fc5/icons/repo.svg);
}

/* TODO decide */
.MaskIconRecordKey,
.MaskIconRecordKeys {
  mask-image: url(/2971fc5/icons/record-keys.svg);
}

.MaskIconKeyboardTab {
  mask-image: url(/2971fc5/icons/keyboard-tab.svg);
}

.MaskIconSortPrecedence {
  mask-image: url(/2971fc5/icons/sort-precedence.svg);
}
/*************/
/* Menu.css */
/*************/
/* based on https://github.com/microsoft/vscode/blob/91687c47955bd84db607ef8aaf24b7cf35bfd1ad/src/vs/base/browser/ui/menu/menu.ts#L1005 by Microsoft (License MIT) */

.Menu {
  top: 0;
  left: 0;
  position: absolute;
  background: var(--MenuBackground, rgb(60, 60, 60));
  color: var(--MenuForeground, white);
  box-shadow: var(--MenuBoxShadow, rgb(0 0 0 / 36%) 0px 2px 8px);
  user-select: none;
  min-width: 150px;
  margin: 0;
  padding: 4px 0;
  font-size: 13px;
  z-index: 1;
  outline: none;
  pointer-events: auto;
  border-radius: 5px;
  app-region: no-drag;
}

.MenuItem {
  height: 26px;
  padding: 0 28px;
  align-items: center;
  white-space: nowrap;
  position: relative;
  outline: none;
  display: flex;
  contain: content;
  margin: 0 4px;
  border-radius: 4px;
}

.MenuItemFocused {
  background: var(--MenuItemHoverBackground, #687f7b33);
  color: var(--MenuItemHoverForeground, inherit);
  outline: none;
}

.MenuItemDisabled,
.MenuItem[disabled],
.MenuItem[aria-disabled='true'] {
  color: var(--MenuItemDisabledForeground, var(--vscode-disabledForeground, rgb(204 204 204 / 50%)));
}

.MenuItemSubMenuArrowRight {
  width: 16px;
  height: 16px;
  display: block;
  mask-image: url(/2971fc5/icons/chevron-right.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  background: currentColor;
  margin-left: auto;
  margin-right: -20px;
  contain: strict;
}

.MenuItemSeparator {
  height: 11px;
  position: relative;
  contain: strict;
  display: flex;
  align-items: center;
}

.MenuItemSeparatorLine {
  width: 100%;
  height: 1px;
  background: var(--MenuItemSeparatorBackground, #606060);
}

.MenuItemCheckMark {
  padding: 0;
}

.MenuItemCheckmarkIcon {
  width: 26px;
  height: 26px;
  contain: strict;
  mask-size: 13px;
  mask-position: 50% 50%;
  background: currentColor;
  mask-repeat: no-repeat;
}

.MenuItemKeyBinding {
  padding-left: 2em;
  margin-left: auto;
}
/*************/
/* MessageAction.css */
/*************/
.MessageAction {
  text-decoration: underline;
  margin-left: 4px;
}
/*************/
/* Mobile.css */
/*************/
body {
  /* Disables pull-to-refresh since it interferes with scrolling */
  overscroll-behavior: contain;

  /* Disable tap highlight on chrome android */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 600px) {
  #QuickPick {
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: 90%;
  }
}

@media screen and (max-width: 600px) {
  #QuickPick {
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: 90%;
  }
}
/*************/
/* Notification.css */
/*************/
/* #Notifications {
  width: 100%;
  height: 100%;
} */

.Notification {
  color: white;
  background: red;
  z-index: 999;
  background: black;
  pointer-events: all;
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 250px;
  height: 75px;
  padding: 10px 5px;
  background: rgb(40, 46, 47);
  box-shadow: rgb(0 0 0 / 36%) 0px 0px 8px 2px;
}

.NotificationMessage {
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  user-select: text;
  margin: 0;
  padding: 0;
}

.NotificationOption {
  color: rgb(255, 255, 255);
  background-color: rgb(47, 98, 96);
  width: fit-content;
  width: -moz-fit-content;
  padding: 5px 10px;
  display: inline-block;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 4px;
  text-align: center;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}
/*************/
/* ProblemsIcon.css */
/*************/
.ProblemsIcon {
  width: 16px;
  height: 16px;
  contain: strict;
  mask-repeat: no-repeat;
  mask-size: 100%;
  mask-position: 50% 50%;
  background: currentColor;
}

.ProblemsErrorIcon {
  color: var(--ProblemsErrorIconForeground, #b64e4e);
  mask-image: url(/2971fc5/icons/error.svg);
}

.ProblemsWarningIcon {
  color: var(--ProblemsWarningIconForeground, #91b147);
  mask-image: url(/2971fc5/icons/warning.svg);
}
/*************/
/* Progress.css */
/*************/
.ProgressContainer {
  width: 100%;
  height: 2px;
  contain: strict;
}
/*************/
/* ScrollBar.css */
/*************/
.ScrollBar {
  position: absolute;
  right: 0;
  top: 0;
  width: 14px;
  bottom: 0;
  contain: strict;
  cursor: default;
}

.ScrollBarHorizontal,
.ScrollBarHorizontalSmall {
  left: 0;
  top: auto;
  height: 14px;
  width: auto;
}

.ScrollBarHorizontalSmall {
  height: 3px;
}

.ScrollBarLarge {
  width: 28px;
}

.ScrollBarSmall {
  width: 10px;
}
/*************/
/* Resizer.css */
/*************/
:root {
  --SashSize: 4px;
  --SashBackground: rgba(204, 204, 204, 0.13);
}

.Resizer {
  width: 2px;
  height: 100%;
  background-color: transparent;
  cursor: ew-resize;
  position: absolute;
  width: var(--SashSize);
  height: 100%;
  top: 0;
  contain: strict;
  outline: none;
  border: none;
  padding: 0;
}

.ResizerInner {
  contain: strict;
  height: 100%;
  width: 1px;
  background: var(--SashBackground);
}

.ResizerOne {
  left: var(--ResizerOneLeft);
}

.ResizerTwo {
  left: var(--ResizerTwoLeft);
}
/*************/
/* ScrollBarThumb.css */
/*************/
.ScrollBarThumb {
  width: 100%;
  /* height: 40px; */
  position: absolute;
  contain: strict;
  background: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6));
  height: var(--ScrollBarThumbHeight);
  top: var(--ScrollBarThumbTop);
}

.ScrollBarThumbActive {
  background: var(--ScrollBarThumbActiveBackground, rgba(83, 100, 100, 0.4));
}

.ScrollBarThumbHorizontal {
  height: 100%;
  width: auto;
}
/*************/
/* SearchField.css */
/*************/
:root {
  --InputValidationErrorBorder: #be1100;
  --DisabledForeground: rgba(204, 204, 204, 0.5);
}

.SearchFieldContainer {
  contain: content;
  display: flex;
  height: 26px;
  gap: 4px;
  flex: 1;
}

.SearchField {
  display: flex;
  border: 1px solid var(--InputBoxBorder, rgb(55, 65, 63));
  background: var(--InputBoxBackground, rgb(36, 41, 42));
  contain: strict;
  height: 26px;
  flex-grow: 1;
}

.SearchFieldButtons {
  padding-top: 2px;
  padding-right: 2px;
  contain: content;
  display: flex;
  gap: 2px;
}

.SearchFieldButton {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  color: white;
  contain: strict;
  width: 20px;
  height: 20px;
  cursor: pointer;
  padding: 1px;
  border-radius: 3px;
}

.SearchFieldButton:focus-visible {
  outline: 1px solid #3d5252;
  outline-offset: -1px;
}

.SearchFieldButton:where(:hover) {
  background: rgba(90, 93, 94, 0.31);
}

.SearchFieldButtonChecked {
  border-color: #a03f9b;
}

.SearchFieldButtonDisabled {
  color: var(--DisabledForeground);
  cursor: default;
}

.SearchFieldButtonDisabled:where(:hover) {
  background: transparent;
}

.SearchButtonReplaceAll {
  position: relative;
}

.SearchFieldError {
  border-color: var(--InputValidationErrorBorder);
}
/*************/
/* SearchHeader.css */
/*************/
:root {
  --SearchHeaderPaddingRight: 12px;
  --SearchHeaderPaddingLeft: 2px;
}
.SearchHeader {
  padding-top: 5px;
  contain: content;
}

.SearchHeaderTop {
  display: flex;
  contain: content;
  padding-right: var(--SearchHeaderPaddingRight);
  padding-left: var(--SearchHeaderPaddingLeft);
  gap: 2px;
}

.SearchHeaderTopRight {
  display: flex;
  flex-direction: column;
  flex: 1;
  contain: content;
  gap: 6px;
}

.SearchHeaderDetails {
  display: flex;
  position: relative;
  contain: strict;
  width: 100%;
  height: 30px;
  justify-content: space-between;
  padding-right: 10px;
  align-items: end;
}

.SearchHeaderDetailsExpanded {
  display: flex;
  flex-direction: column;
}

.ToggleDetails {
  width: 20px;
  height: 20px;
  --MaskIconSize: 15px;
  cursor: pointer;
  align-self: flex-start;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--WorkbenchForeground);
}

.SearchHeaderDetailsExpanded {
  padding: 10px;
  contain: content;
  padding-left: 20px;
  padding-top: 0;
}

.SearchHeaderDetailsHeading {
  font-size: 11px;
  font-weight: 400;
  margin: 0;
  overflow: hidden;
  padding: 4px 0 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(188, 190, 190);
  flex: 1;
}

.SearchHeaderDetailsExpandedTop {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
/*************/
/* SearchMessage.css */
/*************/
:root {
  --SearchMessageForeground: rgba(156, 162, 160, 0.65);
}

.ViewletSearchMessage {
  color: var(--SearchMessageForeground);
  padding-bottom: 8px;
  padding-top: 5px;
  contain: content;
  line-height: 13px;
}

.ViewletSearchMessageIndented {
  padding-left: 22px;
}

.SearchWarningMessage {
  color: var(--SearchMessageForeground);
  padding-left: 22px;
  padding-right: 8px;
  padding-bottom: 5px;
  contain: content;
}
/*************/
/* SearchToggleButton.css */
/*************/
.SearchToggleButton {
  background: transparent;
  border: none;
  padding: 0;
  height: auto;
  width: 16px;
  border-radius: 0;
  align-self: stretch;
  /* TODO contain */
}
/*************/
/* Select.css */
/*************/
.Select {
  appearance: none;
  contain: content;
  padding: 2px 23px 2px 8px;
  background: var(--DropDownBackground, #3c3c3c);
  color: var(--DropDownForeground, #f0f0f0);
  border: var(--DropDownBorder);
  min-width: 100px;
  contain: content;
  outline: none;
}

.Select .MaskIcon {
  width: 20px;
}

.CustomSelectContainer {
  position: relative;
  min-width: 0;
}

.Select:hover {
  background: var(--vscode-toolbar-hoverBackground, color-mix(in srgb, var(--vscode-editor-background) 80%, white));
}

button.Select[name='model-picker-toggle'],
button.Select[name='run-mode-picker-toggle'] button.Select[name='agent-mode-picker-toggle'] {
  display: flex;
  gap: 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--vscode-descriptionForeground, var(--vscode-disabledForeground));
  padding: 0 !important;
  min-width: 0;
}

button.Select[name='model-picker-toggle']:hover,
button.Select[name='run-mode-picker-toggle']:hover,
button.Select[name='agent-mode-picker-toggle']:hover {
  background: var(--vscode-toolbar-hoverBackground, color-mix(in srgb, var(--vscode-editor-background) 80%, white));
  color: var(--vscode-foreground);
}

button.Select[name='model-picker-toggle'] .SelectLabel,
button.Select[name='run-mode-picker-toggle'] .SelectLabel,
button.Select[name='agent-mode-picker-toggle'] .SelectLabel {
  width: auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.CustomSelectPopOver {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  margin: 0;
  z-index: 1;
}

.SelectLabel {
  font-size: 11px;
  display: flex;
  contain: content;
  align-items: center;
  pointer-events: none;
}

.Chat .Select .MaskIcon {
  width: 10px;
  height: 10px;
  pointer-events: none;
}
/*************/
/* SplitButton.css */
/*************/
.SplitButton {
  --MaskIconSize: 16px;
  background: var(--SplitButtonBackground, rgb(35, 112, 112));
  color: var(--SplitButtonForeground, white);
  height: 28px;
  contain: strict;
  display: flex;
  border-radius: 2px;
  margin-right: 12px;
  margin-left: 19px;
  margin-bottom: 6px;
}

.SplitButtonContent {
  contain: strict;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none;
}

.SplitButtonContent > .MaskIcon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  flex-shrink: 0;
}

.SplitButtonContent:where(:hover),
.SplitButtonContent:where(:focus),
.SplitButtonDropDown:where(:hover),
.SplitButtonDropDown:where(:focus) {
  background: var(--SplitButtonHoverBackground, #387674);
}

.SplitButtonDisabled {
  background: #2f6260;
  opacity: 0.4;
}

.SplitButtonContentDisabled,
.SplitButtonDropDownDisabled {
  cursor: default;
}

.SplitButtonSeparator {
  height: 90%;
  width: 1px;
  background: rgba(255, 255, 255, 0.4);
  contain: strict;
}

.SplitButtonDropDown {
  width: 25px;
  height: 100%;
  contain: strict;
  cursor: pointer;
  border-right: 1px solid transparent;
  outline: none;
}
/*************/
/* Symbol.css */
/*************/
:root {
  --SymbolValueForeground: #ee9d28;
  --SymbolPropertyForeground: #aaaaaa;
  --SymbolVariableForeground: #75beff;
  --SymbolFunctionForeground: #b180d7;
  --SymbolKeywordForeground: #9ca2a0;
  --SymbolFieldForeground: #75beff;
}

.SymbolValue,
.SymbolDefault {
  color: var(--SymbolValueForeground);
  mask-image: url(/2971fc5/icons/symbol-enum.svg);
}

.SymbolProperty {
  color: var(--SymbolPropertyForeground);
  mask-image: url(/2971fc5/icons/symbol-property.svg);
}

.SymbolFunction {
  color: var(--SymbolFunctionForeground);
  mask-image: url(/2971fc5/icons/symbol-method.svg);
}

.SymbolVariable {
  color: var(--SymbolVariableForeground);
  mask-image: url(/2971fc5/icons/symbol-variable.svg);
}

.SymbolKeyword {
  color: var(--SymbolKeywordForeground);
  mask-image: url(/2971fc5/icons/symbol-keyword.svg);
}

.SymbolField {
  color: var(--SymbolFieldForeground);
  mask-image: url(/2971fc5/icons/symbol-field.svg);
}
/*************/
/* TitleBarEntry.css */
/*************/
.TitleBarTopLevelEntry {
  display: flex;
  align-items: center;
  padding: 0 8px;
  contain: content;
  -webkit-app-region: no-drag;
  app-region: no-drag;
  background: transparent;
  border: none;
  color: inherit;
}

.TitleBarTopLevelEntryLabel {
  height: 22px;
  border-radius: 5px;
  background: var(--TitleBarItemHoverForeground, rgba(90, 93, 94, 0.31));
  pointer-events: none;
  padding: 0 8px;
  display: flex;
  align-items: center;
  /* contain: content; */
}

.TitleBarEntryActive {
  padding: 0;
}

/* TODO maybe have extra focus outline border */
/*
:focus {
  border: 2px solid green;
} */
/*************/
/* Tree.css */
/*************/
.Tree {
  position: relative;
  outline: none;
}
/*************/
/* TreeItem.css */
/*************/
:root {
  --TreeItemIgnoredBackground: #8c8c8c;
}

.TreeItem {
  color: var(--TreeItemForeground, rgb(188, 190, 190));
  display: flex;
  gap: 4px;
  height: 22px;
  line-height: 22px;
  contain: strict;
  width: 100%;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.TreeItem:where(:hover) {
  background: var(--TreeItemHoverBackground, rgba(64, 92, 80, 0.2));
  color: var(--TreeItemHoverForeground, #e0e0e0);
}

/* TODO don't use id for styling */
#TreeItemActive,
.TreeItemActive {
  background: var(--TreeItemActiveBackground, rgba(59, 71, 66, 0.5));
}

.decoration-ignore .Label {
  color: var(--TreeItemIgnoredBackground);
}
/*************/
/* TreeItems.css */
/*************/
.TreeItems {
  contain: strict;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
/*************/
/* Viewlet.css */
/*************/
.Viewlet {
  contain: strict;
  /* flex: 1; */
}

.ViewletError {
  color: lightgray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  width: 100%;
  text-align: center;
}
/*************/
/* ViewletActivityBar.css */
/*************/
.ActivityBar {
  color: var(--ActivityBarForeground);
  display: flex;
  flex-direction: column;
  contain: strict;
}
/*************/
/* ViewletDialog.css */
/*************/
.DialogContent {
  width: 520px;
  height: 280px;
  contain: strict;
  background: var(--WidgetBackground, #1f1f1f);
  color: var(--WidgetForeground, #cccccc);
  display: flex;
  padding: 10px;
  flex-direction: column;
  border-radius: 6px;
}

.DialogContent:focus {
  outline-width: 1px;
  outline-style: solid;
  outline-offset: -1px;
  outline-color: var(--FocusBorder, #3d5252);
  opacity: 1;
}

.DialogToolBarRow {
  height: 26px;
  contain: strict;
  justify-content: end;
  display: flex;
}

.DialogMessageRow {
  display: flex;
  gap: 24px;
  flex: 1;
  contain: strict;
  padding: 0 10px;
}

.DialogClose {
  position: relative;
  width: 22px;
  height: 22px;
  contain: strict;
  cursor: pointer;
  border-radius: 5px;
  --MaskIconSize: 16px;
}

.DialogClose:where(:hover) {
  background: var(--ToolBarHoverBackground, rgba(90, 93, 94, 0.31));
}

.DialogContentRight {
  display: flex;
  flex-direction: column;
  contain: strict;
  flex: 1;
}

.DialogIcon {
  width: 48px;
  height: 48px;
  contain: strict;
  position: relative;
  mask-size: 100%;
}

.DialogInfoIcon {
  background: var(--InfoIconForeground, #3794ff);
}

.DialogHeading {
  font-size: 18px;
  line-height: 22px;
  contain: strict;
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  user-select: text;
}

.DialogMessage {
  display: flex;
  gap: 10px;
  contain: strict;
  user-select: text;
  flex: 1;
}

.DialogButtonsRow {
  justify-content: end;
  display: flex;
  gap: 8px;
  contain: content;
  padding: 20px 10px 10px;
}
/*************/
/* ViewletColorPicker.css */
/*************/
:root {
  --ColorPickerColor: black;
  --ColorPickerOffsetX: 0px;
}

.ColorPicker {
  contain: strict;
  display: flex;
  flex-direction: column;
  background: var(--MainBackground);
  padding: 0 0;
  pointer-events: all;
  position: absolute;
}

.ColorPickerRectangle {
  contain: strict;
  flex: 1;
}

.ColorPickerBackgroundColor,
.ColorPickerLight,
.ColorPickerDark {
  position: absolute;
  inset: 0;
  contain: strict;
}

.ColorPickerBackgroundColor {
  background: var(--ColorPickerColor);
}

.ColorPickerLight {
  background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}

.ColorPickerDark {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0));
}

.ColorPickerSlider {
  height: 10px;
  width: 100%;
  background: linear-gradient(to right, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
  border-radius: 5px;
  position: relative;
  contain: strict;
}

.ColorPickerBottom {
  height: 50px;
  contain: strict;
  position: relative;
  display: flex;
  align-items: center;
}

.ColorPickerSliderWrapper {
  height: 30px;
  contain: strict;
  width: 100%;
  display: flex;
  align-items: center;
}

.ColorPickerSliderThumb {
  position: absolute;
  top: 15px;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid white;
  touch-action: none;
  background: var(--ColorPickerColor);
  contain: strict;
  translate: var(--ColorPickerOffsetX) 0;
  pointer-events: none;
}
/*************/
/* ViewletChat.css */
/*************/
:root {
  --ChatForeground: rgb(188, 190, 190);
  --ChatListPaddingInline: 6px;
  --ChatMessageContentBackground: rgba(108, 81, 110, 0.13);
}

.Chat {
  contain: strict;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  color: var(--ChatForeground);
}

.ChatActions {
  contain: content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ChatActions .MaskIcon {
  width: 16px;
  height: 16px;
  contain: strict;
}

.ChatList {
  contain: strict;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding-left: var(--ChatListPaddingInline);
  padding-right: var(--ChatListPaddingInline);
  outline: none;
}

.ChatDetails {
  contain: strict;
  display: flex;
  min-height: 0;
  padding: 8px;
}

.ChatDetailsContent {
  contain: strict;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 0;
  gap: 10px;
}

.ChatWelcomeMessage {
  contain: content;
  padding: 8px;
  display: flex;
  flex: 1;
}

.ChatName {
  flex: 1;
  display: flex;
  contain: strict;
  align-items: center;
}

.ChatMessages {
  flex: 1;
  contain: strict;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-color: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6)) transparent;
  scrollbar-width: thin;
  contain: strict;
  user-select: text;
}

/* TODO conflict with message.css */
.Chat .Message {
  display: flex;
  contain: content;
  flex-direction: column;
  padding-right: 3px;
  cursor: text;
  word-wrap: break-word;
  contain: content;
  height: auto;
}

.MessageUser {
  align-self: flex-end;
  padding-right: 10px;
}

.MessageAssistant {
  align-self: stretch;
  padding-left: 10px;
  padding-right: 10px;
}

.ChatMessageContent {
  contain: content;
  background: var(--ChatMessageContentBackground);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 19.5px;
  color: var(--ChatMessageForeground, #bcbebe);
}

.MessageAssistant .ChatMessageContent:not(.ChatImageMessageContent) {
  background: transparent;
  border-radius: 0;
  color: var(--vscode-editor-foreground, var(--ChatForeground));
  max-inline-size: 100%;
  padding: 0;
}

.ChatMessageContent .Markdown {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  contain: content;
}

.ChatAttachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ChatAttachment {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
  padding: 4px 10px;
  background: var(--vscode-badge-background, color-mix(in srgb, var(--vscode-editor-background) 88%, white));
  color: var(--vscode-badge-foreground, var(--vscode-foreground));
  font-size: 12px;
}

.ChatAttachmentLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ChatAttachmentPreview {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 4px;
  object-fit: cover;
}

.ChatAttachmentImage {
  border-color: var(--vscode-charts-blue);
}

.ChatAttachmentInvalidImage {
  border-color: var(--vscode-inputValidation-errorBorder, var(--vscode-errorForeground));
  color: var(--vscode-errorForeground, var(--vscode-foreground));
}

.ChatAttachmentTextFile {
  border-color: var(--vscode-charts-green, var(--vscode-widget-border, var(--vscode-panel-border)));
}

.ChatImageMessageContent {
  padding: 6px;
  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
  border-radius: 12px;
  background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
  overflow: hidden;
}

.ChatMessageImage {
  display: block;
  max-width: min(320px, 100%);
  max-height: min(320px, calc(100vh - 220px));
  border-radius: 8px;
  object-fit: contain;
  background: color-mix(in srgb, var(--vscode-editor-background) 88%, black);
}

.ChatListEmpty {
  contain: strict;
  flex: 1;
}

.Message .Markdown {
  margin: 0;
}

.ChatMessageLink {
  color: #4d94ff;
  text-decoration: underline;
  cursor: pointer;
}

.Message .Actions {
  gap: 8px;
  margin-top: 8px;
}

.Chat {
  position: relative;
}

.ChatViewDropOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px dashed transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--vscode-editor-foreground);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition:
    opacity 120ms ease-in-out,
    border-color 120ms ease-in-out,
    background-color 120ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ChatOverlays {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/*
.ChatOverlays > * {
  pointer-events: auto;
}
*/

.ChatViewDropOverlayActive {
  opacity: 1;
  pointer-events: auto;
  border-color: var(--vscode-focusBorder);
  background: color-mix(in srgb, var(--vscode-focusBorder) 12%, transparent);
}

.ChatMessageLink {
  color: #4d94ff;
  text-decoration: underline;
  cursor: pointer;
}

.ChatOrderedList,
.ChatUnorderedList {
  margin: 6px 0;
  padding-inline-start: 20px;
}

.ChatOrderedListItem,
.ChatUnorderedListItem {
  margin: 2px 0;
}

.MarkdownTable {
  width: 100%;
  margin: 6px 0;
  border-collapse: collapse;
  border: 1px solid var(--vscode-editorWidget-border);
}

.MarkdownTable th,
.MarkdownTable td {
  border: 1px solid var(--vscode-editorWidget-border);
  padding: 4px 8px;
  text-align: left;
}

.MarkdownTable th {
  background: var(--vscode-editorWidget-background);
}

.Viewlet.Chat.ChatFocus {
  background: linear-gradient(180deg, var(--ColorViewBackground, #1d2229) 0%, #1f252d 100%);
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: auto 1fr auto;
}

.Chat.ChatFocus .ChatHeader {
  grid-column: 1 / 3;
}

.Chat.ChatFocus .ProjectSidebar {
  background: color-mix(in srgb, var(--ColorSideBarBackground, #232b35) 88%, #1f2b38 12%);
  border-right: 1px solid var(--ColorBorder, #3a3d41);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 2 / 4;
  min-height: 0;
}

.Chat.ChatFocus .ProjectList {
  min-height: 0;
  overflow: auto;
  padding: 10px 8px 12px;
  scrollbar-color: color-mix(in srgb, var(--ColorScrollBarSliderBackground, #4b5563) 78%, transparent)
    color-mix(in srgb, var(--ColorSideBarBackground, #232b35) 92%, transparent);
  scrollbar-width: thin;
}

.Chat.ChatFocus .ProjectList::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.Chat.ChatFocus .ProjectList::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--ColorSideBarBackground, #232b35) 94%, transparent);
  border-radius: 999px;
}

.Chat.ChatFocus .ProjectList::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ColorScrollBarSliderBackground, #4b5563) 70%, transparent);
  border: 2px solid color-mix(in srgb, var(--ColorSideBarBackground, #232b35) 94%, transparent);
  border-radius: 999px;
}

.Chat.ChatFocus .ProjectList::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ColorScrollBarSliderHoverBackground, #667284) 80%, transparent);
}

.ProjectListGroup {
  border: 1px solid transparent;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}

.ProjectListItem {
  align-items: center;
  display: flex;
  gap: 6px;
  min-height: calc(var(--ChatListItemHeight) - 2px);
}

.ProjectListItemLabel {
  align-items: center;
  border-radius: 6px;
  color: var(--ColorForeground, #d5dbe3);
  cursor: pointer;
  display: flex;
  flex: 1;
  font-weight: 500;
  gap: 2px;
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  transition:
    background-color 80ms ease,
    color 80ms ease;
  white-space: nowrap;
}

.ProjectListChevron {
  color: color-mix(in srgb, var(--ColorForeground, #c8d0da) 70%, transparent);
  display: inline-block;
  flex: 0 0 12px;
  font-size: 11px;
  margin-right: 4px;
  text-align: center;
  width: 12px;
}

.ProjectListItemSelected {
  background: color-mix(in srgb, var(--ColorListInactiveSelectionBackground, #39424d) 84%, #2f3741 16%);
}

.ProjectListItem:not(.ProjectListItemSelected):hover,
.ProjectListItem:not(.ProjectListItemSelected):focus-within {
  background: color-mix(in srgb, var(--ColorListHoverBackground, #38414b) 50%, transparent);
}

.ProjectListItemSelected .ProjectListItemLabel {
  color: var(--ColorListInactiveSelectionForeground, #e5ebf2);
}

.ProjectListItemActions {
  display: flex;
  padding-right: 6px;
}

.ProjectListItemAddChatButton {
  align-items: center;
  background: color-mix(in srgb, var(--ColorButtonSecondaryBackground, #3a434f) 76%, transparent);
  border: 0;
  border-radius: 5px;
  color: var(--ColorForeground, #d0d8e2);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  height: 18px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  transition:
    opacity 90ms ease,
    background-color 90ms ease;
  visibility: hidden;
  width: 18px;
}

.ProjectListItem:hover .ProjectListItemAddChatButton,
.ProjectListItem:focus-within .ProjectListItemAddChatButton {
  opacity: 1;
  visibility: visible;
}

.ProjectListItemAddChatButton:hover,
.ProjectListItemAddChatButton:focus-visible {
  background: color-mix(in srgb, var(--ColorButtonSecondaryHoverBackground, #4a5460) 82%, transparent);
}

.ProjectSessionItem {
  align-items: center;
  display: flex;
  min-height: calc(var(--ChatListItemHeight) - 5px);
}

.ProjectSessionItemLabel {
  border-radius: 6px;
  color: color-mix(in srgb, var(--ColorForeground, #cfd7df) 92%, transparent);
  cursor: pointer;
  display: block;
  flex: 1;
  font-size: 12.5px;
  overflow: hidden;
  padding: 0 10px 0 28px;
  text-overflow: ellipsis;
  transition:
    background-color 80ms ease,
    color 80ms ease;
  white-space: nowrap;
}

.ProjectSessionItemSelected {
  background: color-mix(in srgb, var(--ColorListInactiveSelectionBackground, #353f4a) 86%, #2c3540 14%);
}

.ProjectSessionItem:not(.ProjectSessionItemSelected):hover,
.ProjectSessionItem:not(.ProjectSessionItemSelected):focus-within {
  background: color-mix(in srgb, var(--ColorListHoverBackground, #38414c) 46%, transparent);
}

.ProjectSessionItemSelected .ProjectSessionItemLabel {
  color: var(--ColorListInactiveSelectionForeground, #f2f6fc);
}

.Chat.ChatFocus .ProjectAddButton {
  background: color-mix(in srgb, var(--ColorButtonSecondaryBackground, #21252c) 72%, transparent);
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ColorBorder, #3a3d41) 70%, transparent);
  color: var(--ColorForeground, #d2d9e2);
  cursor: pointer;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  margin-top: auto;
  min-height: var(--ChatListItemHeight);
  padding: 0 12px;
  text-align: left;
  transition: background-color 80ms ease;
}

.Chat.ChatFocus .ProjectAddButton:hover,
.Chat.ChatFocus .ProjectAddButton:focus-visible {
  background: color-mix(in srgb, var(--ColorButtonSecondaryHoverBackground, #2a3039) 78%, transparent);
}

.ChatListEmpty,
.ChatMessages {
  margin: 0;
  min-height: 0;
}

.ChatFocus .ChatMessages > .Message,
.ChatFocus .ChatSendAreaContent {
  width: min(100%, var(--ChatFocusContentMaxWidth, 100%));
  margin-left: auto;
  margin-right: auto;
}

.ChatFocus .ChatMessages > .Message > .ChatMessageContent {
  max-inline-size: 100%;
}

.Chat .Select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--ColorForeground, #d5dbe3) 84%, transparent) 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--ColorForeground, #d5dbe3) 84%, transparent) 50%, transparent 50%);
  background-position:
    calc(100% - 10px) 50%,
    calc(100% - 6px) 50%;
  background-repeat: no-repeat;
  background-size:
    4px 4px,
    4px 4px;
  max-width: 60px;
  padding-right: 16px;
}

.MarkdownMathInline {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

.MarkdownQuote {
  border-left: 3px solid var(--ColorBorder, #3a3d41);
  margin: 8px 0;
  padding-left: 12px;
}

.MarkdownMathBlock {
  margin: 8px 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.ChatMessageContent hr {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ColorBorder, #3a3d41) 78%, transparent);
  display: block;
  height: 0;
  margin: 12px 0;
  width: 100%;
}

/* syntax highlight token colors */
.TokenComment {
  color: var(--ColorSymbolIconColorForeground, #7f8794);
}

.TokenString {
  color: var(--ColorChartsGreen, #a6d189);
}

.TokenNumber,
.TokenValue {
  color: var(--ColorChartsBlue, #8caaee);
}

.TokenKeyword,
.TokenTag {
  color: var(--ColorChartsPurple, #ca9ee6);
}

.TokenAttribute,
.TokenProperty {
  color: var(--ColorChartsOrange, #ef9f76);
}

.ChatMessageContent p + p {
  margin-top: 0.75em;
}

.MissingApiKeyForm {
  padding-top: 10px;
}

a.Button {
  text-decoration: none;
}

.ChatOrderedListItem {
  display: flex;
  contain: content;
  flex-wrap: wrap;
  gap: 3px;
}

.ChatOrderedListItem .FileIcon {
  display: none;
}

.ChatOrderedList {
  padding: 0;
  margin: 0;
}

.Chat .Insertion {
  color: green;
  contain: content;
}

.Chat .Deletion {
  color: red;
  contain: content;
}

:root {
  --WidgetBorder: white;
  --ChatScrollbarThickness: 10px;
  --ChatScrollbarTrack: transparent;
  --ChatScrollbarThumb: var(--vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4));
  --ChatScrollbarThumbHover: var(--vscode-scrollbarSlider-hoverBackground, rgba(100, 100, 100, 0.7));
  --ChatScrollbarThumbActive: var(--vscode-scrollbarSlider-activeBackground, rgba(191, 191, 191, 0.4));
}

.ChatList,
.ProjectList,
.ChatMessages {
  scrollbar-width: thin;
  scrollbar-color: var(--ChatScrollbarThumb) var(--ChatScrollbarTrack);
}

.ChatList::-webkit-scrollbar,
.ProjectList::-webkit-scrollbar,
.ChatMessages::-webkit-scrollbar {
  width: var(--ChatScrollbarThickness);
  height: var(--ChatScrollbarThickness);
}

.ChatList::-webkit-scrollbar-track,
.ProjectList::-webkit-scrollbar-track,
.ChatMessages::-webkit-scrollbar-track {
  background: var(--ChatScrollbarTrack);
}

.ChatList::-webkit-scrollbar-thumb,
.ProjectList::-webkit-scrollbar-thumb,
.ChatMessages::-webkit-scrollbar-thumb {
  background: var(--ChatScrollbarThumb);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.ChatList::-webkit-scrollbar-thumb:hover,
.ProjectList::-webkit-scrollbar-thumb:hover,
.ChatMessages::-webkit-scrollbar-thumb:hover {
  background: var(--ChatScrollbarThumbHover);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.ChatList::-webkit-scrollbar-thumb:active,
.ProjectList::-webkit-scrollbar-thumb:active,
.ChatMessages::-webkit-scrollbar-thumb:active {
  background: var(--ChatScrollbarThumbActive);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.ChatList::-webkit-scrollbar-corner,
.ProjectList::-webkit-scrollbar-corner,
.ChatMessages::-webkit-scrollbar-corner {
  background: transparent;
}

.ChatListMoreToggle {
  list-style: none;
  display: flex;
  align-items: center;
  min-height: var(--ChatListItemHeight);
  padding: 0 6px;
}

.ChatListMoreToggleButton {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 22px;
  padding: 0 6px 0 4px;
  border-radius: 4px;
  color: var(--vscode-descriptionForeground, var(--vscode-foreground));
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  user-select: none;
}

.ChatListMoreToggleButton:hover {
  background: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.06));
  color: var(--vscode-list-hoverForeground, var(--vscode-foreground));
}

.ChatListMoreToggleButton:focus {
  background: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px var(--vscode-focusBorder, #007fd4);
  color: var(--vscode-list-hoverForeground, var(--vscode-foreground));
  outline: none;
}

.ChatListMoreToggleChevron {
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.ChatListMoreToggleLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.LoadingText {
  background: linear-gradient(90deg, #888 25%, /* dim color  */ #fff 45%, /* bright peak */ #888 55%, #888 75%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s linear infinite;
}
/*************/
/* ViewletChatFocusMode.css */
/*************/
:root {
  --ChatForeground: rgb(188, 190, 190);
}

.Viewlet.Chat.ChatFocus {
  background: linear-gradient(180deg, var(--ColorViewBackground, #1d2229) 0%, #1f252d 100%);
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: auto 1fr auto;
}

.Chat.ChatFocus .ChatHeader {
  grid-column: 1 / 3;
}

.Chat.ChatFocus .ProjectSidebar {
  background: color-mix(in srgb, var(--ColorSideBarBackground, #232b35) 88%, #1f2b38 12%);
  border-right: 1px solid var(--ColorBorder, #3a3d41);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 2 / 4;
  min-height: 0;
}

.Chat.ChatFocus .ProjectList {
  min-height: 0;
  overflow: auto;
  padding: 10px 8px 12px;
  scrollbar-color: color-mix(in srgb, var(--ColorScrollBarSliderBackground, #4b5563) 78%, transparent)
    color-mix(in srgb, var(--ColorSideBarBackground, #232b35) 92%, transparent);
  scrollbar-width: thin;
}

.Chat.ChatFocus .ProjectList::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.Chat.ChatFocus .ProjectList::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--ColorSideBarBackground, #232b35) 94%, transparent);
  border-radius: 999px;
}

.Chat.ChatFocus .ProjectList::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ColorScrollBarSliderBackground, #4b5563) 70%, transparent);
  border: 2px solid color-mix(in srgb, var(--ColorSideBarBackground, #232b35) 94%, transparent);
  border-radius: 999px;
}

.Chat.ChatFocus .ProjectList::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ColorScrollBarSliderHoverBackground, #667284) 80%, transparent);
}

.ProjectListGroup {
  border: 1px solid transparent;
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}

.ProjectListItem {
  align-items: center;
  display: flex;
  gap: 6px;
  min-height: calc(var(--ChatListItemHeight) - 2px);
}

.ProjectListItemLabel {
  align-items: center;
  border-radius: 6px;
  color: var(--ColorForeground, #d5dbe3);
  cursor: pointer;
  display: flex;
  flex: 1;
  font-weight: 500;
  gap: 2px;
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  transition:
    background-color 80ms ease,
    color 80ms ease;
  white-space: nowrap;
}

.ProjectListChevron {
  color: color-mix(in srgb, var(--ColorForeground, #c8d0da) 70%, transparent);
  display: inline-block;
  flex: 0 0 12px;
  font-size: 11px;
  margin-right: 4px;
  text-align: center;
  width: 12px;
}

.ProjectListItemSelected {
  background: color-mix(in srgb, var(--ColorListInactiveSelectionBackground, #39424d) 84%, #2f3741 16%);
}

.ProjectListItem:not(.ProjectListItemSelected):hover,
.ProjectListItem:not(.ProjectListItemSelected):focus-within {
  background: color-mix(in srgb, var(--ColorListHoverBackground, #38414b) 50%, transparent);
}

.ProjectListItemSelected .ProjectListItemLabel {
  color: var(--ColorListInactiveSelectionForeground, #e5ebf2);
}

.ProjectListItemActions {
  display: flex;
  padding-right: 6px;
}

.ProjectListItemAddChatButton {
  align-items: center;
  background: color-mix(in srgb, var(--ColorButtonSecondaryBackground, #3a434f) 76%, transparent);
  border: 0;
  border-radius: 5px;
  color: var(--ColorForeground, #d0d8e2);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  height: 18px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  transition:
    opacity 90ms ease,
    background-color 90ms ease;
  visibility: hidden;
  width: 18px;
}

.ProjectListItem:hover .ProjectListItemAddChatButton,
.ProjectListItem:focus-within .ProjectListItemAddChatButton {
  opacity: 1;
  visibility: visible;
}

.ProjectListItemAddChatButton:hover,
.ProjectListItemAddChatButton:focus-visible {
  background: color-mix(in srgb, var(--ColorButtonSecondaryHoverBackground, #4a5460) 82%, transparent);
}

.ProjectSessionItem {
  align-items: center;
  display: flex;
  min-height: calc(var(--ChatListItemHeight) - 5px);
}

.ProjectSessionItemLabel {
  border-radius: 6px;
  color: color-mix(in srgb, var(--ColorForeground, #cfd7df) 92%, transparent);
  cursor: pointer;
  display: block;
  flex: 1;
  font-size: 12.5px;
  overflow: hidden;
  padding: 0 10px 0 28px;
  text-overflow: ellipsis;
  transition:
    background-color 80ms ease,
    color 80ms ease;
  white-space: nowrap;
}

.ProjectSessionItemSelected {
  background: color-mix(in srgb, var(--ColorListInactiveSelectionBackground, #353f4a) 86%, #2c3540 14%);
}

.ProjectSessionItem:not(.ProjectSessionItemSelected):hover,
.ProjectSessionItem:not(.ProjectSessionItemSelected):focus-within {
  background: color-mix(in srgb, var(--ColorListHoverBackground, #38414c) 46%, transparent);
}

.ProjectSessionItemSelected .ProjectSessionItemLabel {
  color: var(--ColorListInactiveSelectionForeground, #f2f6fc);
}

.Chat.ChatFocus .ProjectAddButton {
  background: color-mix(in srgb, var(--ColorButtonSecondaryBackground, #21252c) 72%, transparent);
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ColorBorder, #3a3d41) 70%, transparent);
  color: var(--ColorForeground, #d2d9e2);
  cursor: pointer;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  margin-top: auto;
  min-height: var(--ChatListItemHeight);
  padding: 0 12px;
  text-align: left;
  transition: background-color 80ms ease;
}

.Chat.ChatFocus .ProjectAddButton:hover,
.Chat.ChatFocus .ProjectAddButton:focus-visible {
  background: color-mix(in srgb, var(--ColorButtonSecondaryHoverBackground, #2a3039) 78%, transparent);
}

.ChatFocusMainArea {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ChatFocusMainArea > .ChatMessages {
  flex: 1;
  min-height: 0;
}

.ChatList {
  overflow-y: auto;
}

.ChatListItem {
  flex-shrink: 0;
}

.ChatListEmpty,
.ChatMessages {
  margin: 0;
  min-height: 0;
  padding: 0;
}

.ChatList {
  margin: 0;
  min-height: 0;
}

.Chat.ChatFocus .ChatList,
.Chat.ChatFocus .ChatListEmpty {
  display: none;
}

.Chat.ChatFocus .ChatMessages {
  grid-column: 2;
  grid-row: 2;
}

.Chat.ChatFocus .ChatSendArea {
  grid-column: 2;
  grid-row: 3;
  height: var(--ChatSendAreaHeight);
  min-height: var(--ChatSendAreaHeight);
}

.Chat.ChatFocus .ChatList,
.Chat.ChatFocus .ChatListEmpty {
  display: none;
}

.Chat.ChatFocus .ChatMessages {
  grid-column: 2;
  grid-row: 2;
}

.Chat.ChatFocus .ChatList,
.Chat.ChatFocus .ChatListEmpty {
  display: none;
}

.Chat.ChatFocus .ChatMessages {
  grid-column: 2;
  grid-row: 2;
}

.Chat.ChatFocus .ChatSendArea {
  grid-column: 2;
  grid-row: 3;
  height: var(--ChatSendAreaHeight);
  min-height: var(--ChatSendAreaHeight);
}
/*************/
/* ViewletChatModelPicker.css */
/*************/
.ChatModelPickerHeader {
  align-items: center;
  border-bottom: 1px solid var(--vscode-editorWidget-border);
  display: flex;
  gap: 8px;
  padding: 8px;
}

.ChatModelPickerHeader .InputBox {
  flex: 1;
}

.ChatGitBranchPickerMessage {
  padding: 6px 8px;
}

.ChatGitBranchPickerErrorMessage {
  color: var(--vscode-errorForeground, var(--vscode-foreground));
}

.ChatModelPickerContainer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.ChatModelPicker {
  position: static;
  display: flex;
  flex-direction: column;
  background: var(--MainBackground) !important;
  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
  height: var(--ChatModelPickerHeight);
  contain: strict;
  max-width: 300px;
  margin-left: 8px;
  margin-top: auto;
  margin-bottom: 90px;
  pointer-events: auto;
}

.RunModePickerContainer {
  display: flex;
  justify-content: flex-end;
}

.RunModePickerPopOver {
  overflow: hidden;
  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
  border-radius: 8px;
  background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--vscode-editor-background) 50%, black);
}

@media (max-width: 320px) {
  .ChatModelPicker {
    margin-left: 0;
  }
}
/*************/
/* ViewletChatTodoList.css */
/*************/
.ChatTodoList {
  background: var(--vscode-editorWidget-background);
  border: 1px solid var(--vscode-editorWidget-border);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}

.ChatTodoListHeader {
  border-bottom: 1px solid var(--vscode-editorWidget-border);
  color: var(--vscode-descriptionForeground);
  font-size: 12px;
  line-height: 18px;
  padding: 6px 10px;
}

.ChatTodoListItems {
  list-style: none;
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 4px 0;
}

.ChatTodoListItem {
  align-items: center;
  color: var(--vscode-foreground);
  display: flex;
  font-size: 12px;
  line-height: 18px;
  min-height: 24px;
  padding: 0 10px;
}

.ChatTodoListItem::before {
  color: var(--vscode-descriptionForeground);
  content: '○';
  display: inline-block;
  margin-right: 8px;
  width: 1em;
}

.ChatTodoListItemTodo::before {
  content: '○';
}

.ChatTodoListItem.todo::before {
  content: '○';
}

.ChatTodoListItemInProgress::before {
  color: var(--vscode-textLink-foreground);
  content: '◐';
}

.ChatTodoListItem.inProgress::before {
  color: var(--vscode-textLink-foreground);
  content: '◐';
}

.ChatTodoListItemCompleted {
  color: var(--vscode-disabledForeground);
}

.ChatTodoListItem.completed {
  color: var(--vscode-disabledForeground);
}

.ChatTodoListItemCompleted::before {
  color: var(--vscode-testing-iconPassed);
  content: '✓';
}

.ChatTodoListItem.completed::before {
  color: var(--vscode-testing-iconPassed);
  content: '✓';
}
/*************/
/* ViewletDebugChat.css */
/*************/
:root {
  --KeyBindingsEditorColor: #e1e2de;
}

.ChatDebugView {
  --EditorLineHeight: 20px;
}

.ChatDebugView {
  color: var(--KeyBindingsEditorColor);
  background: var(--MainBackground);
  padding: 8px;
  display: flex;
  height: 100%;
  box-sizing: border-box;
  gap: 8px;
  contain: strict;
  flex: 1;
  flex-direction: column;
}

.ChatDebugView .Editor {
  user-select: text;
}

.ChatDebugView .Gutter {
  padding-right: 8px;
}

.ChatDebugView--devtools {
  gap: 4px;
}

.ChatDebugView--devtools > .ChatDebugViewTimeline {
  flex: 0 0 auto;
}

.ChatDebugView--devtools .ChatDebugViewEvents {
  border-radius: 6px;
  margin-bottom: 0;
  overflow: hidden;
}

.ChatDebugViewDevtoolsMain {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
  contain: strict;
}

.ChatDebugViewDevtoolsSplit {
  display: flex;
  flex: 1;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: strict;
}

.ChatDebugViewEmpty {
  opacity: 0.8;
  contain: content;
  display: flex;
  align-items: center;
}

.ChatDebugViewError {
  color: var(--vscode-errorForeground, #f14c4c);
  white-space: normal;
  contain: content;
  display: flex;
}

.TableWrapper {
  height: calc(var(--ChatDebugViewTableHeaderHeight) + var(--ChatDebugViewTableBodyHeight));
  overflow: hidden;
  position: relative;
}

.Table {
  width: calc(100% - var(--ChatDebugViewTableScrollBarWidth));
}

.TableColZero {
  width: var(--ChatDebugViewTableColZeroWidth);
}

.TableColOne {
  width: var(--ChatDebugViewTableColOneWidth);
}

.TableColTwo {
  width: var(--ChatDebugViewTableColTwoWidth);
}

.TableColThree {
  width: var(--ChatDebugViewTableColThreeWidth);
}

.TableColFour {
  width: var(--ChatDebugViewTableColFourWidth);
}

.Resizers {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: var(--ChatDebugViewTableScrollBarWidth);
  top: 0;
}

.Resizer {
  background: transparent;
  border: 0;
  bottom: 0;
  cursor: col-resize;
  margin: 0;
  padding: 0;
  pointer-events: auto;
  position: absolute;
  top: 0;
  transform: translateX(calc(-0.5 * var(--ChatDebugViewSashWidth)));
  width: var(--ChatDebugViewSashWidth);
}

.ResizerOne {
  left: var(--ResizerOneLeft);
}

.ResizerTwo {
  left: var(--ResizerTwoLeft);
}

.ResizerThree {
  left: var(--ResizerThreeLeft);
}

.ResizerFour {
  left: var(--ResizerFourLeft);
}

.ResizerInner {
  background: var(--vscode-panel-border, rgba(255, 255, 255, 0.12));
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-0.5px);
  width: 1px;
}

.ChatDebugViewTimeline {
  contain: strict;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: var(--ChatDebugViewTimelineHeight);
}

.ChatDebugViewTimelineInteractive {
  flex: 1;
  min-height: 0;
  position: relative;
}

.ChatDebugViewDetailsBottom .Gutter {
  flex: 0 0 var(--ChatDebugViewDetailsLineNumberWidth);
  width: var(--ChatDebugViewDetailsLineNumberWidth);
}

.ChatDebugViewHeadersTable {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.ChatDebugViewHeadersSection {
  display: flex;
  flex-direction: column;
}

.ChatDebugViewHeadersSection + .ChatDebugViewHeadersSection {
  margin-top: 16px;
}

.ChatDebugViewHeadersSectionHeading {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--vscode-descriptionForeground, rgba(255, 255, 255, 0.7));
  cursor: pointer;
  display: flex;
  font-size: 11px;
  font-weight: 600;
  justify-content: flex-start;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  padding: 0;
  text-align: left;
  text-transform: uppercase;
}

.ChatDebugViewHeadersSectionHeading:hover {
  color: var(--vscode-editor-foreground);
}

.ChatDebugViewHeadersRow {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
}

.ChatDebugViewHeadersCell {
  border-bottom: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.12));
  min-width: 0;
  color: var(--vscode-editor-foreground);
  padding: 6px 10px;
  text-align: left;
  word-break: break-word;
}

.ChatDebugViewHeadersRowOdd {
  background: rgba(255, 255, 255, 0.02);
}

.ChatDebugViewHeadersRowEven {
  background: rgba(255, 255, 255, 0.04);
}

.ChatDebugViewHeadersCellName {
  font-weight: 500;
}

.ChatDebugViewHeadersSectionInfo {
  color: var(--vscode-descriptionForeground, rgba(255, 255, 255, 0.7));
  font-size: 11px;
  line-height: 1.4;
  margin-top: 8px;
}

.PreviewVirtualizedEditor {
  height: var(--ChatDebugViewPreviewViewportHeight);
  overflow: hidden;
  position: relative;
}

.PreviewVirtualizedEditor .Editor {
  width: calc(100% - var(--ChatDebugViewPreviewScrollBarWidth));
}

.PreviewTextScrollBar {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  height: var(--ChatDebugViewPreviewViewportHeight);
  position: absolute;
  right: 0;
  top: 0;
  width: var(--ChatDebugViewPreviewScrollBarWidth);
}

.PreviewTextScrollBarThumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  height: var(--ChatDebugViewPreviewScrollBarHeight);
  left: 2px;
  position: absolute;
  top: var(--ChatDebugViewPreviewScrollBarOffset);
  width: calc(100% - 4px);
}

.TableScrollBar {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  height: var(--ChatDebugViewTableBodyHeight);
  position: absolute;
  right: 0;
  top: var(--ChatDebugViewTableHeaderHeight);
  width: var(--ChatDebugViewTableScrollBarWidth);
}

.TableScrollBarThumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  height: var(--ChatDebugViewTableScrollBarHeight);
  left: 2px;
  position: absolute;
  top: var(--ChatDebugViewTableScrollBarOffset);
  width: calc(100% - 4px);
}

.TokenText {
  color: var(--vscode-editor-foreground);
}

.TokenString {
  color: var(--vscode-debugTokenExpression-string, #ce9178);
}

.TokenNumeric {
  color: var(--vscode-debugTokenExpression-number, #b5cea8);
}

.TokenBoolean {
  color: var(--vscode-debugTokenExpression-boolean, #569cd6);
}

.TokenKey,
.TokenAttributeName,
.TokenPropertyName {
  color: var(--vscode-symbolIcon-propertyForeground, #9cdcfe);
}

.TokenKeyword,
.TokenTag,
.TokenSelector {
  color: var(--vscode-symbolIcon-keywordForeground, #569cd6);
}

.TokenComment {
  color: var(--vscode-editorLineNumber-foreground, #6a9955);
}
/*************/
/* ViewletEditor.css */
/*************/
:root {
  --EditorRowHighlightedBackground: rgba(228, 245, 39, 0.6);
}

/* TODO this should not be global */
.Editor {
  width: 100%;
  height: 100%;
  background: var(--MainBackground);
  color: white;
  outline: none;
  border: none;
  font-family: var(--EditorFontFamily);
  white-space: pre;
  font-size: var(--EditorFontSize);
  letter-spacing: var(--EditorLetterSpacing);
  font-feature-settings: var(--EditorFontFeatureSettings);
  tab-size: var(--EditorTabSize);
  font-display: block;
  cursor: text;
  font-weight: var(--EditorFontWeight);
  display: flex;
}

.EditorContent {
  contain: strict;
  width: 100%;
  height: 100%;
}

.EditorLayers {
  contain: strict;
  width: 100%;
  height: 100%;
}

.EditorRows {
  white-space: pre;
  width: 100%;
  height: 100%;
  contain: strict;
}

.EditorRow {
  display: block;
  height: var(--EditorLineHeight);
  line-height: var(--EditorLineHeight);
  contain: strict;
}

.EditorRowHighlighted {
  background: var(--EditorRowHighlightedBackground);
}

.Editors {
  flex: 1;
}

.EditorCursor {
  width: 2px;
  height: var(--EditorLineHeight);
  position: absolute;
  top: 0;
  left: 0;
  background: var(--EditorCursorBackground, red);
  pointer-events: none;
  contain: strict;
}

.ScrollBarDiagnostics {
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  width: 14px;
}

.ScrollBarDiagnostic {
  height: 5px;
  background: red;
  width: 100%;
  position: absolute;
}

.EditorInput {
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  opacity: 0;
  padding: 0;
  border: 0;
  font-size: 1px; /* needs to be at least one pixel because otherwise chrome will not emit input events */
  top: -9999px;
  left: -9999px;
  /* contain: strict; */
  /* visibility: hidden; */
}

/* interesting: could do transform via css -> only set data-row, data-column on editor cursor */
/* .EditorCursor::after {
  position: absolute;
  content: attr(data-row-index);
} */

/* great css solution -> only nesting is bad -> can be avoided?
.Editor:not(:focus-within) .EditorCursor {
  display: none;
} */

.EditorSelection {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--EditorSelectionBackground);
}

.Token {
  contain: content;
}

.LayerCursor,
.LayerDiagnostics {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.Diagnostic {
  position: absolute;
  contain: strict;
}

.DiagnosticError {
  background: url(/2971fc5/icons/squiggly-error.svg) repeat-x bottom left;
}

.DiagnosticWarning {
  background: url(/2971fc5/icons/squiggly-warning.svg) repeat-x bottom left;
}

.Token.EditorGoToDefinitionLink {
  color: #4e94ce !important;
  text-decoration: underline;
  cursor: pointer;
}

.EditorOverlayMessage {
  padding: 1px 4px;
  background-color: #063b49;
  border: 1px solid #007acc;
  color: white;
  pointer-events: all;
  user-select: text;
}

.Link {
  text-decoration: underline;
}

.Gutter {
  contain: strict;
  width: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.Gutter:empty {
  display: none;
}

.LineNumber,
.DiffEditorLineNumber {
  color: var(--EditorLineNumberForeground, rgba(155, 162, 160, 0.3));
  contain: strict;
  margin-right: 1px;
  height: var(--EditorLineHeight);
  text-align: right;
}
/*************/
/* ViewletEditorCodeGenerator.css */
/*************/
.CodeGeneratorWidget {
  background: var(--HoverWidgetBackground, #282e2f);
  border: 1px solid;
  border-color: var(--EditorWidgetBorder, #454545);
  color: var(--ListForeground, white);
  border-radius: 2px;
  z-index: 922;
  pointer-events: all;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.CodeGeneratorMessage {
  font-size: 11px;
  padding: 3px;
}
/*************/
/* ViewletEditorCompletion.css */
/*************/
.EditorCompletion {
  background: var(--CompletionListBackground, #282e2f);
  color: var(--CompletionListForeground, white);
  user-select: none;
  font-size: 15px;
  pointer-events: all;
  border: 1px solid;
  border-color: var(--CompletionListBorder, #95a29d);
  font-family: var(--EditorFontFamily);
  position: absolute;
}

.EditorCompletionItem {
  height: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  contain: strict;
  gap: 5px;
  padding-left: 1px;
  position: absolute;
  cursor: pointer;
}

/* TODO reuse same highlight css for quickpick */
.EditorCompletionItemHighlight {
  color: var(--CompletionHighlightForeground, #e1b974);
  font-weight: 700;
  contain: content;
}

.EditorCompletionItem:where(:hover) {
  background: var(--CompletionListItemHoverBackground, rgba(64, 92, 80, 0.2));
}

.EditorCompletionItemFocused {
  background: var(--CompletionListItemActiveBackground, #405c50);
  color: var(--CompletionListItemActiveForeground);
}

/* TODO maybe put this all into editor */

/* Rename Widget */
.RenameWidget {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
}

/* Error Widget */
.EditorWidgetError {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  background: rgb(37, 35, 35);
  pointer-events: auto;
}

.EditorCompletionItemDeprecated {
  text-decoration: line-through;
}
/*************/
/* ViewletEditorCompletionDetail.css */
/*************/
.EditorCompletionDetails {
  position: absolute;
  z-index: 1;
  background: var(--CompletionListBackground, #282e2f);
  padding: 5px;
  pointer-events: all;
  border: 1px solid;
  border-color: var(--CompletionListBorder, #95a29d);
}

.CompletionDetailCloseButton {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
}
/*************/
/* ViewletEditorError.css */
/*************/
:root {
  --IconErrorForeground: rgb(182, 78, 78);
}

.Viewlet.Error {
  flex: 1;
}

.TextEditorError {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: rgb(156, 162, 160);
  padding-left: 16px;
  padding-right: 16px;
  user-select: text;
}

.EditorTextIcon {
  width: 48px;
  height: 48px;
  contain: strict;
  --MaskIconSize: 48px;
}

.EditorTextIconError {
  color: var(--IconErrorForeground);
}
/*************/
/* ViewletEditorHover.css */
/*************/
:root {
  --HoverWidgetForeground: #9ca2a0;
  --HoverWidgetBackground: #282e2f;
}

.EditorHover {
  background: var(--HoverWidgetBackground, #282e2f);
  border-color: var(--CompletionListBorder, #95a29d);
  border: 1px solid;
  bottom: 0;
  color: var(--HoverWidgetForeground, white);
  contain: content;
  cursor: text;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 20px;
  position: absolute;
  user-select: text;
  overflow: auto;
  pointer-events: all;
}

/* TODO use javascript scrollbar */
.EditorHover::-webkit-scrollbar {
  height: 14px;
}

.EditorHover::-webkit-scrollbar-track {
  background: transparent;
}

.EditorHover::-webkit-scrollbar-thumb {
  background: var(--EditorScrollBarBackground);
}

.HoverEditorRow {
  display: block;
  height: var(--EditorLineHeight);
  line-height: var(--EditorLineHeight);
  /* contain: strict; */
}

.HoverDisplayString {
  white-space: pre;
  /* contain: content; */
  font-family: var(--EditorFontFamily);
  font-size: var(--EditorFontSize);
  letter-spacing: var(--EditorLetterSpacing);
  font-feature-settings: var(--EditorFontFeatureSettings);
  tab-size: var(--EditorTabSize);
  font-display: block;
  padding: 4px 8px;
}

/* TODO don't use pseudo selectors */
.HoverDisplayString:not(:first-child) {
  border-top: 1px solid rgba(149, 162, 157, 0.5);
}

.HoverDocumentation {
  contain: content;
  font-size: 15px;
  line-height: 1.33333;
  padding: 4px 8px;
}

.HoverProblem {
  contain: content;
  display: flex;
}

.HoverProblemMessage {
  content: content;
}

.HoverProblemDetail {
  opacity: 0.6;
  contain: content;
  padding-left: 6px;
}
/*************/
/* ViewletEditorRename.css */
/*************/
.EditorRename {
  z-index: 22;
  pointer-events: all;
  position: absolute;
}

.RenameDetails {
  font-size: 13px;
  padding-left: 3px;
  padding-right: 3px;
}
/*************/
/* ViewletEditorSourceActions.css */
/*************/
.EditorSourceActions {
  background: var(--HoverWidgetBackground, #282e2f);
  border: 1px solid;
  border-color: var(--EditorWidgetBorder, #454545);
  color: var(--ListForeground, white);
  border-radius: 2px;
  z-index: 22;
  pointer-events: all;
  position: absolute;
}

.SourceActionHeading {
  height: 26px;
  contain: strict;
  padding: 0 10px;
  line-height: 26px;
  color: var(--DescriptionForeground, rgba(156, 162, 160, 0.7));
}

.SourceActionItem {
  height: 24px;
  contain: strict;
  padding: 0 10px;
  line-height: 24px;
  display: flex;
}

.SourceActionItem:where(:hover) {
  background: var(--ListHoverBackground);
  color: var(--ListHoverForeground);
}

.SourceActionItemFocused {
  background: var(--ListHoverBackground);
  color: var(--ListHoverForeground);
}

.SourceActionIcon {
  position: relative;
  width: 20px;
  height: 20px;
  --MaskIconSize: 14px;
}
/*************/
/* ViewletExplorer.css */
/*************/
:root {
  --DropTargetBackground: #062f4a;
  --InputValidationErrorBorder: #be1100;
}

.Explorer {
  outline: none;
  flex: 1;
}

.ListItems {
  user-select: none;
}

.DropTarget {
  background: var(--DropTargetBackground);
}
/*************/
/* ViewletFindWidget.css */
/*************/
:root {
  --ErrorForeground: #f48771;
  --FindWidgetBoxShadow: rgba(0, 0, 0, 0.36) 0px 0px 8px 2px;
}

.FindWidget {
  /* TODO create separate variable for this */
  background: var(--ActivityBarBackground);
  z-index: 1;
  display: flex;
  padding: 0 4px;
  position: absolute;
  --MaskIconSize: 16px;
  pointer-events: all;
  box-shadow: var(--FindWidgetBoxShadow);
}

.FindWidgetRight {
  display: flex;
  flex-direction: column;
  contain: strict;
  flex: 1;
  gap: 3px;
}

.FindWidgetFind {
  display: flex;
  contain: strict;
  flex: 1;
  padding-top: 3px;
}

.FindWidgetReplace {
  display: flex;
  contain: strict;
  flex: 1;
  align-items: center;
}

.FindWidgetDetails {
  display: flex;
  contain: content;
  align-items: center;
  height: 100%;
}

.FindWidgetMatchCount {
  align-items: center;
  contain: strict;
  display: flex;
  flex-shrink: 0;
  font-size: 13px;
  height: 100%;
  padding-left: 3px;
  white-space: nowrap;
  width: 70px; /* TODO make this configurable */
}

.FindWidgetMatchCountEmpty {
  color: var(--ErrorForeground);
}

.FindWidget .SearchField {
  height: var(--FindWidgetInputHeight);
}

.FindWidget .MultilineInputBox {
  height: 100%;
}

.FindWidgetActions {
  display: flex;
  contain: content;
  height: 25px;
  align-items: center;
}
/*************/
/* ViewletLayout.css */
/*************/
.Workbench {
  width: var(--AppWidth);
  height: var(--AppHeight);
  contain: strict;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}

.ContentArea {
  flex: 1;
  display: flex;
  contain: strict;
  /* flex-direction: column; */
}

.ActivityBar {
  background: var(--ActivityBarBackground);
  width: var(--ActivityBarWidth);
}

.SideBar {
  background: var(--SideBarBackground, rgb(30, 35, 36));
  width: var(--SideBarWidth);
}

.SecondarySideBar {
  background: var(--SideBarBackground, rgb(30, 35, 36));
  width: var(--SecondarySideBarWidth);
}

.Main {
  background: var(--MainBackground);
}

.StatusBar {
  background: var(--StatusBarBackground);
}

.TitleBar {
  background: rgb(40, 46, 47);
  background: var(--TitleBarBackground);
  height: var(--TitleBarHeight);
}

.Panel {
  background: var(--PanelBackground);
  height: var(--PanelHeight);
}
/*************/
/* ViewletList.css */
/*************/
.List {
  position: relative;
  flex: 1;
}

.ListItems {
  flex: 1;
  contain: strict;
  position: relative;
  height: 100%;
  outline: none;
}

/* TODO have list contain strict if possible */
.ContainContent {
  contain: content;
}
/*************/
/* ViewletMain.css */
/*************/
.Main {
  background: var(--MainBackground);
  display: flex;
  flex-direction: column;
  flex: 1;
  contain: strict;
}

.TextEditor {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.EditorContent {
  display: flex;
  width: 100%;
  height: 100%;
}

.EditorContentError,
.EditorContent--error {
  contain: strict;
  display: flex;
  flex-direction: column;
}
/*************/
/* ViewletQuickPick.css */
/*************/
/* TODO commit 9fcc3db9e37ec708459f3ba96715ca1286fc53b4 might be a bit faster
   for quickpick to open (3.3ms recalculcate style vs 4.2ms now)  */

/* TODO recalculate style is really slow in chrome for unknown reasons */
.QuickPick {
  position: absolute;
  width: 600px;
  top: 50px;
  left: 50%;
  margin-left: -300px; /* TODO maybe this should be 301px because of padding to be centered */
  padding: 0 1px 6px;
  background: var(--QuickPickBackground);
  color: var(--ListForeground);
  box-sizing: border-box;
  /* TODO is this useful? */
  contain: content !important;
  /* TODO is this useful? */
  /* transform: translate3d(0, 0, 0); */
  display: flex;
  flex-direction: column;
  pointer-events: all;
  /* inset: 0; */
  /* will-change: transform; */
  box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px 2px;
  z-index: 2;
}

.QuickPickHeader {
  display: flex;
  padding: 8px 6px 6px;
  height: 38px;
  contain: strict;
}

.QuickPickItems {
  outline: 0;
  margin: 0;
  padding: 0 5px;
  overflow: hidden;
  contain: content; /* TODO use contain strict */
  background: var(--QuickPickBackground);
}

.QuickPickItem {
  display: flex;
  white-space: nowrap;
  align-items: center;
  width: 100%;
  height: 22px;
  font-size: 13px;
  margin: 0;
  padding: 0 6px 0 11px;
  contain: strict;
  gap: 6px;
  line-height: 22px;
  border-radius: 3px;
}

.QuickPickItem:where(:hover) {
  background: var(--ListHoverBackground);
  color: var(--ListHoverForeground);
}

.QuickPickItemActive {
  color: var(--ListActiveSelectionForeground);
  background: var(--ListActiveSelectionBackground);
}

/* TODO avoid nesting */
.QuickPickItemActive .QuickPickItemDescription {
  color: color-mix(in oklab, var(--ListActiveSelectionForeground), var(--ListActiveSelectionBackground) 30%);
}

.QuickPickItemLabel {
  contain: content;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  flex-shrink: 0;
}

.QuickPickItemDescription {
  font-size: 0.9em;
  pointer-events: none;
  contain: content;
  /* TODO compute mixed color in javascript once for effiency */
  color: color-mix(in oklab, var(--ListForeground), var(--QuickPickBackground) 30%);
}

/* TODO use aria annouce for this */
.QuickPickCount {
  /* Screen Reader Only */
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* TODO reuse same highlight css for completions */
.QuickPickHighlight {
  color: var(--CompletionHighlightForeground, #e1b974);
  font-weight: 700;
  contain: content;
}

.QuickPickMaskIcon {
  display: block;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-size: var(--MaskIconSize);
  mask-position: 50% 50%;
  pointer-events: none;
  contain: strict;
  width: 20px;
  height: 20px;
  mask-size: 70%;
}
/*************/
/* ViewletSash.css */
/*************/
:root {
  --SashBorder: #444444;
}
.Sash {
  position: absolute;
  contain: strict;
  padding: 0;
  margin: 0;
  border: 0;
  z-index: 1;
  background: transparent;
  display: flex;
}

.Sash:active {
  background: var(--SashHoverBorder, #3d5252);
}

.Sash:active .SashBorder {
  background: var(--SashHoverBorder, #3d5252);
}

.SashVertical:active .SashBorder {
  width: 100%;
}

.SashHorizontal {
  height: 4px;
  cursor: row-resize;
  width: 100%;
  align-items: center;
}

.SashVertical {
  width: 4px;
  cursor: col-resize;
  height: 100%;
  justify-content: center;
}

.SashVisible {
  display: flex;
  justify-content: center;
}

.SashActive {
  background: var(--SashHoverBorder, #3d5252);
}

.SashResize {
  top: 0;
  right: 0;
  height: 100%;
}

.SashSideBar {
  left: var(--SashSideBarLeft);
}

.SashPreview {
  left: var(--SashPreviewLeft);
  border-left: 1px solid var(--SashBorder, gray);
}

.SashSecondarySideBar {
  left: var(--SashSecondarySideBarLeft);
}

.SashPanel {
  top: var(--SashPanelTop);
}

.SashBorder {
  height: 100%;
  width: 1px;
  background: var(--SashBorder, gray);
}
/*************/
/* ViewletSideBar.css */
/*************/
.SideBar {
  color: var(--SideBarForeground, white);
  display: flex;
  flex-direction: column;
  contain: strict;
}

.SideBarTitleArea {
  contain: strict;
  display: flex;
  height: 35px;
  line-height: 35px;
  padding: 0 8px;
}

.SideBarTitleAreaTitle {
  font-size: 11px;
  cursor: default;
  font-weight: 400;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  padding-left: 12px;
  contain: strict;
  flex: 1;
}
/*************/
/* ViewletStatusBar.css */
/*************/
.StatusBar {
  display: flex;
  justify-content: space-between;
}

.StatusBar {
  height: 23px; /* 22px content + 1px border top */
  border-top: 1px solid var(--StatusBarBorderTopColor);
  display: flex;
  color: var(--StatusBarForeground, rgb(98, 112, 106));
  display: flex;
  justify-content: space-between;
}

.StatusBarItemsLeft,
.StatusBarItemsRight {
  /* contain: content; */
  margin: 0;
  display: flex;
}

.StatusBarItemsLeft {
  padding-left: 7px;
}

.StatusBarItemsRight {
  padding-right: 7px;
}

.StatusBarItem {
  display: flex;
  line-height: 22px;
  height: 100%;
  outline: none;
  padding: 0 5px;
  margin: 0 3px;
  cursor: pointer;
  font-size: 12px;
  align-items: center;
  /* contain: content; */
}

.StatusBarItem:hover {
  background: rgba(255, 255, 255, 0.12);
}

.StatusBarItem:active {
  background: rgba(255, 255, 255, 0.18);
}

.StatusBarIcon {
  outline: none;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 1em;
  background: currentColor;

  /* TODO have common icon css for activity bar and status bar */
  width: 1em;
  height: 1em;
  display: block;
  margin-right: 4px;
}

.StatusBarItem {
  background: transparent;
  border: none;
  color: inherit;
  display: flex;
  contain: content;
}

.StatusBarItemLabel {
  contain: content;
  display: flex;
  flex: 1;
  height: 100%;
}

.StatusBarIcon {
  width: 30px;
  height: 19px;
  contain: strict;
}
/*************/
/* ViewletTitleBar.css */
/*************/
.TitleBar {
  display: flex;
  color: var(--TitleBarForeground, rgba(204, 204, 204, 0.6));
  -webkit-app-region: drag;
  app-region: drag;
  contain: strict;
}

.TitleBarActive {
  color: var(--TitleBarForegroundActive, rgb(204, 204, 204));
  background: var(--TitleBarActiveBackground, var(--TitleBarBackground));
}
/*************/
/* ViewletTitleBarButtons.css */
/*************/
.TitleBarButtons {
  margin-left: auto;
  app-region: drag;
  contain: strict;
  flex-grow: 2;
  display: flex;
  width: 20%;
}

.TitleBarButton {
  width: 46px;
  height: 100%;
  contain: strict;
  background: transparent;
  border: none;
  color: currentColor;
  app-region: no-drag;
}

.TitleBarButton:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
}

.TitleBarButtonMinimize {
  margin-left: auto;
}

.TitleBarButtonClose:hover {
  background-color: var(--TitleBarButtonCloseHoverBackground, rgba(232, 17, 35, 0.9));
  color: var(--TitleBarButtonCloseHoverForeground, currentColor);
}
/*************/
/* ViewletTitleBarIcon.css */
/*************/
.TitleBarIcon {
  contain: strict;
  flex-basis: 30px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: 100%;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.TitleBarIconIcon {
  width: 16px;
  height: 16px;
  contain: strict;
}
/*************/
/* ViewletTitleBarMenuBar.css */
/*************/
.TitleBarMenuBar {
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
  contain: content;
  flex-grow: 2;
  outline: none;
  width: 20%;
}
/*************/
/* ViewletTitleBarTitle.css */
/*************/
.TitleBarTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  contain: content;
  width: 60%;
  max-width: fit-content;
}
/*************/
/* WebView.css */
/*************/
.WebView {
  contain: strict;
  position: absolute;
  display: flex;
  background: var(--MainBackground);
}

/* TODO this wrapper element might not be needed */
.WebViewWrapper {
  display: flex;
  flex: 1;
  contain: strict;
}

/* TODO make iframe background configurable through extensions.json
   For example, markdown preview might want a white background
*/
.WebViewIframe {
  flex: 1;
  contain: strict;
  border: none;
  background: var(--MainBackground);
}
/*************/
/* Welcome.css */
/*************/
.Welcome {
  contain: strict;
  width: 100%;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 13px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.WelcomeMessage {
  color: var(--WorkbenchForeground);
  margin: 0;
}
/*************/
/* Widgets.css */
/*************/
.Widgets {
  contain: strict;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  backface-visibility: hidden;
}

/* TODO maybe hide widgets container if empty*/
.Widgets:empty {
  display: none;
}
