/* Fioreva Tech · AI agent showcase (js/modules/ai.js)
   Customer chat on the left, the agent's actions in your systems on the right. */

[data-module="ai"] {
  --ai-log-h: 520px;
  --ai-head-h: 64px;
  --ai-foot-h: 56px;
  --ai-pad: 22px;
  --ai-agent: #131313;
  --ai-cust: #252525;
  display: grid;
  gap: 14px;
  min-width: 0;
}

/* pixel icons: integer scale only, so every pixel stays crisp */
[data-module="ai"] .ai-px { display: block; flex: none; fill: currentColor; shape-rendering: crispEdges; }
[data-module="ai"] .ai-px-7 { width: 14px; height: 14px; }
[data-module="ai"] .ai-px-lock { width: 10px; height: 12px; }
[data-module="ai"] .ai-px-out { width: 10px; height: 10px; }
[data-module="ai"] .ai-px-ticks { width: 16px; height: 8px; }
[data-module="ai"] .ai-px-eye { width: 22px; height: 14px; }

/* ---------- bar: scenario tabs and controls ---------- */
.ai-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ai-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  background: rgba(0, 0, 0, .5);
}
.ai-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--fg-2);
  font: 500 .8125rem/1.25 var(--mono);
  text-align: left;
  overflow: hidden;
  transition: color .2s, background-color .2s;
}
.ai-tab:hover { color: var(--fg); background: rgba(255, 255, 255, .04); }
.ai-tab[aria-selected="true"] { color: var(--fg); background: rgba(255, 255, 255, .08); }
.ai-tab-n { color: var(--fg-3); font-variant-numeric: tabular-nums; transition: color .2s; }
.ai-tab[aria-selected="true"] .ai-tab-n { color: var(--red); }
.ai-tab-sep { white-space: pre; color: var(--fg-3); }
.ai-tab-lang { color: var(--fg-3); }
.ai-tab[aria-selected="true"] .ai-tab-lang { color: var(--fg-2); }
.ai-tab-prog {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform .7s var(--ease);
}
.ai-tab[aria-selected="false"] .ai-tab-prog { visibility: hidden; }

.ai-ctrls { display: flex; gap: 8px; margin-left: auto; }
.ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-s);
  background: rgba(0, 0, 0, .4);
  color: var(--fg);
  font: 600 .8125rem/1 var(--mono);
  white-space: nowrap;
  transition: border-color .2s, background-color .2s;
}
.ai-btn:hover:not(:disabled) { border-color: var(--fg); background: rgba(255, 255, 255, .06); }
.ai-btn:disabled { opacity: .45; cursor: not-allowed; }

/* caption under the stage */
.ai-cap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 500 .75rem/1.5 var(--mono);
  color: var(--fg-3);
}
.ai-cap-sq { flex: none; width: 6px; height: 6px; background: var(--line-3); transform: translateY(-1px); }

/* ---------- panel frame ---------- */
.ai-panel {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  grid-template-rows: calc(var(--ai-head-h) + var(--ai-log-h) + var(--ai-foot-h));
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: var(--surface);
  overflow: hidden;
}
.ai-chat, .ai-trace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ai-trace { border-left: 1px solid var(--line-2); background: rgba(0, 0, 0, .55); }
.ai-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--ai-head-h);
  padding: 0 var(--ai-pad);
  border-bottom: 1px solid var(--line-2);
}
.ai-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--ai-foot-h);
  padding: 0 var(--ai-pad);
  border-top: 1px solid var(--line-2);
  font: 500 .75rem/1.35 var(--mono);
  color: var(--fg-3);
}

/* ---------- chat header ---------- */
/* the business's initial, not the Fioreva mark: the agent answers for the visitor's business */
.ai-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-s);
  background: #1a1a1a;
  color: var(--fg);
  font: 700 15px/1 var(--mono);
  overflow: hidden;
}
.ai-avatar.is-rtl { font: 700 17px/1 var(--arabic); }
.ai-who { min-width: 0; }
.ai-name {
  font: 600 .875rem/1.2 var(--mono);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-name-role { font-weight: 500; color: var(--fg-3); }
.ai-presence {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font: 500 .75rem/1 var(--mono);
  color: var(--fg-3);
  transition: color .2s;
}
.ai-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px rgba(0, 255, 194, .65);
}
.ai-head.is-typing .ai-presence { color: var(--mint); }
.ai-channel {
  flex: none;
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  font: 500 .6875rem/1 var(--mono);
  color: var(--fg-2);
  white-space: nowrap;
}

/* ---------- conversation ---------- */
.ai-log {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px var(--ai-pad) 22px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}
.ai-log:focus-visible, .ai-steps:focus-visible { outline-offset: -2px; }

.ai-msg { display: flex; flex-direction: column; max-width: min(80%, 470px); }
.ai-msg.is-cust { align-self: flex-end; align-items: flex-end; }
.ai-msg.is-agent { align-self: flex-start; align-items: flex-start; }
.ai-msg.is-cust + .ai-msg.is-agent, .ai-msg.is-agent + .ai-msg.is-cust { margin-top: 4px; }

.ai-bub {
  position: relative;
  max-width: 100%;
  padding: 8px 12px 6px;
  border-radius: var(--r-m);
  background: var(--ai-agent);
  color: var(--fg);
}
.ai-msg.is-cust > .ai-bub { background: var(--ai-cust); border-top-right-radius: 0; }
.ai-msg.is-agent > .ai-bub { border-top-left-radius: 0; }
/* stepped pixel tail on the speaker's corner */
.ai-bub::before {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  background: inherit;
}
.ai-msg.is-cust > .ai-bub::before { right: -8px; clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%); }
.ai-msg.is-agent > .ai-bub::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%); }

.ai-text { font: 400 .90625rem/1.5 var(--sans); overflow-wrap: break-word; }
.ai-bub[lang="ar"] .ai-text { font-family: var(--arabic); font-size: 1.0625rem; line-height: 1.65; }
.ai-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 3px;
  font: 500 .6875rem/1 var(--mono);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.ai-msg.is-cust .ai-meta { color: var(--fg-2); }
.ai-meta .ai-px-ticks { color: var(--fg-3); transition: color .4s; }
.ai-msg.is-read .ai-meta .ai-px-ticks { color: var(--mint); }

.ai-tr {
  max-width: 100%;
  margin-top: 6px;
  padding: 0 2px;
  font: 400 .78125rem/1.5 var(--sans);
  color: var(--fg-3);
}
.ai-msg.is-cust > .ai-tr { text-align: right; }
.ai-tr-tag {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 4px 1px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font: 600 .5625rem/1 var(--mono);
  letter-spacing: .06em;
  color: var(--fg-3);
  vertical-align: 1px;
}

/* typing indicator: three pixel squares */
.ai-typing > .ai-bub { padding: 13px 14px; }
.ai-dots { display: flex; gap: 4px; }
.ai-dots i {
  width: 5px;
  height: 5px;
  background: var(--fg-2);
  opacity: .3;
  animation: ai-dot 1.05s steps(1, end) infinite;
}
.ai-dots i:nth-child(2) { animation-delay: .175s; }
.ai-dots i:nth-child(3) { animation-delay: .35s; }
@keyframes ai-dot {
  0% { opacity: 1; transform: translateY(-2px); }
  30%, 100% { opacity: .3; transform: none; }
}

/* system events inside the chat */
.ai-evt { align-self: center; display: flex; }
.ai-evt-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  background: #000;
  font: 500 .71875rem/1 var(--mono);
  color: var(--fg-3);
}
.ai-evt-in i { flex: none; width: 6px; height: 6px; background: currentColor; }
.ai-evt.is-ok .ai-evt-in { color: var(--mint); border-color: rgba(0, 255, 194, .32); }
.ai-evt.is-warn .ai-evt-in { color: var(--cream); border-color: rgba(255, 236, 187, .32); }

/* payment link card */
.ai-pay {
  display: block;
  min-width: 236px;
  margin: 8px 0 2px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-m);
  background: #000;
  color: var(--fg);
  text-align: left;
  text-decoration: none;
  cursor: default;
  overflow: hidden;
}
/* one column that can shrink: a long .qa address must not widen the card past its bubble */
.ai-pay-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 10px 12px 11px; }
.ai-pay-dom { display: flex; align-items: center; gap: 7px; min-width: 0; font: 500 .6875rem/1 var(--mono); color: var(--fg-3); }
.ai-pay-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-pay-title { font: 600 .8125rem/1.3 var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.ai-pay-sub { font: 400 .75rem/1.4 var(--sans); color: var(--fg-2); }
.ai-pay-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  border-top: 1px solid var(--line-2);
  font: 600 .8125rem/1 var(--mono);
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.ai-pay-sq { display: none; flex: none; width: 7px; height: 7px; background: currentColor; }
.ai-pay.is-paid { border-color: rgba(0, 255, 194, .35); animation: ai-paid 1.6s var(--ease) both; }
@keyframes ai-paid {
  from { box-shadow: 0 0 0 1px rgba(0, 255, 194, .9), 0 0 32px rgba(0, 255, 194, .4); }
  to { box-shadow: 0 0 0 1px rgba(0, 255, 194, 0), 0 0 32px rgba(0, 255, 194, 0); }
}
.ai-pay.is-paid .ai-pay-cta { color: var(--mint); }
.ai-pay.is-paid .ai-pay-sq { display: block; }
.ai-pay.is-paid .ai-px-out { display: none; }

.ai-chat-foot .ai-px-eye { color: var(--fg-3); }

/* ---------- trace ---------- */
.ai-trace-title { font: 600 .9375rem/1.2 var(--mono); letter-spacing: -0.01em; color: var(--fg); }
.ai-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font: 500 .8125rem/1 var(--mono);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.ai-clock i { flex: none; width: 7px; height: 7px; background: var(--line-3); }
.ai-clock.is-run i { background: var(--red); box-shadow: 0 0 10px rgba(255, 0, 37, .7); animation: ai-blink 1.1s steps(1) infinite; }
.ai-clock.is-ok i { background: var(--mint); box-shadow: 0 0 10px rgba(0, 255, 194, .55); }
.ai-clock.is-warn i { background: var(--cream); }
.ai-clock-note { color: var(--fg-3); }
.ai-clock-note:empty { display: none; }
@keyframes ai-blink { 50% { opacity: .25; } }

.ai-sysband {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-height: 52px;
  padding: 10px var(--ai-pad);
  border-bottom: 1px solid var(--line);
}
.ai-sysband-label { font: 500 .6875rem/1 var(--mono); color: var(--fg-3); }
.ai-systems { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-systems li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  font: 500 .6875rem/1 var(--mono);
  color: var(--fg-3);
  transition: color .4s, background-color .4s, border-color .4s, box-shadow .4s;
}
.ai-systems li.is-used { color: var(--fg); border-color: var(--line-3); }
.ai-systems li.is-used::before { content: ""; width: 5px; height: 5px; background: var(--mint); }
.ai-systems li.is-warn::before { background: var(--cream); }
.ai-systems li.is-on {
  color: #000;
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 16px rgba(255, 0, 37, .45);
  transition-duration: .08s;
}
.ai-systems li.is-on::before { background: #000; }

.ai-steps {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 8px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.ai-step {
  position: relative;
  display: grid;
  grid-template-columns: 9px 2ch minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  padding: 10px var(--ai-pad);
}
/* running row lights the seam between conversation and trace */
.ai-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--red);
  box-shadow: 0 0 12px rgba(255, 0, 37, .8);
  opacity: 0;
  transition: opacity .4s;
}
.ai-step.is-run::after { opacity: 1; transition-duration: .05s; }
.ai-rail { position: absolute; left: calc(var(--ai-pad) + 4px); top: 0; bottom: 0; width: 1px; pointer-events: none; }
.ai-rail::before, .ai-rail::after { content: ""; position: absolute; left: 0; width: 1px; background: var(--line-2); }
.ai-rail::before { top: 0; height: 20px; }
.ai-rail::after { top: 20px; bottom: 0; }
.ai-step:first-child .ai-rail::before, .ai-step:last-child .ai-rail::after { display: none; }
.ai-node {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 9px;
  height: 9px;
  border: 1px solid var(--line-3);
  background: #000;
}
.ai-step.is-run .ai-node {
  border-color: var(--red);
  background: var(--red);
  box-shadow: 0 0 12px rgba(255, 0, 37, .75);
  animation: ai-blink .9s steps(1) infinite;
}
.ai-step.is-done .ai-node { border-color: var(--fg); background: var(--fg); }
.ai-step.is-warn .ai-node { border-color: var(--cream); background: var(--cream); }
.ai-step-n { grid-column: 2; grid-row: 1; font: 500 .75rem/1 var(--mono); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ai-step-line { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 20px; }
.ai-tool {
  min-width: 0;
  font: 600 .84375rem/1.2 var(--mono);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-tag {
  flex: none;
  padding: 3px 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  font: 500 .65625rem/12px var(--mono);
  color: var(--fg-2);
  transition: color .3s, background-color .3s, border-color .3s;
}
.ai-step.is-run .ai-tag { color: #000; background: var(--red); border-color: var(--red); transition-duration: .05s; }
.ai-dt { grid-column: 4; grid-row: 1; font: 500 .75rem/1 var(--mono); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ai-res {
  grid-column: 3 / 5;
  grid-row: 2;
  min-height: 1.45em;
  font: 400 .8125rem/1.45 var(--mono);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.ai-step.is-warn .ai-res { color: var(--cream); }
.ai-load { display: inline-flex; gap: 3px; vertical-align: middle; }
.ai-load i {
  width: 5px;
  height: 5px;
  background: var(--line-3);
  animation: ai-load .96s steps(1, end) infinite;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes ai-load {
  0% { background: var(--red); }
  12%, 100% { background: var(--line-3); }
}

/* pending slots */
.ai-ghost .ai-node { border-color: var(--line-2); }
.ai-ghost .ai-step-n { color: var(--line-3); }
.ai-ghost .ai-rail::before, .ai-ghost .ai-rail::after { background: var(--line); }
.ai-ghost .ai-res { display: flex; align-items: center; }
.ai-sk { display: block; flex: none; max-width: 100%; height: 7px; background: var(--line); }
.ai-step-line .ai-sk { background: var(--line-2); }
/* block, not the step line's flex, so the ellipsis can apply on a narrow phone */
.ai-ghost-hint { display: block; font: 500 .78125rem/20px var(--mono); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* summary */
.ai-sum { color: var(--fg-2); }
.ai-sum-sq { flex: none; width: 8px; height: 8px; background: var(--line-3); }
.ai-sum.is-run .ai-sum-sq { background: var(--red); }
.ai-sum.is-ok .ai-sum-sq { background: var(--mint); box-shadow: 0 0 10px rgba(0, 255, 194, .55); }
.ai-sum.is-warn .ai-sum-sq { background: var(--cream); }
.ai-sum.is-ok .ai-sum-text, .ai-sum.is-warn .ai-sum-text { color: var(--fg); }
.ai-sum-text { min-width: 0; }
.ai-next {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--fg);
  font: 600 .75rem/1 var(--mono);
  white-space: nowrap;
  transition: border-color .2s, background-color .2s;
}
.ai-next:not([hidden]) { animation: ai-fade .5s .25s var(--ease) backwards; }
.ai-next:hover { border-color: var(--fg); background: rgba(255, 255, 255, .06); }
.ai-next .btn-flag { width: 6px; height: 13px; }
.ai-next:hover .btn-flag, .ai-next:focus-visible .btn-flag { transform: translateX(3px); }

/* ---------- motion: stepped reveals, in the brand's pixel rhythm ---------- */
.ai-msg.is-in > .ai-bub { animation: ai-wipe-l .3s steps(6, end) backwards; }
.ai-msg.is-in.is-cust > .ai-bub { animation-name: ai-wipe-r; }
@keyframes ai-wipe-l {
  from { clip-path: inset(0 100% 0 -10px); }
  to { clip-path: inset(0 0 0 -10px); }
}
@keyframes ai-wipe-r {
  from { clip-path: inset(0 -10px 0 100%); }
  to { clip-path: inset(0 -10px 0 0); }
}
.ai-msg.is-in > .ai-tr { animation: ai-fade .45s .22s var(--ease) backwards; }
.ai-typing > .ai-bub { animation: ai-fade .2s var(--ease) backwards; }
@keyframes ai-fade { from { opacity: 0; transform: translateY(3px); } }
.ai-evt.is-in .ai-evt-in { animation: ai-pop .32s steps(4, end) backwards; }
@keyframes ai-pop {
  from { clip-path: inset(0 50% 0 50%); }
  to { clip-path: inset(0 0 0 0); }
}
.ai-step.is-in { animation: ai-row .32s steps(8, end) backwards; }
@keyframes ai-row {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* off-screen, hidden tab or paused by the visitor: loops hold still */
[data-module="ai"].is-paused .ai-dots i,
[data-module="ai"].is-paused .ai-load i,
[data-module="ai"].is-paused .ai-node,
[data-module="ai"].is-paused .ai-clock i { animation-play-state: paused; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  [data-module="ai"] { --ai-pad: 18px; }
  .ai-next-long { display: none; }
}

@media (max-width: 860px) {
  [data-module="ai"] { --ai-log-h: clamp(380px, 58svh, 460px); --ai-pad: 16px; }
  .ai-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ai-chat { height: calc(var(--ai-head-h) + var(--ai-log-h) + var(--ai-foot-h)); }
  .ai-trace { border-left: 0; border-top: 1px solid var(--line-2); }
  .ai-steps { flex: none; height: 412px; }
  .ai-next-long { display: inline; }
}

@media (max-width: 640px) {
  [data-module="ai"] { --ai-head-h: 60px; --ai-foot-h: 54px; }
  .ai-bar { gap: 10px 12px; }
  .ai-tabs { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ai-tab { align-items: flex-start; gap: 8px; min-height: 54px; padding: 10px 10px 11px; }
  .ai-tab-txt { display: grid; gap: 5px; }
  .ai-tab-sep {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ai-ctrls { flex: 1 1 100%; }
  .ai-btn { flex: 1 1 0; }
  .ai-sysband { display: none; }
  .ai-msg { max-width: 86%; }
  .ai-step { column-gap: 10px; }
  .ai-res { font-size: .78125rem; }
  .ai-chat-foot { font-size: .6875rem; }
}

@media (max-width: 400px) {
  .ai-next-long { display: none; }
  .ai-pay { min-width: 0; }
  .ai-sum { height: 68px; }
}

@media (max-width: 370px) {
  .ai-tab-n, .ai-channel, .ai-step-n { display: none; }
  .ai-step { grid-template-columns: 9px minmax(0, 1fr) auto; }
  .ai-step-line { grid-column: 2; }
  .ai-dt { grid-column: 3; }
  .ai-res { grid-column: 2 / 4; }
  .ai-tool { font-size: .78125rem; }
}

/* reduced motion: every state lands without animation */
@media (prefers-reduced-motion: reduce) {
  [data-module="ai"] .ai-bub,
  [data-module="ai"] .ai-tr,
  [data-module="ai"] .ai-dots i,
  [data-module="ai"] .ai-evt-in,
  [data-module="ai"] .ai-pay,
  [data-module="ai"] .ai-step,
  [data-module="ai"] .ai-node,
  [data-module="ai"] .ai-load i,
  [data-module="ai"] .ai-clock i,
  [data-module="ai"] .ai-next { animation: none !important; }
  [data-module="ai"] .ai-tab,
  [data-module="ai"] .ai-tab-n,
  [data-module="ai"] .ai-tab-prog,
  [data-module="ai"] .ai-btn,
  [data-module="ai"] .ai-presence,
  [data-module="ai"] .ai-px-ticks,
  [data-module="ai"] .ai-systems li,
  [data-module="ai"] .ai-step::after,
  [data-module="ai"] .ai-tag,
  [data-module="ai"] .ai-next,
  [data-module="ai"] .btn-flag { transition: none !important; }
}

/* paused from the nav: the same, so the visitor's actions land in their final state */
:root[data-motion="paused"] [data-module="ai"] .ai-bub,
:root[data-motion="paused"] [data-module="ai"] .ai-tr,
:root[data-motion="paused"] [data-module="ai"] .ai-dots i,
:root[data-motion="paused"] [data-module="ai"] .ai-evt-in,
:root[data-motion="paused"] [data-module="ai"] .ai-pay,
:root[data-motion="paused"] [data-module="ai"] .ai-step,
:root[data-motion="paused"] [data-module="ai"] .ai-node,
:root[data-motion="paused"] [data-module="ai"] .ai-load i,
:root[data-motion="paused"] [data-module="ai"] .ai-clock i,
:root[data-motion="paused"] [data-module="ai"] .ai-next { animation: none !important; }
:root[data-motion="paused"] [data-module="ai"] .ai-tab,
:root[data-motion="paused"] [data-module="ai"] .ai-tab-n,
:root[data-motion="paused"] [data-module="ai"] .ai-tab-prog,
:root[data-motion="paused"] [data-module="ai"] .ai-btn,
:root[data-motion="paused"] [data-module="ai"] .ai-presence,
:root[data-motion="paused"] [data-module="ai"] .ai-px-ticks,
:root[data-motion="paused"] [data-module="ai"] .ai-systems li,
:root[data-motion="paused"] [data-module="ai"] .ai-step::after,
:root[data-motion="paused"] [data-module="ai"] .ai-tag,
:root[data-motion="paused"] [data-module="ai"] .ai-next,
:root[data-motion="paused"] [data-module="ai"] .btn-flag { transition: none !important; }