/* e4b.css -- console, problemen, prompt (het onderpaneel).
 *
 * Alle maten en kleuren uit core.css se tokens; VS Code is de visuele lat (BRIEFING-S.md).
 * Het Terminal-paneel van VS Code is het voorbeeld: een tabrij bovenaan, monospace-inhoud
 * eronder, een prompt-invoerregel onderaan het Console-tabblad.
 *
 * WAAROM UI_TEXT EN NIET UI_TEXTMUTED VOOR EEN GEWONE REGEL (con-idle): conview.wz mat dit
 * al uit voor de native console -- UI_TEXTMUTED (#666666) haalt 2,90:1 contrast op #1e1e1e,
 * ruim onder de 4,5:1 die WCAG voor gewone tekst vraagt; UI_TEXT (#c8d0d4, hier --text) haalt
 * 10,66:1. Dezelfde les geldt hier onveranderd, dus con-idle gebruikt var(--text).
 */

.e4b-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.e4b-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

.e4b-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  /* CONTAIN OP DE SCROLLCONTAINER EN OP ELKE RIJ (zie .con-row): de gemeten les uit de
   * briefing -- innerHTML op één regel kost 0 ms, de layout erna 11,7 ms zonder contain,
   * omdat een regel in de gewone stroom zijn buren kan verschuiven. contain: strict bracht
   * dat naar 2,3 ms. content-visibility:auto NIET gebruiken -- gemeten TRAGER (8,5 -> 17,3
   * ms), staat als waarschuwing in de briefing. */
  contain: layout style;
}

.e4b-console {
  font-family: var(--font-code);
  font-size: var(--code-fs);
  padding: 2px 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.con-row {
  contain: layout style;
  padding: 1px 0;
  color: var(--text);           /* con-idle: gemeten 10,66:1, niet --text-muted (2,90:1) */
}

.con-row.con-run  { color: var(--text-dim); }
.con-row.con-err  { color: var(--danger-tx); font-weight: 600; }
.con-row.con-attn { color: var(--attn); }

.e4b-problems, .e4b-output {
  font-size: var(--ui-fs);
  padding: 2px 0;
}

.prob-empty {
  color: var(--text-dim);
  padding: 8px 12px;
}

.prob-row {
  display: flex;
  gap: 8px;
  padding: 3px 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
}

.prob-row:hover, .prob-row:focus {
  background: var(--hover);
  outline: none;
}

.prob-row {
  border-left-color: var(--danger);
}

.prob-loc {
  font-family: var(--font-code);
  color: var(--text-dim);
  flex: 0 0 auto;
  white-space: nowrap;
}

.prob-text {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e4b-output {
  font-family: var(--font-code);
  color: var(--text-dim);
}

.e4b-prompt {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  height: var(--row-h);
}

.e4b-prompt-caret {
  color: var(--accent-hi);
  font-family: var(--font-code);
}

.e4b-prompt-input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-code);
  font-size: var(--code-fs);
}

.e4b-prompt-input::placeholder { color: var(--text-muted); }

.e4b-prompt-input:disabled {
  color: var(--text-muted);
  font-style: italic;
}


.e4b-ai-list {
  font-family: var(--font-code);
  font-size: var(--code-fs);
  padding: 2px 8px;
}

.ai-row {
  contain: layout style;
  border-bottom: 1px solid var(--rule);
  padding: 3px 0;
}

.ai-row-head {
  cursor: pointer;
  color: var(--text);
}

.ai-row-head:hover, .ai-row-head:focus { color: var(--text-strong); outline: none; }

.ai-row.ai-failed .ai-row-head  { color: var(--danger-tx); }
.ai-row.ai-timeout .ai-row-head { color: var(--attn); }
.ai-row.ai-cancelled .ai-row-head { color: var(--text-dim); }
.ai-row.ai-running .ai-row-head { color: var(--text-dim); font-style: italic; }

.ai-row-preview {
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 2px 0 0 12px;
}

.ai-row-preview-error { color: var(--danger-tx); }

.ai-row-body {
  padding: 4px 0 2px 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-row-raw {
  color: var(--text);
  padding-bottom: 4px;
}

.ai-row-error {
  color: var(--danger-tx);
}