/* Page-level chrome the VS Code workbench normally provides — the
 * imported chat.css assumes it lives inside .pane-body inside .monaco-workbench
 * with scrollable list virtualization etc. None of that ships in a plain
 * browser, so we recreate the minimum geometry to make .interactive-session
 * fill the viewport and .interactive-list scroll. */

* { box-sizing: border-box; }

/* ───── Surface palette override ─────
 * The bundled `vendor/theme-dark.css` is an OLDER VS Code snapshot whose
 * surface backgrounds are several different lighter greys (#181818 sidebar,
 * #1F1F1F editor, #313131 inputs/dropdowns). The user's current VS Code
 * paints every surface ONE dark tone (#191a1b) and separates regions with
 * borders alone. Re-point just the surface-background tokens (and the
 * input border) here — this loads after theme-dark.css so it wins, every
 * `var(--vscode-*)` reference across the app picks it up, and accent
 * colours (buttons, focus, charts) are deliberately left untouched. */
:root {
  /* Central-editor / empty-layout tone. The chat panel itself is pinned to
   * the lighter auxiliary-bar tone (#191a1b) in the .chat-pane rule below. */
  --vscode-editor-background: #121314;
  --vscode-sideBar-background: #191a1b;
  --vscode-input-background: #191a1b;
  --vscode-dropdown-background: #191a1b;
  --vscode-chat-list-background: #191a1b;
  --vscode-panel-background: #191a1b;
  /* Popups / widgets / menus. */
  --vscode-editorWidget-background: #202122;
  --vscode-editorHoverWidget-background: #202122;
  --vscode-menu-background: #202122;
  /* Code blocks, inline code, block quotes. */
  --vscode-textCodeBlock-background: #242526;
  --vscode-textPreformat-background: #262626;
  --vscode-textBlockQuote-background: #242526;
  /* Borders. */
  --vscode-input-border: #333536;
  --vscode-dropdown-border: #333536;
  --vscode-panel-border: #2a2b2c;
  --vscode-sideBar-border: #2a2b2c;
  --vscode-widget-border: #2a2b2c;
  --vscode-editorWidget-border: #2a2b2c;
  --vscode-editorHoverWidget-border: #2a2b2c;
  --vscode-menu-border: #2a2b2c;
  /* Text. */
  --vscode-foreground: #bfbfbf;
  --vscode-editor-foreground: #bbbebf;
  --vscode-descriptionForeground: #8c8c8c;
}

/* ───── App-level 2-pane layout ─────
 * Mirrors VS Code's auxiliary-bar-on-the-right layout. The chat panel
 * has a fixed `flex-basis` so it never resizes when the markdown
 * content inside grows/shrinks; the viz pane takes the rest. A 4px
 * vertical sash on the left edge of the chat pane lets the user drag
 * the boundary (drag logic is in app.js). */
html, body { height: 100vh; margin: 0; overflow: hidden; }
.app-layout {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.viz-pane {
  flex: 1 1 auto;
  min-width: 200px;
  height: 100vh;
  background: var(--vscode-sideBar-background, #181818);
  border-right: 1px solid var(--vscode-sideBar-border, var(--vscode-panel-border, rgba(255,255,255,0.10)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
/* Before a project is opened, the viz-pane has nothing useful to show
 * (just the "No project loaded" placeholder). Collapse it so the chat
 * occupies the full window — same as VS Code Copilot Chat, where the
 * map slot would appear once data exists. JS toggles body.no-project
 * on session_ready and removes it on open_project tool_done. */
body.no-project .viz-pane {
  flex: 0 0 0;
  min-width: 0;
  width: 0;
  border-right: 0;
  visibility: hidden;
}
body.no-project .chat-pane-resizer {
  display: none;
}
.viz-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* `display: flex` overrides the [hidden] attribute's default display:none.
 * Add explicit rule so toggling `hidden` actually hides the empty state
 * when something is loaded into viz-content. */
.viz-empty[hidden],
.viz-content[hidden] { display: none !important; }
.viz-empty-inner {
  text-align: center;
  max-width: 360px;
  color: var(--vscode-descriptionForeground, #9d9d9d);
}
.viz-empty-icon {
  font-size: 42px !important;
  opacity: 0.45;
  display: block;
  margin: 0 auto 12px;
}
.viz-empty-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--vscode-foreground, #cccccc);
}
.viz-empty-desc { font-size: 12px; line-height: 1.5; }
.viz-empty-desc code {
  background: var(--vscode-textPreformat-background, rgba(255,255,255,0.06));
  color: var(--vscode-textPreformat-foreground, #d7ba7d);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}
.viz-content { flex: 1; overflow: auto; padding: 16px 24px 24px; }

/* ───── Network map (Leaflet) ───── */
.viz-map-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.10));
  background: var(--vscode-sideBar-background, #181818);
}
.viz-map-header[hidden] { display: none !important; }
.viz-map-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.viz-map-title .codicon { font-size: 16px !important; opacity: 0.75; }
.viz-map-title h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--vscode-foreground, #cccccc);
}
.viz-map-sub {
  font-size: 11px;
  color: var(--vscode-descriptionForeground, #9d9d9d);
  font-family: var(--vscode-editor-font-family, monospace);
  margin-left: 6px;
}
.viz-map-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.viz-map-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--vscode-descriptionForeground, #9d9d9d);
}
.viz-map-picker select {
  background: var(--vscode-dropdown-background, #181818);
  color: var(--vscode-dropdown-foreground, #cccccc);
  border: 1px solid var(--vscode-dropdown-border, rgba(255,255,255,0.15));
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--vscode-editor-font-family, monospace);
  max-width: 200px;
}
.viz-map-btn {
  background: transparent;
  border: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.10));
  color: var(--vscode-icon-foreground, #cccccc);
  border-radius: 4px;
  width: 24px; height: 24px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.viz-map-btn:hover {
  background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.08));
}
.viz-map-btn.active {
  background: var(--vscode-button-background, #0e639c);
  color: var(--vscode-button-foreground, #ffffff);
  border-color: transparent;
}
.viz-map-action {
  background: var(--vscode-button-background, #0e639c);
  color: var(--vscode-button-foreground, #ffffff);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.viz-map-action:hover {
  background: var(--vscode-button-hoverBackground, #1177bb);
}
.viz-map-action .codicon { font-size: 12px; }
/* Mode-specific toolbar controls — the dry view hides the base/alt
   pickers and comparison buttons; the comparison view hides the single
   scenario picker. The class display rules above set inline-flex, which
   would otherwise win over the bare `hidden` attribute. */
.viz-map-btn[hidden],
.viz-map-action[hidden],
.viz-map-picker[hidden] { display: none; }
.viz-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--vscode-editorWidget-background, rgba(255,255,255,0.03));
  color: var(--vscode-foreground, #cccccc);
}
.legend-chip i {
  width: 12px; height: 3px;
  display: inline-block;
  border-radius: 2px;
}
.legend-added i { background: #2ecc71; }
.legend-removed i { background: #e74c3c; }
.legend-modified i { background: #f7b500; }
.legend-unchanged i { background: #5a5a5a; }

.viz-map {
  flex: 1;
  min-height: 300px;
  background: #191a1b;
}
.viz-map[hidden] { display: none !important; }
.viz-map .leaflet-control-attribution { display: none; }
/* `.viz-map` and `.leaflet-container` are the SAME element (both classes
 * on one div) — the selector must be `.viz-map.leaflet-container` (no
 * space), and `!important` guarantees it beats Leaflet's own
 * `.leaflet-container{background:#ddd}` regardless of stylesheet order. */
.viz-map.leaflet-container {
  background: #191a1b !important;
  font-family: var(--vscode-font-family);
}
/* When tiles haven't fetched yet (or the tile CDN is blocked, as in
 * headless test runs), the pane defaults to white because Leaflet has
 * no tile background. Force dark so the map "loading" state matches
 * the rest of the dark theme instead of flashing a bright square. */
.viz-map .leaflet-tile-pane,
.viz-map .leaflet-pane {
  background: #191a1b;
}

/* Map link tooltip (popup-style on hover). */
.leaflet-tooltip.map-tooltip {
  background: var(--vscode-editorHoverWidget-background, #1f1f1f);
  color: var(--vscode-editorHoverWidget-foreground, #cccccc);
  border: 1px solid var(--vscode-editorHoverWidget-border, rgba(255,255,255,0.15));
  font-size: 11px;
  line-height: 1.5;
  padding: 6px 8px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.leaflet-tooltip.map-tooltip code {
  background: var(--vscode-textPreformat-background, rgba(255,255,255,0.06));
  color: var(--vscode-textPreformat-foreground, #d7ba7d);
  padding: 0 4px;
  border-radius: 2px;
}
.map-tip-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 500;
}
.map-tip-tag.tag-added { background: rgba(46,204,113,0.25); color: #2ecc71; }
.map-tip-tag.tag-removed { background: rgba(231,76,60,0.25); color: #e74c3c; }
.map-tip-tag.tag-modified { background: rgba(247,181,0,0.25); color: #f7b500; }
.map-tip-tag.tag-unchanged { background: rgba(255,255,255,0.08); color: #888; }
.map-tip-row {
  font-size: 11px;
  margin: 2px 0;
}

/* MCP tools listing in the viz pane (rendered by `Configure Tools…`). */
.viz-tools-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.10));
  margin-bottom: 16px;
}
.viz-tools-header .codicon { font-size: 20px !important; opacity: 0.7; }
.viz-tools-header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--vscode-foreground, #cccccc);
  flex: 1;
}
.viz-close-btn {
  background: transparent;
  border: none;
  color: var(--vscode-icon-foreground, #cccccc);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.viz-close-btn:hover { background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.08)); }
.viz-tools-intro {
  font-size: 12px;
  color: var(--vscode-descriptionForeground, #9d9d9d);
  line-height: 1.6;
  margin: 0 0 16px;
}
.viz-tools-intro .risk-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin: 0 4px 0 6px;
  vertical-align: middle;
}
.risk-dot.green, .viz-tool-item.risk-green > .codicon { color: var(--vscode-charts-green, #4ec9b0); }
.risk-dot.yellow, .viz-tool-item.risk-yellow > .codicon { color: var(--vscode-charts-yellow, #d7ba7d); }
.risk-dot.red, .viz-tool-item.risk-red > .codicon { color: var(--vscode-charts-red, #f48771); }
.risk-dot.green { background: var(--vscode-charts-green, #4ec9b0); }
.risk-dot.yellow { background: var(--vscode-charts-yellow, #d7ba7d); }
.risk-dot.red { background: var(--vscode-charts-red, #f48771); }
.viz-tool-group {
  margin-bottom: 16px;
}
.viz-tool-group h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vscode-descriptionForeground, #9d9d9d);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.viz-tool-count {
  background: var(--vscode-badge-background, rgba(255,255,255,0.06));
  color: var(--vscode-badge-foreground, #cccccc);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
}
.viz-tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.viz-tool-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.10));
  border-radius: 4px;
  background: var(--vscode-editorWidget-background, rgba(255,255,255,0.03));
  font-size: 11px;
}
.viz-tool-item code {
  font-family: var(--vscode-editor-font-family, monospace);
  color: var(--vscode-editor-foreground, #cccccc);
  background: transparent;
}
.viz-error {
  color: var(--vscode-errorForeground, #f48771);
  font-size: 13px;
}


/* Right-docked chat panel. Fixed flex-basis prevents text-driven
 * resizing. min/max-width keep it usable on narrow viewports. */
.chat-pane {
  position: relative;
  flex: 0 0 var(--chat-pane-width, 420px);
  width: var(--chat-pane-width, 420px);
  min-width: 320px;
  max-width: 60vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.10));
  /* Auxiliary-bar tone — lighter than the #121314 central-editor background. */
  background: #191a1b;
  overflow: hidden;
}
/* When the viz-pane is hidden (no project yet), centre the chat pane in
 * the window with a comfortable reading width — feels like a normal
 * chat product instead of a tiny strip glued to the right edge. */
body.no-project .chat-pane {
  flex: 0 0 min(720px, 90vw);
  width: min(720px, 90vw);
  margin-left: auto;
  margin-right: auto;
  border-left: 0;
}
body.no-project .app-layout {
  /* Project-picker screen — unify the area behind the centred picker box
   * with the box itself (#191a1b), not the darker #121314 editor tone. */
  background: #191a1b;
}
.chat-pane > .pane-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-pane .interactive-session {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.chat-pane .interactive-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  /* Vendor CSS uses `margin-left: auto` + `max-width: 90%` on the user
   * bubble, which makes the bubble sit flush against the right edge of
   * the chat list. Give the list its own horizontal padding so user +
   * assistant content both breathe instead of touching the wall. */
  padding: 12px 16px 0;
  box-sizing: border-box;
}
/* Containers inside the chat pane must NEVER widen past the pane itself. */
.chat-pane .interactive-input-part,
.chat-pane .interactive-input-and-side-toolbar,
.chat-pane .chat-input-container,
.chat-pane .chat-editor-container,
.chat-pane .interactive-input-editor,
.chat-pane .chat-input-toolbars,
.chat-pane .chat-secondary-toolbar {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.chat-pane .interactive-input-part {
  padding: 8px 10px 10px;
}
.chat-pane .chat-attachments-container { margin: 0; }
/* Resizer sash on the left edge of the chat pane. */
.chat-pane-resizer {
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
  transition: background-color 0.15s ease 0.1s;
}
.chat-pane-resizer:hover,
.chat-pane-resizer.dragging {
  background: var(--vscode-sash-hoverBorder, #007fd4);
}
body.resizing-chat-pane,
body.resizing-chat-pane * { cursor: col-resize !important; user-select: none !important; }


/* --- VS Code-style scrollbars (global) ---------------------------- */
/* Monaco's .monaco-scrollable-element widget renders its own DOM slider
 * with fade-in/out animation; we can't reproduce that exactly without
 * the TS widget, but we can match the *look* with webkit/Firefox
 * pseudo-selectors using VS Code's actual scrollbar color tokens. The
 * track is transparent (so the chat background shows through), the
 * slider is a 10px rounded pill that brightens on hover/drag. */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--vscode-scrollbarSlider-background) transparent;
}
*::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--vscode-scrollbarSlider-background);
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 7px;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--vscode-scrollbarSlider-hoverBackground);
}
*::-webkit-scrollbar-thumb:active {
  background-color: var(--vscode-scrollbarSlider-activeBackground);
}
*::-webkit-scrollbar-corner { background: transparent; }
/* Inline scrollable blocks (tool result <pre>, terminal-editor) want
 * a thinner slider so the chrome doesn't eat their narrow widths. */
.tool-input-output-part .input-output pre::-webkit-scrollbar,
.chat-confirmation-message-terminal pre::-webkit-scrollbar,
.assistant-text pre::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.tool-input-output-part .input-output pre::-webkit-scrollbar-thumb,
.chat-confirmation-message-terminal pre::-webkit-scrollbar-thumb,
.assistant-text pre::-webkit-scrollbar-thumb {
  border-width: 2px;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
.monaco-workbench,
.pane-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pane-body { background: var(--vscode-chat-list-background); }

.interactive-session {
  height: 100%;
  /* chat.css already sets flex-direction:column + max-width:950px + margin:auto */
}

/* The list scrolls; the input pinned at the bottom. */
.interactive-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 16px;
}
/* Replaced below by the global VS-Code-style scrollbar rules. */

.interactive-input-part { flex: 0 0 auto; }

/* --- Monaco editor host -------------------------------------------- */
#monaco-host {
  width: 100%;
  /* One-line input is 44px (20px line + 12/12 padding); grows to VS Code's
     INPUT_EDITOR_MAX_HEIGHT (250px). JS sizes the host; these are bounds. */
  min-height: 44px;
  max-height: 250px;
  background: transparent;
}
/* VS Code rule (CDP): `.chat-editor-container { padding: 0 0 0 4px }` —
   only a small left inset; the input box's own padding does the rest. */
.chat-editor-container { padding: 0 0 0 4px; }

/* --- toolbar buttons ----------------------------------------------- */
/* VS Code rule (CDP): `.interactive-session .chat-input-toolbars {
   display:flex; align-items:center; gap:6px; margin-top:4px }` — no
   padding of its own; the input box's 6px inset already aligns it. */
.chat-input-toolbars {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.chat-input-toolbars .monaco-action-bar .actions-container {
  display: flex;
  gap: 4px;
  align-items: center;
}
.chat-input-toolbar, .chat-execute-toolbar { display: flex; }
.action-item.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--vscode-icon-foreground);
}
.action-item.icon-btn:hover {
  background: var(--vscode-toolbar-hoverBackground);
}
.action-item.icon-btn .action-label { font-size: 16px; }

/* segmented mode picker styled like VS Code's secondary input toolbar */
.action-item.mode-picker {
  display: inline-flex;
  background: var(--vscode-input-background);
  border: 1px solid var(--vscode-widget-border, transparent);
  border-radius: var(--vscode-cornerRadius-medium);
  padding: 1px;
}
.action-label.mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: transparent;
  border: none;
  color: var(--vscode-descriptionForeground);
  cursor: pointer;
  border-radius: var(--vscode-cornerRadius-small);
  font: inherit;
  font-size: 12px;
}
.action-label.mode-btn:hover { color: var(--vscode-foreground); }
.action-label.mode-btn.active {
  background: var(--vscode-inputOption-activeBackground, rgba(14,99,156,0.18));
  color: var(--vscode-inputOption-activeForeground, var(--vscode-foreground));
  box-shadow: inset 0 0 0 1px var(--vscode-inputOption-activeBorder, transparent);
}
.action-label.mode-btn[data-mode="autopilot"].active {
  background: var(--vscode-button-background);
  color: var(--vscode-button-foreground);
}
.action-label.mode-btn .codicon { font-size: 13px; }

.action-item.model-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: var(--vscode-input-background);
  border: 1px solid var(--vscode-widget-border, transparent);
  border-radius: 12px;
  font: 11.5px var(--monaco-monospace-font);
  color: var(--vscode-descriptionForeground);
}
.action-item.model-pill .codicon { color: var(--vscode-charts-green, #89d185); font-size: 12px; }

/* Execute toolbar buttons — VS Code's send is a transparent 22×22 button
 * with a plain arrow-up icon (no blue fill); it only brightens on hover. */
.chat-execute-toolbar .action-item .action-label {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: var(--vscode-icon-foreground, #ccc);
  border: 1px solid transparent;
}
.chat-execute-toolbar .action-item .action-label:hover {
  background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.1));
}
.chat-execute-toolbar .action-item .action-label:disabled,
.chat-execute-toolbar .action-item .action-label.disabled {
  opacity: 0.4;
  cursor: default;
  background: transparent;
}

/* --- chat-input-container ------------------------------------------- *
 * The vendored VS Code original already styles this box. Its rule
 *   .monaco-workbench .interactive-session .chat-input-container   (0,3,0)
 * matches our DOM in full — #chat-pane carries `monaco-workbench`,
 * #interactive-session carries `interactive-session` — so it OUTWEIGHS
 * anything we'd declare here (a bare `.chat-input-container` is only
 * 0,1,0). VS Code's rule supplies background, border (`--vscode-input-
 * border`), radius, padding `0 6px 6px`, box-sizing, position and the
 * box-shadow transition; `.focused` is handled by the vendored
 * `.interactive-session .chat-input-container.focused` rule. We add only
 * the pane-level inset — declaring anything else here would be dead. */
.chat-input-container {
  margin: 6px 16px 0;
}

/* Chat input box — forced to the unified surface tone. The vendored
 * `chat.css` rule already resolves `var(--vscode-input-background)` to
 * #191a1b via the :root override, but pin it here with ID + !important
 * too so NOTHING (cascade order, Monaco theme, a stale cached file) can
 * leave the box on the old grey. */
#chat-input-container {
  background-color: #191a1b !important;
  border: 1px solid #333536 !important;
}
#chat-input-container.focused {
  border-color: var(--vscode-focusBorder) !important;
}
#chat-input-container .monaco-editor,
#chat-input-container .monaco-editor .monaco-editor-background,
#chat-input-container .monaco-editor .margin {
  background-color: #191a1b !important;
}

/* status / secondary toolbar */
.chat-secondary-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 22px 8px;
  font-size: 11.5px;
  color: var(--vscode-descriptionForeground);
}
.status-text { display: inline-flex; align-items: center; gap: 6px; }
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vscode-charts-green, #89d185);
  box-shadow: 0 0 6px rgba(137,209,133,0.5);
}
.status-dot.busy {
  background: var(--vscode-progressBar-background, #0098ff);
  box-shadow: 0 0 6px rgba(0,152,255,0.6);
  animation: pulse 1.2s infinite;
}
.status-dot.error {
  background: var(--vscode-errorForeground, #f48771);
  box-shadow: 0 0 6px rgba(244,135,113,0.5);
}
@keyframes pulse { 50% { opacity: 0.4; } }
.status-sep { color: var(--vscode-disabledForeground); }
.dim { color: var(--vscode-disabledForeground); font-family: var(--monaco-monospace-font); }

/* chat.css already styles request bubbles via the scoped selector
 * `.interactive-session:not(.chat-widget > .interactive-session) .interactive-item-container.interactive-request .value .rendered-markdown`
 * — see lines 3382–3408 of the verbatim file. We only need to suppress
 * the header for our standalone layout, since we don't host the toolbar
 * menus VS Code's MenuWorkbenchToolBar would put there. */
.interactive-item-container.interactive-request .header .user > .detail-container {
  display: none;
}
.interactive-item-container.interactive-response .header {
  /* Response header still rendered (chat.css expects it) but its children
   * are .hidden via the same class toggles chatListRenderer.ts:773-775 uses. */
}

/* Welcome view tips: stick to chatViewWelcome.css styling (it already
 * formats .chat-welcome-view-tips as text with link styling). We only
 * pad the list a bit so the links are easier to click. */
.chat-welcome-view-tips a { cursor: pointer; }
.chat-welcome-view-tips ul { padding-left: 18px; text-align: left; }
.chat-welcome-view-tips li { margin: 4px 0; }
.chat-welcome-view-message code {
  font: 12px var(--monaco-monospace-font);
  color: var(--vscode-textPreformat-foreground);
  background: var(--vscode-textPreformat-background);
  padding: 1px 5px;
  border-radius: var(--vscode-cornerRadius-small);
}

/* assistant cursor */
.assistant-cursor {
  display: inline-block; width: 8px; height: 1em;
  background: var(--vscode-progressBar-background, #0098ff);
  vertical-align: text-bottom; margin-left: 1px;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* code-block copy button (we don't ship the full Monaco-driven toolbar
 * from chat.css, so we keep this minimal). */
.value .rendered-markdown pre {
  position: relative;
  background: var(--vscode-textCodeBlock-background, var(--vscode-editorWidget-background));
  border: 1px solid var(--vscode-widget-border, transparent);
  border-radius: var(--vscode-cornerRadius-medium);
  margin: 10px 0;
  overflow: hidden;
}
.value .rendered-markdown pre code {
  display: block;
  padding: 10px 12px;
  overflow-x: auto;
  font: 12px var(--monaco-monospace-font);
}
.code-toolbar {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 4px; opacity: 0;
  transition: opacity 120ms;
}
.value .rendered-markdown pre:hover .code-toolbar { opacity: 1; }
.code-copy-btn {
  background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.08));
  border: 1px solid var(--vscode-widget-border, transparent);
  color: var(--vscode-foreground);
  padding: 3px 7px; border-radius: 3px;
  font: 11px var(--vscode-chat-font-family);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.code-copy-btn .codicon { font-size: 12px; }

/* chat.css already styles .progress-container with .codicon + .rendered-markdown.progress-step
 * and .chat-tool-invocation-part is its container. We just need .codicon-modifier-spin
 * (VS Code generates this dynamically via ThemeIcon.modify(Codicon.loading, 'spin')). */
.codicon-modifier-spin { animation: chat-codicon-spin 1.2s linear infinite; }
@keyframes chat-codicon-spin { to { transform: rotate(360deg); } }

/* tool failure detail — rendered inline under a failed tool card (no
 * expander). A successful tool shows no detail block at all. */
.tool-error-detail {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 3px 0 2px 22px;
}
.tool-error-detail .codicon-error {
  color: var(--vscode-errorForeground, #f48771);
  font-size: 13px;
  padding-top: 3px;
  flex-shrink: 0;
}
.tool-error-pre {
  margin: 0;
  flex: 1;
  min-width: 0;
  background: var(--vscode-inputValidation-errorBackground, rgba(244,135,113,0.1));
  border: 1px solid var(--vscode-errorForeground, #f48771);
  border-radius: var(--vscode-cornerRadius-small, 4px);
  padding: 5px 8px;
  font: 11px var(--monaco-monospace-font, monospace);
  white-space: pre-wrap; word-break: break-word;
  max-height: 160px; overflow-y: auto;
  color: var(--vscode-foreground, #cccccc);
}

/* tool-risk-badge layout/colors come from vendor/toolRiskBadge.css
 * (vendored verbatim from vscode-src). VS Code uses green/orange/red,
 * not yellow — the JS at assessRisk() emits "orange" too. */

/* Inline code styling inside widget2 message body. The vendor CSS
 * handles padding/background/borders for the widget itself; this just
 * gives `code` spans inside our path/url/diff blocks a readable look. */
.chat-confirmation-widget2 .chat-confirmation-widget-message code {
  font: 12px var(--monaco-monospace-font);
  background: var(--vscode-textPreformat-background);
  color: var(--vscode-textPreformat-foreground);
  padding: 1px 6px;
  border-radius: 3px;
}

/* The terminal-editor block renders the shell command via a plain
 * <pre><code> instead of a Monaco editor (we can't embed Monaco inside
 * Monaco). Style it to feel like the VS Code one. */
.chat-confirmation-message-terminal .interactive-result-code-block pre {
  margin: 0;
  background: var(--vscode-textCodeBlock-background, var(--vscode-editorWidget-background));
  padding: 6px 10px;
  overflow-x: auto;
}
.chat-confirmation-message-terminal .interactive-result-code-block pre code {
  font: 12.5px var(--monaco-monospace-font);
  display: block;
}

/* --- file-modification badge ----------------------------------- */
/* Reuses VS Code's .chat-attached-context-attachment compact chip (from
 * chat.css line 2210), with an action verb suffix coloured by intent. */
.file-mod-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 6px;
  margin: 6px 0 0;
  height: 22px;
  background: var(--vscode-input-background);
  border: 1px solid var(--vscode-widget-border, var(--vscode-chat-requestBorder));
  border-radius: 11px;
  font-size: 11.5px;
  color: var(--vscode-foreground);
  width: fit-content;
  max-width: 100%;
}
.file-mod-badge .file-mod-icon {
  font-size: 13px;
  color: var(--vscode-textLink-foreground);
  flex-shrink: 0;
}
.file-mod-badge[data-verb="created"] .file-mod-icon,
.file-mod-badge[data-verb="created"] .label-suffix { color: var(--vscode-chat-linesAddedForeground); }
.file-mod-badge[data-verb="edited"]  .file-mod-icon,
.file-mod-badge[data-verb="edited"]  .label-suffix { color: var(--vscode-chat-linesAddedForeground); }
.file-mod-badge[data-verb="patched"] .file-mod-icon,
.file-mod-badge[data-verb="patched"] .label-suffix { color: var(--vscode-chat-linesAddedForeground); }
.file-mod-badge[data-verb="deleted"] .file-mod-icon,
.file-mod-badge[data-verb="deleted"] .label-suffix { color: var(--vscode-chat-linesRemovedForeground); }
.file-mod-badge[data-verb="ran"]     .file-mod-icon,
.file-mod-badge[data-verb="ran"]     .label-suffix { color: var(--vscode-charts-yellow, #d4b837); }
.file-mod-badge .monaco-icon-label { display: inline-flex; min-width: 0; }
.file-mod-badge .label-name {
  color: var(--vscode-foreground);
  font: 11.5px var(--monaco-monospace-font);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-mod-badge .label-suffix {
  margin-left: 6px;
  font-size: 10.5px;
  text-transform: lowercase;
}

/* notice (errors/warnings) */
.notice {
  max-width: 950px;
  margin: 4px auto;
  padding: 6px 22px;
  font-size: var(--vscode-chat-font-size-body-s);
  display: flex;
  align-items: center;
  gap: 6px;
}
.notice.error { color: var(--vscode-errorForeground); }
.notice.warn  { color: var(--vscode-notificationsWarningIcon-foreground, #cca700); }

/* attachments (chips) */
.chat-attached-context {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 4px;
}
.chat-attached-context:empty { padding: 0; }
.chat-attached-context .chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--vscode-input-background);
  border: 1px solid var(--vscode-widget-border, transparent);
  border-radius: 12px;
  padding: 3px 4px 3px 10px;
  font-size: 11.5px;
  color: var(--vscode-foreground);
}
.chat-attached-context .chip .codicon { color: var(--vscode-descriptionForeground); font-size: 12px; }
.chat-attached-context .chip button {
  background: none; border: none;
  color: var(--vscode-descriptionForeground);
  cursor: pointer; padding: 0 4px; line-height: 1;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-grid; place-items: center;
}
.chat-attached-context .chip button:hover {
  background: var(--vscode-toolbar-hoverBackground);
  color: var(--vscode-foreground);
}

/* autopilot-resolved permission card has a fade so users can tell it
 * was auto-handled — VS Code's confirmation widget styling handles the
 * base look; this dims the resolved variant. */
.chat-confirmation-widget.auto-resolved {
  opacity: 0.65;
}
.chat-confirmation-widget.auto-resolved .resolution-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--vscode-descriptionForeground);
  margin-top: 6px;
}
.chat-confirmation-widget.resolved .chat-confirmation-widget-buttons,
.chat-confirmation-widget.resolved .chat-confirmation-buttons-container { display: none; }
.chat-confirmation-widget.resolved .resolution-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--vscode-descriptionForeground);
  margin-top: 6px;
}

/* Hide welcome view once the thread has anything. */
.interactive-list:not([hidden]) ~ .interactive-input-part .chat-welcome-view-container,
body.has-turns #welcome-view {
  display: none;
}

/* While the backend isn't `ready` yet (MCP bridge still spawning,
 * RAG model still loading, SSE still negotiating), dim + lock the
 * composer so the user can't fire a request that will queue against
 * a half-warm server. The status indicator at the bottom of the
 * panel keeps showing what's happening. */
body.session-not-ready .chat-input-container {
  pointer-events: none;
}
/* Composer lock overlay — one solid panel over the whole input box.
 * A real element, not a pseudo-element: vendor chat.css owns the
 * container's ::before/::after for the focus glow. */
.interactive-input-part { position: relative; }
.composer-lock { display: none; }
body.session-not-ready .composer-lock {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  z-index: 60;
  background: var(--vscode-input-background, #313131);
  border-radius: 8px;
  font-size: 12px;
  color: var(--vscode-descriptionForeground, #9d9d9d);
}
.composer-lock-spinner { font-size: 13px; opacity: 0.8; }
/* Connection lost reads differently from a slow first boot — JS sets the
 * text and toggles `conn-lost` on the SSE error/open events. */
body.session-not-ready.conn-lost .composer-lock {
  color: var(--vscode-errorForeground, #f48771);
}
body.session-not-ready.conn-lost .composer-lock-spinner { display: none; }
body.session-not-ready .chat-welcome-view-suggested-prompts {
  opacity: 0.4;
  pointer-events: none;
}

/* ───── Thinking-box leading icon ─────
 * VS Code vendors a rule that hides the first-child codicon inside
 * a thinking-box label (chat.css:
 *   `.interactive-session .chat-used-context-label .monaco-icon-button
 *   > .codicon:first-child:not(.chat-collapsible-hover-chevron)…`).
 * Their UI compensates by showing the chevron only on hover. In our
 * UI that leaves "Listed scenarios" rendered as bare grey text with
 * no visual affordance — easy to miss. Force the leading icon back on
 * so the user always sees "● Listed scenarios" with a clickable look. */
.chat-pane .chat-thinking-box .chat-used-context-label .monaco-icon-button > .codicon:first-child {
  display: inline-block !important;
  font-size: 13px;
  margin-right: 4px;
  color: var(--vscode-foreground, #cccccc);
  opacity: 0.85;
}
.chat-pane .chat-thinking-box .chat-used-context-label .monaco-icon-button {
  /* Wrap header in a subtle pill so the user sees it's a clickable
   * summary, not loose plain text. Hovers like a button. */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 12px;
  color: var(--vscode-descriptionForeground, #9d9d9d);
  cursor: pointer;
}
.chat-pane .chat-thinking-box .chat-used-context-label .monaco-icon-button:hover {
  background: var(--vscode-list-hoverBackground, rgba(255,255,255,0.06));
  border-color: var(--vscode-chat-requestBorder, rgba(255,255,255,0.1));
}
/* Always show the chevron — VS Code reveals it only on hover, but in
 * a narrow chat pane the user wants the affordance visible upfront. */
.chat-pane .chat-thinking-box .chat-collapsible-hover-chevron {
  opacity: 0.6;
  display: inline-block !important;
  font-size: 11px;
  margin-left: 4px;
}
.chat-pane .chat-thinking-box .chat-used-context-label .monaco-icon-button:hover .chat-collapsible-hover-chevron {
  opacity: 1;
}

/* ───── Context-usage circular gauge (verbatim VS Code) ─────
 * Rules pulled from workbench.desktop.main.css via CDP. Shows current
 * input-token usage as a 14×14 SVG ring. Hover expands the % label. */
.chat-context-usage-widget {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  cursor: pointer;
  padding: 3px;
  border-radius: 5px;
  box-sizing: border-box;
}
.chat-context-usage-widget[hidden] { display: none; }
.chat-context-usage-widget:hover {
  background-color: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.08));
}
.chat-context-usage-widget .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.chat-context-usage-widget .circular-progress {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.chat-context-usage-widget .progress-bg {
  fill: none;
  stroke: var(--vscode-disabledForeground, rgba(255,255,255,0.35));
  stroke-width: 4;
  opacity: 0.5;
}
.chat-context-usage-widget .progress-arc {
  fill: none;
  stroke: var(--vscode-icon-foreground, #cccccc);
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  pointer-events: none;
  transition: stroke-dashoffset 0.25s ease;
}
.chat-context-usage-widget.warning .progress-arc {
  stroke: var(--vscode-editorWarning-foreground, #cca700);
}
.chat-context-usage-widget.error .progress-arc {
  stroke: var(--vscode-editorError-foreground, #f48771);
}
.chat-context-usage-widget .percentage-label {
  font-size: 11px;
  line-height: 1;
  color: var(--vscode-descriptionForeground, #9d9d9d);
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.1s ease-out, opacity 0.1s ease-out;
}
.chat-context-usage-widget:hover .percentage-label,
.chat-context-usage-widget:focus .percentage-label {
  max-width: 4em;
  opacity: 1;
}

/* ───── Plan-then-execute task list (Claude Code / Devin style) ───── */
.agent-plan-widget {
  border: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.10));
  border-radius: 6px;
  padding: 10px 12px;
  margin: 4px 0 12px;
  background: var(--vscode-editorWidget-background, rgba(255,255,255,0.025));
}
.agent-plan-goal {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--vscode-foreground, #cccccc);
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.06));
}
.agent-plan-goal .codicon { color: var(--vscode-textLink-foreground, #4fc3f7); }
.agent-plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: plan;
}
.agent-plan-step {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--vscode-descriptionForeground, #9d9d9d);
}
.agent-plan-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.agent-plan-marker { padding-top: 1px; }
.agent-plan-marker .codicon { font-size: 14px; }
.agent-plan-toolcall {
  font-size: 10.5px;
  color: var(--vscode-descriptionForeground, #7a7a7a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-plan-step.plan-pending .agent-plan-marker .codicon {
  color: var(--vscode-descriptionForeground, #888);
}
.agent-plan-step.plan-in_progress { color: var(--vscode-foreground, #cccccc); }
.agent-plan-step.plan-in_progress .agent-plan-marker .codicon {
  color: var(--vscode-textLink-foreground, #4fc3f7);
}
.agent-plan-step.plan-done {
  color: var(--vscode-foreground, #cccccc);
}
.agent-plan-step.plan-done .agent-plan-title {
  text-decoration: line-through;
  text-decoration-color: var(--vscode-descriptionForeground, #888);
  opacity: 0.75;
}
.agent-plan-step.plan-done .agent-plan-marker .codicon {
  color: var(--vscode-charts-green, #4ec9b0);
}
.agent-plan-step.plan-skipped .agent-plan-marker .codicon { color: var(--vscode-descriptionForeground, #666); }
.agent-plan-step.plan-skipped .agent-plan-title { opacity: 0.55; }
.agent-plan-step.plan-failed .agent-plan-marker .codicon { color: var(--vscode-errorForeground, #f48771); }
/* Cancelled = user pressed stop while this step was in_progress. Same
   muted tone as skipped (it didn't fail, the user just opted out) but
   the title stays at full opacity so it's clear which step they
   stopped on. */
.agent-plan-step.plan-cancelled .agent-plan-marker .codicon { color: var(--vscode-descriptionForeground, #888); }
.agent-plan-step.plan-cancelled .agent-plan-title { opacity: 0.7; }
/* Thin progress bar inside .agent-plan-note for multi-call steps —
   complements the "3/10" text with a glanceable fill so users see
   progress without parsing the fraction. */
.agent-plan-progress {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 3px;
  margin-top: 3px;
  background: var(--vscode-progressBar-background, rgba(255, 255, 255, 0.08));
  border-radius: 2px;
  overflow: hidden;
}
.agent-plan-progress-fill {
  height: 100%;
  background: var(--vscode-progressBar-foreground,
                var(--vscode-charts-blue, #4fc1ff));
  transition: width 0.18s ease-out;
}
.agent-plan-note {
  font-size: 10.5px;
  color: var(--vscode-descriptionForeground, #777);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-plan-note:empty { display: none; }
/* skipped / failed steps — the status note must read clearly; the
   codicon alone is too subtle ("왜 다 체크 버튼이고"). */
.agent-plan-step.plan-skipped .agent-plan-note,
.agent-plan-step.plan-failed .agent-plan-note {
  font-style: normal;
  font-weight: 600;
}
.agent-plan-step.plan-failed .agent-plan-note {
  color: var(--vscode-errorForeground, #f48771);
}
.agent-plan-step.plan-failed .agent-plan-marker .codicon,
.agent-plan-step.plan-skipped .agent-plan-marker .codicon { font-size: 15px; }

/* blocked plan — red border + a reason banner inside the card */
.agent-plan-widget.blocked {
  border-color: var(--vscode-errorForeground, #f48771);
}
.agent-plan-blocked {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 5px;
  background: var(--vscode-inputValidation-errorBackground, rgba(244,135,113,0.12));
  border: 1px solid var(--vscode-errorForeground, #f48771);
  font-size: 11.5px;
  line-height: 1.45;
}
.agent-plan-blocked .codicon {
  color: var(--vscode-errorForeground, #f48771);
  padding-top: 1px;
}
.agent-plan-blocked-text { color: var(--vscode-foreground, #cccccc); }

/* a turn that had a failed tool — red thinking-box header so a
   collapsed box still signals trouble */
.chat-thinking-box.has-failure .chat-thinking-title-shimmer {
  color: var(--vscode-errorForeground, #f48771);
}

/* user-skipped tool card */
.chat-tool-invocation-part.tool-skipped { opacity: 0.55; }
.agent-plan-widget.editable {
  border-color: var(--vscode-focusBorder, #007fd4);
  background: rgba(0, 127, 212, 0.04);
}
.agent-plan-widget.approved { border-color: var(--vscode-panel-border, rgba(255,255,255,0.12)); }
.agent-plan-widget.done { opacity: 0.9; }
.agent-plan-widget.cancelled { opacity: 0.5; }

/* ── editable plan card ── */
.agent-plan-goal-input {
  flex: 1;
  background: var(--vscode-input-background, rgba(255,255,255,0.06));
  border: 1px solid var(--vscode-input-border, rgba(255,255,255,0.10));
  border-radius: 4px;
  color: var(--vscode-input-foreground, #cccccc);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 7px;
}
.agent-plan-goal-input:focus {
  outline: none;
  border-color: var(--vscode-focusBorder, #007fd4);
}
.agent-plan-step.plan-step-card {
  display: block;
  border: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.10));
  border-radius: 5px;
  background: var(--vscode-editorWidget-background, rgba(255,255,255,0.02));
  padding: 7px 9px;
  margin: 5px 0;
}
.plan-step-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.plan-step-num {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vscode-badge-background, #4d4d4d);
  color: var(--vscode-badge-foreground, #fff);
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-step-title {
  flex: 1;
  min-width: 0;
  background: var(--vscode-input-background, rgba(255,255,255,0.06));
  border: 1px solid var(--vscode-input-border, rgba(255,255,255,0.10));
  border-radius: 4px;
  color: var(--vscode-input-foreground, #cccccc);
  font-size: 12px;
  padding: 3px 7px;
}
.plan-step-title:focus,
.plan-step-tool:focus,
.plan-arg-input:focus {
  outline: none;
  border-color: var(--vscode-focusBorder, #007fd4);
}
.plan-step-ctrls { display: flex; gap: 2px; flex: none; }
.plan-step-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--vscode-icon-foreground, #c5c5c5);
  cursor: pointer;
}
.plan-step-ctrl:hover:not(:disabled) {
  background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.10));
}
.plan-step-ctrl:disabled { opacity: 0.3; cursor: default; }
.plan-step-ctrl .codicon { font-size: 13px; }
.plan-step-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  padding-left: 25px;
}
.plan-step-tool,
.plan-arg-input {
  background: var(--vscode-dropdown-background, rgba(255,255,255,0.06));
  border: 1px solid var(--vscode-dropdown-border, rgba(255,255,255,0.10));
  border-radius: 4px;
  color: var(--vscode-dropdown-foreground, #cccccc);
  font-size: 11.5px;
  padding: 3px 6px;
}
.plan-step-tool {
  align-self: flex-start;
  max-width: 100%;
}
.plan-step-args {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.plan-step-args.empty {
  font-size: 10.5px;
  font-style: italic;
  color: var(--vscode-descriptionForeground, #888);
}
.plan-arg-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-arg-name {
  flex: 0 0 118px;
  font-size: 11px;
  color: var(--vscode-descriptionForeground, #b5b5b5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-arg-name.req::after {
  content: " *";
  color: var(--vscode-charts-orange, #cca700);
}
.plan-arg-input { flex: 1; min-width: 0; }
/* Muted one-liner shown instead of empty input boxes for args the agent
   determines during execution (e.g. node IDs sampled mid-run). */
.plan-arg-auto {
  font-size: 10.5px;
  font-style: italic;
  color: var(--vscode-descriptionForeground, #888);
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-arg-auto::before {
  content: "";
  flex: 0 0 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vscode-charts-blue, #4daafc);
  opacity: 0.7;
}
.plan-args-hint {
  font-size: 10.5px;
  font-style: italic;
  color: var(--vscode-descriptionForeground, #888);
}
.plan-args-more > summary {
  font-size: 10.5px;
  color: var(--vscode-textLink-foreground, #4fc3f7);
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
  user-select: none;
}
.plan-args-more > summary::-webkit-details-marker { display: none; }
.plan-args-more > summary::before { content: "▸ "; }
.plan-args-more[open] > summary::before { content: "▾ "; }
.plan-args-more > .plan-arg-field { margin-top: 5px; }
.agent-plan-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  border: 1px dashed var(--vscode-panel-border, rgba(255,255,255,0.22));
  border-radius: 4px;
  background: transparent;
  color: var(--vscode-foreground, #cccccc);
  cursor: pointer;
}
.agent-plan-add:hover {
  background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.08));
}
.agent-plan-add .codicon { font-size: 12px; }
.agent-plan-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--vscode-focusBorder, #007fd4);
  color: white;
}
.agent-plan-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.06));
}
.agent-plan-hint {
  flex: 1;
  font-size: 11px;
  color: var(--vscode-descriptionForeground, #888);
}
.agent-plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}
.agent-plan-btn .codicon { font-size: 12px; }
.agent-plan-btn.cancel {
  background: transparent;
  color: var(--vscode-foreground, #cccccc);
  border-color: var(--vscode-panel-border, rgba(255,255,255,0.20));
}
.agent-plan-btn.cancel:hover { background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.08)); }
.agent-plan-btn.approve,
.agent-plan-btn.submit {
  background: var(--vscode-button-background, #0e639c);
  color: var(--vscode-button-foreground, #ffffff);
}
.agent-plan-btn.approve:hover,
.agent-plan-btn.submit:hover { background: var(--vscode-button-hoverBackground, #1177bb); }

/* ───── ask_user widget (VS Code chat question carousel) ─────
 * Layout is provided 1:1 by /static/vendor/chatQuestionCarousel.css
 * (vendored from vscode-src chatQuestionCarousel.css). The only thing
 * we patch locally is the anchor-as-button reset for `.monaco-button`
 * elements VS Code creates from the `Button` class (those normally pick
 * up link styling from our globals). */
.chat-question-carousel-container a.monaco-button {
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 12px;
}
.chat-question-carousel-container a.monaco-button.disabled {
  opacity: 0.5;
  cursor: default;
}

/* ───── Reasoning (CoT) collapsible above the answer ─────
 * Gemma 4 has no native thinking channel on this build, so we prompt
 * the model to wrap its chain-of-thought in `<reasoning>...</reasoning>`.
 * renderMd() in app.js converts that tag into <details> so the user can
 * see (or hide) the model's pre-answer reasoning. */
.reasoning-block {
  margin: 4px 0 10px;
  border-left: 2px solid var(--vscode-editorWidget-border, rgba(255,255,255,0.10));
  padding: 4px 0 4px 10px;
  font-size: 12px;
  color: var(--vscode-descriptionForeground, #9d9d9d);
}
.reasoning-block > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 11px;
  color: var(--vscode-descriptionForeground, #9d9d9d);
  padding: 2px 0;
  outline: none;
}
.reasoning-block > summary::-webkit-details-marker { display: none; }
.reasoning-block > summary::before {
  content: "▸ ";
  display: inline-block;
  width: 12px;
}
.reasoning-block[open] > summary::before { content: "▾ "; }
.reasoning-block .reasoning-body {
  margin-top: 4px;
  white-space: normal;
}
.reasoning-block .reasoning-body p {
  margin: 4px 0;
}

/* ───── Welcome-view suggested-prompt chips ───── */
/* Chips appear directly under the title (in-flow). The original VS Code
 * pattern docks them to the bottom of the chat pane (with absolute
 * positioning, the vendored rule). In our standalone build that leaves
 * a huge empty gap between the centered title and the chips — they end
 * up looking disconnected. Explicitly override position/bottom so the
 * vendored absolute rule doesn't bleed through. */
.chat-welcome-view-suggested-prompts {
  position: static;       /* override vendored `absolute` */
  bottom: auto;
  left: auto;
  right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0 16px;
  max-width: 520px;
  background: transparent;
}
.chat-welcome-view-suggested-prompt {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 4px;
  background-color: var(--vscode-editorWidget-background, rgba(255,255,255,0.04));
  cursor: pointer;
  border: 1px solid var(--vscode-chat-requestBorder, var(--vscode-input-background, rgba(255,255,255,0.10)));
  width: fit-content;
  margin: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  outline: none;
}
.chat-welcome-view-suggested-prompt:hover,
.chat-welcome-view-suggested-prompt:focus-visible {
  background-color: var(--vscode-list-hoverBackground, rgba(255,255,255,0.08));
}
.chat-welcome-view-suggested-prompt-title {
  font-size: 12px;
  color: var(--vscode-editorWidget-foreground, #cccccc);
  white-space: nowrap;
}

/* ───── Floating dropdown menu (used by mode + approvals pickers) ───── */
.picker-menu {
  position: fixed;
  z-index: 1000;
  min-width: 240px;
  padding: 4px;
  background: var(--vscode-menu-background, #252526);
  color: var(--vscode-menu-foreground, #cccccc);
  border: 1px solid var(--vscode-menu-border, rgba(255,255,255,0.15));
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  font-size: 12px;
}
.picker-menu[hidden] { display: none; }
.picker-menu-item {
  display: grid;
  grid-template-columns: 16px 16px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.picker-menu-item:hover,
.picker-menu-item:focus-visible {
  background: var(--vscode-menu-selectionBackground, rgba(13, 99, 156, 0.45));
  color: var(--vscode-menu-selectionForeground, #ffffff);
}
.picker-menu-item .codicon { font-size: 13px; }
.picker-menu-item .picker-menu-label { font-weight: 500; }
.picker-menu-item .picker-menu-desc {
  font-size: 11px;
  opacity: 0.7;
}
/* Model picker entries are wider — show notes on a second visual line
 * via grid auto-rows so long descriptions wrap under the label. */
.picker-menu-item.model-menu-item {
  grid-template-columns: 16px 16px 1fr;
  grid-auto-rows: auto;
  gap: 4px 8px;
  min-width: 340px;
  max-width: 420px;
  padding: 7px 10px;
}
.picker-menu-item.model-menu-item .picker-menu-label {
  font-weight: 500;
  font-size: 12px;
}
.picker-menu-item.model-menu-item .picker-menu-desc {
  grid-column: 3;
  white-space: normal;
  line-height: 1.4;
  margin-top: -2px;
  font-size: 10.5px;
}

/* ───── Bottom toolbar layout — verbatim rules from VS Code's bundled
 * workbench.desktop.main.css (extracted via CDP from a live VS Code 1.120
 * Electron renderer). Specifically the `.interactive-session
 * .chat-input-toolbars *` and `.chat-secondary-toolbar *` blocks. The
 * rules below are byte-for-byte the real VS Code Copilot styles, with
 * minor tweaks where our DOM lacks `.interactive-session` ancestry. */
.interactive-session .chat-input-toolbars,
.chat-input-toolbars {
  display: flex;
  align-items: center;
  /* No own padding — VS Code's rule has none; the input box's 6px inset
     already aligns this row. gap/margin-top come from the rule above. */
}
.interactive-session .chat-input-toolbars > .chat-execute-toolbar,
.chat-input-toolbars > .chat-execute-toolbar { order: 2; margin-left: auto; }
/* The gauge container floats right within the secondary toolbar via
 * `margin-left:auto` + `order:1` (verbatim VS Code). With order:1 it
 * renders AFTER the picker toolbar, so the visible order is:
 *   [status] [Approvals picker] [○ gauge]
 * The vendor chat.css rule already sets this; we just remove the
 * earlier override that broke it. */

/* All toolbars use action-bar layout — inline list, no bullets. */
.chat-input-toolbar .actions-container,
.chat-execute-toolbar .actions-container,
.chat-secondary-input-toolbar .actions-container {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Icon-only buttons (Add Context / Settings / mode-picker-icon-dropdown).
 * VS Code makes these exactly 22x22 with 5px radius. */
.chat-input-toolbar .action-item.menu-entry .action-label,
.chat-input-toolbar .chat-input-picker-item .action-label.hide-chevrons:not(:has(.chat-input-picker-label)) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 5px;
  color: var(--vscode-icon-foreground, #cccccc);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.chat-input-toolbar .action-item .action-label:hover,
.chat-execute-toolbar .action-item .action-label:hover,
.chat-secondary-input-toolbar .action-item .action-label:hover {
  background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.08));
}
.chat-input-toolbar .action-label[disabled],
.chat-execute-toolbar button:disabled { opacity: 0.5; pointer-events: none; }

/* Send/Cancel button (single, swaps icon by state). */
.chat-execute-toolbar .action-item .action-label,
.chat-execute-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: var(--vscode-icon-foreground, #cccccc);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
  font-size: 14px;
}
/* Send arrow inherits the transparent base above — VS Code keeps it a
 * plain gray icon, brightening only on hover. No fill. */
.chat-execute-toolbar button.codicon-arrow-up:hover {
  background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.1));
}
.chat-execute-toolbar button.codicon-stop-circle {
  color: var(--vscode-errorForeground, #f48771);
}

/* Picker items WITH visible label (model picker, session-target, approvals). */
.chat-input-picker-item .action-label.hide-chevrons:has(.chat-input-picker-label),
.chat-input-picker-item .model-picker-split,
.chat-secondary-toolbar .chat-input-picker-item .action-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 3px 0 3px 6px;
  /* VS Code's model picker label is a quiet dimmed gray (rgb(140,140,140)),
   * not the brighter icon-foreground — matched via CDP. */
  color: var(--vscode-descriptionForeground, #8c8c8c);
  border-radius: 5px;
  font-size: 11px;
  cursor: pointer;
}
.chat-input-picker-label {
  font-size: 11px;
  line-height: 18.2px;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.chat-input-picker-item .action-label .codicon-chevron-down {
  font-size: 11px;
  opacity: 0.7;
  padding-right: 4px;
}
/* VS Code values, matched via CDP: split padding 3px 7px / gap 2px;
 * the name section pads 3px 5px and rounds 4px (the hover target).
 * Selector mirrors rule 1426's specificity so it actually wins. */
.chat-input-picker-item .model-picker-split { padding: 3px 7px; gap: 2px; cursor: default; }
.model-picker-split .model-picker-section {
  display: inline-flex;
  align-items: center;
  padding: 3px 5px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.model-picker-split .model-picker-section:hover {
  background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.08));
}

/* Secondary toolbar = the row with status + session-target + approvals.
 * VS Code rule: `display:flex;align-items:center;gap:6px;padding:0 4px 0 5px`. */
.chat-secondary-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 5px;
  font-size: 11px;
  min-height: 22px;
}
.chat-secondary-toolbar:empty { display: none; }
.chat-secondary-toolbar .chat-context-usage-container { margin-left: auto; }
.chat-secondary-toolbar .status-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--vscode-descriptionForeground, #888);
}
.chat-secondary-toolbar .dim { opacity: 0.6; }
.chat-secondary-toolbar .status-sep { opacity: 0.4; padding: 0 2px; }
/* The chat-context-usage-container's margin-left:auto already pushes
 * everything after it to the right edge; don't duplicate on the toolbar. */

/* VS Code's chat shows "Checkpoint Restored" only when the user rewinds
 * to a previous turn. We don't implement checkpoint restoration, so the
 * container's "Checkpoint Restored · " label should never appear.
 * The base chat.css does NOT hide it by default; copilot_clone's DOM
 * mirroring adds a literal label to every row. Suppress here. */
.checkpoint-container,
.checkpoint-restore-container {
  display: none !important;
}

/* Empty footer toolbar on every response row — VS Code uses it for
 * rate/copy/regenerate actions which we don't implement. Hide so it
 * doesn't reserve dead vertical space below each turn. */
.chat-footer-toolbar { display: none !important; }
.chat-footer-toolbar:has(.action-item) { display: block !important; }

/* User-message header (avatar + "You"). Hidden in appendRequest() but
 * cover any leftover style overrides here too. */
.interactive-request .user.hidden,
.interactive-request .avatar-container.hidden { display: none !important; }

/* ──────────── AequilibraE result viz ────────────
 * Compact card attached below a tool's invocation in the thinking-box.
 * Uses the same panel/border tokens as VS Code's chat widgets so it
 * sits visually under the tool card without competing with it. */
.aeq-viz {
  margin: 6px 0 4px 24px;
  padding: 8px 10px;
  border: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.10));
  border-radius: 4px;
  background: var(--vscode-editorWidget-background, rgba(255,255,255,0.03));
  font-size: 12px;
}
.aeq-viz-title {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vscode-descriptionForeground, #aaa);
  margin-bottom: 6px;
}
.aeq-viz-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: var(--vscode-descriptionForeground, #aaa);
  margin: 8px 0 4px;
}
.aeq-viz-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.aeq-viz-stat {
  display: flex;
  flex-direction: column;
}
.aeq-viz-stat-value {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--vscode-textLink-foreground, #4fc3f7);
}
.aeq-viz-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vscode-descriptionForeground, #aaa);
}
.aeq-viz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.aeq-viz-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--vscode-badge-background, rgba(255,255,255,0.07));
  color: var(--vscode-badge-foreground, #ddd);
  font-family: var(--vscode-editor-font-family, monospace);
  font-size: 11px;
  white-space: nowrap;
}
.aeq-viz-chip-root {
  background: var(--vscode-statusBarItem-warningBackground, #e09f3e);
  color: var(--vscode-statusBarItem-warningForeground, #fff);
}
.aeq-viz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--vscode-editor-font-family, monospace);
}
.aeq-viz-table th,
.aeq-viz-table td {
  text-align: left;
  padding: 3px 8px 3px 0;
  border-bottom: 1px solid var(--vscode-panel-border, rgba(255,255,255,0.05));
  vertical-align: top;
}
.aeq-viz-table th {
  color: var(--vscode-descriptionForeground, #aaa);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 10px;
}
.aeq-viz-footnote {
  margin-top: 6px;
  font-size: 11px;
  color: var(--vscode-descriptionForeground, #aaa);
  font-style: italic;
}

/* ───── Conversation-room list ─────
 * Models VS Code Copilot's .agent-sessions-viewer: a list of past
 * conversations above the chat. Each row = status dot + title +
 * timestamp. Shown on page load; hidden once a room is entered. */
.room-list-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.room-list-view[hidden] { display: none !important; }

/* Project picker — app entry surface. Mutually exclusive with the chat
 * session (one is always hidden), so neither fights for flex space. */
.project-picker-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.project-picker-view[hidden] { display: none !important; }
.interactive-session[hidden] { display: none !important; }
.project-open-row {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  flex-shrink: 0;
  border-top: 1px solid var(--vscode-chat-requestBorder, rgba(255,255,255,0.08));
}
.project-path-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--vscode-input-background, #2b2b2b);
  color: var(--vscode-input-foreground, #cccccc);
  border: 1px solid var(--vscode-input-border, rgba(255,255,255,0.12));
}
.project-path-input:focus {
  outline: none;
  border-color: var(--vscode-focusBorder, #0078d4);
}
.project-open-error {
  padding: 2px 12px 8px;
  font-size: 11px;
  color: var(--vscode-errorForeground, #f48771);
}
.project-open-error[hidden] { display: none; }
.room-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vscode-chat-requestBorder, rgba(255,255,255,0.1));
}
.room-list-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--vscode-foreground, #ccc);
}
/* When the header carries a "← Projects" button, let the project name
 * take the middle and stay clipped rather than shoving the buttons. */
.room-list-header .room-list-title {
  flex: 1;
  margin: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--vscode-button-border, transparent);
  background: var(--vscode-button-background, #0078d4);
  color: var(--vscode-button-foreground, #fff);
  cursor: pointer;
}
.room-new-btn:hover { filter: brightness(1.12); }
.room-new-btn .codicon { font-size: 13px; }
.room-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}
.room-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.room-row:hover { background: var(--vscode-list-hoverBackground, rgba(255,255,255,0.06)); }
.room-row-dot {
  font-size: 8px;
  margin-top: 5px;
  flex-shrink: 0;
  color: var(--vscode-descriptionForeground, #888);
  opacity: 0.55;
}
.room-row-dot.active {
  color: var(--vscode-textLink-foreground, #4daafc);
  opacity: 1;
}
.room-row-main { flex: 1; min-width: 0; }
.room-row-title {
  font-size: 13px;
  color: var(--vscode-foreground, #ccc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-row-detail {
  font-size: 12px;
  color: var(--vscode-descriptionForeground, #888);
  margin-top: 4px;
}
.room-list-empty {
  padding: 24px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--vscode-descriptionForeground, #888);
}

/* In-conversation navigation bar — VS Code .chat-view-title-container.
 * "← back to room list" + session title. */
.chat-nav-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--vscode-chat-requestBorder, rgba(255,255,255,0.08));
}
.chat-nav-bar[hidden] { display: none !important; }
.chat-nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--vscode-icon-foreground, #8c8c8c);
  cursor: pointer;
}
.chat-nav-back:hover {
  background: var(--vscode-toolbar-hoverBackground, rgba(255,255,255,0.1));
  color: var(--vscode-foreground, #ccc);
}
.chat-nav-back .codicon { font-size: 16px; }
.chat-nav-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--vscode-foreground, #ccc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}