/* What the demo adds to the interface, and nothing else.
   Every colour here is a token the agents already share, so the demo looks like the product. */

:root { --demo-chip-height: 52px; }

body { padding-bottom: calc(var(--demo-chip-height) + env(safe-area-inset-bottom, 0px)); }

.demo-chip {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  min-height: var(--demo-chip-height);
  background: var(--accent-wash);
  border-top: 1px solid var(--accent-line);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.demo-chip strong { font-weight: var(--weight-semibold); }
.demo-chip__text { min-width: 0; }
.demo-chip__dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.demo-chip__back {
  flex: none;
  display: inline-flex; align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.demo-chip__back:hover { border-color: var(--accent); }

/* The toasts sit above the chip rather than behind it. */
.toasts { bottom: calc(var(--demo-chip-height) + var(--s-3) + env(safe-area-inset-bottom, 0px)); }

/* A control that would change, send or spend. It is left where it is, legible, and visibly off,
   because hiding it would misrepresent the product and greying it out with no reason given is the
   thing every dead demo does. */
[data-demo-inert="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(1);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
textarea[data-demo-inert="true"],
input[data-demo-inert="true"],
select[data-demo-inert="true"] {
  text-decoration: none;
  filter: none;
  opacity: 0.75;
  background: var(--surface-sunken);
}

.demo-note {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  max-width: var(--measure);
}

@media (max-width: 760px) {
  :root { --demo-chip-height: 64px; }
  .demo-chip { align-items: flex-start; padding-top: var(--s-2); }
  .demo-chip__dot { display: none; }
  .demo-chip__text { font-size: var(--text-xs); }
}

/* One thing the demo fixes rather than shows.
   A run output is named by what it is, so on a narrow screen the button carrying that name is
   wider than the phone. The interface sets every button to one line, which is right for Approve
   and wrong for "Every candidate with the arithmetic and the reject reasons". Left alone it is the
   only thing on the whole gallery that scrolls sideways. It is worth fixing in the interface
   itself, and until then it is fixed here. */
.run__outputs .btn,
.card__foot .btn,
.card__actions .btn {
  white-space: normal;
  text-align: left;
  height: auto;
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}