/* Sassy AI — deep charcoal, Instrument Serif, anchored to the toolbar AI button */
#sassy-ai-root{text-transform:none!important;position:fixed;top:0;right:0;z-index:100000;font-family:'Instrument Serif',Georgia,serif;color:#e8e8ec;line-height:1.45;font-weight:400;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;user-select:text!important}
#sassy-ai-root *{box-sizing:border-box;text-transform:none!important;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;cursor:auto}
/* selection is scoped to the AI panel only — the simulator keeps user-select:none */
#sassy-ai-root .sai-head,#sassy-ai-root .sai-title,#sassy-ai-root .sai-brand{cursor:grab}
#sassy-ai-root button,#sassy-ai-root .sai-close,#sassy-ai-root .sai-launcher{cursor:pointer}
#sassy-ai-root ::selection{background:#3b5bdb;color:#fff}
#sassy-ai-root button::selection{background:transparent}
#sassy-ai-root button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer;padding:0}
#sassy-ai-root textarea{font-family:inherit}

/* launcher fallback (only shown if toolbar injection fails) */
.sai-launcher{position:fixed;right:22px;bottom:22px;display:flex;align-items:center;gap:9px;height:44px;padding:0 18px 0 15px;border-radius:999px;background:#0d0d11;border:1px solid #26262c;color:#f0f0f3;font-size:15px;letter-spacing:.3px;transition:border-color .2s,transform .2s}
.sai-launcher:hover{border-color:#9a9aa4;transform:translateY(-1px)}
.sai-launcher .sai-spark{color:#fff}
.sai-launcher[hidden]{display:none}

/* panel — draggable card, docked to the left by default */
.sai-panel{position:fixed;top:64px;left:16px;width:440px;max-height:calc(100vh - 96px);display:flex;flex-direction:column;border-radius:20px;background:linear-gradient(180deg,#0c0c10 0%,#09090d 55%,#07070a 100%);border:1px solid #1e1e24;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 80px rgba(0,0,0,.75);overflow:hidden;transform-origin:10% 0;animation:sai-pop .22s cubic-bezier(.2,.9,.3,1)}
.sai-panel.dragging{animation:none;transition:none}
.sai-panel.dragging,.sai-panel.dragging *{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}
.sai-panel.dragging *{cursor:grabbing!important}
.sai-panel.moved{transition:none;animation:none}
.sai-panel[hidden]{display:none}
.sai-panel.resizing{animation:none;transition:none}
.sai-panel.resizing,.sai-panel.resizing *{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}
.sai-panel.resizing *{cursor:nwse-resize!important}
.sai-resize{position:absolute;right:3px;bottom:3px;width:24px;height:24px;z-index:3;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 0 42%,rgba(255,255,255,.22) 42% 48%,transparent 48% 60%,rgba(255,255,255,.22) 60% 66%,transparent 66% 78%,rgba(255,255,255,.22) 78% 84%,transparent 84%);border-radius:0 0 var(--sai-r,20px) 0}
.sai-resize:hover{background:linear-gradient(135deg,transparent 0 42%,rgba(255,255,255,.45) 42% 48%,transparent 48% 60%,rgba(255,255,255,.45) 60% 66%,transparent 66% 78%,rgba(255,255,255,.45) 78% 84%,transparent 84%)}
.sai-caret{display:none}
@keyframes sai-pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}

.sai-head{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;cursor:grab;touch-action:none}
.sai-panel.dragging .sai-head{cursor:grabbing}
.sai-brand{display:flex;align-items:center;gap:9px;font-size:16px;letter-spacing:.4px;color:#f2f2f5}
.sai-brand .sai-spark{color:#fff}

.sai-alpha{flex:none;margin-left:3px;padding:3px 8px;border-radius:999px;border:1px solid rgba(86,134,255,.32);background:rgba(86,134,255,.09);color:#9aaee6;font-size:9.5px;line-height:1;letter-spacing:.05em;font-family:inherit}
.sai-close{margin-left:auto;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#8f8f98;transition:background .15s,color .15s}
.sai-close:hover{background:#1b1b21;color:#fff}

.sai-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:2px 16px 14px;scrollbar-width:thin;scrollbar-color:#2c2c34 transparent;min-height:0}
.sai-body::-webkit-scrollbar{width:6px}
.sai-body::-webkit-scrollbar-thumb{background:#2c2c34;border-radius:99px}

.sai-empty{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:10px 2px 16px;gap:5px}
.sai-empty h3{font-size:19px;font-weight:400;margin:0;color:#fff}
.sai-empty p{font-size:14px;color:#a0a0aa;margin:0;max-width:330px}

.sai-loader{display:flex;align-items:center;gap:11px;padding:12px 2px 14px}
.sai-dmx{width:36px;height:36px;display:grid;grid-template-columns:repeat(5,5px);grid-auto-rows:5px;gap:2px;flex:none}
.sai-dmx i{display:block;border-radius:50%;background:#f0f0f3;opacity:.08}
.sai-loader-text{font-size:14px;color:#c9c9d0}
.sai-loader-text .sai-secs{color:#8f8f98;font-variant-numeric:tabular-nums}
.sai-loader.ok .sai-dmx i{background:#22c55e}
.sai-loader.ok .sai-loader-text{color:#22c55e}
.sai-loader.err .sai-dmx i{background:#ef4444}
.sai-loader.err .sai-loader-text{color:#ef4444}

.sai-result{animation:sai-rise .3s cubic-bezier(.2,.8,.3,1)}
@keyframes sai-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sai-chat{font-size:15px;line-height:1.6;color:#e2e2e8;margin:6px 0 10px;white-space:normal}
.sai-bubble{max-width:92%;margin:2px 0 10px;padding:9px 13px;border-radius:14px 14px 14px 4px;font-size:13.5px;line-height:1.5}
.sai-bubble.sai-user{background:#1a1a20;border:1px solid #2c2c34;color:#d6d6dc;border-radius:14px 14px 4px 14px;margin-left:auto}
.sai-empty-sub{margin-top:8px;font-size:12.5px;color:#8f8f9a}
.sai-seen{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:8px 10px;border-radius:10px;background:#0e0e12;border:1px solid #202026;color:#9a9aa4;font-size:12.5px;line-height:1.45}
.sai-seen-dot{flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;background:#b39dff;box-shadow:0 0 8px rgba(179,157,255,.7)}
.sai-seen span:last-child{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

.sai-title{font-size:21px;font-weight:400;margin:4px 0 4px;color:#fff;line-height:1.2}
.sai-summary{font-size:14px;color:#b3b3bc;margin:0 0 12px}
.sai-line{font-size:14px;color:#d8d8de;margin:0 0 12px;font-variant-numeric:tabular-nums}
.sai-items{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sai-item{display:flex;align-items:center;gap:7px;background:#111116;border:1px solid #26262c;border-radius:10px;padding:5px 10px 5px 6px;font-size:13.5px;color:#e2e2e8;max-width:100%}
.sai-item img{width:20px;height:20px;object-fit:contain;flex:none}
.sai-item .sai-dot{width:8px;height:8px;border-radius:50%;background:#ececf0;flex:none;margin:0 3px 0 4px}
.sai-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sai-formula{font-style:normal;opacity:.6;margin-left:2px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sai-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.sai-steps li{display:flex;gap:10px;font-size:14px;color:#c9c9d0}
.sai-steps li b{flex:none;width:19px;height:19px;border-radius:50%;background:#14141a;border:1px solid #2c2c34;color:#f0f0f3;font-size:12px;font-weight:400;display:flex;align-items:center;justify-content:center;margin-top:2px}
.sai-safety{display:flex;flex-direction:column;gap:7px;margin:0}
.sai-safety li{display:flex;gap:9px;font-size:13.5px;color:#e6c684;list-style:none;background:#17130c;border:1px solid #38301d;border-radius:10px;padding:7px 11px}
.sai-safety li:before{content:"⚠ ";flex:none;font-size:13px;line-height:1.5}
.sai-add{width:100%;height:40px;margin-top:16px;border-radius:12px;background:#ececf0;color:#101014;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .18s,opacity .2s,background .2s}
.sai-planbar{padding:0 16px 10px;display:flex;flex-direction:column;gap:8px}
.sai-planbar[hidden]{display:none}
.sai-planbar .sai-add{margin-top:0}
.sai-planbar .sai-run-status{margin-top:2px}
.sai-add:hover{background:#fff}
.sai-add:active{transform:scale(.97)}
.sai-add[disabled]{opacity:.5;cursor:default;transform:none}
.sai-alt{background:transparent;border:1px solid #3a3a44;color:#d8d8de;margin-top:8px}
.sai-alt:hover{background:#16161b;border-color:#9a9aa4;color:#fff}
.sai-run-status{margin-top:8px;font-size:13px;color:#8f8f98;text-align:center;min-height:16px}
.sai-retry{text-decoration:underline;color:#fca5a5;font-size:13.5px}
.sai-err{margin:10px 0 2px;font-size:14px;color:#fca5a5}
.sai-retry{margin-top:10px;height:34px;padding:0 18px;border-radius:10px;border:1px solid #2c2c34;background:#121217;color:#e2e2e8;font-size:13.5px;cursor:pointer;transition:background .2s,border-color .2s}
.sai-retry:hover{background:#191920;border-color:#9a9aa4}

/* prompt box - shadcn InputGroup / DropdownMenu (vanilla port) */
#sassy-ai-root .sai-foot{padding:0 12px 22px}
#sassy-ai-root .sai-pb{position:relative;width:100%;color:#f5f5f6;font-size:14px;line-height:1.45}

#sassy-ai-root .sai-pb-group{position:relative;display:flex;flex-direction:column;width:100%;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.028);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.32);transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
#sassy-ai-root .sai-pb-group:focus-within{border-color:rgba(255,255,255,.32);box-shadow:0 0 0 3px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.05);background:rgba(255,255,255,.045)}

#sassy-ai-root .sai-pb-input{display:block;width:100%;min-height:54px;max-height:160px;padding:12px 12px 2px;border:0;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:22px;resize:none;outline:none;overflow-y:auto;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:#3a3a44 transparent}
#sassy-ai-root .sai-pb-input::placeholder{color:rgba(245,245,246,.42)}

#sassy-ai-root .sai-pb-addon{display:flex;align-items:center;gap:6px;width:100%;padding:4px 8px 8px}

#sassy-ai-root .sai-pb-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 9px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.04);color:#f5f5f6;font:inherit;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:background-color .15s,border-color .15s,color .15s}
#sassy-ai-root .sai-pb-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
#sassy-ai-root .sai-pb-btn:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.22)}
#sassy-ai-root .sai-pb-btn[data-open]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
#sassy-ai-root .sai-pb-btn svg{flex:none;opacity:.55}
#sassy-ai-root .sai-pb-send{margin-left:auto}
#sassy-ai-root .sai-pb-btn-name{font-weight:500}
#sassy-ai-root .sai-pb-btn-sub{color:rgba(245,245,246,.42);font-weight:400}
#sassy-ai-root .sai-pb-btn-sub[hidden]{display:none}
#sassy-ai-root .sai-pb-btn-label{color:rgba(245,245,246,.5);font-weight:400}
#sassy-ai-root .sai-pb-btn-effort-val{font-weight:500}

#sassy-ai-root .sai-pb-send{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:999px;background:#ececf0;color:#131317;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.22);transition:background-color .15s,color .15s,transform .12s ease}
#sassy-ai-root .sai-pb-send:hover:not(:disabled){background:#fff}
#sassy-ai-root .sai-pb-send:active:not(:disabled),#sassy-ai-root .sai-pb-send[data-pressed]{transform:scale(.94)}
#sassy-ai-root .sai-pb-send:disabled{background:rgba(255,255,255,.1);color:rgba(245,245,246,.4);cursor:default;box-shadow:none}
#sassy-ai-root .sai-pb-send.stop{background:rgba(255,255,255,.08);color:#f0f0f3;border-color:#2c2c34}
#sassy-ai-root .sai-pb-send.stop svg{display:none}
#sassy-ai-root .sai-pb-send.stop:after{content:'';width:11px;height:11px;border-radius:3px;background:currentColor}

#sassy-ai-root .sai-pb-menu{position:absolute;z-index:6;max-height:280px;padding:4px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#141419;color:#f5f5f6;box-shadow:0 12px 34px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.5);overflow-y:auto;transform-origin:bottom left;animation:sai-pb-in .14s cubic-bezier(.23,1,.32,1) both}
#sassy-ai-root .sai-pb-menu[hidden]{display:none}
@keyframes sai-pb-in{from{opacity:0;transform:translateY(3px) scale(.97)}to{opacity:1;transform:none}}
#sassy-ai-root .sai-pb-label{padding:6px 8px;font-size:12px;font-weight:500;letter-spacing:.02em;color:rgba(245,245,246,.5)}
#sassy-ai-root .sai-pb-sep{height:1px;margin:4px -4px;background:rgba(255,255,255,.1)}
#sassy-ai-root .sai-pb-item{position:relative;display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 28px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:13.5px;text-align:left;cursor:pointer;outline:none}
#sassy-ai-root .sai-pb-item:hover,#sassy-ai-root .sai-pb-item:focus-visible{background:rgba(255,255,255,.08)}
#sassy-ai-root .sai-pb-item[aria-checked="true"]{background:rgba(255,255,255,.06)}
#sassy-ai-root .sai-pb-dot{position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor;opacity:0}
#sassy-ai-root .sai-pb-item[aria-checked="true"] .sai-pb-dot{opacity:1}
#sassy-ai-root .sai-pb-item-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sassy-ai-root .sai-pb-item-sub{margin-left:auto;color:rgba(245,245,246,.42);font-size:12px;font-weight:400}

#sassy-ai-root .sai-resize{width:14px;height:14px;right:3px;bottom:3px}

@media (prefers-reduced-motion:reduce){#sassy-ai-root .sai-pb-menu{animation:none}#sassy-ai-root .sai-pb-send{transition:none}}
/* toast */
.sai-toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,14px);background:#0e0e13;border:1px solid #26262c;color:#f0f0f3;padding:11px 17px;border-radius:13px;font-size:14px;box-shadow:0 16px 50px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:100001;font-family:'Instrument Serif',Georgia,serif;text-transform:none!important}
.sai-toast.show{opacity:1;transform:translate(-50%,0)}
.sai-toast b{color:#fff;font-weight:400}

/* toolbar toggle — a small round button beside the app's info button,
   styled to match #sassy-about-btn in the page's header */
#sassy-ai-toggle{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;color:#e6e6e8;display:flex;align-items:center;justify-content:center;padding:0;margin-left:10px;cursor:pointer;user-select:none;transition:border-color .2s,color .2s}
#sassy-ai-toggle svg{width:11px;height:11px}
#sassy-ai-toggle:hover,#sassy-ai-toggle.on{border-color:#7fe3c4;color:#7fe3c4}

/* header "explain" button — sits beside the app's Teaching demo control */
#sassy-explain-btn{display:inline-flex;align-items:center;gap:6px;height:30px;margin-right:10px;padding:0 11px 0 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.045);color:#dfe5ec;font-family:'Instrument Serif',Georgia,serif;font-size:13px;line-height:1;letter-spacing:.02em;cursor:pointer;text-transform:none!important;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:border-color .18s,color .18s,background-color .18s,transform .12s}
#sassy-explain-btn:hover{border-color:#7fe3c4;color:#7fe3c4;background:rgba(127,227,196,.08)}
#sassy-explain-btn:active{transform:scale(.96)}
#sassy-explain-btn svg{width:13px;height:13px;flex:none;opacity:.85}
#sassy-explain-btn span{position:relative;top:.5px}
@media (max-width:900px){#sassy-explain-btn span{display:none}#sassy-explain-btn{width:30px;padding:0;justify-content:center;margin-right:6px}}

/* app equipment search: instrument serif, placeholder reads "search" */
input[class*="searchInput"]{font-family:'Instrument Serif',Georgia,serif!important;letter-spacing:.3px}

/* post-run verify read-back under the run status */
.sai-verify{margin-top:7px;font-size:12.5px;line-height:1.5;color:#b9bcc2;font-family:'Instrument Serif',Georgia,serif;text-transform:none!important;white-space:normal}
.sai-verify:empty{display:none}

/* "AI connected to experiment" pill: slides in from the top-right corner on
   Run, shows a spinning "connecting..." state for 5s, then swaps to the
   confirmed state with the success ripple icon (blue burst pops in on a
   spring, the check draws itself, three staggered rings ripple out). */
.sai-run-pill{position:fixed;top:18px;left:18px;z-index:100002;display:flex;align-items:center;gap:9px;background:#0e0e13;border:1px solid #26262c;color:#f0f0f3;padding:7px 15px 7px 10px;border-radius:999px;font-size:13.5px;font-family:'Instrument Serif',Georgia,serif;text-transform:none!important;box-shadow:0 16px 50px rgba(0,0,0,.7);opacity:0;transform:translateX(calc(-100% - 26px));animation:saiPillSlideIn .45s cubic-bezier(.2,1.2,.3,1) .05s forwards;pointer-events:none;max-width:calc(100vw - 36px)}
.sai-run-pill.sai-run-pill-out{animation:saiPillSlideOut .32s ease forwards}
@keyframes saiPillSlideIn{to{opacity:1;transform:translateX(0)}}
@keyframes saiPillSlideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(calc(-100% - 26px))}}
.sai-pill-spinner{width:16px;height:16px;flex:0 0 auto;border-radius:50%;border:2px solid rgba(86,134,255,.25);border-top-color:#5686FF;animation:saiPillSpin .8s linear infinite}
@keyframes saiPillSpin{to{transform:rotate(360deg)}}
.sai-pill-icon{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sai-pill-ripple{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;border:1px solid rgba(86,134,255,.2);background:rgba(86,134,255,.59);transform:scale(0);opacity:1;animation:saiPillRipple 3s ease-in infinite}
@keyframes saiPillRipple{0%{transform:scale(0);opacity:1}90%{transform:scale(4);opacity:0}100%{transform:scale(4);opacity:0}}
.sai-pill-burst{position:relative;z-index:2;width:26px;height:26px;opacity:0;transform:scale(0) rotate(-90deg);filter:blur(5px);animation:saiPillBurst .55s cubic-bezier(.3,1.6,.5,1) .2s forwards}
@keyframes saiPillBurst{to{opacity:1;transform:scale(1) rotate(0deg);filter:blur(0)}}
.sai-pill-check{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:23;stroke-dashoffset:23;animation:saiPillCheck .4s ease-out .8s forwards}
@keyframes saiPillCheck{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
 .sai-run-pill{animation:saiPillSlideIn .01s forwards}
 .sai-pill-spinner{animation:none}
 .sai-pill-ripple{animation:none}
 .sai-pill-burst{animation:none;opacity:1;transform:scale(1);filter:none}
 .sai-pill-check{animation:none;stroke-dashoffset:0}
}

@media (max-width:640px){
 .sai-panel{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:70vh}
 .sai-caret{display:none}
 .sai-resize{display:none}
}

/* ---- run pill: equipment icons ---- */
.sai-pill-eqs{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.sai-pill-eq{width:20px;height:20px;object-fit:contain;display:block}
.sai-run-pill.sai-pill-connecting .sai-pill-eq{opacity:.55}
.sai-run-pill.sai-pill-connected .sai-pill-eq{opacity:.95}

/* ---- annotated text (vanilla port of the componentry marks) ----
   Geometry mirrors the react original: a decoration element per mark,
   positioned in em/% so it scales with the chat font, currentColor for
   the hand-drawn strokes. */
.sai-ann{position:relative;display:inline-block;white-space:nowrap}
.sai-ann .sai-ann-ink{position:relative;z-index:10}
.sai-ann .sai-ann-dec{position:absolute;pointer-events:none;display:block}
.sai-ann svg.sai-ann-dec{width:100%;height:100%}

.sai-ann-wavy .sai-ann-dec{bottom:-.4em;left:-2%;width:104%;height:.7em;color:#d8b4fe}
.sai-ann-underline .sai-ann-dec{bottom:-.52em;left:-1%;width:102%;height:.34em;color:#c084fc}
.sai-ann-double .sai-ann-dec{bottom:-.72em;left:-1%;width:102%;height:.5em;color:#34d399}
.sai-ann-dotted .sai-ann-dec{bottom:-.35em;left:-1%;width:102%;height:.55em;color:#a3a3a3;background-image:radial-gradient(circle,currentColor 1.5px,transparent 1.5px);background-size:.5em 100%;background-position:0 100%;background-repeat:repeat-x}
.sai-ann-line .sai-ann-dec{bottom:-.18em;left:-1%;width:102%;height:2px;background:currentColor;border-radius:2px;color:#a3a3a3}
.sai-ann-arrow .sai-ann-dec{bottom:-.45em;left:-1%;width:106%;height:.8em;color:#60a5fa}
.sai-ann-highlight .sai-ann-dec{bottom:-.08em;left:-4%;width:108%;height:1.15em;color:rgba(253,224,71,.45);z-index:0}
.sai-ann-circle{padding:0 4px}
.sai-ann-circle .sai-ann-dec{top:-.6em;left:-.55em;width:calc(100% + 1.1em);height:calc(100% + 1.2em);color:#a5f3fc}
.sai-ann-box{padding:0 .4em}
.sai-ann-box .sai-ann-dec{top:-.4em;left:-.4em;width:calc(100% + .8em);height:calc(100% + .8em);color:#fb923c}
.sai-ann-bracket{padding:0 .35em}
.sai-ann-bracket .sai-ann-dec{top:-.25em;left:-.15em;width:calc(100% + .3em);height:calc(100% + .5em);color:#a3a3a3}
.sai-ann-strike .sai-ann-dec{top:50%;transform:translateY(-50%);left:-1%;width:102%;height:.5em;color:#f87171}
.sai-ann-cross .sai-ann-dec{top:50%;transform:translateY(-50%);left:-2%;width:104%;height:1.4em;color:#f87171}

/* ------------------------------------------------------------------ *
 * v16 — motion pass: the loader ticks, replies cascade in, the run
 * pill breathes while connecting and pops when it lands.
 * ------------------------------------------------------------------ */

/* thinking loader: ellipsis writes itself, seconds tick up */
.sai-loader-word:after{content:"";display:inline-block;width:1.2em;text-align:left;animation:sai-ellipsis 1.2s steps(4,end) infinite}
@keyframes sai-ellipsis{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}

/* replies: the user echo slides in from the right, the rest rises */
.sai-result>*{animation:sai-rise .4s cubic-bezier(.2,.8,.3,1) both}
.sai-result>.sai-bubble{animation:sai-in-right .32s cubic-bezier(.2,.8,.3,1) both}
@keyframes sai-in-right{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* experiment card: title, summary, equation, chips, steps, safety —
   each piece lands a beat after the last, capped so long lists settle together */
.sai-result>.sai-title{animation-delay:.02s}
.sai-result>.sai-summary{animation-delay:.08s}
.sai-result>.sai-line{animation-delay:.12s}
.sai-result>.sai-items{animation-delay:.16s}
.sai-result>.sai-steps{animation-delay:.2s}
.sai-result>.sai-safety{animation-delay:.26s}
.sai-result>.sai-run-status{animation-delay:.3s}
.sai-item{animation:sai-item-in .3s cubic-bezier(.2,.9,.3,1.2) both}
.sai-item:nth-child(1){animation-delay:.18s}
.sai-item:nth-child(2){animation-delay:.24s}
.sai-item:nth-child(3){animation-delay:.3s}
.sai-item:nth-child(4){animation-delay:.36s}
.sai-item:nth-child(5){animation-delay:.42s}
.sai-item:nth-child(6){animation-delay:.48s}
.sai-item:nth-child(n+7){animation-delay:.5s}
@keyframes sai-item-in{from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:none}}
.sai-steps li{animation:sai-rise .34s cubic-bezier(.2,.8,.3,1) both}
.sai-steps li:nth-child(1){animation-delay:.24s}
.sai-steps li:nth-child(2){animation-delay:.3s}
.sai-steps li:nth-child(3){animation-delay:.36s}
.sai-steps li:nth-child(4){animation-delay:.42s}
.sai-steps li:nth-child(5){animation-delay:.48s}
.sai-steps li:nth-child(n+6){animation-delay:.5s}

/* run pill: breathes with an indigo glow and a light shimmer while it
   connects, then pops once when the experiment hooks in */
.sai-run-pill{overflow:hidden}
.sai-run-pill.sai-pill-connecting{border-color:rgba(86,134,255,.38);animation:saiPillSlideIn .45s cubic-bezier(.2,1.2,.3,1) .05s forwards,saiPillGlow 2.4s ease-in-out .45s infinite}
@keyframes saiPillGlow{0%,100%{box-shadow:0 16px 50px rgba(0,0,0,.7),0 0 20px rgba(86,134,255,.14)}50%{box-shadow:0 16px 50px rgba(0,0,0,.7),0 0 34px rgba(86,134,255,.3)}}
.sai-run-pill.sai-pill-connecting:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);background-size:240% 100%;background-position:180% 0;animation:saiPillShimmer 1.9s linear infinite}
@keyframes saiPillShimmer{to{background-position:-140% 0}}
.sai-run-pill.sai-pill-connected{border-color:rgba(86,134,255,.42);animation:saiPillPop .38s cubic-bezier(.3,1.7,.5,1)}
@keyframes saiPillPop{0%{transform:translateX(0) scale(1)}40%{transform:translateX(0) scale(1.045)}100%{transform:translateX(0) scale(1)}}
.sai-pill-text{transition:opacity .2s}

@media (prefers-reduced-motion:reduce){
 .sai-loader-word:after{animation:none;content:"..."}
 .sai-result>*,.sai-result>.sai-bubble,.sai-item,.sai-steps li{animation:none}
 .sai-run-pill.sai-pill-connecting{animation:saiPillSlideIn .01s forwards}
 .sai-run-pill.sai-pill-connecting:before{display:none}
 .sai-run-pill.sai-pill-connected{animation:none}
}