/* =========================================================
   Component — Agent console

   Promoted out of pages/home.css in م3. The home page carried a
   `.chat` mock of the agent; the AI-agent page needs the same
   object five times over (hero plus four worked examples), which
   is the point at which the constitution (§4.2) says to lift it
   into a component rather than keep two implementations that
   drift apart.

   Structure: head (avatar · name and role · balance) → thread of
   bubbles → task card (steps · cost · approve). The `--wide`
   modifier is the examples variant, which sits beside a result
   panel instead of standing alone.

   The step marks are drawn from borders and pseudo-elements, so
   nothing here needs an icon file, and the states — done, running,
   pending — are pure class swaps that ai-agent.js can replay.
   ========================================================= */
.console {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

/* ---- Head ---- */
.console__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.console__avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--gradient-trace);
}
.console__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.console__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.console__role {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.console__credit {
  margin-inline-start: auto;
  flex: none;
}

/* ---- Thread ---- */
.console__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.console__bubble {
  max-width: 88%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
/* The visitor's own line sits on the deep brand tone, not on the
   action colour. It is the largest tinted mass in the console, and
   wearing the same colour as the buttons made it shout louder than
   the headline beside it. */
.console__bubble--user {
  align-self: flex-end;
  background: var(--color-primary-deep);
  color: var(--color-text-on-deep);
  border-end-end-radius: var(--radius-xs);
}
.console__bubble--agent {
  align-self: flex-start;
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  border-end-start-radius: var(--radius-xs);
}

/* ---- Task card ---- */
.console__task {
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-line-gold);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.console__task-head {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-gold-text);
}

.console__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.console__step {
  position: relative;
  padding-inline-start: var(--space-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
  transition: color var(--dur-base) var(--ease-out);
}

/* Pending: a hollow ring. Running: a ring that turns.
   Done: a filled disc with a tick cut into it. All drawn. */
.console__step-mark {
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 13px;
  height: 13px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-line-strong);
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.console__step-mark::after {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 3px;
  width: 5px;
  height: 2.5px;
  border-inline-start: 1.5px solid var(--color-canvas-deep);
  border-bottom: 1.5px solid var(--color-canvas-deep);
  rotate: -45deg;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.console__step.is-done { color: var(--color-text-secondary); }
.console__step.is-done .console__step-mark {
  border-color: transparent;
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-soft);
}
.console__step.is-done .console__step-mark::after { opacity: 1; }

.console__step.is-running { color: var(--color-text); }
.console__step.is-running .console__step-mark {
  border-color: var(--color-growth-soft);
  border-top-color: var(--color-growth);
  animation: console-spin 900ms linear infinite;
}

.console__step.is-pending { color: var(--color-text-muted); }

@keyframes console-spin { to { rotate: 360deg; } }

/* ---- Foot ---- */
.console__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-xs);
}
.console__cost {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.console__cost-figure {
  font-weight: var(--fw-bold);
  color: var(--color-gold-text);
}
.console__cost-label { color: var(--color-text-muted); }
.console__approve {
  margin-inline-start: auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* ---- Wide variant: the worked-example console ---- */
.console--wide {
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.console--wide .console__bubble { max-width: 94%; }

@media (prefers-reduced-motion: reduce) {
  .console__step.is-running .console__step-mark { animation: none; }
  .console__step,
  .console__step-mark,
  .console__step-mark::after { transition: none; }
}