/* Agent simulator (homepage #proof). Four scripted demos inside the instrument panel.
   Motion is opacity and transform only; without JavaScript, or with reduced motion, every step is shown at once. */

.sim { --ok: var(--cyan-400); --warn: #f2b84b; --person: #8fb3ff; display: grid; gap: var(--s-3); }
.sim .instrument__meta { align-items: center; margin-bottom: 0; }
.sim__replay { margin-left: auto; padding: 4px 12px; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--r-pill); color: var(--text-light); background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sim__replay:hover, .sim__replay:focus-visible { border-color: var(--cyan-400); color: var(--cyan-400); }

/* Four-step track: read, check rules, act, hand off. */
.sim__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sim__steps li { position: relative; padding-top: 10px; color: var(--text-muted); font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; transition: color var(--d-2) var(--e-out); }
.sim__steps li::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 99px; background: rgb(255 255 255 / 10%); transition: background var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out); }
.sim__steps li.is-done { color: var(--text-light); }
.sim__steps li.is-done::before { background: var(--blue-500); }
.sim__steps li.is-current { color: var(--cyan-400); }
.sim__steps li.is-current::before { background: var(--cyan-400); box-shadow: 0 0 12px rgb(34 213 245 / 55%); }

.sim__stage { min-height: 0; }
.sim__panel { display: grid; gap: var(--s-3); }
.sim__panel[hidden] { display: none; }
.sim__caption { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }

/* Reveal: each [data-at] element appears at its time. */
.js .sim [data-at] { opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--e-out), transform 420ms var(--e-out); }
.js .sim [data-at].is-on { opacity: 1; transform: none; }

/* Shared pieces */
.chip { justify-self: start; margin: 0; padding: 5px 10px; border: 1px solid rgb(34 213 245 / 28%); border-radius: 8px; color: var(--text-light); background: rgb(34 213 245 / 7%); font: 500 11px/1.35 var(--font-mono); letter-spacing: .02em; }
.chip--warn { border-color: rgb(242 184 75 / 40%); color: var(--warn); background: rgb(242 184 75 / 8%); }
.handoff { justify-self: start; margin: 0; padding: 7px 12px; border-radius: var(--r-pill); color: #0a1220; background: var(--person); font-size: 12px; font-weight: 600; }
.handoff::before { content: "→ "; }

/* 01 · Chat */
.chat { overflow: hidden; border: 1px solid var(--line-dark); border-radius: 18px; background: rgb(3 10 22 / 55%); }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-dark); background: rgb(255 255 255 / 4%); }
.chat__head strong { display: block; color: var(--text-light); font-size: 14px; font-weight: 600; }
.chat__avatar { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 50%; color: #071426; background: linear-gradient(135deg, var(--cyan-400), var(--blue-500)); font-weight: 700; }
.chat__status { display: grid; color: var(--text-muted); font-size: 11px; }
.chat__status > span { grid-area: 1 / 1; transition: opacity var(--d-2) var(--e-out); }
.chat__status .s-typing { opacity: 0; color: var(--cyan-400); }
.chat__status.is-typing .s-on { opacity: 0; }
.chat__status.is-typing .s-typing { opacity: 1; }
/* A real chat window: fixed height that fits a laptop screen, scrolled to the newest message. */
.chat__body { display: grid; align-content: start; gap: 8px; height: clamp(230px, calc(100vh - 390px), 360px); padding: 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 16%) transparent; }
.js .sim .chat__body > [data-at]:not(.is-on) { display: none; }
.js .sim .chat__body > [data-at].is-on { animation: sim-in 420ms var(--e-out) both; }
@keyframes sim-in { from { opacity: 0; transform: translateY(8px); } }
.msg { position: relative; max-width: 84%; margin: 0; padding: 8px 12px 18px; border-radius: 14px; color: var(--text-light); font-size: 13.5px; line-height: 1.45; }
.msg time { position: absolute; right: 10px; bottom: 4px; color: rgb(255 255 255 / 45%); font-size: 10px; }
.msg[dir="rtl"] { font-size: 14.5px; }
.msg[dir="rtl"] time { right: auto; left: 10px; }
.msg--in { justify-self: start; border-bottom-left-radius: 4px; background: rgb(255 255 255 / 9%); }
.msg--out { justify-self: end; border-bottom-right-radius: 4px; background: linear-gradient(135deg, rgb(23 95 234 / 85%), rgb(23 95 234 / 60%)); }
.chat__body .chip, .chat__body .handoff { justify-self: center; }

/* 02 · Inbox */
.inbox { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mail { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-dark); border-radius: 10px; background: rgb(255 255 255 / 4%); }
.mail__from { overflow: hidden; color: var(--text-light); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mail__subj { overflow: hidden; color: var(--text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.tag { padding: 3px 9px; border-radius: var(--r-pill); font: 500 10.5px/1.3 var(--font-mono); white-space: nowrap; }
.tag--ok { color: var(--ok); background: rgb(34 213 245 / 10%); }
.tag--warn { color: var(--warn); background: rgb(242 184 75 / 10%); }
.tag--person { color: var(--person); background: rgb(143 179 255 / 12%); }
.tag--mute { color: var(--text-muted); background: rgb(255 255 255 / 6%); }
.draft { padding: 12px 14px; border: 1px solid rgb(242 184 75 / 30%); border-radius: 12px; background: rgb(242 184 75 / 5%); }
.draft p { margin: 0; }
.draft__head { color: var(--warn); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.draft__body { margin-top: 6px !important; color: var(--text-light); font-size: 13.5px; }
.draft__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px !important; }
.btn-sim { padding: 5px 14px; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--r-pill); color: var(--text-light); font-size: 12px; font-weight: 600; transition: transform 160ms var(--e-out), box-shadow var(--d-2) var(--e-out), background var(--d-2) var(--e-out); }
.btn-sim--primary { border-color: transparent; background: var(--blue-500); }
.btn-sim.is-marked { transform: scale(.94); box-shadow: 0 0 0 4px rgb(34 213 245 / 25%); }
.draft__sent { color: var(--ok); font: 500 11px/1.3 var(--font-mono); }

/* 03 · Document */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.doc__paper { position: relative; overflow: hidden; padding: 14px 16px; border-radius: 10px; color: #17212f; background: #f4f7fb; box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
.doc__title { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #d8e0ea; font: 600 13px/1.2 var(--font-display); letter-spacing: .02em; }
.doc dl { display: grid; gap: 5px; margin: 0; }
.doc dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.doc dt { color: #5f6c7e; }
.doc dd { margin: 0; font-weight: 600; text-align: right; }
.doc__total { margin-top: 4px; padding-top: 6px; border-top: 1px solid #d8e0ea; }
.doc__scan { position: absolute; inset: 0 0 auto; height: 38px; background: linear-gradient(180deg, transparent, rgb(34 213 245 / 35%), transparent); opacity: 0; pointer-events: none; }
.js .doc__paper.is-on .doc__scan { animation: sim-scan 2.2s var(--e-out) 200ms both; }
@keyframes sim-scan { 0% { opacity: 1; transform: translateY(-40px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(330px); } }
.doc__out { display: grid; align-content: start; gap: 6px; }
.doc__label { margin: 4px 0 0; color: var(--text-muted); font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; }
.fields div { display: grid; gap: 1px; padding: 5px 9px; border-radius: 7px; background: rgb(255 255 255 / 5%); font-size: 12px; }
.fields dt { font-size: 10.5px; }
.fields dt { color: var(--text-muted); }
.fields dd { overflow: hidden; margin: 0; color: var(--text-light); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1040px) { .sim__stage { min-height: 0; } }
@media (max-width: 640px) {
  .mail { grid-template-columns: minmax(0, 1fr); }
  .mail .tag { justify-self: start; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .msg { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .sim [data-at] { transition: none; }
  .js .sim .chat__body > [data-at].is-on { animation: none; }
  .js .doc__paper.is-on .doc__scan { animation: none; }
}

/* Laptop and up: every demo takes the chat's height, so switching tabs does not jump. */
@media (min-width: 1041px) { .sim__stage { min-height: calc(clamp(230px, calc(100vh - 390px), 360px) + 133px); } }

/* 04 · Knowledge agent (owner, 21 Oct 2026): a manager's question answered from a SQL database, a knowledge graph
   and documents, every figure cited. The chart builds left to right, then the run lights each step; the lens below
   shows what the current step is doing (each card fades in over the last). Wires are SVG at 1:1 scale. */
.kg__chart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 24px minmax(0, 1.6fr) 24px minmax(0, 1fr) 16px minmax(0, 1fr); align-items: start; }
.kg__node { display: grid; justify-items: center; gap: 4px; min-width: 0; margin-top: 42px; text-align: center; }
.kg__t { display: grid; gap: 1px; min-width: 0; }
.kg__t strong { color: var(--text-light); font-size: 12px; font-weight: 600; line-height: 1.2; }
.kg__t small { color: var(--text-muted); font-size: 10.5px; line-height: 1.25; }
.kg__icon { position: relative; display: grid; flex: none; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line-dark); border-radius: 10px; color: var(--text-muted); background: #0a1628; transition: border-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out), background var(--d-2) var(--e-out); }
.kg__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kg__res { justify-self: center; padding: 2px 7px; border-radius: var(--r-pill); color: var(--ok); background: rgb(34 213 245 / 10%); font: 500 10px/1.3 var(--font-mono); white-space: nowrap; }

.kg__sources { display: grid; gap: 6px; height: 120px; }
.kg__src { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; height: 36px; padding: 0 8px 0 5px; border: 1px solid var(--line-dark); border-radius: 10px; background: #0a1628; transition: border-color var(--d-2) var(--e-out); }
.kg__src .kg__icon { width: 26px; height: 26px; border: 0; border-radius: 7px; background: rgb(255 255 255 / 6%); }
.kg__src .kg__icon svg { width: 15px; height: 15px; }
.kg__src .kg__t strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.kg__src .kg__res { justify-self: start; padding: 0; background: none; font-size: 9.5px; }

/* Wires: drawn in during the build, then a short comet runs along them when the run reaches them. */
.kg__wire { align-self: start; width: 16px; height: 2px; margin-top: 59px; overflow: visible; }
.kg__fan { align-self: start; width: 24px; height: 120px; overflow: visible; }
.kg__wire path, .kg__fan path { fill: none; stroke-linecap: round; }
.kg__wire .b, .kg__fan .b { stroke: rgb(255 255 255 / 24%); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--e-out), stroke var(--d-2) var(--e-out) 400ms; }
.kg__wire .c, .kg__fan .c { stroke: var(--cyan-400); stroke-width: 2.5; stroke-dasharray: .3 1.6; stroke-dashoffset: .3; opacity: 0; }
.js .sim svg.kg__wire[data-at], .js .sim svg.kg__fan[data-at] { opacity: 1; transform: none; }
.js .sim svg.kg__wire[data-at]:not(.is-on) .b, .js .sim svg.kg__fan[data-at]:not(.is-on) .b { stroke-dashoffset: 1; }
.kg__wire.is-marked .b, .kg__fan.is-marked .b { stroke: var(--blue-500); }
.kg__wire.is-marked .c, .kg__fan.is-marked .c { animation: kg-comet 750ms var(--e-out) both; }
@keyframes kg-comet { 0% { opacity: 1; stroke-dashoffset: .3; } 80% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }

/* Active step glows and rings; a finished step turns blue. */
.kg__node.is-marked .kg__icon, .kg__src.is-marked .kg__icon { color: var(--cyan-400); }
.kg__node.is-marked .kg__icon { border-color: var(--cyan-400); box-shadow: 0 0 0 4px rgb(34 213 245 / 10%), 0 0 18px rgb(34 213 245 / 30%); }
.kg__src.is-marked { border-color: rgb(34 213 245 / 60%); }
.kg__node.is-marked:not(:has(.kg__res.is-on)) .kg__icon::after,
.kg__src.is-marked:not(:has(.kg__res.is-on))::after { position: absolute; inset: -5px; border: 1px solid var(--cyan-400); border-radius: 14px; content: ""; animation: kg-ring 1.4s ease-out infinite; pointer-events: none; }
@keyframes kg-ring { from { opacity: .8; transform: scale(.92); } to { opacity: 0; transform: scale(1.18); } }
.kg__node:has(.kg__res.is-on) .kg__icon { border-color: var(--blue-500); color: var(--text-light); background: #10306a; box-shadow: none; }
.kg__src:has(.kg__res.is-on) { border-color: rgb(23 95 234 / 70%); }
.kg__src:has(.kg__res.is-on) .kg__icon { color: var(--text-light); background: rgb(23 95 234 / 35%); }

/* Lens: one card per step, stacked in the same cell; the newest covers the last. */
.kg__lens { display: grid; }
/* Each card is its own layer, so a later card covers every part of the one before (positioned children included). */
.kg__card { position: relative; isolation: isolate; display: grid; grid-area: 1 / 1; align-content: start; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-dark); border-radius: 14px; background: #0a1628; }
.kg__card p { margin: 0; }
.kg__k { color: var(--text-muted); font: 500 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.kg__ask { justify-self: start; max-width: 92%; padding: 9px 13px; border-radius: 14px 14px 14px 4px; color: var(--text-light); background: rgb(255 255 255 / 9%); font-size: 14px; line-height: 1.45; }
.kg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kg__chips span { padding: 4px 9px; border: 1px solid rgb(34 213 245 / 26%); border-radius: 8px; color: var(--text-light); background: rgb(34 213 245 / 6%); font: 500 11px/1.35 var(--font-mono); }
.kg__chips .kg__ok { color: var(--ok); }
.kg__card--fetch { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kg__col { display: grid; align-content: start; gap: 6px; min-width: 0; }
.kg__look { padding: 6px 8px; border-radius: 6px; color: #9fd8ff; background: rgb(0 0 0 / 28%); font: 10.5px/1.45 var(--font-mono); }
.kg__out { color: var(--ok); font: 500 10.5px/1.4 var(--font-mono); }
.kg__path { display: grid; margin: 0; padding: 0; list-style: none; }
.kg__path li { position: relative; padding: 2px 7px; border: 1px solid rgb(34 213 245 / 30%); border-radius: 7px; color: var(--text-light); background: rgb(34 213 245 / 6%); font-size: 10.5px; line-height: 1.35; }
.kg__path li + li { margin-top: 13px; }
.kg__path li + li::before { position: absolute; top: -14px; left: 10px; height: 13px; border-left: 1px dashed rgb(34 213 245 / 55%); content: ""; }
.kg__path i { position: absolute; top: -13px; left: 17px; color: var(--text-muted); font: normal 9px/1.2 var(--font-mono); }
.kg__doc { padding: 5px 8px; border-left: 2px solid var(--person); border-radius: 0 6px 6px 0; color: var(--text-muted); background: rgb(255 255 255 / 4%); font-size: 10.5px; line-height: 1.4; }
.kg__doc b { display: block; color: var(--text-light); font-weight: 600; }
.kg__checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kg__checks li { color: var(--text-light); font-size: 13px; }
.kg__checks li::before { margin-right: 8px; color: var(--ok); content: "✓"; }
.kg__answer { color: var(--text-light); font-size: 13.5px; line-height: 1.55; }
.kg__answer sup { display: inline-grid; min-width: 15px; height: 15px; margin-left: 3px; place-items: center; border-radius: 4px; color: var(--cyan-400); background: rgb(34 213 245 / 16%); font: 600 9.5px/1 var(--font-mono); vertical-align: 3px; }
.kg__cites { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted); font: 10px/1.4 var(--font-mono); }
.kg__cites b { margin-right: 5px; color: var(--cyan-400); }

/* Owner, 21 Oct 2026: this demo plays slowly so the flow is easy to follow: the timeline in Home.php is stretched
   1.86x from the first version (1/0.7, then 1.3), and the motion here is stretched to match. */
.js .sim--kg [data-at] { transition-duration: 780ms; }
.sim--kg .kg__wire .b, .sim--kg .kg__fan .b { transition-duration: 1120ms, 740ms; }
.sim--kg .kg__wire.is-marked .c, .sim--kg .kg__fan.is-marked .c { animation-duration: 1390ms; }
.sim--kg .kg__node.is-marked:not(:has(.kg__res.is-on)) .kg__icon::after,
.sim--kg .kg__src.is-marked:not(:has(.kg__res.is-on))::after { animation-duration: 2.6s; }

/* Narrow laptops: source labels may wrap, so their result line gives way (the lens shows it). */
@media (min-width: 641px) and (max-width: 1180px) {
  .kg__src .kg__res { display: none; }
  .kg__src .kg__t strong { font-size: 10.5px; line-height: 1.15; white-space: normal; }
}
/* Phones: the chart runs top to bottom, with the three sources side by side. */
@media (max-width: 640px) {
  .kg__chart { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kg__wire, .kg__fan { display: none; }
  .kg__node { display: flex; align-items: center; gap: 10px; margin-top: 0; text-align: left; }
  .kg__node .kg__res { margin-left: auto; }
  .kg__sources { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; }
  .kg__src { flex-direction: column; justify-content: center; height: auto; padding: 8px 4px; text-align: center; }
  .kg__src .kg__t { justify-items: center; }
  .kg__src .kg__t strong { font-size: 10.5px; white-space: normal; }
  .kg__src .kg__res { justify-self: center; }
  .kg__card--fetch { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Keep the fetch card short: the result line stays, the query text goes; the graph path wraps as chips. */
  .kg__look { display: none; }
  .kg__path { display: flex; flex-wrap: wrap; gap: 6px; }
  .kg__path li + li { margin-top: 0; }
  .kg__path li + li::before { position: static; height: auto; margin-right: 5px; border: 0; color: var(--cyan-400); content: "→"; }
  .kg__path i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kg__wire .c, .kg__fan .c, .kg__wire.is-marked .c, .kg__fan.is-marked .c { animation: none; opacity: 0; }
  .kg__node.is-marked .kg__icon::after, .kg__src.is-marked::after { animation: none; display: none; }
  .kg__wire .b, .kg__fan .b { transition: none; }
}