/* The live demo floor: bar controls, the welcome card, the wizard, and how a
   research answer sits in the dashboard's chat column (the answer's own rules
   are in assets/lois-answer.css). */
#demobar .demo-ctl { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: 10px; }
#demobar .demo-mode { font: 11px ui-monospace, Menlo, monospace; letter-spacing: .03em; padding: 2px 8px; border-radius: 12px;
  border: 1px solid #2c5a54; color: #82decf; white-space: nowrap; }
#demobar .demo-mode.mine { border-color: #5a4a2a; color: #f0d7a8; }
.demo-btn { background: #0e1a17; border: 1px solid #2c5a54; color: #a8e6d8; border-radius: 8px; padding: 4px 11px;
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.demo-btn:hover { border-color: #82decf; color: #eafff8; }
.demo-btn.primary { background: #82decf; border-color: #82decf; color: #081915; font-weight: 700; }
.demo-btn.primary:hover { background: #a2ecdf; }
.demo-btn.clear { border-color: #5a4a2a; color: #f0d7a8; background: #1d170c; }
.demo-btn.clear:hover { border-color: #f0d7a8; }
.demo-btn:disabled { opacity: .55; cursor: default; }

.demo-card { position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 60;
  width: min(540px, calc(100vw - 24px)); background: #0c141d; border: 1px solid #2c5a54; border-radius: 14px;
  padding: 16px 18px 14px; color: #dbe6f0; box-shadow: 0 18px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(130, 222, 207, .08);
  font-size: 14px; line-height: 1.55; text-align: left; }
.demo-card.step { transition: bottom .34s cubic-bezier(.22, .68, .3, 1), opacity .26s ease; }
.demo-card.step:not(.in) { opacity: .999; }          /* never hidden: a frozen frame must still read */
.demo-card.step.high { bottom: auto; top: 46px; }          /* stop near the floor: card goes up top */
@media (prefers-reduced-motion: reduce) { .demo-card.step { transition: none; } }
.demo-card h3 { margin: 0 0 6px; font-size: 16px; color: #fff; }
.demo-card p { margin: 0 0 10px; color: #b9c6d4; }
.demo-card.welcome { bottom: 50%; transform: translate(-50%, 50%); width: min(560px, calc(100vw - 24px)); padding: 22px 24px 16px; }
.demo-card.welcome h3 { font-size: 19px; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.demo-actions.big { justify-content: stretch; margin: 14px 0 8px; }
.demo-big { flex: 1 1 200px; padding: 14px 16px; border-radius: 12px; border: 1px solid #5a4a2a; background: #1d170c; color: #f0d7a8;
  font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; }
.demo-big.primary { background: #82decf; border-color: #82decf; color: #081915; }
.demo-big:hover { filter: brightness(1.12); }
.demo-link { background: none; border: none; color: #8b98a8; font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 0; text-decoration: underline; }
.demo-step-n { display: flex; align-items: center; gap: 10px; font: 11px ui-monospace, Menlo, monospace; letter-spacing: .05em;
  text-transform: uppercase; color: #82decf; margin-bottom: 8px; }
.demo-dots { display: inline-flex; gap: 5px; flex: 1; }
.demo-dots i { width: 7px; height: 7px; border-radius: 50%; background: #233244; }
.demo-dots i.ok { background: #2c7a6c; }
.demo-dots i.on { background: #82decf; box-shadow: 0 0 8px #82decf; }
.demo-x { background: none; border: none; color: #8b98a8; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.demo-x:hover { color: #fff; }
.demo-out:empty { display: none; }
.demo-out { min-height: 18px; font: 12px ui-monospace, Menlo, monospace; color: #8b98a8; margin: 0 0 8px; }
.demo-out.ok { color: #82decf; } .demo-out.bad { color: #f0b9a8; } .demo-out.busy { color: #f0d7a8; }
.demo-lost { margin-top: 9px; font-size: 12px; color: #8b98a8; }
/* The spotlight. The ring's own box-shadow IS the dim: one 9999px spread of
   near-black with a hole exactly where the stop is. The stop is then lifted
   above that shadow (.demo-lit) so it stays bright, coloured and clickable
   while the rest of the page sits behind the wash, desaturated. */
.demo-ring { position: fixed; z-index: 55; pointer-events: none; border: 2px solid #82decf; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(2, 5, 9, .86), 0 0 0 1px rgba(130, 222, 207, .35), 0 0 34px 2px rgba(130, 222, 207, .45),
    inset 0 0 26px rgba(130, 222, 207, .1);
  transition: left .42s cubic-bezier(.22, .68, .3, 1), top .42s cubic-bezier(.22, .68, .3, 1),
    width .42s cubic-bezier(.22, .68, .3, 1), height .42s cubic-bezier(.22, .68, .3, 1); }
body.demo-dimmed > *:not(.demo-lit):not(.demo-lit-host):not(.demo-ring):not(.demo-card) {
  filter: saturate(.5); transition: filter .35s ease; }
.demo-lit-host { position: relative; z-index: 56; }
.demo-lit { position: relative; z-index: 56; filter: none !important;
  border-radius: 12px; animation: demo-lift .42s cubic-bezier(.22, .68, .3, 1) both; }
@keyframes demo-lift { from { transform: scale(.995); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .demo-ring { transition: opacity .2s ease; }
  .demo-lit { animation: none; }
  body.demo-dimmed #app, body.demo-dimmed .wrap { transition: none; }
}

/* narration: what is lit right now, and how far through the walk you are */
.demo-bar-progress { height: 2px; border-radius: 2px; background: #1a2733; margin: -4px 0 11px; overflow: hidden; }
.demo-bar-progress i { display: block; height: 100%; background: linear-gradient(90deg, #2c7a6c, #82decf);
  transition: width .45s cubic-bezier(.22, .68, .3, 1); }
.demo-here { display: flex; align-items: center; gap: 7px; font: 11.5px ui-monospace, Menlo, monospace;
  letter-spacing: .03em; color: #8b98a8; margin: 0 0 7px; }
.demo-here b { color: #82decf; font-weight: 600; }
.demo-here-dot { width: 6px; height: 6px; border-radius: 50%; background: #82decf; box-shadow: 0 0 0 0 rgba(130, 222, 207, .6);
  animation: demo-pulse 1.9s ease-out infinite; }
@keyframes demo-pulse { to { box-shadow: 0 0 0 8px rgba(130, 222, 207, 0); } }
@media (prefers-reduced-motion: reduce) { .demo-here-dot { animation: none; } .demo-bar-progress i { transition: none; } }
@media (max-width: 860px) {
  #demobar .demo-mode { display: none; }
  .demo-card { bottom: 12px; }
  .demo-card.welcome { bottom: 50%; }
}

/* a research answer inside the dashboard's chat column */
#chatlog .floorbubble.lois-answer p { margin: 6px 0 0; line-height: 1.6; }
#chatlog .floorbubble .lois-cards { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#chatlog .floorbubble .lois-cards-h { font: 10.5px ui-monospace, Menlo, monospace; letter-spacing: .04em; color: var(--dim, #8b98a8); text-transform: uppercase; }
#chatlog .floorbubble .lois-meta { margin-top: 8px; }
#chatlog .floorbubble .lois-receipt { display: inline-flex; font: 10.5px ui-monospace, Menlo, monospace; padding: .15rem .5rem; border-radius: 20px; }
#chatlog .floorbubble .lois-receipt.ok { color: #0a1712; background: #82decf; }
#chatlog .floorbubble .lois-receipt.none { color: #f0d7a8; background: #3a2f1a; border: 1px solid #5a4a2a; }
#chatlog .lois-proposals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#chatlog .lois-proposals .chip { cursor: pointer; }