/* Prompt administration surfaces; kept independent from the shared and editor styles. */
.prompt-scope {
  max-width: 88ch;
  margin: 0 0 var(--cai-space-6);
  padding: var(--cai-space-3) var(--cai-space-4);
  border-left: 4px solid var(--cai-color-action-primary-default);
  border-radius: 0 var(--cai-radius-control) var(--cai-radius-control) 0;
  background: var(--cai-color-selection-surface);
  line-height: 1.7;
}

.prompt-group {
  margin-top: var(--cai-space-6);
}

.prompt-list-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: var(--cai-space-3) var(--cai-space-4);
  margin-bottom: var(--cai-space-4);
}

.prompt-list-toolbar .field,
.prompt-count { margin: 0; }
.prompt-count { padding-block: var(--cai-space-2); font-weight: var(--cai-font-weight-bold); }
.prompt-empty p { margin-block: 0 var(--cai-space-3); }

.prompt-group > h2 {
  margin: 0 0 var(--cai-space-3);
}

.prompt-list {
  display: grid;
  min-width: 0;
}

.prompt-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--cai-space-3) var(--cai-space-4);
  min-width: 0;
  padding-block: var(--cai-space-3);
  border-block-end: var(--cai-border-width-thin) solid var(--cai-color-border-default);
}

.prompt-row h3,
.prompt-row p {
  margin: 0;
}

.prompt-row h3 {
  font-size: var(--cai-font-size-heading-small);
}

.prompt-row h3 a {
  width: fit-content;
  justify-content: flex-start;
}

.prompt-row-role {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prompt-editor-meta {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--cai-space-3);
}

.prompt-category {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--cai-space-1) var(--cai-space-2);
  border-radius: 999px;
  background: var(--cai-color-selection-surface);
  color: var(--cai-color-action-primary-active);
  font-size: var(--cai-font-size-meta);
  font-weight: 700;
}

.prompt-category.support {
  background: var(--cai-color-feedback-info-surface);
  color: var(--cai-color-text-secondary);
}

.prompt-revision,
.prompt-source,
.prompt-template-hint {
  color: var(--cai-color-text-secondary);
  font-size: var(--cai-font-size-meta);
  overflow-wrap: anywhere;
}

.prompt-editor-role {
  max-width: 90ch;
  margin: var(--cai-space-2) 0;
}

.prompt-editor-layout {
  align-items: start;
}

.prompt-editor-context {
  min-width: 0;
  padding-inline-start: var(--cai-space-4);
  border-inline-start: var(--cai-border-width-thin) solid var(--cai-color-border-default);
}

.prompt-editor-body,
.prompt-editor-context,
.prompt-references {
  min-width: 0;
}

.prompt-info {
  margin: var(--cai-space-3) 0;
  padding: var(--cai-space-4);
  border: 1px solid var(--cai-color-border-default);
  border-radius: var(--cai-radius-control);
  background: var(--cai-color-background-surface);
}

.prompt-info h3 {
  margin: 0 0 var(--cai-space-2);
  font-size: var(--cai-font-size-body);
}

.algorithm-load-error h2:focus,
.algorithm-loading:focus,
.algorithm-content > .panel > h2:focus {
  outline: var(--cai-focus-width) solid var(--cai-focus-ring);
  outline-offset: var(--cai-focus-offset);
  box-shadow: 0 0 0 var(--cai-focus-halo-width) var(--cai-focus-halo);
}

.prompt-info p {
  margin: 0;
}

.prompt-variable-list code {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--cai-color-background-surface);
}

.prompt-template {
  display: block;
  width: 100%;
  min-height: min(62vh, 700px);
  margin-top: var(--cai-space-2);
  scroll-margin-block-start: calc(var(--cai-size-control) + var(--cai-space-6));
  resize: vertical;
  font-family: var(--cai-font-family-mono);
  font-size: var(--cai-font-size-body);
  line-height: var(--cai-font-line-height-body);
  overflow-wrap: anywhere;
  tab-size: 2;
}

.prompt-latest {
  margin-top: var(--cai-space-4);
  padding: var(--cai-space-4);
  border: var(--cai-border-width-thin) solid var(--cai-color-feedback-warning-text);
  border-radius: var(--cai-radius-control);
  background: var(--cai-color-background-surface);
}

.prompt-latest h2 {
  margin-top: 0;
  font-size: var(--cai-font-size-heading-small);
}

.prompt-latest-template {
  max-height: 320px;
  overflow: auto;
  padding: var(--cai-space-3);
  border: var(--cai-border-width-thin) solid var(--cai-color-border-default);
  border-radius: var(--cai-radius-control);
  background: var(--cai-color-background-surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prompt-diagram-picker {
  max-width: 620px;
}

.algorithm-loading {
  margin: 0;
}

 .algorithm-prompts-link {
  min-height: 48px;
  padding: 4px 0;
  color: var(--cai-color-action-primary-default);
  text-underline-offset: 3px;
}

.algorithm-content { min-width: 0; }
.algorithm-loading { margin: 0; }
.algorithm-workspace {
  display: grid;
  grid-template-areas: "controls detail" "graph detail";
  grid-template-columns: minmax(0, 1fr) var(--cai-layout-width-rail);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--cai-space-6);
  min-width: 0;
  margin-bottom: 0;
}
.algorithm-flow-controls-panel {
  grid-area: controls;
  display: grid;
  align-content: start;
  gap: var(--cai-space-3);
  min-width: 0;
}
.algorithm-flow-panel { grid-area: graph; }
.algorithm-detail-panel {
  grid-area: detail;
  display: grid;
  gap: var(--cai-space-4);
  min-width: 0;
  padding-inline-start: var(--cai-space-4);
  border-inline-start: var(--cai-border-width-thin) solid var(--cai-color-border-default);
}
.algorithm-flow-panel, .algorithm-flow-choices { min-width: 0; }
.algorithm-flow-choices[hidden] { display: none; }
.algorithm-module-picker { min-width: 0; }
.algorithm-graph-host, .algorithm-graph { min-width: 0; }
.algorithm-graph {
  --flow-ink: var(--cai-color-text-primary);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(360px, 68vh) auto auto auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cai-color-border-default);
  border-radius: var(--cai-radius-control);
  background: var(--cai-color-background-surface);
}
.algorithm-flow-zoom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cai-space-3);
  padding: var(--cai-space-2);
  border-bottom: var(--cai-border-width-thin) solid var(--cai-color-border-default);
  background: var(--cai-color-background-subtle);
}
.algorithm-flow-zoom-adjustments,
.algorithm-flow-zoom-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cai-space-2);
  min-width: 0;
  max-width: 100%;
}
.algorithm-flow-key {
  display: flex;
  align-items: center;
  gap: var(--cai-space-2);
  min-width: 0;
  padding: var(--cai-space-2) var(--cai-space-3);
  border-block-start: var(--cai-border-width-thin) solid var(--cai-color-border-default);
  color: var(--cai-color-text-secondary);
  font-size: var(--cai-font-size-meta);
  overflow-wrap: anywhere;
}
.algorithm-flow-key[hidden] { display: none; }
.algorithm-flow-key-line { flex: 0 0 var(--cai-size-icon); border-top: var(--cai-border-width-selected) dashed currentColor; }
.algorithm-flow-zoom-readout { min-width: var(--cai-size-control); text-align: center; font-variant-numeric: tabular-nums; }
.algorithm-flow-viewport { min-width: 0; overflow: auto; overscroll-behavior: contain; }
.algorithm-flow-viewport:focus-visible { outline-offset: 2px; }
.algorithm-flow-canvas { position: relative; min-width: 100%; min-height: 100%; }
.algorithm-flow-renderer { position: relative; transform-origin: top left; }
.algorithm-flow-lines { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.algorithm-flow-edge {
  fill: none;
  stroke: var(--cai-color-text-secondary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .86;
  vector-effect: non-scaling-stroke;
  transition: stroke 120ms ease, stroke-width 120ms ease, opacity 120ms ease;
}
.algorithm-flow-edge.is-data-edge { stroke-dasharray: 7 5; }
.algorithm-flow-edge.is-emphasized { stroke: var(--cai-color-action-primary-default); stroke-width: 3.5; opacity: 1; }
.algorithm-flow-arrowhead { fill: var(--cai-color-text-secondary); fill: context-stroke; }
.algorithm-flow-node {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  max-width: 260px;
  min-height: 64px;
  padding: 10px 14px;
  border: 2px solid var(--cai-color-action-primary-default);
  border-radius: var(--cai-radius-control);
  background: var(--cai-color-background-surface);
  color: var(--cai-color-action-primary-default);
  font: inherit;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.algorithm-flow-node-outline { display: none; }
.algorithm-flow-node.is-input, .algorithm-flow-node.is-output {
  max-width: 360px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: 26px;
}
.algorithm-flow-node.is-decision {
  max-width: 420px;
  min-width: 220px;
  min-height: 140px;
  padding: 24px 54px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.algorithm-flow-node.is-state { border-radius: var(--cai-radius-control); }
.algorithm-flow-node.is-input .algorithm-flow-node-outline,
.algorithm-flow-node.is-output .algorithm-flow-node-outline,
.algorithm-flow-node.is-decision .algorithm-flow-node-outline {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.algorithm-flow-node-outline polygon {
  fill: var(--cai-color-background-surface);
  stroke: var(--cai-color-action-primary-default);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.algorithm-flow-node-label { position: relative; z-index: 1; min-width: 0; overflow-wrap: anywhere; }
.algorithm-flow-node.is-decision .algorithm-flow-node-label { max-width: 10em; }
.algorithm-flow-node:hover, .algorithm-flow-node.is-emphasized { background: var(--cai-color-selection-surface); }
.algorithm-flow-node.is-input:hover, .algorithm-flow-node.is-output:hover,
.algorithm-flow-node.is-decision:hover, .algorithm-flow-node.is-input.is-emphasized,
.algorithm-flow-node.is-output.is-emphasized, .algorithm-flow-node.is-decision.is-emphasized,
.algorithm-flow-node.is-input.is-selected, .algorithm-flow-node.is-output.is-selected,
.algorithm-flow-node.is-decision.is-selected { background: transparent; box-shadow: none; }
.algorithm-flow-node:hover .algorithm-flow-node-outline polygon,
.algorithm-flow-node.is-emphasized .algorithm-flow-node-outline polygon { stroke: var(--cai-color-action-primary-default); fill: var(--cai-color-selection-surface); }
.algorithm-flow-node:focus-visible { outline-offset: 2px; }
.algorithm-flow-node:focus-visible .algorithm-flow-node-outline polygon { stroke: var(--cai-focus-ring); }
.algorithm-flow-node.is-selected {
  border-color: var(--cai-color-action-primary-active);
  background: var(--cai-color-selection-surface);
  box-shadow: 0 0 0 2px var(--cai-color-action-primary-active);
}
.algorithm-flow-node.is-selected .algorithm-flow-node-outline polygon { stroke: var(--cai-color-action-primary-active); fill: var(--cai-color-selection-surface); }
.algorithm-flow-edge-label {
  position: absolute;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  width: max-content;
  min-width: 7em;
  max-width: 24em;
  padding: 4px 7px;
  border: 1px solid var(--cai-color-border-default);
  border-radius: var(--cai-radius-control);
  background: var(--cai-color-background-canvas);
  color: var(--cai-color-text-primary);
  font-size: var(--cai-font-size-meta);
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.algorithm-flow-edge-label.is-emphasized { border-color: var(--cai-color-action-primary-default); background: var(--cai-color-selection-surface); }
.algorithm-flow-measure {
  position: fixed;
  top: 0;
  left: -10000px;
  display: flex;
  width: max-content;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cai-space-2);
  visibility: hidden;
  pointer-events: none;
}
.algorithm-flow-measure .algorithm-flow-node {
  position: relative;
  left: auto;
  top: auto;
  width: max-content;
  height: auto;
  flex: none;
}
.algorithm-flow-measure .algorithm-flow-edge-label {
  position: relative;
  left: auto;
  top: auto;
  width: max-content;
  height: auto;
  flex: none;
}
.algorithm-flow-measure .algorithm-flow-node-outline { position: absolute; }
.algorithm-flow-status, .algorithm-flow-failure { margin: 0; padding: var(--cai-space-2) var(--cai-space-3); }
.algorithm-flow-failure { border-top: 1px solid var(--cai-color-border-default); color: var(--cai-color-text-primary); }
.algorithm-flow-failure p { margin: 0 0 var(--cai-space-2); }
.algorithm-flow-failure[hidden] { display: none; }
.algorithm-selected { min-width: 0; }
.algorithm-description { margin: 0 0 var(--cai-space-3); overflow-wrap: anywhere; }
.algorithm-selected-connections { margin: var(--cai-space-3) 0; }
.algorithm-selected-connections summary { font-weight: 700; }
.algorithm-selected-connections ul { display: grid; gap: 10px; margin: 6px 0 14px; padding-left: 1.2em; }
.algorithm-selected-connections li { padding-left: 2px; overflow-wrap: anywhere; }
.algorithm-connection-direction, .algorithm-connection-condition, .algorithm-connection-label { display: block; color: var(--cai-color-text-secondary); font-size: var(--cai-font-size-meta); }
.algorithm-no-prompt { color: var(--cai-color-text-secondary); }
.algorithm-reference-list { display: grid; gap: var(--cai-space-3); margin-top: var(--cai-space-6); }
.algorithm-reference { min-width: 0; }
.algorithm-reference td .algorithm-module-reference-button { justify-content: flex-start; text-align: left; }
.algorithm-reference-compact-value { white-space: nowrap; }
.algorithm-reference .prompt-notes { margin-top: var(--cai-space-4); }
.algorithm-load-error p { max-width: 80ch; }

.algorithm-reference .prompt-notes {
  margin-top: var(--cai-space-4);
}

.prompt-notes {
  margin-bottom: 0;
  padding-left: 1.4em;
}

@media (max-width: 700px) {
  .prompt-list-toolbar { grid-template-columns: minmax(0, 1fr); }
  .prompt-count { padding-block: 0; }
  .prompt-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cai-space-1) var(--cai-space-3);
  }

  .prompt-row-role {
    grid-column: 1 / -1;
  }

  .prompt-template {
    min-height: 55vh;
  }
}

@container page-content (max-width: 68em) {
  .prompt-editor-context {
    padding: var(--cai-space-4) 0 0;
    border-inline-start: 0;
    border-block-start: var(--cai-border-width-thin) solid var(--cai-color-border-default);
  }
}

@container page-content (max-width: 60em) {
  .algorithm-workspace {
    grid-template-areas: "controls" "detail" "graph";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .algorithm-detail-panel {
    padding: var(--cai-space-4) 0 0;
    border-inline-start: 0;
    border-block-start: var(--cai-border-width-thin) solid var(--cai-color-border-default);
  }
}

@media (max-width: 700px) {
  .algorithm-workspace { gap: var(--cai-space-4); padding: var(--cai-space-4); }
  .algorithm-flow-panel { padding: 0; }
  .algorithm-graph { grid-template-rows: auto minmax(360px, 60vh) auto auto auto; }
  .algorithm-flow-node.is-decision { min-width: 214px; padding-inline: 48px; }
}

@media (forced-colors: active) {
  .algorithm-load-error h2:focus,
  .algorithm-loading:focus,
  .algorithm-content > .panel > h2:focus {
    outline: var(--cai-focus-width) solid CanvasText;
    outline-offset: var(--cai-focus-offset);
    box-shadow: none;
  }
  .algorithm-flow-node, .algorithm-flow-edge-label, .algorithm-execution-choice, .algorithm-flow-choice,
  .algorithm-flow-zoom-button, .algorithm-flow-fit-button {
    forced-color-adjust: auto;
    border-color: ButtonText;
    background: Canvas;
    color: CanvasText;
  }
  .algorithm-flow-node.is-selected, .algorithm-execution-choice[aria-pressed="true"], .algorithm-flow-choice[aria-pressed="true"] {
    border-color: Highlight;
    outline: var(--cai-border-width-selected) solid Highlight;
  }
  .algorithm-flow-node:focus-visible,
  .algorithm-execution-choice[aria-pressed="true"]:focus-visible,
  .algorithm-flow-choice[aria-pressed="true"]:focus-visible {
    outline: var(--cai-focus-width) solid CanvasText;
    outline-offset: var(--cai-focus-offset);
  }
  .algorithm-flow-node.is-input:hover, .algorithm-flow-node.is-output:hover,
  .algorithm-flow-node.is-decision:hover, .algorithm-flow-node.is-input.is-selected,
  .algorithm-flow-node.is-output.is-selected, .algorithm-flow-node.is-decision.is-selected {
    background: transparent;
  }
  .algorithm-flow-node-outline polygon { stroke: ButtonText; fill: Canvas; }
  .algorithm-flow-node.is-selected .algorithm-flow-node-outline polygon,
  .algorithm-flow-node:focus-visible .algorithm-flow-node-outline polygon { stroke: Highlight; }
  .algorithm-flow-edge { stroke: CanvasText; }
  .algorithm-flow-edge.is-emphasized { stroke: Highlight; }
  .algorithm-flow-arrowhead { fill: CanvasText; }
  .algorithm-flow-edge-label.is-emphasized { border-color: Highlight; }
}