/* A visible conversation between business data, an agent and the team. */
.data-flow {scroll-margin-top:24px}
.pipeline {
  display: grid;
  grid-template-columns: minmax(0, .95fr) 60px minmax(0, 1.1fr) 86px minmax(0, 1.15fr);
  align-items: center;
  padding: 38px;
  background: #102632;
  isolation: isolate;
}
.pipeline-sources {display:grid;gap:12px;min-width:0}
.source-file {display:flex;align-items:center;gap:13px;padding:16px;background:#1e3847;min-height:78px;border-radius:8px}
.source-file>div {min-width:0;flex:1}
.source-file strong {display:block;font-size:15px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.source-file small {display:block;font-size:12px;color:#bbd1dd;margin-top:5px;line-height:1.4}
.source-file>.icon {width:32px;height:32px;color:#9be6cc;flex-shrink:0}
.source-excel {background:#e5f5ec;color:#103e2b;padding-block:18px}
.source-excel small {color:#37624e}
.source-excel>img {width:48px;height:48px;flex-shrink:0}
.source-preview {display:grid;gap:3px;grid-template-columns:1.5fr 1fr 1fr;margin-top:9px}
.source-preview i {height:4px;background:#9bcdb1;border-radius:1px}
.file-type {display:grid;place-items:center;width:34px;height:38px;flex-shrink:0;background:#bbeedc;color:#143d32;border-radius:4px;font-size:11px;font-weight:800}
.pipeline-wire {position:relative;min-width:0;color:#bcebdc}
.wire-label {font-size:11px;display:block;text-align:center;margin-bottom:9px}
.wire-rail {display:block;position:relative;height:2px;background:#466b7b}
.wire-rail::after {content:'';position:absolute;right:1px;top:-3px;width:7px;height:7px;border-top:1px solid #a4d4c4;border-right:1px solid #a4d4c4;transform:rotate(45deg)}
.signal {position:absolute;left:0;top:-10px;width:100%;height:23px;opacity:0;pointer-events:none}
.signal>img {display:block;background:#e5f5ec;border-radius:3px}
.signal>i {display:grid;align-content:center;justify-items:center;gap:3px;width:22px;height:22px;background:#8de4c4;color:#103d35;border-radius:4px;font-style:normal;font-size:15px;font-weight:800}
.signal b {display:block;width:12px;height:2px;background:#103d35}
.agent-wire {display:grid;gap:30px}
.lane-query .wire-rail::after {right:auto;left:1px;transform:rotate(-135deg)}
.lane-query {color:#b8d7ef}
.lane-query .wire-rail {background:#466b88}
.signal-query>i {background:#b8d7ef}
.pipeline-hub {position:relative;background:#c9f3e4;color:#0c332d;border-radius:16px;padding:18px 23px 23px;text-align:center;min-width:0}
.hub-visual {position:relative;width:140px;height:112px;margin:0 auto 12px}
.database-stack {display:block;width:140px;height:112px;overflow:visible}
.db-lower {fill:#0e5d51}.db-mid {fill:#288975}.db-upper {fill:#187b68}.db-top {fill:#77cfaf;stroke:#0f6554;stroke-width:1.5}.db-line {fill:none;stroke:#82d5b7;stroke-width:1.5}.db-light {fill:#e5fff5}
.hub-orbit {position:absolute;right:5px;bottom:4px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#edfdf5;color:#125b48;border:2px solid #c9f3e4}
.hub-orbit .icon {width:17px;height:17px}
.pipeline-hub>strong {font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.08;display:block}
.pipeline-hub>p {font-size:14px;line-height:1.5;margin:9px 0 18px}
.hub-record {background:#e9fcf4;border:1px solid #92c5b3;border-radius:8px;padding:13px;text-align:left;position:relative}
.hub-record>span {display:block;font-size:11px;color:#346354;line-height:1.4}
.hub-record>strong {display:block;font-size:18px;font-weight:800;margin:8px 0 12px}
.hub-record>div {display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:#346354}
.record-state {padding:4px 6px;background:#d7e9e2;border-radius:4px;color:#204f40}
.hub-checks {display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin-top:17px}
.hub-checks span {display:flex;align-items:center;gap:4px;font-size:11px;line-height:1.4}
.hub-checks .icon {width:14px;height:14px;flex-shrink:0}
.pipeline-results {display:grid;gap:17px;min-width:0}
.result-agent {background:#234354;padding:23px 20px;border-radius:16px;position:relative}
.agent-title {display:flex;align-items:center;gap:12px}
.agent-title strong {font-size:22px;line-height:1.2;font-weight:800;display:block;letter-spacing:-.02em}
.agent-title>div>span {display:block;font-size:12px;color:#bfdae4;margin-top:4px}
.agent-avatar {position:relative;display:grid;place-items:center;width:50px;height:50px;flex-shrink:0;border-radius:50%;background:#b2f0d8;color:#0a302c}
.agent-avatar>.icon {width:29px;height:29px}
.agent-pulse {position:absolute;inset:-5px;border:1px solid #8de4c4;border-radius:50%;opacity:0}
.agent-question {font-size:17px!important;line-height:1.4!important;color:#f0fafc!important;margin:21px 0!important;max-width:240px;text-wrap:balance}
.agent-activity {list-style:none;display:grid;gap:12px;padding:0;margin:0}
.agent-activity li {display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.4;color:#c1d6e1}
.agent-activity li>span {display:grid;place-items:center;width:21px;height:21px;flex-shrink:0;border:1px solid #769aab;border-radius:50%;font-size:11px}
.result-task {display:flex;align-items:start;gap:11px;padding:18px;background:#1b3942;border-radius:12px;position:relative}
.task-check {display:grid;place-items:center;width:25px;height:25px;flex-shrink:0;background:#315e5a;border-radius:50%;color:#b4e8d5}
.task-check .icon {width:16px;height:16px}
.task-label {display:block;font-size:11px;color:#b7d3db;margin-bottom:8px}
.result-task strong {font-size:16px;line-height:1.3;font-weight:500;display:block}
.result-task p {font-size:12px;color:#c1d6e1;margin-top:10px;line-height:1.6}
.pipeline-results>.text-link {font-size:14px;justify-self:start;color:#9be6cc;gap:14px}
.flow-stop {display:none;border:1px solid #547989;border-radius:4px;background:transparent;color:#d3e9ee;padding:8px 11px;align-items:center;gap:7px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.flow-stop .icon {width:13px;height:13px}
.flow-enhanced:not([data-phase="complete"]) .flow-stop {display:inline-flex}
.flow-stop:focus-visible {outline:3px solid #9be6cc;outline-offset:4px}
/* The packets travel for a finite explanation; the resulting example stays readable. */
.flow-enhanced [data-flow-step] {transition:transform 350ms var(--ease)}
.flow-enhanced [data-flow-step].is-current {transform:translateY(-4px)}
.flow-enhanced[data-phase="0"] .signal-source {animation:packet-forward 900ms linear 2}
.flow-enhanced[data-phase="1"] .hub-orbit {animation:result-arrival 500ms var(--ease) both}
.flow-enhanced[data-phase="2"] .signal-query {animation:packet-backward 1100ms linear 2}
.flow-enhanced[data-phase="3"] .signal-context {animation:packet-forward 1100ms linear 2}
.flow-enhanced[data-phase="3"] .hub-record {outline:2px solid #187b68;outline-offset:3px}
.flow-enhanced:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .agent-pulse {animation:agent-thinking 1200ms var(--ease) 2}
.flow-enhanced[data-phase="2"] .activity-query,.flow-enhanced[data-phase="3"] .activity-context,.flow-enhanced:is([data-phase="4"],[data-phase="complete"]) .activity-action {color:#ecfff7}
.flow-enhanced[data-phase="2"] .activity-query>span,.flow-enhanced[data-phase="3"] .activity-context>span,.flow-enhanced:is([data-phase="4"],[data-phase="complete"]) .activity-action>span {background:#b2f0d8;color:#0a302c;border-color:#b2f0d8}
.flow-enhanced[data-phase="4"] .task-check {animation:result-arrival 500ms var(--ease) both}
.flow-enhanced:is([data-phase="4"],[data-phase="complete"]) .result-task {background:#224e48}
.flow-enhanced:is([data-phase="4"],[data-phase="complete"]) .task-check {background:#b2f0d8;color:#0a302c}
@keyframes packet-forward {0%{opacity:0;transform:translateX(0)}12%,85%{opacity:1}100%{opacity:0;transform:translateX(calc(100% - 22px))}}
@keyframes packet-backward {0%{opacity:0;transform:translateX(calc(100% - 22px))}12%,85%{opacity:1}100%{opacity:0;transform:translateX(0)}}
@keyframes agent-thinking {0%{opacity:0;transform:scale(.95)}25%{opacity:.8}100%{opacity:0;transform:scale(1.15)}}
@keyframes result-arrival {0%{opacity:.55;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
@media(max-width:1100px) {
  .pipeline {padding:26px;grid-template-columns:minmax(0,.95fr) 42px minmax(0,1.1fr) 64px minmax(0,1.1fr)}
  .source-file {padding:13px 10px;gap:9px}.source-file strong {font-size:13px}.source-file small {font-size:11px}.source-excel>img {width:40px;height:40px}
  .pipeline-hub {padding:15px 16px 20px}.pipeline-hub>strong {font-size:25px}.hub-record {padding:11px}.hub-record>strong {font-size:17px}
  .result-agent {padding:20px 15px}.agent-avatar {width:41px;height:41px}.agent-avatar>.icon {width:26px;height:26px}.agent-title strong {font-size:19px}.agent-title>div>span {font-size:11px}.agent-activity li {font-size:11px}
  .result-task {padding:16px 13px}.result-task strong {font-size:14px}
}
@media(max-width:800px) {
  .pipeline {grid-template-columns:1fr;gap:24px;padding:28px}
  .pipeline-sources {grid-template-columns:1fr 1fr;gap:12px}.source-file {min-height:90px;padding:17px;gap:14px}.source-file strong {font-size:15px}.source-file small {font-size:12px}.source-excel>img {width:48px;height:48px}
  .wire-in {width:72px;height:48px;justify-self:center}.wire-in>.wire-label {position:absolute;left:58px;top:18px}.wire-in>.wire-rail {position:absolute;left:8px;top:24px;width:56px;transform:rotate(90deg)}
  .pipeline-hub {width:100%;max-width:470px;justify-self:center;padding:22px 30px 25px}.hub-visual {margin-bottom:8px}.pipeline-hub>strong {font-size:29px}.hub-record {padding:16px;max-width:320px;margin-inline:auto}.hub-record>strong {font-size:20px}.hub-checks {font-size:12px}
  .agent-wire {height:78px;width:180px;justify-self:center;grid-template-columns:1fr 1fr;gap:12px}.wire-lane {position:relative}.agent-wire .wire-label {margin:0}.agent-wire .wire-rail {width:54px;position:absolute;top:45px;left:calc(50% - 27px);transform:rotate(90deg)}
  .pipeline-results {grid-template-columns:1fr 1fr;gap:20px;align-items:center}.result-agent {padding:24px}.result-task {padding:24px 20px}.agent-title strong {font-size:21px}.agent-activity li {font-size:12px}.result-task strong {font-size:18px}.pipeline-results>.text-link {grid-column:1/-1}
  .flow-foot {flex-wrap:wrap}.flow-stop {order:3}
}
@media(max-width:560px) {
  .pipeline {padding:22px 16px;gap:18px}.pipeline-sources {gap:9px}.source-file {padding:13px 11px;display:block;min-height:120px}.source-file>img,.source-file>.icon,.source-file>.file-type {margin-bottom:10px}.source-file strong {font-size:13px}.source-file small {font-size:11px}.source-excel>img {width:42px;height:42px}.source-preview {display:none}
  .pipeline-hub {padding:15px 20px 22px}.hub-checks {gap:8px 12px}.hub-record>div {font-size:12px}
  .pipeline-results {grid-template-columns:1fr;gap:16px}.result-agent {padding:24px 20px}.agent-title strong {font-size:23px}.agent-avatar {width:48px;height:48px}.agent-title>div>span {font-size:12px}.agent-question {max-width:270px}.agent-activity li {font-size:13px}.result-task {padding:21px 18px}.result-task strong {font-size:17px}.result-task p {font-size:13px}.pipeline-results>.text-link {font-size:13px}
}
@media(prefers-reduced-motion:reduce) {
  .flow-enhanced [data-flow-step] {transition:none;transform:none!important}
  .flow-enhanced .signal,.flow-enhanced .agent-pulse {animation:none!important;opacity:0}
  .flow-enhanced .hub-orbit,.flow-enhanced .task-check {animation:none!important}
}
.motion-paused .pipeline .signal,.motion-paused .pipeline .agent-pulse {animation:none!important;opacity:0}
.product-listen {font:inherit;font-size:12px;font-weight:500;color:#092f29;background:#b2f0d8;border:0;border-radius:4px;min-height:38px;padding:9px 13px;cursor:pointer}
.product-listen:focus-visible {outline:3px solid #fff;outline-offset:4px}
@media(hover:hover) and (pointer:fine) {.product-listen:hover{background:#d4f8e9}}