/* AffectUI Agent Team: original layout, branching lines, and entrance choreography. */

.ui-at {
  /* 1 unit of the 600 × 400 layout grid */
  --u: calc(100cqw / 600);
  --ui-at-surface: #ffffff;
  --ui-at-ring: rgba(10, 10, 10, 0.06);
  --ui-at-text: #171717;
  --ui-at-accent: #2f6bff;
  --ui-at-caret: #171717;
  /* Same pink → violet as the Get Pro button */
  --ui-at-halo-from: rgba(221, 6, 116, 0.18);
  --ui-at-halo-to: rgba(94, 62, 224, 0.18);
  --ui-at-dash: #e4e7ec; /* same gray as the lines in Outreach Branches */
  --ui-at-face: #eef0f4;
  --ui-at-online: #34c46a;
  --ui-at-dot-ring: #e2f6e9;
  --ui-at-dot-edge: rgba(52, 196, 106, 0.1);
  --ui-at-tool-ring: #e5e5e5;
  --ui-at-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.07), 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.05);
  --ui-at-ease: cubic-bezier(0.7, 0, 0.25, 1);
  --ui-at-pop: cubic-bezier(0.34, 1.4, 0.64, 1);
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  container-type: inline-size;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ui-at *, .ui-at *::before, .ui-at *::after { box-sizing: border-box; }

/* ---------- Dashed lines, revealed top to bottom ---------- */

.ui-at-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-at-line {
  fill: none;
  stroke: var(--ui-at-dash);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 6 7.23;
}
.ui-at-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 700ms var(--ui-at-ease);
}
.ui-at:is([data-phase="sent"], [data-phase="team"]) .ui-at-reveal { stroke-dashoffset: 0; }
.ui-at[data-phase="reset"] .ui-at-lines { opacity: 0; transition: opacity 500ms ease; }

/* ---------- Prompt ---------- */

.ui-at-halo {
  position: absolute;
  left: 50%;
  top: calc(52 * var(--u));
  width: calc(400 * var(--u));
  height: calc(68 * var(--u));
  transform: translateX(-50%) scale(0.9);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ui-at-halo-from), var(--ui-at-halo-to));
  filter: blur(calc(22 * var(--u)));
  opacity: 0;
  transition: opacity 700ms ease, transform 900ms var(--ui-at-ease);
}
.ui-at:is([data-phase="sent"], [data-phase="team"]) .ui-at-halo { opacity: 1; transform: translateX(-50%) scale(1); }

.ui-at-prompt {
  position: absolute;
  left: 50%;
  top: calc(60 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  width: calc(380 * var(--u));
  height: calc(52 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(20 * var(--u));
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--ui-at-surface);
  box-shadow: 0 0 0 calc(1 * var(--u)) var(--ui-at-ring), var(--ui-at-shadow);
}
.ui-at-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: calc(15 * var(--u));
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ui-at-text);
}
.ui-at-caret {
  display: inline-block;
  width: calc(1.6 * var(--u));
  height: calc(17 * var(--u));
  margin-left: calc(2 * var(--u));
  vertical-align: calc(-3 * var(--u));
  border-radius: 1px;
  background: var(--ui-at-caret);
  animation: ui-at-blink 1s steps(1) infinite;
}
.ui-at-send {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 50%;
  background: var(--ui-at-accent);
  transition: transform 200ms var(--ui-at-pop), filter 200ms ease;
}
.ui-at-send svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-at[data-phase="sent"] .ui-at-send { animation: ui-at-press 380ms var(--ui-at-ease); }
.ui-at[data-phase="reset"] .ui-at-text { opacity: 0; transition: opacity 400ms ease; }

/* ---------- Agents ---------- */

.ui-at-agent {
  position: absolute;
  top: calc(196 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u));
  transform: translateX(-50%);
}
.ui-at-node,
.ui-at-role {
  opacity: 0;
  transform: translateY(calc(10 * var(--u))) scale(0.92);
  transition: opacity 360ms ease, transform 520ms var(--ui-at-pop);
}
.ui-at[data-phase="team"] .ui-at-node {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 160ms);
}
.ui-at[data-phase="team"] .ui-at-role {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 160ms + 120ms);
}
.ui-at[data-phase="reset"] .ui-at-node,
.ui-at[data-phase="reset"] .ui-at-role { transform: none; transition: opacity 500ms ease; }

.ui-at-node {
  position: relative;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  padding: calc(5 * var(--u));
  border-radius: 50%;
  background: var(--ui-at-surface);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--ui-at-ring), var(--ui-at-shadow);
}
.ui-at-face {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ui-at-face);
}
.ui-at-face img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.ui-at-dot {
  position: absolute;
  right: calc(1 * var(--u));
  bottom: calc(3 * var(--u));
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border: calc(7 * var(--u)) solid var(--ui-at-dot-ring);
  border-radius: 50%;
  background: var(--ui-at-online);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--ui-at-dot-edge);
  transform: scale(0);
  transition: transform 420ms var(--ui-at-pop);
}
.ui-at[data-phase="team"] .ui-at-dot { transform: scale(1); transition-delay: calc(var(--i) * 160ms + 360ms); }

/* Role pill: overlapping tool circles first, then the role */
.ui-at-role {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(42 * var(--u));
  padding: 0 calc(15 * var(--u)) 0 calc(7 * var(--u));
  border-radius: 999px;
  background: var(--ui-at-surface);
  box-shadow: 0 0 0 calc(1 * var(--u)) var(--ui-at-ring), var(--ui-at-shadow);
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ui-at-text);
}
.ui-at-role:not(:has(.ui-at-tools)) { padding-left: calc(15 * var(--u)); }
.ui-at-tools { display: flex; }
.ui-at-tool {
  display: grid;
  place-items: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  background: var(--ui-at-surface);
  box-shadow: 0 0 0 calc(1 * var(--u)) var(--ui-at-tool-ring), 0 calc(1.5 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.08);
}
/* The second circle sits slightly over the first */
.ui-at-tool + .ui-at-tool { margin-left: calc(-8 * var(--u)); }
.ui-at-tool svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

@keyframes ui-at-blink { 50% { opacity: 0; } }
@keyframes ui-at-press {
  0% { transform: scale(1); }
  40% { transform: scale(0.86); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-at *, .ui-at *::before { transition: none !important; animation: none !important; }
}

/* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. <html> */
:where(.dark, [data-theme="dark"]) .ui-at {
  --ui-at-surface: #232326;
  --ui-at-ring: rgba(255, 255, 255, 0.08);
  --ui-at-text: #ededed;
  --ui-at-accent: #2f6bff;
  --ui-at-caret: #ededed;
  --ui-at-halo-from: rgba(244, 114, 182, 0.16);
  --ui-at-halo-to: rgba(167, 139, 250, 0.16);
  --ui-at-dash: rgba(255, 255, 255, 0.14);
  --ui-at-face: #2e2e33;
  --ui-at-online: #3fd17a;
  --ui-at-dot-ring: #24392c;
  --ui-at-dot-edge: rgba(63, 209, 122, 0.12);
  --ui-at-tool-ring: rgba(255, 255, 255, 0.12);
  --ui-at-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.4), 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.3);
}
:where(.dark, [data-theme="dark"]) .ui-at-tool { background: #f4f4f5; }


/* AffectUI Agent Gallery: the original folding panels and centered looping track.
   Live Agent Team illustrations replace the product screens. */
.ui-ag{
  --ui-ag-height:480px;--ui-ag-side:92px;--ui-ag-gap:14px;--ui-ag-open:min(70cqw,1000px);
  --ui-ag-ease:cubic-bezier(.65,0,.25,1);
  container-type:inline-size;overflow:clip;margin-top:52px;color:var(--paper);padding-bottom:4px;
}
.ui-ag *,.ui-ag *::before,.ui-ag *::after{box-sizing:border-box}
.ui-ag button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ui-ag button:focus-visible,.ui-ag__viewport:focus-visible{outline:2px solid #c3a2f0;outline-offset:4px}
.ui-ag__viewport{overflow:clip;touch-action:pan-y;outline-offset:-4px!important}
.ui-ag__track{display:flex;gap:var(--ui-ag-gap);width:max-content;height:var(--ui-ag-height);transform:translateX(calc(50cqw - var(--pos) * (var(--ui-ag-side) + var(--ui-ag-gap)) - var(--ui-ag-open) / 2));transition:transform 620ms var(--ui-ag-ease)}
.ui-ag__track[data-snap],.ui-ag__track[data-snap] *{transition:none!important;animation:none!important}
.ui-ag__panel{position:relative;flex:0 0 var(--ui-ag-side);overflow:hidden;border-radius:16px;transition:flex-basis 620ms var(--ui-ag-ease)}
.ui-ag__panel[data-open]{flex-basis:var(--ui-ag-open)}
.ui-ag__art{position:absolute;inset:0;background:linear-gradient(118deg,transparent 38%,#ffffff55 47%,transparent 57%),radial-gradient(110% 80% at 0 0,color-mix(in srgb,var(--a) 45%,transparent),transparent 65%),radial-gradient(90% 70% at 100% 100%,var(--b),transparent 72%),radial-gradient(60% 50% at 30% 100%,color-mix(in srgb,var(--a) 25%,transparent),transparent 70%),linear-gradient(180deg,#f4f3f7,#e9e9ee);filter:saturate(.35);transition:filter 500ms ease}
.ui-ag__panel[data-open] .ui-ag__art,.ui-ag__panel:hover .ui-ag__art{filter:none}
.ui-ag__panel[data-far] .ui-ag__art{filter:saturate(.12)}
.ui-ag__pick{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 0 23px 17px;border:0;background:none}
.ui-ag__pick[hidden]{display:none}
.ui-ag__pick:focus-visible{outline-offset:-5px!important;border-radius:16px}
.ui-ag__label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:16px;font-weight:500;letter-spacing:-.02em;white-space:nowrap;color:color-mix(in srgb,var(--a) 42%,#29292e)}
.ui-ag__panel[data-far] .ui-ag__label{color:#66626e}
.ui-ag__preview{position:absolute;inset:0;width:var(--ui-ag-open);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 30px 26px;opacity:0;transform:translate(28px,14px) scale(.98);transition:opacity 220ms ease,transform 420ms var(--ui-ag-ease);pointer-events:none}
.ui-ag__panel[data-open] .ui-ag__preview{opacity:1;transform:none;transition:opacity 420ms ease 230ms,transform 620ms var(--ui-ag-ease) 200ms}
.ui-ag .ui-at{width:min(100%,520px);flex:none;font-family:inherit;--ui-at-text:#29292e;--ui-at-caret:#29292e;--ui-at-accent:#29292e;--ui-at-surface:rgba(255,255,255,.9);--ui-at-dash:rgba(77,62,98,.25);--ui-at-halo-from:#FF456730;--ui-at-halo-to:#369FFF30;--ui-at-shadow:0 calc(10 * var(--u)) calc(24 * var(--u)) #3123450b,0 calc(2 * var(--u)) calc(5 * var(--u)) #31234508}
/* Center the request over the branch junction and middle agent; keep its portrait to the left. */
.ui-ag .ui-at-prompt,.ui-ag .ui-at-halo{left:50%}
.ui-at-requester{position:absolute;left:calc(46 * var(--u));top:calc(60 * var(--u));width:calc(52 * var(--u));height:calc(52 * var(--u))}
.ui-at-requester-face{display:block;width:100%;height:100%;overflow:hidden;border:calc(3 * var(--u)) solid #fff;border-radius:50%;background:var(--ui-at-face);box-shadow:var(--ui-at-shadow)}
.ui-at-requester-face img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
.ui-at-requester-app{position:absolute;right:calc(-5 * var(--u));bottom:calc(-3 * var(--u));display:grid;place-items:center;width:calc(24 * var(--u));height:calc(24 * var(--u));border:calc(2 * var(--u)) solid #fff;border-radius:50%;background:#fff;box-shadow:0 calc(2 * var(--u)) calc(5 * var(--u)) #31234515}
.ui-at-requester-app img{display:block;width:76%;height:76%;object-fit:contain}
.ui-ag .ui-at-role{max-width:calc(190 * var(--u));font-size:calc(13 * var(--u));gap:calc(8 * var(--u));padding-right:calc(12 * var(--u))}
.ui-ag .ui-at-tool img{width:calc(14 * var(--u));height:calc(14 * var(--u));object-fit:contain}
.ui-at:not([data-phase=typing]) .ui-at-caret{opacity:0;animation:none}
.ui-ag:not([data-running]) .ui-at *{animation-play-state:paused!important}
.ui-ag__panel:not([data-open]) .ui-at *{animation-play-state:paused!important}
.home-content .ui-ag__title{margin:0 0 6px;font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.03em;color:#29292e;text-align:center}
.home-content .ui-ag__description{max-width:640px;margin:-20px 0 0;font-size:14px;line-height:1.55;color:#615669;text-align:center}
.ui-ag__announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ui-ag__foot{display:flex;align-items:center;justify-content:center;width:var(--ui-ag-open);margin:27px auto 0}
.ui-ag__arrows{display:flex;flex:none;border-radius:9px;border:1px solid var(--paper);background:var(--paper);color:var(--ink);box-shadow:0 1px 3px #00000014;overflow:hidden}
.ui-ag__arrows button{display:grid;place-items:center;width:44px;height:42px;padding:0;border:0;background:transparent;transition:background-color 180ms ease}
.ui-ag__arrows button+button{border-left:1px solid #d7d7db}
.ui-ag__arrows button:hover{background:#e7e7e9}
.ui-ag__arrows svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ui-ag__arrows button:focus-visible{outline-offset:-4px}
@media(max-width:900px){.ui-ag{--ui-ag-side:65px;--ui-ag-gap:11px;--ui-ag-open:78cqw;--ui-ag-height:460px}.ui-ag__preview{padding-inline:20px}.ui-ag .ui-at{width:min(100%,500px)}}
@media(max-width:600px){
  .ui-ag{--ui-ag-side:36px;--ui-ag-gap:9px;--ui-ag-open:calc(100cqw - 70px);--ui-ag-height:clamp(360px,102cqw,420px);margin-top:34px}
  .ui-ag__panel{border-radius:12px}.ui-ag__pick{padding:0 0 18px 8px}.ui-ag__label{font-size:13px}
  .ui-ag__preview{padding:20px 10px 22px}.ui-ag .ui-at{width:min(100%,320px);aspect-ratio:6/5;--u:calc(100cqw / 600)}
  .ui-ag .ui-at-lines{height:auto;aspect-ratio:3/2;top:0}
  .ui-ag .ui-at-prompt{top:calc(20 * var(--u));width:calc(400 * var(--u));height:calc(90 * var(--u));padding-left:calc(22 * var(--u))}
  .ui-at-requester{left:calc(12 * var(--u));top:calc(29 * var(--u));width:calc(72 * var(--u));height:calc(72 * var(--u))}.ui-at-requester-app{width:calc(32 * var(--u));height:calc(32 * var(--u))}
  .ui-ag .ui-at-text{font-size:clamp(10px,calc(23 * var(--u)),14px);white-space:normal;line-height:1.2}.ui-ag .ui-at-send{width:calc(48 * var(--u));height:calc(48 * var(--u))}.ui-ag .ui-at-send svg{width:calc(25 * var(--u));height:calc(25 * var(--u))}
  .ui-ag .ui-at-agent{top:calc(196 * var(--u));gap:calc(16 * var(--u))}.ui-ag .ui-at-node{width:calc(112 * var(--u));height:calc(112 * var(--u))}
  .ui-ag .ui-at-role{flex-direction:column;justify-content:center;gap:calc(12 * var(--u));height:auto;min-height:calc(110 * var(--u));width:calc(184 * var(--u));padding:calc(14 * var(--u)) calc(4 * var(--u));font-size:clamp(10px,calc(21 * var(--u)),14px);white-space:normal;text-align:center;line-height:1.25;border-radius:calc(20 * var(--u))}
  .ui-ag .ui-at-tool{width:calc(30 * var(--u));height:calc(30 * var(--u))}.ui-ag .ui-at-tool img{width:calc(18 * var(--u));height:calc(18 * var(--u))}
  .home-content .ui-ag__title{font-size:18px;margin-bottom:12px}
  .home-content .ui-ag__description{font-size:12px;margin:0 4px;max-width:300px}
  .ui-ag__foot{width:calc(100cqw - 50px);margin-top:23px}
}
@media(prefers-reduced-motion:reduce){.ui-ag__track,.ui-ag__panel,.ui-ag__art,.ui-ag__preview,.ui-ag__panel[data-open] .ui-ag__preview{transition:none}.ui-at-caret{display:none}}

/* The portrait carries the same identity plate used in the control diagrams. */
.ui-ag .ui-at-node{margin-bottom:26px}
.ui-ag .it-beam-nameplate{width:max(calc(104 * var(--u)),70px);padding:5px 4px;gap:1px;top:calc(100% - 7px)}
.ui-ag .it-beam-nameplate-title{font-size:clamp(7px,calc(9.5 * var(--u)),9.5px);gap:3px}
.ui-ag .it-beam-nameplate-title svg{width:11px;height:11px}
.ui-ag .it-beam-nameplate-role{font-size:clamp(8px,calc(10 * var(--u)),10px)}