:root {
  --fg: var(--vscode-foreground, #cccccc);
  --muted: var(--vscode-descriptionForeground, #9d9d9d);
  --bg: var(--vscode-sideBar-background, var(--vscode-editor-background, #1e1e1e));
  --panel: var(--vscode-editorWidget-background, #252526);
  --code-bg: var(--vscode-textCodeBlock-background, rgba(127, 127, 127, 0.1));
  --border: var(--vscode-widget-border, var(--vscode-panel-border, rgba(128, 128, 128, 0.28)));
  --input-bg: var(--vscode-input-background, #2a2a2a);
  --input-border: var(--vscode-input-border, rgba(128, 128, 128, 0.35));
  --focus: var(--vscode-focusBorder, #3b82f6);
  --link: var(--vscode-textLink-foreground, #4daafc);
  --button-bg: var(--vscode-button-background, #0e639c);
  --button-fg: var(--vscode-button-foreground, #ffffff);
  --button2-bg: var(--vscode-button-secondaryBackground, #3a3d41);
  --button2-fg: var(--vscode-button-secondaryForeground, #cccccc);
  --green: var(--vscode-testing-iconPassed, #3fb950);
  --red: var(--vscode-testing-iconFailed, #f85149);
  --amber: var(--vscode-editorWarning-foreground, #d29922);
  --violet: #b392f0;
  --line: rgba(128, 128, 128, 0.32);
  --edge: rgba(200, 204, 212, 0.55);            /* the chat box's thin bright-silver outline */
  --mono: var(--vscode-editor-font-family, Consolas, "Courier New", monospace);
  --font: var(--vscode-font-family, -apple-system, "Segoe UI", sans-serif);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--vscode-font-size, 13px);
  line-height: 1.5;
}

body { display: flex; flex-direction: column; }

/* ---------- header ---------- */

header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  flex: none;
}

header .title { font-weight: 600; }
header .title .spark { color: var(--violet); margin-right: 4px; }
header .where { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
body { position: relative; }
.icon-button.icon { padding: 4px; display: inline-flex; align-items: center; justify-content: center; }
.icon-button.icon svg { display: block; }

/* chat history: a dropdown under the header, newest chat first */
.history-panel {
  position: absolute; top: 42px; right: 10px; z-index: 30;
  width: min(360px, calc(100% - 20px)); max-height: 60vh; overflow-y: auto;
  background: var(--vscode-editorWidget-background, var(--vscode-editor-background, #1e1e1e));
  border: 1px solid var(--border); border-radius: 8px; padding: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.history-panel .heading { font-size: 11px; color: var(--muted); padding: 4px 8px 6px; letter-spacing: 0.04em; text-transform: uppercase; }
.history-panel .empty { color: var(--muted); padding: 6px 8px 8px; font-size: 12px; }
.history-item {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--fg); font: inherit;
  padding: 7px 8px; border-radius: 5px; cursor: pointer;
}
.history-item:hover { background: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.06)); }
.history-item.current { background: var(--vscode-list-inactiveSelectionBackground, rgba(255, 255, 255, 0.1)); }
.history-item .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item .when { flex: none; color: var(--muted); font-size: 11.5px; }

/* activity bar: five step markers above the input, lit left to right while a task runs */
.activity { display: flex; justify-content: center; gap: 4px; padding: 0 2px 8px; }
.activity[hidden] { display: none; }
.activity span {
  width: 5px; height: 5px; border-radius: 1.5px;
  background: #ffffff; opacity: 0.18;                             /* white, lit left to right */
  animation: activity-step 1.25s ease-in-out infinite;
}
.activity span:nth-child(2) { animation-delay: 0.15s; }
.activity span:nth-child(3) { animation-delay: 0.3s; }
.activity span:nth-child(4) { animation-delay: 0.45s; }
.activity span:nth-child(5) { animation-delay: 0.6s; }
@keyframes activity-step { 0%, 55%, 100% { opacity: 0.18; } 20% { opacity: 1; } }
.activity.paused span { animation: none; opacity: 0.3; }              /* waiting for your answer, not working */
body.vscode-light .activity span,
body.vscode-high-contrast-light .activity span { background: #2f3338; }   /* white vanishes on a light theme */
body.vscode-light,
body.vscode-high-contrast-light { --edge: rgba(120, 126, 136, 0.55); }
@media (prefers-reduced-motion: reduce) {
  .activity span { animation: none; opacity: 0.9; }
  .activity.paused span { opacity: 0.3; }
}

.icon-button {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.icon-button:hover { color: var(--fg); background: var(--code-bg); }

/* ---------- conversation ---------- */

#scroll { flex: 1; overflow-y: auto; padding: 14px 16px 8px; }

.welcome { color: var(--muted); min-height: 60vh; display: flex; flex-direction: column;
           align-items: center; justify-content: center; gap: 10px; text-align: center; }
.welcome h1 { font-size: 28px; color: var(--fg); margin: 0; font-weight: 600; }
.welcome h1 .spark { color: var(--violet); }
.welcome ul { margin: 8px 0 0; padding-left: 18px; }
.warning {
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  color: var(--fg);
  border-radius: 6px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11.5px;
  margin: 14px 0 6px;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.user {
  margin: 14px 0 12px;
  padding: 8px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* the timeline: a square marker per step */
.timeline { position: relative; }

.item {
  position: relative;
  padding: 0 0 20px 20px;                /* room between one step and the next */
}
.item::before {                         /* the step marker */
  content: "";
  position: absolute;
  left: 1px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--muted);
}

.item.text::before { background: var(--fg); opacity: 0.85; }
.item.tool::before { background: var(--muted); top: 0.9em; }   /* level with the card's header */
.item.ok::before, .item.pass::before { background: var(--green); }
.item.error::before, .item.fail::before { background: var(--red); }
.item.weak::before { background: var(--amber); }
.item.running::before { background: var(--muted); animation: pulse 1.1s ease-in-out infinite; }
.item.thought { color: var(--muted); font-size: 12px; padding-bottom: 8px; }
.item.thought::before { background: transparent; border: 1px solid var(--muted); width: 7px; height: 7px;
                        border-radius: 2px; left: 2px; top: 0.55em; }

@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.head { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.head .name { font-weight: 600; flex: none; }
.head .desc { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.head .desc.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head .count { color: var(--muted); font-size: 11px; flex: none; margin-left: auto; padding-left: 8px; }
.live-group .io-body.summary { padding-left: 10px; }

/* a burst of one tool: the name stays, each argument rises into place */
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.head .desc.rising { animation: rise 140ms ease-out; }
@media (prefers-reduced-motion: reduce) { .head .desc.rising { animation: none; } }
.head .desc.path { cursor: pointer; }
.head .desc.path:hover { color: var(--link); text-decoration: underline; }

/* IN / OUT box: the editor's own background, so a card sits flat rather than as a grey slab */
.io {
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--vscode-editor-background, #101010);
  overflow: hidden;
}
.card-head { padding: 6px 10px; }
.card-head + .io-row, .card-head + .io-body { border-top: 1px solid var(--border); }
.io-row { display: grid; grid-template-columns: 38px 1fr; }
.io-row + .io-row { border-top: 1px solid var(--border); }
.io-label {
  padding: 6px 0 6px 10px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-family: var(--font);
}
.io-body { padding: 5px 10px 6px 0; min-width: 0; }
.io-body pre, .io-body .mono {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.io-body .summary { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.io-body .summary.error { color: var(--red); }
.io-body .summary.pass { color: var(--green); }
.io-body .summary.weak { color: var(--amber); }
.io-body .summary.fail { color: var(--red); }
.io-body .summary .dim { color: var(--muted); }

/* every card shows a short preview first: about five lines, whatever it holds */
.collapsible { position: relative; max-height: 5.4em; overflow: hidden; }
.collapsible.open.measure { max-height: 5.4em; }
.collapsible.open { max-height: none; }
.collapsible:not(.open).long::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 2.2em;
  background: linear-gradient(transparent, var(--vscode-editor-background, #101010));
}
.more { color: var(--link); cursor: pointer; font-size: 12px; margin-top: 2px; user-select: none; }

.diff { font-family: var(--mono); font-size: 12px; margin-top: 4px; }
.diff div { white-space: pre-wrap; word-break: break-word; padding: 0 6px; border-radius: 2px; }
.diff .add { background: color-mix(in srgb, var(--green) 16%, transparent); }
.diff .del { background: color-mix(in srgb, var(--red) 16%, transparent); }
.diff .ctx { color: var(--muted); }

.spinner-text { color: var(--muted); }
.spinner-glyph {
  font-family: var(--mono); color: var(--vscode-textLink-foreground, var(--fg));
  margin-right: 6px; display: inline-block; width: 1ch;
}
.item.status::before { display: none; }          /* the spinner is the marker */
@media (prefers-reduced-motion: reduce) { .spinner-glyph { visibility: hidden; } }

/* permission question */
#ask-dock {
  position: sticky; bottom: 0; z-index: 5; padding: 8px 12px 10px;
  background: linear-gradient(transparent, var(--bg) 22%);
}
#ask-dock[hidden] { display: none; }
.ask.docked {
  border: 1px solid var(--amber); border-left-width: 3px; border-radius: 8px;
  background: var(--code-bg); padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  animation: ask-in 140ms ease-out;
}
@keyframes ask-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ask.docked { animation: none; } }
.ask.docked .question { font-weight: 600; }
.ask.docked .question .cmd {
  font-weight: 400; margin-top: 6px; padding: 6px 8px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); max-height: 8.5em; overflow: auto;
}
.ask.docked .buttons { margin-top: 10px; }
.ask.docked .hint { color: var(--muted); font-size: 11px; margin-top: 6px; }

.ask {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--focus) 60%, transparent);
  border-radius: 6px;
  background: var(--panel);
}
.ask .question { white-space: pre-wrap; word-break: break-word; margin-bottom: 8px; }
.ask .question .cmd { font-family: var(--mono); font-size: 12px; }
.ask .buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.ask .answered { color: var(--muted); font-size: 12px; }
.ask .answered b.yes { color: var(--green); }
.ask .answered b.no { color: var(--red); }

button.primary, button.secondary {
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font: inherit;
  cursor: pointer;
}
button.primary { background: var(--button-bg); color: var(--button-fg); }
button.secondary { background: var(--button2-bg); color: var(--button2-fg); }
button:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

/* markdown */
.md p { margin: 0 0 6px; }
.md p:last-child { margin-bottom: 0; }
.md code { font-family: var(--mono); font-size: 0.92em; background: var(--code-bg); padding: 0.05em 0.35em; border-radius: 3px; }
/* the answer is prose, not another activity row: no dot, no timeline line, flush left, more air */
.item.text { padding: 2px 0 14px; }
.item.text::before, .item.text::after { content: none; }
.item.text .md { line-height: 1.55; max-width: none; }
.item.text .md p { margin: 0 0 8px; }
.item.text .md ul, .item.text .md ol { margin: 4px 0 10px; }
/* a progress update: one paragraph, a little larger, closer to the step it introduces than to the one before */
.item.text.progress { padding: 6px 0 14px; }
.item.text.progress .md { font-size: calc(var(--vscode-font-size, 13px) + 1px); line-height: 1.5; }
.item.text.progress .md p { margin: 0; }

.code-block { position: relative; }
.code-block .copy {
  position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity .12s;
  font: inherit; font-size: 11px; color: var(--muted); cursor: pointer;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
}
.code-block:hover .copy, .code-block .copy:focus { opacity: 1; }
.code-block .copy:hover { color: var(--fg); }
.md pre, .md code { user-select: text; }
.md pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; overflow-x: auto; margin: 6px 0; }
.md pre code { background: none; padding: 0; font-size: 12px; }
.md ul, .md ol { margin: 2px 0 6px; padding-left: 20px; }
.md strong { font-weight: 600; }
/* end of a run */
.result { margin: 2px 0 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.meta { color: var(--muted); font-size: 12px; }

.md a, .item a { color: var(--link); text-decoration: none; word-break: break-all; }
.md a:hover, .item a:hover { text-decoration: underline; }
.stopped { flex-basis: 100%; color: var(--amber); font-size: 12px; }
.error-card { color: var(--red); }

/* ---------- the .env dialog ---------- */

/* Both controls read as one pair: the editor's own surface, a hairline edge, quiet until hovered. */
.chip {
  background: var(--vscode-dropdown-background, var(--input-bg));
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  border-radius: 5px; padding: 2px 9px; font: inherit; font-size: 11.5px; font-weight: 500;
  cursor: pointer;
}
.chip:hover { background: var(--button2-bg); }
.chip:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45);
}
.overlay[hidden] { display: none; }
.dialog {
  width: min(340px, calc(100% - 32px));
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 10px;
  animation: ask-in 120ms ease-out;
}
.dialog-title { font-weight: 600; }
.dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); }
.dialog input, .dialog select {
  background: var(--input-bg); color: var(--fg);
  border: 1px solid var(--input-border); border-radius: 6px; padding: 5px 8px;
  font: inherit; font-size: 12.5px;
}
.dialog input:focus, .dialog select:focus { outline: none; border-color: var(--focus); }
.dialog .state { color: var(--muted); font-size: 11px; }
.dialog .state.ok { color: var(--green); }
.dialog .state.bad { color: var(--red); }
.dialog-buttons { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.dialog-buttons .grow { flex: 1; }
.dialog button.primary {
  background: var(--button-bg); color: var(--button-fg);
  border: none; border-radius: 6px; padding: 4px 12px; font: inherit; cursor: pointer;
}
.dialog button.secondary {
  background: var(--button2-bg); color: var(--fg);
  border: none; border-radius: 6px; padding: 4px 10px; font: inherit; cursor: pointer;
}
.dialog button:hover { filter: brightness(1.1); }

/* ---------- composer ---------- */

footer { flex: none; padding: 8px 14px 12px; }

.composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border: 1px solid var(--edge);
  background: var(--input-bg);
  border-radius: 10px;
  padding: 8px 8px 8px 12px;
  transition: border-color .12s, box-shadow .12s;
}
.composer:hover { border-color: color-mix(in srgb, var(--focus) 45%, var(--edge)); }
.composer:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--focus) 35%, transparent);
}

textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--vscode-input-foreground, var(--fg));
  font: inherit;
  line-height: 1.45;
  max-height: 12em;
  min-height: 1.45em;
  padding: 3px 0;
}
textarea::placeholder { color: var(--vscode-input-placeholderForeground, var(--muted)); }

.send {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: var(--focus);                       /* the chat box's own blue, in every state */
  color: var(--button-fg);
  cursor: pointer;
  font-size: 14px;
  line-height: 28px;
  padding: 0;
}
.send:disabled { opacity: 0.55; cursor: default; }

/* while a run is going the button stops it: a clear square, pulsing so it reads as "busy" */
.send.stop {
  background: var(--focus);
  color: #fff;
  font-size: 0;                                   /* the glyph is drawn below, not typed */
  position: relative;
  animation: stop-pulse 1.6s ease-in-out infinite;
}
.send.stop::before {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 11px; height: 11px; border-radius: 2px;
  background: currentColor;
}
.send.stop:hover { filter: brightness(1.1); }
@keyframes stop-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--focus) 55%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .send.stop { animation: none; } }

.hint { color: var(--muted); font-size: 11.5px; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hint .left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hint .left span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
select#mode {
  background: var(--vscode-dropdown-background, var(--input-bg));
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  border-radius: 5px;
  padding: 2px 15px 2px 8px;              /* just enough room for the arrow drawn below */
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;                       /* no native gap between the label and the arrow */
  /* the editor's own chevron, drawn as an SVG so it stays sharp at any zoom */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c8c8c8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5 8 10.5 12 6.5'/></svg>");
  background-position: right 4px center;
  background-size: 11px 11px;
  background-repeat: no-repeat;
}
select#mode:hover { background-color: var(--button2-bg); }
select#mode:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }
.item.handoff::before { background: var(--violet); }
.item.handoff .head .name { color: var(--violet); }
.hint .right { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Syntax colour for code cards. VS Code gives a webview its theme's surface colours but not its
   token colours, so these follow Dark+ / Light+ and sit on the theme kind VS Code marks on <body>. */
:root {
  --tok-keyword: #c586c0;
  --tok-string: #ce9178;
  --tok-number: #b5cea8;
  --tok-comment: #6a9955;
  --tok-function: #dcdcaa;
  --tok-type: #4ec9b0;
  --tok-variable: #9cdcfe;
  --tok-attr: #92c5f8;
}
body.vscode-light,
body.vscode-high-contrast-light {
  --tok-keyword: #af00db;
  --tok-string: #a31515;
  --tok-number: #098658;
  --tok-comment: #008000;
  --tok-function: #795e26;
  --tok-type: #267f99;
  --tok-variable: #001080;
  --tok-attr: #0451a5;
}

.hljs-keyword, .hljs-built_in, .hljs-literal, .hljs-selector-tag { color: var(--tok-keyword); }
.hljs-string, .hljs-regexp, .hljs-char.escape_, .hljs-meta .hljs-string { color: var(--tok-string); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--tok-number); }
.hljs-comment, .hljs-quote { color: var(--tok-comment); font-style: italic; }
.hljs-title, .hljs-title.function_, .hljs-section { color: var(--tok-function); }
.hljs-title.class_, .hljs-type, .hljs-params .hljs-type { color: var(--tok-type); }
.hljs-variable, .hljs-template-variable, .hljs-property { color: var(--tok-variable); }
.hljs-attr, .hljs-attribute, .hljs-name, .hljs-meta, .hljs-tag { color: var(--tok-attr); }
.hljs-deletion { color: var(--red); }
.hljs-addition { color: var(--green); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* inside a diff the row already carries the change colour; only the code is tokenized */
.diff .ctx [class^="hljs-"] { opacity: 0.75; }