/* Adaptum Ai section (ai-section.js): people from three departments ask Adaptum Ai, one promise each. */
.aix-steps { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid rgb(24 37 59 / .1); }
.aix-steps li { border-bottom: 1px solid rgb(24 37 59 / .1); }
.aix-steps button { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; width: 100%; padding: 14px 0 16px; cursor: pointer; }
.aix-steps button::before { content: ""; grid-row: span 2; width: 12px; height: 6px; margin-top: 8px; border-radius: 12px 12px 0 0; background: var(--adaptum-viridian); opacity: .45; transition: opacity .35s; }
.aix-steps b { font-weight: 500; font-size: 15.5px; color: var(--adaptum-ink-muted); transition: color .35s; }
.aix-steps .d { grid-column: 2; font-size: 14.5px; color: var(--adaptum-ink-muted); opacity: .8; }
.aix-steps button.on::before { opacity: 1; }
.aix-steps button.on b { color: var(--adaptum-ink); }
.aix-steps button:focus-visible { outline: 2px solid var(--adaptum-viridian); outline-offset: 2px; border-radius: 6px; }
.aix-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.aix-bar i { position: absolute; inset: 0; background: var(--adaptum-viridian); transform: scaleX(0); transform-origin: left; }
.aix-steps button.on .aix-bar i { transform: scaleX(1); }
.aix-steps button.on .aix-bar i.run { animation: aixBar 7s linear both; }
#product.held .aix-steps button.on .aix-bar i { animation: none; transform: scaleX(1); }
@keyframes aixBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.aix-steps .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The visual */
.aix-field { display: grid; gap: 22px; padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px) clamp(24px, 3.6vw, 44px); }
.aix-people { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; position: relative; z-index: 1; }
.aix-p { display: grid; justify-items: center; gap: 0; }
.aix-p img { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 6px 16px -6px rgb(24 37 59 / .35); opacity: .62; filter: saturate(.7); transition: opacity .4s, filter .4s, box-shadow .4s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.aix-p span { margin-top: -8px; padding: 4px 10px; border-radius: 999px; background: #fff; font: 500 12.5px/1 var(--adaptum-font-text); color: var(--adaptum-ink); box-shadow: 0 2px 8px -4px rgb(24 37 59 / .3); position: relative; }
.aix-p.on img { opacity: 1; filter: none; transform: translateY(-2px); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--adaptum-viridian), 0 10px 22px -8px rgb(24 37 59 / .45); }
.aix-link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; transition: opacity .2s; }
.aix-link path { fill: none; stroke: var(--adaptum-viridian); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.aix-link circle { fill: var(--adaptum-viridian); }
.aix-link.swap { opacity: 0; }
.aix-card { position: relative; background: #fff; border-radius: 18px; padding: 22px 24px 24px; box-shadow: 0 30px 60px -32px rgb(24 37 59 / .45); display: grid; gap: 14px; align-content: start; }
.aix-card > * { transition: opacity .22s ease; }
.aix-card.swap > * { opacity: 0; }
.aix-ask { justify-self: end; display: grid; justify-items: start; gap: 8px; max-width: 80%; padding: 11px 14px 12px; border-radius: 14px 14px 4px 14px; background: var(--adaptum-ink); color: #F4EDE1; font-size: 14.5px; line-height: 1.35; }
.aix-att { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; color: rgb(244 237 225 / .85); box-shadow: inset 0 0 0 1px rgb(244 237 225 / .28); }
.aix-att .ico { width: 13px; height: 13px; }
.aix-by { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--adaptum-ink-muted); }
.aix-by i { width: 14px; height: 7px; border-radius: 14px 14px 0 0; background: var(--adaptum-signal); }
.aix-ans { display: grid; gap: 10px; padding: 16px 18px; border-radius: 12px; }
.aix-ans p { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.35; color: var(--adaptum-ink); }
.aix-ans.ok { background: #EEF3F1; }
.aix-ans.deny { background: #F3EDE2; }
.aix-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aix-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--adaptum-viridian); color: #fff; font: 500 12px/1.2 var(--adaptum-font-text); }
.aix-chip .ico { width: 13px; height: 13px; }
@media (max-width: 560px) { .aix-p img { width: 46px; height: 46px; } .aix-p span { font-size: 11px; } .aix-ask { max-width: 92%; } }
@media (prefers-reduced-motion: reduce) { .aix-card > *, .aix-link, .aix-p img { transition: none; } }

/* Sequence (ai-section.js): the attachment is already in the bubble, the person types under it, Adaptum Ai
   thinks, then its answer types out and the chips follow. Sizes are locked in JS, the caret takes no space,
   and every entrance is an opacity fade in place, so nothing moves or reflows. */
.aix-ask { align-content: start; }
.aix-ask .q.typing::after, .aix-ans p.typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin: 0 -1.5px 0 0; vertical-align: -.15em; background: currentColor; animation: aixCaret .9s steps(1) infinite; }
@keyframes aixCaret { 50% { opacity: 0; } }
.aix-by, .aix-ans { opacity: 0; transition: opacity .35s ease; }
.aix-card.thinking .aix-by, .aix-card.thinking .aix-ans, .aix-card.replying .aix-by, .aix-card.replying .aix-ans, .aix-card.answered .aix-by, .aix-card.answered .aix-ans { opacity: 1; }
.aix-ans { position: relative; align-content: start; }
.aix-ans::before { content: ""; position: absolute; left: 18px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--adaptum-ink-muted); opacity: 0; box-shadow: 11px 0 0 var(--adaptum-ink-muted), 22px 0 0 var(--adaptum-ink-muted); }
.aix-card.thinking .aix-ans::before { opacity: .55; animation: aixThink 1s ease-in-out infinite; }
@keyframes aixThink { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
.aix-chip { opacity: 0; transition: opacity .3s ease; transition-delay: calc(.1s + var(--k, 0) * .14s); }
.aix-card.answered .aix-chip { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .aix-by, .aix-ans, .aix-chip { transition: none; } .aix-ask .q.typing::after, .aix-ans p.typing::after { display: none; } .aix-card.thinking .aix-ans::before { animation: none; } }