/********************************************************************************
 * Copyright (C) 2025 EclipseSource GmbH.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * This Source Code may also be made available under the following Secondary
 * Licenses when the conditions for such availability set forth in the Eclipse
 * Public License v. 2.0 are satisfied: GNU General Public License, version 2
 * with the GNU Classpath Exception which is available at
 * https://www.gnu.org/software/classpath/license.html.
 *
 * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 ********************************************************************************/

/* Import base configuration styles */
@import "./ai-configuration-shell.css";
@import "./ai-configuration-base.css";
@import "./ai-configuration-list-detail.css";
@import "./ai-configuration-table.css";
@import "./ai-configuration-hierarchical.css";

/* Import widget-specific styles */
@import "./widgets/model-aliases-configuration.css";

/* Override preferences grid layout for AI Configuration widgets */
.ai-configuration-widget.theia-settings-container {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-template-areas: none;
  max-width: none;
  padding: 0;
}

/* Override max-width constraint from preferences CSS */
.theia-settings-container:has(.ai-configuration-widget),
.ai-configuration-widget.theia-settings-container {
  max-width: none;
  width: 100%;
}

/* Override grid-area assignments from preferences CSS */
.ai-configuration-widget .preferences-tree-widget,
.ai-configuration-widget .preferences-editor-widget {
  grid-area: auto;
  overflow: auto;
}

.ai-configuration-widget {
  max-width: 1000px;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ai-configuration-widget [role="tablist"] {
  overflow: scroll;
  background-color: var(--theia-editor-background);
  border-bottom: var(--theia-border-width) solid var(--theia-widget-border);
}

.ai-configuration-widget [role="tablist"]::-webkit-scrollbar {
  height: 4px;
}

.theia-ai-settings-container {
  padding: var(--theia-ui-padding);
}

.theia-settings-container .settings-section-subcategory-title.ai-settings-section-subcategory-title {
  padding-left: 0;
}

.ai-templates {
  display: flex;
  flex-direction: column;
  gap: calc(var(--theia-ui-padding) / 2);
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}

.template-renderer {
  display: flex;
  flex-direction: column;
  padding: var(--theia-ui-padding);
}

.template-header {
  margin-bottom: calc(var(--theia-ui-padding) / 2);
}

.template-controls {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
}

.template-select-label {
  margin-right: calc(var(--theia-ui-padding) / 2);
}

.template-variant-selector {
  min-width: 120px;
}

.template-variant-selector.error {
  border-color: var(--theia-errorForeground);
  background-color: var(--theia-errorBackground, rgba(255, 0, 0, 0.1));
  color: var(--theia-errorForeground);
}

#ai-variable-configuration-container-widget,
#ai-agent-configuration-container-widget,
#ai-model-aliases-configuration-widget {
  flex: 1;
  overflow: hidden;
}

/* Section headers and spacing */
.settings-section-title {
  font-size: var(--theia-ui-font-size3);
  font-weight: 600;
  margin: 0 0 calc(var(--theia-ui-padding) * 1.5) 0;
  padding: 0 0 calc(var(--theia-ui-padding) / 2) 0;
  border-bottom: var(--theia-border-width) solid var(--theia-widget-border);
}

.settings-section-title pre {
  font-size: calc(var(--theia-ui-font-size0) * 0.9);
  color: var(--theia-descriptionForeground);
  margin-top: calc(var(--theia-ui-padding) / 2);
}

/* Agent title with toggle */
.agent-title-with-toggle {
  display: block;
}

.agent-title-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(var(--theia-ui-padding) * 2);
  padding-bottom: calc(var(--theia-ui-padding) * 2);
}

.ai-id-label {
  display: inline-block;
  margin-left: var(--theia-ui-padding);
}

.agent-toggles {
  display: flex;
  flex-direction: column;
  gap: calc(var(--theia-ui-padding) * 1.5);
  align-items: flex-end;
}

.agent-enable-toggle {
  display: flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding));
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.agent-enable-toggle.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.toggle-label {
  color: var(--theia-foreground);
  font-size: var(--theia-ui-font-size1);
  font-weight: normal;
}

/* Agent status indicator in tree */
.agent-status-indicator {
  font-size: var(--theia-ui-font-size3);
  margin-right: var(--theia-ui-padding);
  display: inline-block;
  line-height: var(--theia-content-line-height);
  align-content: center;
}

.agent-status-indicator.agent-enabled {
  color: var(--theia-charts-green);
}

.agent-status-indicator.agent-disabled {
  color: var(--theia-descriptionForeground);
  opacity: 0.5;
}

/* LLM Requirements and Agent-Specific Variables - Table-like layout */
.ai-llm-requirement-item,
.ai-agent-specific-variable-item {
  border-top: var(--theia-border-width) solid var(--theia-widget-border);
  border-bottom: var(--theia-border-width) solid var(--theia-widget-border);
  padding: calc(var(--theia-ui-padding) * 1.5) 0;
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}

.ai-llm-requirement-item:first-of-type,
.ai-agent-specific-variable-item:first-of-type {
  margin-top: calc(var(--theia-ui-padding));
}

.ai-configuration-value-row {
  display: grid;
  grid-template-columns: 10em 1fr;
  gap: calc(var(--theia-ui-padding) * 2);
  align-items: start;
  padding: calc(var(--theia-ui-padding) / 2) 0;
}

.ai-configuration-value-row-label {
  font-weight: 500;
  color: var(--theia-foreground);
  text-align: left;
  padding-right: var(--theia-ui-padding);
  line-height: 1.4;
}

.ai-configuration-value-row-value {
  color: var(--theia-foreground);
  word-break: break-word;
}

.ai-configuration-value-row-value.ai-alias-evaluates-to-unresolved {
  color: var(--theia-descriptionForeground);
}

.ai-configuration-description {
  color: var(--theia-descriptionForeground);
  font-size: var(--theia-ui-font-size1);
  margin-top: calc(var(--theia-ui-padding) * 1.5);
}

.ai-configuration-description a {
  color: var(--theia-textLink-foreground);
  cursor: pointer;
  text-decoration: none;
}

.ai-configuration-description a:hover {
  text-decoration: underline;
}

.settings-section-subcategory-title {
  font-size: var(--theia-ui-font-size2);
  font-weight: 600;
  margin: calc(var(--theia-ui-padding) * 3) 0 calc(var(--theia-ui-padding) * 1.5) 0;
  padding: 0;
  color: var(--theia-foreground);
}

/* Collapsible read-only subsection (e.g. the "Used …" reference lists): a clickable subcategory header
   with a leading chevron and a trailing item count. */
.ai-collapsible-subsection-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
  cursor: pointer;
  user-select: none;
}

.ai-collapsible-subsection-header:focus-visible {
  outline: 1px solid var(--theia-focusBorder);
  outline-offset: 2px;
}

/* The chevron hangs in the left margin so the title text lines up with the non-collapsible sibling
   subcategory titles instead of looking indented under the section above. */
.ai-collapsible-subsection-chevron {
  position: absolute;
  left: -1.25em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theia-descriptionForeground);
}

.ai-collapsible-subsection-count {
  font-size: var(--theia-ui-font-size0);
  font-weight: normal;
  color: var(--theia-badge-foreground);
  background: var(--theia-badge-background);
  border-radius: 10px;
  padding: 0 calc(var(--theia-ui-padding) / 1.5);
}

/* Detail pane content sections */
.ai-configuration-detail>div {
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}

.ai-configuration-detail>div:last-child {
  margin-bottom: 0;
}

/* Agent description and enable checkbox */
.ai-configuration-detail label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding) / 2);
  cursor: pointer;
  user-select: none;
}

.ai-configuration-detail label input[type="checkbox"] {
  margin: 0;
}

/* Variable and Agent reference lists */
.variable-references,
.function-references {
  list-style: none;
  padding: calc(var(--theia-ui-padding) * 1.5) 0;
  margin: 0;
  border-top: var(--theia-border-width) solid var(--theia-widget-border);
  border-bottom: var(--theia-border-width) solid var(--theia-widget-border);
}

/* Warning under an agent-detail subsection title (e.g. server tools being auto-approved), matching the
   wording and icon of the chat input's capabilities popup. */
.ai-agent-section-warning {
  display: flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding) / 1.5);
  margin: 0 0 var(--theia-ui-padding);
  color: var(--theia-descriptionForeground);
  font-size: var(--theia-ui-font-size0);
}

.ai-agent-section-warning .codicon-warning {
  flex: none;
  color: var(--theia-editorWarning-foreground);
}

/* Agent-specific variables already have per-item borders, remove the list-level ones */
.variable-references:has(.ai-agent-specific-variable-item) {
  border-top: none;
  border-bottom: none;
  padding: 0;
}

.variable-reference,
.function-reference {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
  padding: calc(var(--theia-ui-padding) / 2);
}

/* Agent chips are interactive buttons: reset the native button chrome and add a visible focus ring. */
button.agent-chip {
  border: none;
  font-family: inherit;
  cursor: pointer;
}

button.agent-chip:focus-visible {
  outline: 1px solid var(--theia-focusBorder);
  outline-offset: 1px;
}

/* Visually hidden but available to assistive tech (used for the copy confirmation live region). */
.ai-variable-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A muted label followed by the read-only id in a bordered code chip (never the old error-red style). */
.ai-variable-id-row {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
}

.ai-variable-id-label {
  color: var(--theia-descriptionForeground);
  font-size: var(--theia-ui-font-size0);
}

.ai-variable-id-value {
  font-family: var(--theia-editor-font-family, monospace);
  color: var(--theia-foreground);
  background-color: var(--theia-editor-background);
  border: var(--theia-border-width) solid var(--theia-widget-border);
  border-radius: 4px;
  padding: 0 6px;
}

/* Shared layout for the "Arguments" and "Used by agents" sections of an expanded row. */
.ai-variable-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--theia-ui-padding) / 2);
}

.ai-variable-section-label {
  color: var(--theia-descriptionForeground);
  font-size: var(--theia-ui-font-size0);
  font-weight: 600;
}

.ai-variable-section-note {
  color: var(--theia-descriptionForeground);
}

/* A bordered, rounded list of arguments with 1px dividers between rows (no table/zebra look). */
.ai-variable-args-container {
  border: var(--theia-border-width) solid var(--theia-widget-border);
  border-radius: 6px;
  overflow: hidden;
}

.ai-variable-arg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--theia-ui-padding);
  padding: calc(var(--theia-ui-padding) * 0.75) var(--theia-ui-padding);
}

.ai-variable-arg-row+.ai-variable-arg-row {
  border-top: var(--theia-border-width) solid var(--theia-widget-border);
}

/* Fixed-width name column so descriptions line up across rows. */
.ai-variable-arg-name {
  flex: none;
  min-width: 130px;
  font-family: var(--theia-editor-font-family, monospace);
  color: var(--theia-textPreformat-foreground);
}

/* Small outlined pill; "optional" vs "required" shown explicitly instead of relying on an absent marker. */
.ai-variable-arg-badge {
  flex: none;
  border: var(--theia-border-width) solid var(--theia-widget-border);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 0.85em;
  color: var(--theia-descriptionForeground);
}

/* Grows to fill the row and wraps under the name on narrow widths instead of overflowing. */
.ai-variable-arg-description {
  flex: 1 1 200px;
  min-width: 0;
  color: var(--theia-descriptionForeground);
}

.ai-variable-arg-enum {
  display: block;
  margin-top: calc(var(--theia-ui-padding) / 2);
  color: var(--theia-descriptionForeground);
  font-size: var(--theia-ui-font-size0);
}

.ai-variable-agent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agent-tag {
  padding: calc(var(--theia-ui-padding) * 2 / 3);
  margin-left: var(--theia-ui-padding);
  padding-top: 0px;
  padding-bottom: 0px;
  border-radius: calc(var(--theia-ui-padding) * 2 / 3);
  background: hsla(0, 0%, 68%, 0.31);
}

.configuration-agents-add {
  margin: calc(var(--theia-ui-padding) * 2) var(--theia-ui-padding);
}

.configuration-agents-add button {
  width: 100%;
  margin-left: 0;
}

/* Prompt Fragments Configuration Styles */
.configuration-variables-list,
.token-usage-configuration-container,
.ai-tools-configuration-container,
.ai-prompt-fragments-configuration {
  padding: var(--theia-ui-padding);
  max-width: 1200px;
}

.prompt-fragments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--theia-panelTitle-activeBorder);
}

.prompt-fragments-header h2 {
  margin: 0;
}

.global-actions {
  display: flex;
  gap: 10px;
}

.global-action-button {
  padding: 6px 12px;
  background-color: transparent;
  color: var(--theia-foreground);
  border: 1px solid var(--theia-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.global-action-button:hover {
  background-color: var(--theia-list-hoverBackground);
}

.prompt-fragments-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.prompt-fragment-group {
  border: 1px solid var(--theia-panelTitle-activeBorder);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
  background-color: var(--theia-editorWidget-background);
}

.prompt-customization {
  border: 1px solid var(--theia-panelTitle-activeBorder);
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: var(--theia-editor-background);
}

.prompt-customization.active-customization {
  border: 3px solid var(--theia-successBackground);
}

.prompt-customization-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}

.prompt-customization-title {
  display: flex;
  gap: 8px;
  align-items: center;
}

.prompt-customization-actions {
  display: flex;
  gap: 8px;
}

.prompt-customization-description {
  padding: 0px 15px;
  color: var(--theia-descriptionForeground);
  font-size: 12px;
  margin-bottom: 5px;
  font-style: italic;
}

.expansion-icon {
  color: var(--theia-descriptionForeground);
  font-size: 14px;
}

.template-action-button {
  background-color: transparent;
  color: var(--theia-foreground);
  border: 1px solid var(--theia-border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.template-action-button:hover {
  background-color: var(--theia-list-hoverBackground);
}

.template-action-button.reset-button {
  color: var(--theia-foreground);
  border-color: var(--theia-border);
}

.template-action-button.config-button {
  color: var(--theia-foreground);
  border-color: var(--theia-border);
}

.template-action-button.delete-button {
  color: var(--theia-errorForeground);
  border-color: var(--theia-errorForeground);
}

.template-action-button.delete-button:hover {
  background-color: var(--theia-errorBackground);
}

.badge {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.default-variant {
  background: hsla(0, 0%, 68%, 0.31);
  color: var(--theia-foreground);
}

.active-indicator {
  background-color: var(--theia-successBackground);
  color: var(--theia-editor-background);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.selected-indicator {
  background-color: var(--theia-button-background);
  color: var(--theia-editor-background);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.source-uri-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--theia-foreground);
  border: 1px solid var(--theia-border);
  border-radius: 4px;
  height: 22px;
  width: 22px;
  margin-left: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.source-uri-button:hover {
  background-color: var(--theia-list-hoverBackground);
}

.no-fragments {
  text-align: center;
  padding: 30px;
  color: var(--theia-descriptionForeground);
  font-style: italic;
}

/* Template content collapsable styles */
.template-content-container {
  padding: 10px;
  background-color: var(--theia-list-focusBackground);
}

.template-toggle-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.template-toggle-button:hover {
  background-color: var(--theia-list-hoverBackground);
}

.template-expansion-icon {
  margin-right: 8px;
  color: var(--theia-descriptionForeground);
  font-size: 14px;
}

.template-content {
  margin-top: 10px;
  padding: 10px;
  background-color: var(--theia-editor-inactiveSelectionBackground);
  border-radius: 4px;
  overflow-x: auto;
}

.template-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
}

.agent-chips-container {
  display: flex;
  gap: 6px;
}

/* Canonical navigable agent chip: a blue badge (button colours) with a leading agent icon. Every "used by
   agents / agents using this …" surface (Skills, Slash Commands, Variables, Model Aliases) uses this single
   style so agent links look identical everywhere. */
.agent-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--theia-ui-padding) / 2);
  background-color: var(--theia-button-background);
  color: var(--theia-button-foreground);
  padding: calc(var(--theia-ui-padding) / 3) calc(var(--theia-ui-padding) / 1.5);
  border-radius: 1em;
  font-size: var(--theia-ui-font-size0);
  font-weight: 500;
  white-space: nowrap;
}

/* Prompt Variants improvements */
.prompt-variants-container {
  margin-bottom: 20px;
}

.prompt-fragment-section {
  border: 1px solid var(--theia-panelTitle-activeBorder);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
  background-color: var(--theia-editorWidget-background);
}

.prompt-fragment-section.selected-variant {
  border: 3px solid var(--theia-button-background);
}

.prompt-fragment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--theia-ui-padding) var(--theia-ui-padding);
  cursor: pointer;
  background-color: var(--theia-editor-background);
  transition: background-color 0.2s;
}

.prompt-fragment-header.expanded {
  border-bottom: 1px solid var(--theia-panelTitle-activeBorder);
}

.prompt-fragment-header:hover {
  background-color: var(--theia-list-hoverBackground);
}

.prompt-fragment-title {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
}

.prompt-fragment-title h2,
.prompt-fragment-title h4 {
  margin-right: var(--theia-ui-padding);
  margin: 0;
}

.prompt-fragment-title h2 {
  font-size: var(--theia-ui-font-size2);
}

.prompt-fragment-title h4 {
  font-size: var(--theia-ui-font-size1);
}

.prompt-fragment-title .active-indicator {
  margin-right: calc(var(--theia-ui-padding) / 2);
}

.prompt-fragment-body {
  padding: var(--theia-ui-padding) var(--theia-ui-padding) 0 var(--theia-ui-padding);
}

.prompt-fragment-description p {
  margin-top: 0;
  margin-bottom: var(--theia-ui-padding);
  color: var(--theia-descriptionForeground);
}

.section-header {
  margin: var(--theia-ui-padding) 0;
  color: var(--theia-foreground);
  font-size: var(--theia-ui-font-size2);
}

/* AI Chat View Styles */
.theia-ResponseNode-Content .disable-message {
  font-size: var(--theia-ui-font-size1);
  line-height: 1.6;
  padding: calc(var(--theia-ui-padding) * 2);
}

/* Welcome message container */
.theia-WelcomeMessage-Container {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}

.theia-WelcomeMessage-Container-Inner {
  margin: auto 0;
  /* Centred vertically */
  width: 100%;
}

.theia-WelcomeMessage-Divider {
  align-self: stretch;
  height: 0;
  border-top: 1px solid var(--theia-dropdown-border);
  margin: calc(var(--theia-ui-padding) * 2) calc(var(--theia-ui-padding) * 3);
}

.theia-WelcomeMessage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.theia-WelcomeMessage-Main {
  padding-top: calc(var(--theia-ui-padding) * 8);
}

/* Compact greeting used when the home view also shows recent sessions */
.theia-WelcomeMessage-Compact {
  padding-top: calc(var(--theia-ui-padding) * 2);
}

.theia-WelcomeMessage-Compact .theia-WelcomeMessage-Logo {
  margin-bottom: calc(var(--theia-ui-padding));
}

.theia-WelcomeMessage-Compact .theia-WelcomeMessage-Content h2 {
  font-size: var(--theia-ui-font-size2);
  margin-bottom: var(--theia-ui-padding);
}

.theia-WelcomeMessage-Compact .theia-WelcomeMessage-Content p {
  margin-bottom: calc(var(--theia-ui-padding) * 0.75);
}

.theia-WelcomeMessage-Compact .theia-WelcomeMessage-Alert {
  margin-top: calc(var(--theia-ui-padding) * 1.5);
}

.theia-WelcomeMessage-Content {
  text-align: center;
  padding: 0 calc(var(--theia-ui-padding) * 2);
  max-width: 350px;
}

.theia-WelcomeMessage-Content h1 {
  margin-top: 0;
}

.theia-WelcomeMessage-Content h2 {
  margin-top: 0;
  margin-bottom: calc(var(--theia-ui-padding) * 2);
  font-size: var(--theia-ui-font-size3);
}

.theia-WelcomeMessage-Content p {
  font-size: var(--theia-ui-font-size1);
  line-height: 1.6;
  margin-bottom: calc(var(--theia-ui-padding) * 1.5);
}

.theia-WelcomeMessage-Content p .codicon {
  vertical-align: sub;
}

.theia-WelcomeMessage-Content em {
  font-weight: bolder;
  font-style: normal;
}

.theia-WelcomeMessage-Content ul,
.theia-WelcomeMessage-Content ol {
  text-align: left;
  padding-left: 20px;
  list-style-position: outside;
  margin: calc(var(--theia-ui-padding) * 0.5) 0;
}

.theia-WelcomeMessage-Content ul li,
.theia-WelcomeMessage-Content ol li {
  margin-bottom: calc(var(--theia-ui-padding) * 0.5);
  line-height: 1.6;
}

.theia-WelcomeMessage-Content ul ul {
  margin-top: calc(var(--theia-ui-padding) * 0.5);
  padding-left: 16px;
}

/* Disabled state: left-aligned body text, centered heading */
.theia-WelcomeMessage-Disabled .theia-WelcomeMessage-Content {
  text-align: left;
}

.theia-WelcomeMessage-Disabled .theia-WelcomeMessage-Content h2 {
  text-align: center;
}

.theia-WelcomeMessage-Error .theia-WelcomeMessage-ErrorIcon {
  font-size: calc(var(--theia-ui-font-size1) * 3.7);
  margin-bottom: calc(var(--theia-ui-padding) * 2.5);
}

.theia-WelcomeMessage-Actions {
  display: flex;
  flex-direction: row;
  gap: var(--theia-ui-padding);
  margin: calc(var(--theia-ui-padding) * 3) 0;
}

.theia-WelcomeMessage-Actions .theia-button {
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--theia-ui-font-size1);
  border: 1px solid var(--theia-button-border);
  transition: background-color 0.2s;
  margin-left: 0;
}

.theia-WelcomeMessage-Actions .theia-button.main {
  background-color: var(--theia-button-background);
  color: var(--theia-button-foreground);
}

.theia-WelcomeMessage-Actions .theia-button.main:hover {
  background-color: var(--theia-button-hoverBackground);
}

.theia-WelcomeMessage-Actions .theia-button.secondary {
  background-color: var(--theia-button-secondaryBackground);
  color: var(--theia-button-secondaryForeground);
}

.theia-WelcomeMessage-Actions .theia-button.secondary:hover {
  background-color: var(--theia-button-secondaryHoverBackground);
}

.theia-WelcomeMessage-Hint {
  display: block;
  margin-top: calc(var(--theia-ui-padding) * 2);
  color: var(--theia-descriptionForeground);
  font-style: italic;
}

.theia-WelcomeMessage-Options {
  margin: calc(var(--theia-ui-padding) * 3) 0;
  text-align: left;
}

.theia-WelcomeMessage-GuidanceList {
  text-align: left;
  margin: calc(var(--theia-ui-padding) * 2) 0;
  padding-left: 20px;
  line-height: 1.6;
}

.theia-WelcomeMessage-GuidanceList li {
  margin-bottom: calc(var(--theia-ui-padding) * 1.3);
}

.theia-WelcomeMessage-IssuesList {
  text-align: left;
  margin: calc(var(--theia-ui-padding) * 0.5) 0 0 0;
  padding-left: calc(var(--theia-ui-padding) * 2);
  font-size: var(--theia-ui-font-size1);
  line-height: 1.5;
}

.theia-WelcomeMessage-IssuesList li {
  margin-bottom: calc(var(--theia-ui-padding) * 0.25);
}

.theia-WelcomeMessage-AgentButtons {
  display: flex;
  flex-direction: column;
  gap: var(--theia-ui-padding);
  margin: calc(var(--theia-ui-padding) * 2) 0;
}

.theia-WelcomeMessage-AgentButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--theia-ui-padding) * 0.5);
  padding: calc(var(--theia-ui-padding) * 0.75) calc(var(--theia-ui-padding) * 1.5);
  background-color: var(--theia-button-background);
  color: var(--theia-button-foreground);
  border: 1px solid var(--theia-button-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--theia-ui-font-size1);
  transition: background-color 0.15s;
}

.theia-WelcomeMessage-AgentButton:hover {
  background-color: var(--theia-button-hoverBackground);
}

.theia-WelcomeMessage-AgentButton-Icon {
  font-size: var(--theia-ui-font-size1);
}

.theia-WelcomeMessage-AgentButton-Label {
  font-weight: 500;
}

.theia-WelcomeMessage-SubNote {
  font-size: var(--theia-ui-font-size1);
  color: var(--theia-descriptionForeground);
  margin-top: calc(var(--theia-ui-padding) * 2);
}

.theia-WelcomeMessage-Alert {
  max-width: 350px;
  margin-top: calc(var(--theia-ui-padding) * 3);
  text-align: left;
  font-size: var(--theia-ui-font-size1);
}

.theia-WelcomeMessage-Alert.theia-warning-alert {
  max-width: 450px;
}

.theia-WelcomeMessage-Alert .theia-message-header {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
  font-weight: 500;
}

.theia-WelcomeMessage-Alert .theia-message-content p {
  margin: 0;
}

.theia-WelcomeMessage-Alert .theia-message-content ol {
  margin: calc(var(--theia-ui-padding) * 0.5) 0;
  padding-left: calc(var(--theia-ui-padding) * 2.5);
}

.theia-WelcomeMessage-Alert .theia-message-content ol li {
  margin-bottom: calc(var(--theia-ui-padding) * 0.5);
  line-height: 1.6;
}

.theia-WelcomeMessage-SessionsSection {
  padding-left: calc(var(--theia-ui-padding) * 2);
  padding-right: calc(var(--theia-ui-padding) * 2);
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.theia-WelcomeMessage-SessionsList {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.theia-WelcomeMessage-SessionsGroup {
  display: flex;
  flex-direction: column;
}

.theia-WelcomeMessage-SessionsGroup+.theia-WelcomeMessage-SessionsGroup {
  margin-top: var(--theia-ui-padding);
}

.theia-WelcomeMessage-SessionsHeader {
  color: var(--theia-descriptionForeground);
  font-size: var(--theia-ui-font-size1);
  font-weight: 500;
  padding: var(--theia-ui-padding) var(--theia-ui-padding) calc(var(--theia-ui-padding) / 2);
}

.theia-WelcomeMessage-SessionsFooter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 calc(var(--theia-ui-padding) / 2);
  margin-top: var(--theia-ui-padding);
  padding: var(--theia-ui-padding);
  font-size: var(--theia-ui-font-size1);
}

.theia-WelcomeMessage-FooterLink {
  color: var(--theia-textLink-foreground);
  cursor: pointer;
  text-decoration: none;
}

.theia-WelcomeMessage-FooterLink:hover,
.theia-WelcomeMessage-FooterLink:focus {
  color: var(--theia-textLink-activeForeground);
}

/* Markdown-rendered anchors inside the welcome view (e.g. "Learn more", "Tools configuration view")
   use a real href, so the browser would normally underline them. Strip the underline so they
   visually match the footer link convention; hover still flips the color for affordance. */
.theia-WelcomeMessage a {
  text-decoration: none;
}

.theia-WelcomeMessage a:hover,
.theia-WelcomeMessage a:focus {
  text-decoration: none;
  color: var(--theia-textLink-activeForeground);
}

/* Chat session list items */
.theia-chat-session-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
  padding: var(--theia-ui-padding);
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  min-height: calc(var(--theia-ui-font-size1) * 2.5);
}

.theia-chat-session-item:hover {
  background-color: var(--theia-list-hoverBackground);
}

.theia-chat-session-item:focus,
.theia-chat-session-item:focus-within {
  background-color: var(--theia-list-activeSelectionBackground);
  color: var(--theia-list-activeSelectionForeground);
}

.theia-chat-session-item-icon-col {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding) / 2);
  flex-shrink: 0;
}

/* Positioning context for the unread/attention badges so they anchor to the status icon itself
   rather than to the whole column (which now also holds the expand toggle to the left). */
.theia-chat-session-item-status-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.theia-chat-session-item-unread-dot,
.theia-chat-session-item-attention-dot {
  position: absolute;
  top: -1px;
  left: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--theia-editor-background);
  pointer-events: none;
}

.theia-chat-session-item-unread-dot {
  background-color: var(--theia-activityBarBadge-background);
}

.theia-chat-session-item-attention-dot {
  background-color: var(--theia-editorWarning-foreground);
}

.theia-chat-session-item-unread .theia-chat-session-item-title,
.theia-chat-session-item-attention .theia-chat-session-item-title {
  font-weight: 600;
}

.theia-chat-session-item-archive-icon {
  color: var(--theia-descriptionForeground);
}

.theia-chat-session-item-agent-icon {
  color: var(--theia-icon-foreground);
}

.theia-chat-session-item-working .theia-chat-session-item-agent-icon {
  color: var(--theia-focusBorder);
}

.theia-chat-session-item-attention .theia-chat-session-item-agent-icon {
  color: var(--theia-editorWarning-foreground);
}

.theia-chat-session-item-error .theia-chat-session-item-agent-icon,
.theia-chat-session-item-error .theia-chat-session-item-archive-icon {
  color: var(--theia-errorForeground);
}

/* When the item is focused (selection background), let the icons inherit the selection
   foreground so they stay readable on the highlighted background. */
.theia-chat-session-item:focus .theia-chat-session-item-agent-icon,
.theia-chat-session-item:focus .theia-chat-session-item-archive-icon,
.theia-chat-session-item:focus .theia-chat-session-item-expand-icon,
.theia-chat-session-item:focus-within .theia-chat-session-item-agent-icon,
.theia-chat-session-item:focus-within .theia-chat-session-item-archive-icon,
.theia-chat-session-item:focus-within .theia-chat-session-item-expand-icon {
  color: inherit;
}

/* Expand/collapse toggle shown next to the agent icon on parent sessions.
   Non-parent rows render a same-sized placeholder so agent icons stay aligned. */
.theia-chat-session-item-expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: var(--theia-ui-font-size0);
  padding: calc(var(--theia-ui-padding) / 2);
  border-radius: 3px;
  color: var(--theia-descriptionForeground);
  font-size: var(--theia-ui-font-size0);
  outline: none;
}

.theia-chat-session-item-expand-icon:not(.theia-chat-session-item-expand-placeholder) {
  cursor: pointer;
}

.theia-chat-session-item-expand-icon:not(.theia-chat-session-item-expand-placeholder):hover {
  color: var(--theia-icon-foreground);
  background-color: var(--theia-toolbar-hoverBackground, var(--theia-list-hoverBackground));
}

/* Only show a focus ring for keyboard focus, not on pointer clicks. */
.theia-chat-session-item-expand-icon:focus-visible {
  outline: 1px solid var(--theia-focusBorder);
}

/* The placeholder only reserves layout space and must not be interactive. */
.theia-chat-session-item-expand-placeholder {
  visibility: hidden;
  pointer-events: none;
}

/* Child session indentation */
.theia-chat-session-item-child {
  padding-left: calc(var(--tree-indent, 0px) + var(--theia-ui-padding) * 3);
}

.theia-chat-session-item-child .theia-chat-session-item-content {
  font-size: calc(var(--theia-ui-font-size1) * 0.95);
}

.theia-chat-session-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theia-chat-session-item-title-line {
  display: flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding) / 2);
  min-width: 0;
}

.theia-chat-session-item-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--theia-ui-font-size1);
}

.theia-chat-session-item-subtitle {
  color: var(--theia-descriptionForeground);
  font-size: var(--theia-ui-font-size0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theia-chat-session-item:focus-within .theia-chat-session-item-subtitle,
.theia-chat-session-item:focus .theia-chat-session-item-subtitle {
  color: inherit;
  opacity: 0.85;
}

.theia-chat-session-item-actions {
  display: none;
  align-items: center;
  gap: calc(var(--theia-ui-padding) / 4);
  flex-shrink: 0;
}

.theia-chat-session-item:hover .theia-chat-session-item-actions,
.theia-chat-session-item:focus-within .theia-chat-session-item-actions,
.theia-chat-session-item:focus .theia-chat-session-item-actions {
  display: inline-flex;
}

.theia-chat-session-item-action {
  background: transparent;
  border: none;
  color: var(--theia-icon-foreground);
  cursor: pointer;
  padding: calc(var(--theia-ui-padding) / 4);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theia-chat-session-item-action:hover {
  background-color: var(--theia-toolbar-hoverBackground, var(--theia-list-hoverBackground));
}

.theia-chat-session-item:focus-within .theia-chat-session-item-action,
.theia-chat-session-item:focus .theia-chat-session-item-action {
  color: inherit;
}

.theia-chat-session-badge-unread-tooltip,
.theia-chat-session-badge-running-tooltip,
.theia-chat-session-badge-attention-tooltip,
.theia-chat-session-badge-error-tooltip,
.theia-chat-session-badge-restored-tooltip {
  font-size: var(--theia-ui-font-size0);
  font-weight: 600;
  border-radius: calc(var(--theia-ui-padding) * 0.75);
  padding: 1px calc(var(--theia-ui-padding) * 0.75);
  display: inline-block;
  margin-bottom: var(--theia-ui-padding);
}

.theia-chat-session-badge-unread-tooltip {
  color: var(--theia-activityBarBadge-foreground);
  background-color: var(--theia-activityBarBadge-background);
}

.theia-chat-session-badge-running-tooltip {
  color: var(--theia-activityBarBadge-foreground);
  background-color: var(--theia-progressBar-background);
}

.theia-chat-session-badge-attention-tooltip {
  color: var(--theia-activityBarBadge-foreground);
  background-color: var(--theia-editorWarning-foreground);
}

.theia-chat-session-badge-error-tooltip {
  color: var(--theia-activityBarBadge-foreground);
  background-color: var(--theia-errorForeground);
}

.theia-chat-session-badge-restored-tooltip {
  color: var(--theia-foreground);
  background-color: var(--theia-editorWidget-background);
  border: var(--theia-border-width) solid var(--theia-widget-border);
}

.theia-chat-session-tooltip-label {
  font-weight: 600;
  margin-bottom: calc(var(--theia-ui-padding) * 0.5);
}

.theia-chat-session-tooltip-error {
  color: var(--theia-errorForeground);
  word-break: break-word;
}

.theia-chat-session-tooltip-error-prefix {
  font-weight: 600;
}

.theia-chat-session-tooltip-snippet h1,
.theia-chat-session-tooltip-snippet h2,
.theia-chat-session-tooltip-snippet h3,
.theia-chat-session-tooltip-snippet h4,
.theia-chat-session-tooltip-snippet h5,
.theia-chat-session-tooltip-snippet h6 {
  font-size: 1em;
  font-weight: 600;
  margin: 0 0 0.3em 0;
}

.theia-chat-session-tooltip hr {
  border: none;
  border-top: 1px solid var(--theia-editorHoverWidgetInternalBorder);
  margin: var(--theia-ui-padding) 0;
}

.theia-chat-session-tooltip dl {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(var(--theia-ui-padding) * 1.5);
  row-gap: calc(var(--theia-ui-padding) * 0.5);
  align-items: baseline;
}

.theia-chat-session-tooltip dt {
  font-weight: 600;
  color: var(--theia-foreground);
}

.theia-chat-session-tooltip dd {
  margin: 0;
  color: var(--theia-descriptionForeground);
  word-break: break-word;
}


/*
 * AI Tools Configuration Widget Styles
 * Only touch styles in this section for the tools configuration widget
 */
.ai-tools-configuration-tools-label {
  font-weight: bold;
  margin-bottom: var(--theia-ui-padding);
}

.ai-tools-configuration-tools-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ai-tools-configuration-tool-item {
  display: flex;
  align-items: center;
  margin-bottom: calc(var(--theia-ui-padding) * 2);
  border-radius: 4px;
  padding: var(--theia-ui-padding);
  transition: background 0.2s, opacity 0.2s;
}

.ai-tools-configuration-tool-item.default {
  opacity: 0.5;
  background: none;
}

.ai-tools-configuration-tool-item.custom {
  opacity: 1;
  background: var(--theia-editor-inactiveSelectionBackground);
}

.ai-tools-configuration-tool-name {
  flex: 1;
}

.ai-tools-configuration-tool-select {
  margin-right: var(--theia-ui-padding);
}

.ai-tools-configuration-tool-icon {
  font-size: 18px;
}

/* End AI Tools Configuration Widget Styles */

/* AI Model Aliases and Language Model Renderer extracted styles */
.ai-model-alias-list {
  width: 25%;
}

.ai-alias-detail-title {
  padding-left: 0;
  padding-bottom: var(--theia-ui-padding);
}

.ai-alias-detail-description {
  padding-bottom: var(--theia-ui-padding);
}

.ai-alias-detail-selected-model {
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}

.ai-language-model-item-ready {
  font-style: normal;
}

.ai-language-model-item-not-ready {
  font-style: italic;
}

.ai-alias-priority-item-resolved {
  font-weight: bold;
}

.ai-alias-priority-item-ready {
  font-style: inherit;
}

.ai-alias-priority-item-not-ready {
  font-style: italic;
}

.ai-alias-detail-defaults {
  margin-bottom: var(--theia-ui-padding);
}

.ai-model-default-not-ready {
  font-style: italic;
  color: var(--theia-descriptionForeground);
}

.ai-alias-defaults-hint {
  color: var(--theia-descriptionForeground);
  margin-top: var(--theia-ui-padding);
}

.ai-alias-evaluates-to-container {
  margin-top: var(--theia-ui-padding);
  margin-bottom: var(--theia-ui-padding);
}

.ai-alias-evaluates-to-label {
  font-weight: 600;
}

.ai-model-status-ready {
  color: var(--theia-ansi-green-color);
  margin-left: var(--theia-ui-padding);
}

.ai-model-status-not-ready {
  color: var(--theia-ansi-red-color);
  margin-left: var(--theia-ui-padding);
}

.ai-alias-evaluates-to-unresolved {
  margin-left: var(--theia-ui-padding);
  color: var(--theia-descriptionForeground);
}

/* "Evaluates to <model>" note shown under an alias-backed language-model setting row. */
.ai-lm-evaluates-to {
  margin-top: calc(var(--theia-ui-padding) / 2);
  color: var(--theia-descriptionForeground);
  font-size: var(--theia-ui-font-size0);
  display: flex;
  gap: calc(var(--theia-ui-padding) / 2);
}

.ai-alias-detail-agents {
  margin-bottom: var(--theia-ui-padding);
}

.ai-alias-agent-id {
  color: var(--theia-descriptionForeground);
  margin-left: var(--theia-ui-padding);
}

.ai-alias-no-agents {
  color: var(--theia-descriptionForeground);
}

/* End AI Model Aliases and Language Model Renderer extracted styles */

/* Token Usage Configuration Styles */
.token-usage-configuration-title {
  margin: 0 0 calc(var(--theia-ui-padding) * 2) 0;
  border-bottom: 1px solid var(--theia-widget-border);
  padding-bottom: var(--theia-ui-padding);
}

.token-usage-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: calc(var(--theia-ui-padding) * 2);
}

.token-usage-refresh-button {
  display: inline-flex;
  align-items: center;
  background-color: var(--theia-button-background);
  color: var(--theia-button-foreground);
  border: none;
  border-radius: 4px;
  padding: var(--theia-ui-padding) calc(var(--theia-ui-padding) * 2);
  font-size: var(--theia-ui-font-size1);
  cursor: pointer;
  transition: background-color 0.2s;
}

.token-usage-refresh-button:hover {
  background-color: var(--theia-button-hoverBackground);
}

.token-usage-refresh-button i {
  margin-right: var(--theia-ui-padding);
}

.token-usage-table-container {
  overflow-x: auto;
  border-radius: var(--theia-ui-padding);
  background-color: var(--theia-editorWidget-background);
}

.token-usage-table {
  width: 100%;
  border-collapse: collapse;
}

.token-usage-header th {
  text-align: left;
  padding: 10px;
  background-color: var(--theia-editor-background);
  color: var(--theia-descriptionForeground);
  font-weight: bold;
}

.token-usage-model-column {
  width: 25%;
}

.token-usage-column {
  width: 18.75%;
}

.token-usage-row td {
  padding: var(--theia-ui-padding);
}

.token-usage-row:hover {
  background-color: var(--theia-list-hoverBackground);
}

.token-usage-summary-row td {
  padding: var(--theia-ui-padding);
  background-color: var(--theia-editor-background);
  color: var(--theia-foreground);
}

.token-usage-model-cell {
  font-weight: 500;
}

.token-usage-notes {
  margin-top: calc(var(--theia-ui-padding) * 2);
  color: var(--theia-descriptionForeground);
}

.token-usage-note {
  display: flex;
  align-items: center;
  font-size: var(--theia-ui-font-size1);
}

.token-usage-note i {
  margin-right: var(--theia-ui-padding);
}

/* Common utility classes for configuration widgets */
.ai-empty-state-content {
  padding: var(--theia-ui-padding);
  text-align: center;
  color: var(--theia-descriptionForeground);
}

.ai-configuration-footer-total {
  margin-top: var(--theia-ui-padding);
}

.ai-configuration-footer-total-row {
  font-weight: 600;
  border-top: 2px solid var(--theia-widget-border);
}

.ai-configuration-info-box {
  margin-top: var(--theia-ui-padding);
  padding: var(--theia-ui-padding);
  background-color: var(--theia-editor-background);
  border-radius: 3px;
}

.ai-configuration-info-text {
  margin: 0;
  color: var(--theia-descriptionForeground);
}

.ai-configuration-info-icon {
  margin-right: calc(var(--theia-ui-padding) / 2);
}

.ai-configuration-warning-text {
  color: var(--theia-editorWarning-foreground);
}

/* Agent-detail subsection header: the title, with any section-wide action (its reset) pushed to the
   trailing edge of the same line rather than sitting in a prominent row of its own above the list. */
.ai-agent-section-header {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
}

/* Pushed to the trailing edge of the title line; the button itself is the shared icon-action style. */
.ai-agent-section-header .ai-agent-section-header-action {
  margin-left: auto;
}

.ai-agent-description {
  margin-bottom: calc(var(--theia-ui-padding) * 2);
  color: var(--theia-descriptionForeground);
  line-height: 1.5;
}

/* Todo Tool Renderer Styles */
.todo-tool-container {
  display: flex;
  flex-direction: column;
  padding: var(--theia-ui-padding);
}

.todo-tool-header {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
  margin-bottom: var(--theia-ui-padding);
  color: var(--theia-foreground);
}

.todo-tool-title {
  font-weight: 600;
}

.todo-tool-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.todo-tool-item {
  display: flex;
  align-items: center;
  gap: var(--theia-ui-padding);
}

.todo-tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
}

.todo-status-pending .todo-tool-icon {
  color: var(--theia-descriptionForeground);
}

.todo-status-in_progress .todo-tool-icon {
  color: var(--theia-progressBar-background);
}

.todo-status-completed .todo-tool-icon {
  color: var(--theia-successBackground);
}

.todo-status-completed .todo-tool-text {
  text-decoration: line-through;
  opacity: 0.7;
}

.todo-tool-empty {
  color: var(--theia-descriptionForeground);
  font-style: italic;
}

/* User Interaction Tool Renderer Styles */
.user-interaction-tool.title {
  font-weight: 600;
  font-family: var(--theia-ui-font-family);
  font-size: var(--theia-ui-font-size1);
  flex: 1;
}

.user-interaction-tool.status {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding) / 2);
  font-size: var(--theia-ui-font-size0);
  margin-left: auto;
  white-space: nowrap;
}

.user-interaction-tool.status.completed {
  color: var(--theia-gitDecoration-addedResourceForeground, var(--theia-descriptionForeground));
}

.user-interaction-tool.status.canceled {
  color: var(--theia-errorForeground);
}

.user-interaction-tool.status.waiting {
  color: var(--theia-disabledForeground);
}

/* Reuses the dots keyframes defined by ai-chat-ui's chat node header marker.
   The fixed width reserves space for the longest dots state ("...") so the
   label doesn't shift horizontally as the dots animate. */
.user-interaction-tool.status.waiting::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: dots 1s steps(1, end) infinite;
}

.user-interaction-tool.progress {
  display: flex;
  gap: 4px;
  padding: 0 calc(var(--theia-ui-padding) * 2) calc(var(--theia-ui-padding) * 2);
}

.user-interaction-tool.progress-dot {
  position: relative;
  flex: 1;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background-color: var(--theia-widget-border);
  cursor: pointer;
}

/* Expands the hit target above and below the slim visible bar so the
   button is easier to click without changing its visual size. */
.user-interaction-tool.progress-dot::after {
  content: "";
  position: absolute;
  inset: -8px -2px;
}

.user-interaction-tool.progress-dot:hover {
  background-color: var(--theia-button-hoverBackground);
}

.user-interaction-tool.progress-dot:focus-visible {
  outline: 1px solid var(--theia-focusBorder);
  outline-offset: 2px;
}

.user-interaction-tool.progress-dot.done {
  background-color: var(--theia-button-background);
}

.user-interaction-tool.progress-dot.active {
  background-color: var(--theia-focusBorder);
}

.user-interaction-tool.links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--theia-ui-padding) / 2);
  padding: 0 calc(var(--theia-ui-padding) * 2) var(--theia-ui-padding);
}

.user-interaction-tool.link-button {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding) / 2);
  padding: calc(var(--theia-ui-padding) / 2) var(--theia-ui-padding);
  background-color: var(--theia-button-secondaryBackground);
  color: var(--theia-button-secondaryForeground);
  border: 1px solid var(--theia-button-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--theia-ui-font-size1);
  transition: background-color 0.15s;
}

.user-interaction-tool.link-button:hover {
  background-color: var(--theia-button-secondaryHoverBackground);
}

.user-interaction-tool.message {
  padding: 0 calc(var(--theia-ui-padding) * 2);
  color: var(--theia-foreground);
  line-height: 1.5;
  /* Allow this flex child to shrink below the intrinsic width of its
     contents (e.g. wide code blocks) instead of pushing the wizard wider. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.user-interaction-tool.message p {
  margin: 0 0 calc(var(--theia-ui-padding) / 2) 0;
}

.user-interaction-tool.message p:last-child {
  margin-bottom: 0;
}

.user-interaction-tool.message pre {
  max-width: 100%;
  overflow-x: auto;
}

.user-interaction-tool.message code {
  word-break: break-word;
}

.user-interaction-tool.message pre code {
  word-break: normal;
}

/* Give embedded Mermaid diagrams some breathing room from the surrounding message text. The shared
   component only carries a bottom margin (which is enough in the chat), so add a matching top margin here. */
.user-interaction-tool.message .theia-MermaidViewer-root {
  margin-top: var(--theia-ui-padding);
}

.user-interaction-tool.options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--theia-ui-padding);
  padding: var(--theia-ui-padding) calc(var(--theia-ui-padding) * 2);
}

.user-interaction-tool.option-button {
  /* Stack the label and the hidden bold spacer in the same grid cell so the
     button reserves bold width up-front and does not grow when selected. */
  display: inline-grid;
  place-items: center;
  margin-left: 0;
  padding: calc(var(--theia-ui-padding) * 1.5) calc(var(--theia-ui-padding) * 4);
  font-size: var(--theia-ui-font-size1);
  min-width: 100px;
}

.user-interaction-tool.option-button-label,
.user-interaction-tool.option-button-bold-spacer {
  grid-area: 1 / 1;
}

.user-interaction-tool.option-button-bold-spacer {
  font-weight: bold;
  visibility: hidden;
  pointer-events: none;
}

.user-interaction-tool.option-button.selected .user-interaction-tool.option-button-label {
  font-weight: bold;
}

.user-interaction-tool.option-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.user-interaction-tool.pending-text {
  color: var(--theia-descriptionForeground);
  font-style: italic;
}

.user-interaction-tool.comment-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--theia-ui-padding) / 2);
  padding: calc(var(--theia-ui-padding) * 2) calc(var(--theia-ui-padding) * 2) var(--theia-ui-padding);
}

.user-interaction-tool.comment-input-row {
  display: flex;
  gap: var(--theia-ui-padding);
  align-items: center;
}

.user-interaction-tool.comment-input-field {
  flex: 1;
  box-sizing: border-box;
}

.user-interaction-tool.comment-submit {
  white-space: nowrap;
}

.user-interaction-tool.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--theia-ui-padding) / 2);
}

.user-interaction-tool.comment-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--theia-ui-padding);
  padding: calc(var(--theia-ui-padding) / 2) var(--theia-ui-padding);
  background-color: var(--theia-editorWidget-background);
  border: 1px solid var(--theia-widget-border);
  border-radius: 3px;
}

.user-interaction-tool.comment-text {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}

.user-interaction-tool.comment-remove {
  background: transparent;
  border: none;
  color: var(--theia-icon-foreground);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
}

.user-interaction-tool.comment-remove:hover {
  background-color: var(--theia-list-hoverBackground);
}

.user-interaction-tool.advance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--theia-ui-padding);
  padding: calc(var(--theia-ui-padding) * 1.5) calc(var(--theia-ui-padding) * 2);
  margin-top: calc(var(--theia-ui-padding) * 1.5);
  background-color: var(--theia-titleBar-inactiveBackground, var(--theia-editorGroupHeader-tabsBackground));
  border-top: 2px solid var(--theia-focusBorder);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.user-interaction-tool.page-counter {
  font-family: var(--theia-code-font-family);
  font-size: var(--theia-ui-font-size1);
  font-weight: 500;
  color: var(--theia-descriptionForeground);
  letter-spacing: 0.05em;
  flex: 1;
  text-align: center;
}

.user-interaction-tool.back-button,
.user-interaction-tool.advance-button {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding) / 2);
  padding: calc(var(--theia-ui-padding)) calc(var(--theia-ui-padding) * 2.5);
  font-size: var(--theia-ui-font-size1);
  min-width: 110px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-interaction-tool.back-button {
  justify-content: flex-start;
}

.user-interaction-tool.advance-button {
  justify-content: flex-end;
}

.user-interaction-tool.back-button:disabled {
  visibility: hidden;
}

.user-interaction-tool.option-button.selected {
  outline: 2px solid var(--theia-focusBorder);
  outline-offset: -2px;
}

/* AI Sessions View */
.ai-sessions-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ai-sessions-view-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--theia-ui-padding) 0;
}

.ai-sessions-view-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--theia-descriptionForeground);
  gap: var(--theia-ui-padding);
}

.ai-sessions-view-empty .codicon {
  font-size: calc(var(--theia-ui-font-size1) * 2.5);
  opacity: 0.5;
}

/* Persistent banner strip rendered above the AI chat content when an AI session
 * override (e.g. --session-preference) is active. */
.chat-banner-host {
  flex: none;
  width: 100%;
}

.chat-banner-host:empty {
  display: none;
}

.theia-ai-allow-all-mode-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--theia-ui-padding) * 0.75);
  padding: calc(var(--theia-ui-padding) * 0.6) calc(var(--theia-ui-padding) * 1.5);
  background-color: var(--theia-inputValidation-warningBackground);
  font-size: var(--theia-ui-font-size1);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

.theia-ai-allow-all-mode-strip.is-allow-all {
  background-color: var(--theia-inputValidation-errorBackground);
}

.theia-ai-allow-all-mode-strip-icon {
  flex: none;
}

.theia-ai-allow-all-mode-strip.is-allow-all .theia-ai-allow-all-mode-strip-icon {
  color: var(--theia-errorForeground);
}

.theia-ai-allow-all-mode-strip-title {
  font-weight: 600;
}

.theia-ai-allow-all-mode-strip-dismiss {
  flex: none;
  margin-left: calc(var(--theia-ui-padding) * 0.5);
  padding: 2px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: inherit;
  opacity: 0.7;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.theia-ai-allow-all-mode-strip-dismiss:hover {
  opacity: 1;
  background-color: var(--theia-toolbar-hoverBackground);
}

.theia-ai-allow-all-mode-strip-dismiss:focus {
  outline: 1px solid var(--theia-focusBorder);
  outline-offset: -1px;
}

/* ===== AI Configuration breadcrumb popup ===== */
.theia-ai-configuration-breadcrumb-popup {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
}

.theia-ai-configuration-breadcrumb-popup-item {
  display: flex;
  align-items: center;
  gap: calc(var(--theia-ui-padding) * 0.75);
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.theia-ai-configuration-breadcrumb-popup-item:hover {
  background-color: var(--theia-list-hoverBackground);
}

.theia-ai-configuration-breadcrumb-popup-item.selected {
  background-color: var(--theia-list-activeSelectionBackground);
  color: var(--theia-list-activeSelectionForeground);
}

/* High contrast: neither `list.hoverBackground` nor `list.activeSelectionBackground` is defined there, so
   both states above would be indistinguishable from an unselected entry. `contrastActiveBorder` exists only
   in the high-contrast themes, hence the ring appears there alone. */
.theia-ai-configuration-breadcrumb-popup-item:hover,
.theia-ai-configuration-breadcrumb-popup-item.selected {
  outline: 1px dotted var(--theia-contrastActiveBorder, transparent);
  outline-offset: -1px;
}