/* AI Assistant wizard. Page layout only; components come from relmio-ui.css. */

/* Operation progress follows the stepper so safety text and headings remain visible. */
.assistant-wizard .operation-progress {
  display: grid;
  gap: var(--rm-space-2);
  min-width: 0;
  padding: var(--rm-space-3) var(--rm-space-4);
  border: 1px solid var(--rm-accent-line);
  border-radius: var(--rm-radius-lg);
  background: var(--rm-surface);
}

.assistant-wizard[data-operation-busy="true"] .assistant-rail nav {
  display: none;
}

.operation-progress__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--rm-space-2) var(--rm-space-4);
}

.operation-progress__label {
  color: var(--rm-ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.operation-progress__elapsed {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  white-space: nowrap;
}

.operation-progress__elapsed time {
  margin-inline-start: var(--rm-space-1);
  color: var(--rm-ink);
  font-family: var(--rm-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.operation-progress__track,
.operation-progress__note {
  grid-column: 1 / -1;
}

.operation-progress__note {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  line-height: 1.45;
}

/* Rail: page title and stepper. Safety and status follow the step panels in
   the DOM, so narrow screens show the step first. From 1024px they sit in the
   rail column under the stepper. */
.assistant-rail,
.assistant-aside {
  gap: var(--rm-space-3);
}

.assistant-aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width: 64rem) {
  .assistant-wizard .rm-split {
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: var(--rm-space-3);
  }

  .assistant-rail {
    grid-area: 1 / 1;
  }

  .assistant-step {
    grid-area: 1 / 2 / 3 / 3;
  }

  /* Like /local: a long error or an opened disclosure scrolls inside the
     notes, so the step panel and its footer actions stay put. The padding
     keeps the focused error's outline inside the scroll box. */
  .assistant-aside {
    grid-area: 2 / 1;
    min-height: 0;
    margin: -0.25rem;
    padding: 0.25rem;
    overflow-y: auto;
  }

  /* The review header shows the same verified identity, so the rail keeps
     only its Disconnect control on that step. */
  .assistant-wizard[data-current-step="3"]:has(#ssh-review-identity:not(:empty)) .assistant-session__text {
    display: none;
  }
}

.assistant-title {
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-xl);
  font-weight: 760;
  letter-spacing: -0.01em;
  line-height: var(--rm-leading-tight);
}

/* Narrow screens: the step title names the page, so the rail title is kept
   for screen readers only and the step starts higher. */
@media (max-width: 63.99rem) {
  .assistant-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.assistant-safety {
  display: grid;
  gap: var(--rm-space-2);
}

.assistant-safety__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--rm-space-2);
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  line-height: 1.45;
}

.assistant-safety__item > .rm-icon {
  margin-top: 0.0625rem;
  color: var(--rm-success);
}

.assistant-safety__item strong {
  color: var(--rm-ink);
  font-weight: 650;
}

.assistant-session {
  display: grid;
  justify-items: start;
  gap: var(--rm-space-1);
}

.assistant-session__text {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-xs);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.assistant-session__text:empty {
  display: none;
}

.assistant-message {
  padding-top: var(--rm-space-2);
  border-top: 1px solid var(--rm-line);
  color: var(--rm-ink);
  font-size: var(--rm-text-sm);
  font-weight: 560;
  line-height: 1.45;
}

/* Compact warning: one summary line, with details behind a plain disclosure
   that follows the summary inline until it opens. */
.assistant-callout {
  padding: var(--rm-space-2) var(--rm-space-3);
}

.assistant-callout .rm-callout__content {
  display: block;
}

.assistant-callout .rm-callout__content > p {
  display: inline;
}

.assistant-callout .assistant-callout__more {
  display: inline-block;
  margin-inline-start: var(--rm-space-2);
  vertical-align: baseline;
}

.assistant-callout .assistant-callout__more[open] {
  display: block;
  margin-inline-start: 0;
}

.assistant-callout__more > summary {
  min-height: 1.5rem;
  padding-block: 0;
  font-size: var(--rm-text-sm);
}

.assistant-callout__more > .rm-disclosure__body {
  padding-bottom: var(--rm-space-1);
}

.assistant-aside .assistant-callout__more > .rm-disclosure__body {
  padding-inline-start: 0;
}

.assistant-step {
  scroll-margin-top: calc(var(--rm-topbar-height) + var(--rm-space-3));
}

/* Steps */
.assistant-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.assistant-step .rm-panel__header {
  padding-top: var(--rm-space-4);
  padding-bottom: var(--rm-space-3);
}

.assistant-step .rm-panel__body {
  gap: var(--rm-space-3);
}

/* Field rows share label, control and hint rows so controls line up. */
.assistant-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 0.375rem var(--rm-space-4);
}

.assistant-fields > .rm-field {
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.assistant-fields--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.assistant-fields--server {
  grid-template-columns: minmax(0, 1fr) 11rem;
}

.assistant-field__more {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--rm-space-1);
  min-width: 0;
}

.assistant-fingerprint {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--rm-space-2) var(--rm-space-4);
  padding: var(--rm-space-2) var(--rm-space-3);
  border: 1px solid var(--rm-accent-line);
  border-radius: var(--rm-radius-md);
  background: var(--rm-accent-soft);
}

.assistant-fingerprint__value {
  display: grid;
  gap: 0.125rem;
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  overflow-wrap: anywhere;
}

.assistant-fingerprint__value code {
  justify-self: start;
  color: var(--rm-ink);
}

.assistant-fingerprint .rm-check {
  font-size: var(--rm-text-md);
}

/* The privileged runner consent sits beside the action it unlocks. */
.assistant-consent {
  flex: 1 1 20rem;
  font-size: var(--rm-text-md);
}

.assistant-hint {
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  line-height: 1.4;
  text-align: end;
}

/* Plan warnings from the server, one sentence per line. */
.assistant-warnings {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* instance-ai status: a dot and a sentence. */
.assistant-note {
  display: flex;
  align-items: baseline;
  gap: var(--rm-space-2);
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-md);
  line-height: 1.45;
}

.assistant-note::before {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rm-ink-subtle);
  content: "";
}

.assistant-note[data-status="enabled"] {
  color: var(--rm-ink);
}

.assistant-note[data-status="enabled"]::before {
  background: var(--rm-success);
}

.assistant-note:is([data-status="configured"], [data-status="missing"])::before {
  background: var(--rm-warning);
}

/* The prerequisite guidance only matters until instance-ai is enabled. */
.assistant-note[data-status="enabled"] + #instance-ai-guidance {
  display: none;
}

.assistant-guidance {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rm-space-2) var(--rm-space-5);
  font-size: var(--rm-text-sm);
  line-height: 1.45;
}

.assistant-guidance > .assistant-steps {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.assistant-steps {
  display: grid;
  gap: var(--rm-space-1);
  margin: 0;
  padding-inline-start: 1.25rem;
}

.assistant-identity {
  color: var(--rm-ink-muted);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-sm);
  overflow-wrap: anywhere;
}

.assistant-identity:empty {
  display: none;
}

.assistant-review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rm-space-4) var(--rm-space-6);
}

.assistant-review > section {
  display: grid;
  align-content: start;
  gap: var(--rm-space-2);
  min-width: 0;
}

.assistant-list {
  display: grid;
  gap: var(--rm-space-1);
  margin: 0;
  padding: 0;
  font-size: var(--rm-text-md);
  line-height: 1.45;
  list-style: none;
}

.assistant-list > li {
  position: relative;
  padding-inline-start: 1.5rem;
  overflow-wrap: anywhere;
}

.assistant-list > li::before {
  position: absolute;
  top: 0.125rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  background-color: var(--rm-success);
  content: "";
  -webkit-mask: var(--rm-icon-check) center / contain no-repeat;
  mask: var(--rm-icon-check) center / contain no-repeat;
}

.assistant-list--wont > li::before {
  background-color: var(--rm-danger);
  -webkit-mask-image: var(--rm-icon-x);
  mask-image: var(--rm-icon-x);
}

/* Ready: values for n8n on the left, model provider notes on the right. */
.assistant-ready {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rm-space-4) var(--rm-space-6);
}

.assistant-ready__column {
  display: grid;
  align-content: start;
  gap: var(--rm-space-2);
  min-width: 0;
  font-size: var(--rm-text-md);
  line-height: 1.5;
}

.assistant-ready__heading {
  margin-top: var(--rm-space-1);
  font-size: var(--rm-text-md);
  font-weight: 650;
}

.assistant-ready__heading:first-child {
  margin-top: 0;
}

.assistant-ready__note {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
}

.assistant-values {
  display: grid;
  gap: var(--rm-space-2);
  margin: 0;
}

.assistant-values > div {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.assistant-values dt {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
}

.assistant-values dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.assistant-ready__column > .assistant-values:not(.assistant-values--inline) dd > code {
  display: block;
  padding: 0.25rem 0.5rem;
}

.assistant-values--inline {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--rm-space-1) var(--rm-space-4);
}

.assistant-values--inline > div {
  display: contents;
}

@media (max-width: 63.99rem) {
  .assistant-hint {
    text-align: start;
  }
}

@media (max-width: 47.99rem) {
  .assistant-fields,
  .assistant-fingerprint,
  .assistant-fields--two,
  .assistant-review,
  .assistant-guidance,
  .assistant-ready {
    grid-template-columns: minmax(0, 1fr);
  }

  .assistant-fields {
    grid-template-rows: none;
  }

  .assistant-fields > .rm-field {
    grid-row: auto;
    grid-template-rows: none;
  }

  .assistant-guidance > .assistant-steps {
    grid-row: auto;
    grid-column: auto;
  }
}

/* While an operation runs the consent is already given and locked; the plan
   and the progress card carry the state, so the footer keeps one row. */
.assistant-wizard[data-operation-busy="true"] .assistant-consent {
  display: none;
}