/*
 * agent.css: the frame of one agent (agent.html). Title and status, version
 * history, Publish, the Build / Test / Deploy / Conversations tabs, the step
 * menu, the Back / Next bar and the Publish dialog. Steps add their own
 * files in css/pages/.
 */

/* ---------- head ---------- */
.agent-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-bottom: 1px solid var(--om-tray-edge);
}
.agent-head__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.agent-head__title {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.agent-head__title h1 {
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-head__tools {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* back to a list: the soft rounded square of the navigation's collapse control */
.back-btn {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--om-select);
  color: var(--om-nav-ink);
  transition: color 0.15s ease;
}
.back-btn:hover {
  color: var(--om-ink);
}
.back-btn svg {
  width: 18px;
  height: 18px;
}
[dir="rtl"] .back-btn svg {
  transform: scaleX(-1);
}
.status-tag {
  gap: 8px;
}
.agent-tabs {
  margin-bottom: -1px;
}

/* version history popover */
.history {
  width: 320px;
  padding: 10px;
  border-radius: 28.8px;
}
.history__title {
  padding: 0 4px;
  font-weight: 500;
}
.history ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 0 4px 4px;
}
.history li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.history__v {
  width: 28px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.history__meta {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--om-ink-soft);
}
.history__empty {
  margin-top: 4px;
  padding: 0 4px 4px;
  color: var(--om-ink-soft);
}

/* ---------- build: step menu beside the step ---------- */
.build {
  flex: 1;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 40px;
}
.steps-aside {
  padding-inline-end: 16px;
  border-inline-end: 1px solid var(--om-tray-edge);
}
.steps-menu {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 27px 3px 3px;
}
.step-item {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 21.75px;
  text-align: start;
  color: color-mix(in srgb, var(--om-ink) 60%, transparent);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.step-item:hover {
  background: var(--om-select);
  color: var(--om-ink);
}
.step-item[aria-current="step"] {
  background: var(--om-select);
  color: var(--om-ink);
  font-weight: 600;
}
.step-item__icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
}
.step-item__icon svg {
  width: 18px;
  height: 18px;
}
.step-item__done {
  margin-inline-start: auto;
  width: 14px;
  height: 14px;
  color: var(--success);
}
.step-item[aria-disabled="true"] {
  color: color-mix(in srgb, var(--om-ink) 40%, transparent);
  cursor: default;
}
.step-item[aria-disabled="true"]:hover {
  background: transparent;
}
/* small screens: the menu becomes an underlined row above the step */
.steps-row {
  display: none;
  border-bottom: 1px solid var(--om-tray-edge);
  padding-top: 12px;
}
.steps-row__scroll {
  overflow-x: auto;
  padding-bottom: 2px;
}
.steps-row .tabs {
  width: max-content;
  gap: 16px;
  margin-bottom: -1px;
}
.steps-row .tab {
  gap: 8px;
  font-size: 14.5px;
}
.steps-row .tab svg {
  width: 18px;
  height: 18px;
}
.steps-row .tab[aria-disabled="true"] {
  color: color-mix(in srgb, var(--om-ink) 40%, transparent);
}

.step-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
}
/* the step's own page grows so its Back / Next bar sits at the bottom */
.step-main > .step-page {
  flex: 1;
}
.step-page {
  display: flex;
  flex-direction: column;
}
.draft-note {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  font-size: 14px;
  line-height: 20px;
  color: var(--om-ink-soft);
}
.draft-note svg {
  width: 16px;
  height: 16px;
}

/* ---------- Back / Next bar ---------- */
.step-foot {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin: auto -40px 0;
  margin-inline-start: -40px;
  padding: 0 40px;
  border-top: 1px solid var(--om-tray-edge);
  background: color-mix(in srgb, var(--om-solid) 85%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.step-foot__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.step-foot__note {
  margin-inline-end: auto;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--om-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- tab content (Test, Deploy, Conversations) ---------- */
.tab-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.not-ready {
  padding: 24px 0 64px;
}
.not-ready .empty {
  padding-block: 56px;
}

/* ---------- not found ---------- */
.agent-missing {
  padding-top: 64px;
}

@media (max-width: 1023px) {
  .build {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .steps-aside {
    display: none;
  }
  .steps-row {
    display: block;
  }
  .step-main {
    padding-top: 0;
  }
  .step-foot {
    margin-inline-start: -40px;
  }
}
@media (max-width: 767px) {
  .step-foot {
    margin: auto -16px 0;
    padding: 0 16px;
  }
  .agent-head__row {
    flex-direction: column;
    align-items: stretch;
  }
  .agent-head__tools {
    margin-inline-start: 0;
  }
  .steps-row__scroll {
    margin: 0 -16px;
    padding: 0 16px 2px;
  }
}

/* ======================================================================
   The agent screens in the Agents list's look (board 10): the --ag-* page,
   Inter, white cards with a hairline, soft inner boxes, black buttons,
   pill tabs. Scoped to .ap (the agent page) so nothing else changes.
   Buttons, chips and tabs come from css/pages/agents.css.
   ====================================================================== */
.inset[data-surface="agent"] {
  background: var(--ag-page);
}
.inset[data-surface="agent"] .main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.inset[data-surface="agent"] .main__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
}
/* dark theme: the boxes' edges are toned down on every agent page (they read too bright) */
:root.dark .ap {
  --ag-line: rgba(255, 255, 255, 0.05);
  --ag-well-line: rgba(255, 255, 255, 0.04);
}
.ap {
  font-family: var(--font-ui);
  line-height: normal;
  color: var(--ag-ink);
}

/* ---------- head: back, name, chip · history, Publish · pill tabs ---------- */
.ap .agent-head {
  gap: 22px;
  padding-top: 34px;
  border-bottom: 0;
}
.ap .agent-head__row {
  align-items: center;
  gap: 16px;
}
.ap .agent-head__title {
  gap: 12px 14px;
}
.ap .agent-head__title h1 {
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ag-ink);
}
.ap .agent-head__tools {
  gap: 10px;
}
.ap .agent-head .ag-icon-btn svg {
  width: 18px;
  height: 18px;
}
.ap-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ap-changes {
  font-size: 13px;
  color: var(--ag-muted);
}
.ap .ag-create:disabled {
  opacity: 0.35;
  cursor: default;
}
.ap .ag-create--light {
  background: var(--ag-card);
  color: var(--ag-ink);
  border: 1px solid var(--ag-btn-line);
}
.ap .ag-create--light:hover {
  background: var(--ag-hover);
  opacity: 1;
}
.ap .ag-create svg {
  width: 16px;
  height: 16px;
}
.ap .agent-tabs {
  margin: 0;
}
.ap .ag-tab {
  display: inline-flex;
  align-items: center;
}

/* ---------- build: the step menu is a white card beside the step ---------- */
.ap .build {
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 16px;
  padding-top: 20px;
}
.ap .steps-aside {
  padding: 0;
  border: 0;
}
.ap-card,
.ap .section {
  border-radius: 18px;
  background: var(--ag-card);
  border: 1px solid var(--ag-line);
}
.ap .steps-menu {
  top: 20px;
  gap: 2px;
  padding: 8px;
}
.ap .step-item {
  height: 40px;
  gap: 10px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: var(--ag-ink-2);
}
.ap .step-item:hover {
  background: var(--ag-hover);
  color: var(--ag-ink);
}
.ap .step-item[aria-current="step"] {
  background: var(--ag-dark);
  color: var(--ag-dark-ink);
  font-weight: 500;
}
.ap .step-item[aria-current="step"] .step-item__done {
  color: var(--ag-dark-ink);
}
.ap .step-item__icon svg {
  width: 17px;
  height: 17px;
}
.ap .step-item[aria-disabled="true"] {
  color: var(--ag-faint);
}
.ap .step-item__done {
  color: var(--ag-live);
}
.ap .steps-row {
  border: 0;
  padding-top: 0;
}
.ap .steps-row .ag-tabs {
  flex-wrap: nowrap;
  width: max-content;
}
.ap .ap-steprow-tab {
  gap: 8px;
}
.ap .ap-steprow-tab svg {
  width: 16px;
  height: 16px;
}
.ap .ap-steprow-tab[aria-disabled="true"] {
  color: var(--ag-faint);
}

.ap .step-main {
  gap: 16px;
  padding-top: 0;
}
.ap .step-page {
  gap: 16px;
}
/* the yellow note of the Agents list */
/* notices on agent screens: quiet, on the page ground (no fill), a hairline edge, the
   icon bare and muted; never tinted. The template banner on Basics uses the same look. */
.ap-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  padding-inline: 14px 6px;
  border-radius: 12px;
  /* a soft warm tint, lighter than a warning; edge between the tint and the hairline */
  border: 1px solid color-mix(in srgb, var(--ag-note-line) 25%, var(--ag-line));
  background: color-mix(in srgb, var(--ag-note) 75%, transparent);
}
.ap-note__icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ag-muted);
}
.ap-note__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--ag-muted);
}
.ap-note__text b {
  font-weight: 500;
  color: var(--ag-ink-2);
}
.ap-note__x {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--ag-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.ap-note__x:hover {
  background: var(--ag-hover);
  color: var(--ag-ink);
}

/* ---------- sections are cards; fields in the board's type ---------- */
.ap .section,
.ap .section:first-child {
  max-width: none;
  padding: 22px 24px;
}
.ap .section__head {
  min-height: 0;
  padding-bottom: 6px;
}
.ap .section-title {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ag-ink);
}
.ap .section__info {
  color: var(--ag-faint);
}
.ap .frow {
  gap: 8px;
  padding: 10px 0;
}
.ap .frow .label,
.ap .bx-label {
  font-size: 13.5px;
  font-weight: 500;
  line-height: normal;
  color: var(--ag-ink-2);
}
.ap .frow .help {
  font-size: 12.5px;
  line-height: normal;
  color: var(--ag-muted);
}
.ap .error {
  font-size: 12.5px;
  line-height: normal;
  color: var(--ag-red);
}
.ap .input,
.ap .textarea,
.ap .select-trigger {
  border-radius: 10px;
  border: 1px solid var(--ag-btn-line);
  background: var(--ag-card);
  color: var(--ag-ink);
  font-size: 14px;
}
.ap .input,
.ap .select-trigger {
  height: 42px;
}
.ap .textarea {
  min-height: 84px;
  line-height: 1.55;
}
.ap .input::placeholder,
.ap .textarea::placeholder {
  color: var(--ag-faint);
}
.ap .input:hover,
.ap .textarea:hover,
.ap .select-trigger:hover {
  border-color: var(--ag-dot);
}
.ap .input:focus-visible,
.ap .textarea:focus-visible,
.ap .select-trigger:focus-visible,
.ap .select-trigger[aria-expanded="true"] {
  border-color: var(--ag-ink);
  box-shadow: 0 0 0 3px var(--ag-hover);
}
.ap [aria-invalid="true"] {
  border-color: var(--ag-red);
}

/* ---------- Back / Next: on the page ground, a hairline above ---------- */
.ap .step-foot {
  margin-top: auto;
  border-top: 1px solid var(--ag-line);
  background: color-mix(in srgb, var(--ag-page) 88%, transparent);
}
.ap .step-foot__inner {
  padding: 14px 0;
  gap: 10px;
}
.ap .step-foot__note {
  font-size: 13px;
  color: var(--ag-muted);
}
.ap .ag-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* the switch in the board's black */
.ap .switch[aria-checked="true"] {
  background: var(--ag-dark);
}

@media (max-width: 1023px) {
  .ap .build {
    padding-top: 16px;
  }
}
@media (max-width: 767px) {
  .ap .agent-head {
    padding-top: 16px;
  }
  .ap .section,
  .ap .section:first-child {
    padding: 18px 16px;
  }
}

/* positioned, so screen-reader-only text inside stays inside the scroll box */
.steps-row__scroll {
  position: relative;
}
/* the Back / Next bar lines up with the cards (no reach into the menu column) */
.ap .step-foot {
  margin-inline: 0;
  padding-inline: 0;
}

/* ---------- drawers, menus and dialogs opened from an agent screen ---------- */
.ap-skin .drawer,
.ap-skin .dialog,
.ap-skin .menu,
.ap-skin .tooltip {
  font-family: var(--font-ui);
}
.ap-skin .drawer {
  background: var(--ag-card);
  border-inline-start: 1px solid var(--ag-line);
  color: var(--ag-ink);
}
.ap-skin .drawer__head,
.ap-skin .drawer__foot {
  border-color: var(--ag-line);
}
.ap-skin .drawer__title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.ap-skin .drawer__close {
  width: 34px;
  height: 34px;
  top: 16px;
  border-radius: 10px;
  color: var(--ag-muted);
}
.ap-skin .drawer__close:hover {
  background: var(--ag-hover);
  color: var(--ag-ink);
}
.ap-skin .drawer .btn,
.ap-skin .dialog .btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
}
.ap-skin .drawer .btn--primary,
.ap-skin .dialog .btn--primary {
  background: var(--ag-dark);
  color: var(--ag-dark-ink);
}
.ap-skin .drawer .btn--primary:hover,
.ap-skin .dialog .btn--primary:hover {
  background: var(--ag-dark);
  opacity: 0.88;
}
.ap-skin .drawer .btn--ghost,
.ap-skin .dialog .btn--ghost,
.ap-skin .dialog .btn--soft {
  background: var(--ag-card);
  border: 1px solid var(--ag-btn-line);
  color: var(--ag-ink);
}
.ap-skin .drawer .btn--ghost:hover,
.ap-skin .dialog .btn--ghost:hover,
.ap-skin .dialog .btn--soft:hover {
  background: var(--ag-hover);
}
.ap-skin .drawer .input,
.ap-skin .drawer .textarea,
.ap-skin .drawer .select-trigger,
.ap-skin .dialog .input {
  border-radius: 10px;
  border: 1px solid var(--ag-btn-line);
  background: var(--ag-card);
  color: var(--ag-ink);
}
.ap-skin .drawer .input:focus-visible,
.ap-skin .drawer .select-trigger[aria-expanded="true"] {
  border-color: var(--ag-ink);
  box-shadow: 0 0 0 3px var(--ag-hover);
}
.ap-skin .radio[aria-checked="true"] {
  border-color: var(--ag-dark);
  background: var(--ag-dark);
}
.ap-skin .radio[aria-checked="true"]::after {
  background: var(--ag-dark-ink);
}
/* menus and pickers: white, hairline edge, soft lift */
.ap-skin .menu {
  border-radius: 12px;
  background: var(--ag-card);
  color: var(--ag-ink);
  box-shadow: 0 0 0 1px var(--ag-line), 0 12px 32px -12px rgba(0, 0, 0, 0.18);
}
.ap-skin .menu--soft {
  min-width: 240px;
}
.ap-skin .menu__item {
  border-radius: 8px;
}
.ap-skin .menu__item:hover,
.ap-skin .menu__item:focus-visible,
.ap-skin .menu__item[data-active="true"] {
  background: var(--ag-hover);
}
.ap-skin .menu__item-sub {
  color: var(--ag-muted);
}
.ap-skin .dialog {
  border-radius: 18px;
  background: var(--ag-card);
  box-shadow: 0 0 0 1px var(--ag-line), 0 24px 48px -16px rgba(0, 0, 0, 0.22);
}

/* the main tabs on their own row */
.ap-tabs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ======================================================================
   The layout (.ap--mixed, "Option 3", the one in use): a plain step list (black pill on the current
   step) beside ONE white container. The step's sections sit inside it,
   split by inset hairlines. The Back / Next bar stays outside, below.
   ====================================================================== */
.ap--mixed .steps-menu {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 4px;
}
.ap--mixed .step-item {
  border-radius: 8px;
  color: var(--ag-muted);
}
.ap--mixed .step-item:hover {
  color: var(--ag-ink);
}
.ap--mixed .build {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  padding-top: 24px;
}
.ap--mixed .step-page {
  gap: 0;
}
/* the sections join into one container: first takes the top corners,
   last the bottom ones, the ones between draw an inset line on top */
.ap--mixed .section,
.ap--mixed .section:first-child {
  position: relative;
  padding: 24px 28px;
  border: 1px solid var(--ag-line);
  border-block: 0;
  border-radius: 0;
  background: var(--ag-card);
}
.ap--mixed .section:first-of-type {
  padding-top: 28px;
  border-top: 1px solid var(--ag-line);
  border-radius: 16px 16px 0 0;
}
.ap--mixed .section:last-of-type {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ag-line);
  border-radius: 0 0 16px 16px;
}
.ap--mixed .section:first-of-type:last-of-type {
  border-radius: 16px;
}
.ap--mixed .section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 28px;
  height: 1px;
  background: var(--ag-line);
}
.ap--mixed .section-title {
  font-size: 16px;
}
.ap--mixed .step-foot {
  margin-top: 24px;
}
@media (max-width: 1023px) {
  .ap--mixed .build {
    gap: 16px;
    padding-top: 16px;
  }
}
@media (max-width: 767px) {
  .ap--mixed .section,
  .ap--mixed .section:first-child,
  .ap--mixed .section:first-of-type,
  .ap--mixed .section:last-of-type {
    padding-inline: 16px;
  }
  .ap--mixed .section + .section::before {
    inset-inline: 16px;
  }
}

/* a hairline under the main tabs, so the head stays apart from the content */
.ap--mixed .agent-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ag-line);
}

/* Test, Deploy and Conversations: their sections join into the same container */
.ap .tab-page {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
}
.ap .tab-page > .step-foot {
  margin-top: 24px;
}

/* a field with an error inside a drawer or dialog shows a red edge too */
.ap-skin .drawer [aria-invalid="true"],
.ap-skin .dialog [aria-invalid="true"] {
  border-color: var(--ag-red);
}

/* a section's one-line subtitle (only where the spec asks for one) */
.ap .section__lead {
  margin: -2px 0 6px;
  font-size: 13.5px;
  color: var(--ag-muted);
}

/* auto-save (2 Oct 2026): Saving… · Saved · 14:05 · Not saved. Retry */
.step-foot__saving {
  color: var(--ag-muted);
}
.step-foot__error {
  color: var(--ag-red);
}
.step-foot__retry {
  padding: 0 2px;
  border-radius: 4px;
  font: inherit;
  font-weight: 500;
  color: var(--ag-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.step-foot__retry:hover {
  text-decoration-thickness: 2px;
}