/* ============================================================================
   BARBAROS — agent-dock.css — « Sidekick » (app/agent/agent-dock.js, namespace sx-).
   Neutral, quiet surface in the manner of the 2026 agent products (Shopify Sidekick, Vercel AI Elements):
   hairline borders, one accent, motion that only says « working ». Every rule is under html[data-buld-theme];
   every colour is a --buld-* token (tinted with color-mix()). Buttons, fields and forms set their box
   explicitly so the page's legacy CSS cannot reshape them.
   Collision list (the only !important here): the composer's textarea and the picker's search field — buld-theme.css,
   dark-fix.css, orders.css, sidebar.css and dashboard.css paint every textarea / input (and :focus) with !important
   backgrounds, borders, paddings and rings.
   ============================================================================ */
/* room under the content for the floating input — on the scrolling container, never on <body> (padding the body
   exposed the html background as a band under fixed-height layouts) */
html[data-buld-theme] body.sx-on #mainContent { padding-bottom: 96px; scroll-padding-bottom: 96px; }
html[data-buld-theme].sx-lock, html[data-buld-theme].sx-lock body { overflow: hidden; }

html[data-buld-theme] .sx-root {
    --sx-line: color-mix(in srgb, var(--buld-ink-1) 10%, transparent);
    --sx-line-2: color-mix(in srgb, var(--buld-ink-1) 16%, transparent);
    --sx-muted: color-mix(in srgb, var(--buld-ink-1) 4%, transparent);
    --sx-face: var(--buld-elevated-2);
    --sx-ease: cubic-bezier(.2, .8, .2, 1);
    font-family: var(--buld-font-text); font-size: 14px; line-height: 1.55; letter-spacing: 0;
    color: var(--buld-ink-1); -webkit-font-smoothing: antialiased; text-align: start;
}
html[data-buld-theme][data-buld-theme="dark"] .sx-root { --sx-face: var(--buld-surface-2); --sx-line: color-mix(in srgb, var(--buld-ink-1) 12%, transparent); }
html[data-buld-theme] .sx-root *, html[data-buld-theme] .sx-root *::before, html[data-buld-theme] .sx-root *::after { box-sizing: border-box; }
html[data-buld-theme] .sx-root button {
    font: inherit; font-size: 13px; color: inherit; cursor: pointer; margin: 0; min-width: 0; min-height: 0; width: auto; height: auto;
    text-transform: none; letter-spacing: 0; box-shadow: none; text-shadow: none; transform: none; -webkit-appearance: none; appearance: none;
}
html[data-buld-theme] .sx-root button:disabled { cursor: default; opacity: .5; }
html[data-buld-theme] .sx-root :focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 2px; }
html[data-buld-theme] .sx-root [hidden] { display: none; }
html[data-buld-theme] .sx-root b, html[data-buld-theme] .sx-root strong { font-weight: 600; color: inherit; }
html[data-buld-theme] .sx-root small { font-size: 12px; color: var(--buld-ink-3); }
html[data-buld-theme] .sx-root p { margin: 0; }
html[data-buld-theme] .sx-ic { flex: none; display: block; }
html[data-buld-theme] .sx-n { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* ---------- the Barbaros gyroscope — the agent's one mark (chosen: N° 09) ----------
   Three rings turning on three axes around a point of light. Rest: slow and quiet. Thinking: fast, with a glow.
   Writing: steady, the core beats. Listening: the rings open. Same markup everywhere: <span class="sx-orb"><i>×3<u> */
html[data-buld-theme] .sx-root, html[data-buld-theme] .sx-orb {
    --sx-c1: var(--buld-cta);
    --sx-c2: color-mix(in srgb, var(--buld-cta) 55%, var(--buld-success));
    --sx-c3: color-mix(in srgb, var(--buld-cta) 62%, var(--buld-danger));
}
html[data-buld-theme] .sx-orb {
    --s: 20px; --sp: 5s; --rw: max(1.5px, calc(var(--s) * .07));
    position: relative; flex: none; display: inline-block; width: var(--s); height: var(--s);
    perspective: calc(var(--s) * 4); transform-style: preserve-3d;
}
html[data-buld-theme] .sx-orb i {
    position: absolute; inset: 0; border-radius: 50%; border: var(--rw) solid transparent;
    border-top-color: var(--sx-c1); border-right-color: color-mix(in srgb, var(--sx-c1) 32%, transparent);
    animation: sx-g1 var(--sp) linear infinite; transition: inset .4s cubic-bezier(.32, .72, 0, 1);
}
html[data-buld-theme] .sx-orb i:nth-child(2) { inset: 9%; border-top-color: var(--sx-c2); border-right-color: color-mix(in srgb, var(--sx-c2) 32%, transparent); animation-name: sx-g2; }
html[data-buld-theme] .sx-orb i:nth-child(3) { inset: 18%; border-top-color: var(--sx-c3); border-right-color: color-mix(in srgb, var(--sx-c3) 32%, transparent); animation-name: sx-g3; }
/* the point of light the rings turn around */
html[data-buld-theme] .sx-orb u {
    position: absolute; left: 50%; top: 50%; width: max(2px, calc(var(--s) * .16)); height: max(2px, calc(var(--s) * .16));
    transform: translate(-50%, -50%); border-radius: 50%; text-decoration: none;
    background: radial-gradient(circle at 35% 35%, var(--buld-elevated-2), var(--sx-c2) 70%);
    box-shadow: 0 0 calc(var(--s) * .25) var(--sx-c2); opacity: .9;
}
html[data-buld-theme] .sx-orb--xs { --s: 16px; }
html[data-buld-theme] .sx-orb--sm { --s: 22px; }
html[data-buld-theme] .sx-orb--md { --s: 28px; }
html[data-buld-theme] .sx-orb--xl { --s: 72px; --rw: 3px; filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--sx-c1) 45%, transparent)); }
html[data-buld-theme] .sx-root[data-persona="thinking"] .sx-orb { --sp: 1.2s; animation: sx-glow 1.6s ease-in-out infinite; }
html[data-buld-theme] .sx-root[data-persona="speaking"] .sx-orb { --sp: 2.2s; }
html[data-buld-theme] .sx-root[data-persona="speaking"] .sx-orb u { animation: sx-core .7s ease-in-out infinite; }
html[data-buld-theme] .sx-root[data-persona="listening"] .sx-orb { --sp: 2.6s; }
html[data-buld-theme] .sx-root[data-persona="listening"] .sx-orb i { inset: -12%; }
html[data-buld-theme] .sx-root[data-persona="listening"] .sx-orb i:nth-child(2) { inset: 2%; }
html[data-buld-theme] .sx-root[data-persona="listening"] .sx-orb i:nth-child(3) { inset: 16%; }
@keyframes sx-g1 { from { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0); } to { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } }
@keyframes sx-g2 { from { transform: rotateX(50deg) rotateY(10deg) rotateZ(0); } to { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } }
@keyframes sx-g3 { from { transform: rotateX(35deg) rotateY(55deg) rotateZ(0); } to { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } }
@keyframes sx-turn { to { transform: rotate(360deg); } }
@keyframes sx-glow { 0%, 100% { filter: drop-shadow(0 0 calc(var(--s) * .12) color-mix(in srgb, var(--sx-c1) 55%, transparent)); } 50% { filter: drop-shadow(0 0 calc(var(--s) * .35) color-mix(in srgb, var(--sx-c2) 80%, transparent)); } }
@keyframes sx-core { 50% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; } }
@keyframes sx-beat { 50% { transform: scale(1.08); } }

/* three dots that wave (tool running, lists loading) */
html[data-buld-theme] .sx-dots { display: inline-flex; align-items: center; gap: 3px; height: 13px; }
html[data-buld-theme] .sx-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: sx-wave 1s ease-in-out infinite; }
html[data-buld-theme] .sx-dots i:nth-child(2) { animation-delay: .15s; } html[data-buld-theme] .sx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sx-wave { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- shimmer text — a blue light sweeps across the words ---------- */
html[data-buld-theme] .sx-shimmer {
    color: transparent; background: linear-gradient(90deg, var(--buld-ink-3) 0 30%, var(--sx-c1) 44%, var(--sx-c2) 50%, var(--buld-ink-3) 64% 100%);
    background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; animation: sx-shine 1.6s linear infinite;
}
@keyframes sx-shine { from { background-position: 100% 0; } to { background-position: -160% 0; } }

/* ---------- icon buttons ---------- */
html[data-buld-theme] .sx-root .sx-ib {
    display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--buld-ink-3); transition: background .15s, color .15s;
}
html[data-buld-theme] .sx-root .sx-ib:hover:not(:disabled) { background: var(--sx-muted); color: var(--buld-ink-1); }
html[data-buld-theme] .sx-root .sx-ib--sm { width: 26px; height: 26px; border-radius: 6px; }
html[data-buld-theme] .sx-root .sx-mic.is-on { color: var(--buld-danger); background: var(--buld-danger-soft); }

/* ---------- composer (PromptInput) ---------- */
html[data-buld-theme] .sx-root form.sx-input {
    display: block; width: 100%; margin: 0; padding: 0; border: 1px solid var(--sx-line-2); border-radius: 16px;
    background: var(--sx-face); box-shadow: 0 1px 2px color-mix(in srgb, var(--buld-ink-1) 6%, transparent);
    transition: border-color .15s, box-shadow .15s;
}
html[data-buld-theme] .sx-root form.sx-input:focus-within { border-color: color-mix(in srgb, var(--buld-cta) 55%, var(--sx-line-2)); box-shadow: 0 0 0 3px var(--buld-cta-soft); }
html[data-buld-theme] .sx-root textarea.sx-ta {
    display: block; width: 100%; min-height: 44px; max-height: 168px; margin: 0; padding: 12px 14px 4px; border: 0; border-radius: 16px 16px 0 0;
    background: transparent; color: var(--buld-ink-1); font: inherit; font-size: 14px; line-height: 1.5; resize: none; outline: none; box-shadow: none;
}
html[data-buld-theme] .sx-root textarea.sx-ta, html[data-buld-theme] .sx-root textarea.sx-ta:hover, html[data-buld-theme] .sx-root textarea.sx-ta:focus, html[data-buld-theme] .sx-root textarea.sx-ta:focus-visible {
    background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important;
    color: var(--buld-ink-1) !important; border-radius: 16px 16px 0 0 !important; padding: 12px 14px 4px !important;
}
html[data-buld-theme] .sx-root textarea.sx-ta::placeholder { color: var(--buld-ink-4); opacity: 1; }
html[data-buld-theme] .sx-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 8px 8px; }
html[data-buld-theme] .sx-tools-s { display: flex; align-items: center; gap: 6px; min-width: 0; padding-inline-start: 6px; }
html[data-buld-theme] .sx-modelname { font-size: 12px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .sx-tools-e { display: flex; align-items: center; gap: 4px; }
html[data-buld-theme] .sx-root .sx-send {
    display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    background: var(--buld-ink-1); color: var(--buld-page); opacity: .35; transition: opacity .15s, transform .15s, background .15s;
}
html[data-buld-theme] .sx-root .sx-input.has-text .sx-send, html[data-buld-theme] .sx-root.is-busy .sx-send { opacity: 1; }
html[data-buld-theme] .sx-root .sx-input.has-text .sx-send:hover { transform: scale(1.06); }

/* ---------- the floating input — one element, five shapes (Shopify Sidekick's mobile model) ----------
   rest  : a compact pill at the bottom of every page          focus : widens, two rows, suggestions, × beside it
   run   : collapses to a status strip (« يقرأ الطلبات… » + stop) with ⌃ to open the conversation
   peek  : the answer rises in a sheet above the input (drag the grip down to let it go, up / tap to open it all)
   min   : only the orb remains in the corner (remembered per browser)                                   */
html[data-buld-theme] .sx-float {
    --sx-w: 420px; --sx-spring: cubic-bezier(.32, .72, 0, 1);
    position: fixed; z-index: 950; left: 50%; bottom: 16px; transform: translateX(-50%);
    width: min(var(--sx-w), calc(100vw - 32px));
    transition: width .42s var(--sx-spring), opacity .2s var(--sx-ease), transform .3s var(--sx-spring);
}
html[data-buld-theme] .sx-root.is-focus .sx-float, html[data-buld-theme] .sx-root.is-peek .sx-float { --sx-w: 660px; }
html[data-buld-theme] .sx-root.is-busy:not(.is-open) .sx-float { --sx-w: 380px; }
html[data-buld-theme] .sx-root.is-open .sx-float { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(16px) scale(.97); }
html[data-buld-theme] .sx-row { display: flex; align-items: flex-end; gap: 8px; }
html[data-buld-theme] .sx-shell { position: relative; flex: 1; min-width: 0; }
html[data-buld-theme] .sx-root .sx-float form.sx-input {
    display: flex; flex-wrap: wrap; align-items: center; border-radius: 26px; max-height: 320px;
    background: color-mix(in srgb, var(--sx-face) 90%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 12px 36px -12px color-mix(in srgb, var(--buld-ink-1) 30%, transparent), 0 0 0 1px var(--sx-line);
    transition: border-radius .3s var(--sx-spring), max-height .35s var(--sx-spring), opacity .18s, box-shadow .2s;
}
html[data-buld-theme] .sx-float .sx-atts, html[data-buld-theme] .sx-float .sx-ctxm { flex-basis: 100%; }
html[data-buld-theme] .sx-root .sx-float textarea.sx-ta { flex: 1; min-width: 0; min-height: 50px; }
html[data-buld-theme] .sx-root .sx-float textarea.sx-ta, html[data-buld-theme] .sx-root .sx-float textarea.sx-ta:focus { padding: 14px 18px 12px !important; border-radius: 26px !important; }
html[data-buld-theme] .sx-float .sx-tools { flex: none; padding: 0 8px 0 9px; }
html[data-buld-theme] .sx-float .sx-modelname { display: none; }
html[data-buld-theme] .sx-float .sx-tools-s { order: 2; padding-inline-start: 4px; }
html[data-buld-theme] .sx-root.is-focus .sx-float textarea.sx-ta { flex-basis: 100%; }
html[data-buld-theme] .sx-root.is-focus .sx-float textarea.sx-ta, html[data-buld-theme] .sx-root.is-focus .sx-float textarea.sx-ta:focus { padding: 16px 18px 6px !important; }
html[data-buld-theme] .sx-root.is-focus .sx-float .sx-tools { flex-basis: 100%; padding: 2px 9px 9px; }
html[data-buld-theme] .sx-root.is-focus .sx-float .sx-tools-s { order: 0; padding-inline-start: 6px; }
html[data-buld-theme] .sx-root.is-focus .sx-float .sx-modelname { display: inline; }
html[data-buld-theme] .sx-root .sx-float .sx-send { width: 34px; height: 34px; }

/* × beside the input */
html[data-buld-theme] .sx-root .sx-x {
    display: grid; place-items: center; flex: none; width: 0; height: 52px; padding: 0; border: 0; border-radius: 50%; overflow: hidden;
    background: color-mix(in srgb, var(--sx-face) 90%, transparent); color: var(--buld-ink-2); opacity: 0; transform: scale(.6);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 12px 36px -12px color-mix(in srgb, var(--buld-ink-1) 30%, transparent), 0 0 0 1px var(--sx-line);
    transition: width .35s var(--sx-spring), opacity .2s, transform .35s var(--sx-spring), margin .35s var(--sx-spring);
    margin-inline-start: -8px;
}
html[data-buld-theme] .sx-root:is(.is-focus, .is-peek, .is-busy) .sx-x { width: 52px; opacity: 1; transform: none; margin-inline-start: 0; }
html[data-buld-theme] .sx-root .sx-x:hover { color: var(--buld-ink-1); }

/* run: the input becomes a status strip */
html[data-buld-theme] .sx-run {
    position: absolute; inset: auto 0 0 0; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 9px 0 16px;
    border-radius: 26px; background: color-mix(in srgb, var(--sx-face) 92%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 12px 36px -12px color-mix(in srgb, var(--buld-cta) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--buld-cta) 30%, var(--sx-line));
    opacity: 0; visibility: hidden; transform: scale(.98); transition: opacity .2s, transform .3s var(--sx-spring), visibility .2s;
}
html[data-buld-theme] .sx-run-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .sx-root .sx-stop {
    display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
    background: var(--sx-muted); color: var(--buld-ink-1);
}
html[data-buld-theme] .sx-root .sx-stop:hover { background: color-mix(in srgb, var(--buld-ink-1) 10%, transparent); }
html[data-buld-theme] .sx-root.is-busy:not(.is-open) .sx-run { opacity: 1; visibility: visible; transform: none; }
html[data-buld-theme] .sx-root.is-busy:not(.is-open) .sx-float form.sx-input { opacity: 0; max-height: 52px; pointer-events: none; }

/* ⌃ — open the conversation while it runs */
html[data-buld-theme] .sx-root .sx-up {
    position: absolute; left: 50%; bottom: calc(100% + 10px); width: 46px; height: 28px; padding: 0; border: 1px solid var(--sx-line-2); border-radius: 999px;
    display: grid; place-items: center; background: var(--sx-face); color: var(--buld-ink-2);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--buld-ink-1) 30%, transparent);
    opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s, transform .3s var(--sx-spring), visibility .2s;
}
html[data-buld-theme] .sx-root .sx-up .sx-ic { transform: rotate(180deg); }
html[data-buld-theme] .sx-root.is-busy:not(.is-open):not(.is-peek) .sx-up { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* peek: the answer rises above the input */
html[data-buld-theme] .sx-scrim {
    position: fixed; inset: 0; z-index: 940; background: color-mix(in srgb, var(--buld-ink-1) 14%, transparent);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
html[data-buld-theme][data-buld-theme="dark"] .sx-scrim { background: color-mix(in srgb, var(--buld-page) 55%, transparent); }
html[data-buld-theme] .sx-root.is-peek:not(.is-open) .sx-scrim { opacity: 1; visibility: visible; }
html[data-buld-theme] .sx-peek {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); display: grid; gap: 6px; max-height: min(52vh, 440px); overflow-y: auto;
    padding: 4px 20px 14px; border-radius: 24px; background: var(--sx-face);
    box-shadow: 0 24px 60px -18px color-mix(in srgb, var(--buld-ink-1) 36%, transparent), 0 0 0 1px var(--sx-line);
    transform: translateY(var(--dy, 0)); animation: sx-rise .42s var(--sx-spring);
}
html[data-buld-theme] .sx-peek[hidden] { display: none; }
html[data-buld-theme] .sx-peek.is-drag { animation: none; transition: none; }
@keyframes sx-rise { from { opacity: 0; transform: translateY(24px) scale(.98); } }
html[data-buld-theme] .sx-root .sx-grip { position: sticky; top: 0; display: block; width: 100%; height: 20px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
html[data-buld-theme] .sx-root .sx-grip::before { content: ''; display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--buld-ink-4); opacity: .45; }
html[data-buld-theme] .sx-peek-b { font-size: 15px; line-height: 1.7; color: var(--buld-ink-1); overflow-wrap: anywhere; }
html[data-buld-theme] .sx-peek-b p + p { margin-top: 6px; }
html[data-buld-theme] .sx-peek-w { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--buld-warning); }
html[data-buld-theme] .sx-peek-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--buld-ink-4); }
html[data-buld-theme] .sx-root .sx-link { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--sx-muted); color: var(--buld-ink-1); font-size: 12px; font-weight: 500; }

/* min: only the orb */
html[data-buld-theme] .sx-root .sx-fab {
    display: none; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--sx-face) 90%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 12px 36px -12px color-mix(in srgb, var(--buld-ink-1) 34%, transparent), 0 0 0 1px var(--sx-line);
    transition: transform .2s var(--sx-spring);
}
html[data-buld-theme] .sx-root .sx-fab:hover { transform: scale(1.06); }
html[data-buld-theme] .sx-root.is-min:not(.is-busy) .sx-float { left: auto; right: 16px; bottom: var(--sx-ob, 16px); width: auto; transform: none; }
html[data-buld-theme] .sx-root.is-min.is-left:not(.is-busy) .sx-float { right: auto; left: 16px; }
html[data-buld-theme] .sx-root.is-drag .sx-fab { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1.1); transition: none; cursor: grabbing; box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--sx-c1) 60%, transparent), 0 0 0 1px var(--sx-line); }
html[data-buld-theme] .sx-root .sx-fab { touch-action: none; cursor: grab; }
html[data-buld-theme] .sx-root.is-min:not(.is-busy) .sx-row, html[data-buld-theme] .sx-root.is-min:not(.is-busy) .sx-sugg { display: none; }
html[data-buld-theme] .sx-root.is-min:not(.is-busy) .sx-fab { display: grid; animation: sx-pop .36s var(--sx-spring); }
html[data-buld-theme] .sx-root.is-min.is-open .sx-float { transform: translateY(16px) scale(.97); }
@keyframes sx-pop { from { opacity: 0; transform: scale(.4); } }

/* + : attach an order / product / customer */
html[data-buld-theme] .sx-ctxm {
    position: absolute; z-index: 3; left: 0; bottom: calc(100% + 8px); width: min(340px, 100%); max-height: 380px; overflow-y: auto;
    display: grid; gap: 2px; padding: 6px; border: 1px solid var(--sx-line); border-radius: 18px; background: var(--sx-face);
    box-shadow: 0 20px 50px -18px color-mix(in srgb, var(--buld-ink-1) 36%, transparent); animation: sx-rise .3s var(--sx-spring);
}
html[data-buld-theme] .sx-ctxm[hidden] { display: none; }
html[data-buld-theme] .sx-ctxh { padding: 8px 10px 4px; font-size: 12px; color: var(--buld-ink-4); }
html[data-buld-theme] .sx-root :is(.sx-src, .sx-opt) {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px;
    background: transparent; color: var(--buld-ink-1); text-align: start; font-size: 14px;
}
html[data-buld-theme] .sx-root :is(.sx-src, .sx-opt):hover { background: var(--sx-muted); }
html[data-buld-theme] .sx-src > span { flex: 1; }
html[data-buld-theme] .sx-src > .sx-ic:last-child { color: var(--buld-ink-4); transform: rotate(-90deg); }
html[data-buld-theme] .sx-src > .sx-ic:first-child, html[data-buld-theme] .sx-opt > .sx-ic { color: var(--buld-ink-3); }
html[data-buld-theme] .sx-opt > .sx-ic { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--sx-muted); }
html[data-buld-theme] .sx-opt > span { display: grid; min-width: 0; line-height: 1.35; }
html[data-buld-theme] .sx-opt b, html[data-buld-theme] .sx-opt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .sx-opt b { font-size: 13.5px; font-weight: 500; }
html[data-buld-theme] .sx-pick-h { display: flex; align-items: center; gap: 6px; padding: 4px 4px 6px; }
html[data-buld-theme] .sx-pick-h .sx-ic { transform: rotate(90deg); }
html[data-buld-theme] .sx-find { display: flex; align-items: center; gap: 8px; height: 38px; margin: 0 4px 4px; padding: 0 12px; border-radius: 12px; background: var(--sx-muted); color: var(--buld-ink-4); }
html[data-buld-theme] .sx-root input.sx-find-in, html[data-buld-theme] .sx-root input.sx-find-in:focus {
    flex: 1; min-width: 0; height: 36px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--buld-ink-1) !important; font: inherit; font-size: 14px;
}
html[data-buld-theme] .sx-pick { display: grid; gap: 2px; }
html[data-buld-theme] .sx-pick > .sx-quiet { padding: 10px; }
html[data-buld-theme] .sx-atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
html[data-buld-theme] .sx-atts[hidden] { display: none; }
html[data-buld-theme] .sx-att {
    display: inline-flex; align-items: center; gap: 6px; max-width: min(100%, 280px); height: 32px; padding: 0 6px 0 12px; border-radius: 999px;
    background: var(--sx-muted); color: var(--buld-ink-1); font-size: 13px; animation: sx-pop .3s var(--sx-spring);
}
html[data-buld-theme] .sx-att > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .sx-att > .sx-ic { color: var(--buld-ink-3); }
html[data-buld-theme] .sx-root .sx-att-x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--buld-ink-3); }
html[data-buld-theme] .sx-root .sx-att-x:hover { background: var(--sx-muted); color: var(--buld-ink-1); }
html[data-buld-theme] .sx-msg-att { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
html[data-buld-theme] .sx-msg--user { flex-direction: column; align-items: flex-end; }
html[data-buld-theme] .sx-root .sx-panel form.sx-input { position: relative; }

/* suggestions popover above the floating composer */
html[data-buld-theme] .sx-sugg {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: grid; gap: 2px; padding: 6px;
    border: 1px solid var(--sx-line); border-radius: 14px; background: var(--sx-face);
    box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--buld-ink-1) 30%, transparent);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s var(--sx-ease), visibility .16s;
}
html[data-buld-theme] .sx-root.is-sugg .sx-sugg { opacity: 1; visibility: visible; transform: none; }
html[data-buld-theme] .sx-root .sx-sg {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px;
    background: transparent; color: var(--buld-ink-2); text-align: start; transition: background .12s;
}
html[data-buld-theme] .sx-root .sx-sg:hover:not(:disabled) { background: var(--sx-muted); color: var(--buld-ink-1); }
html[data-buld-theme] .sx-sg .sx-ic { margin-top: 2px; color: var(--buld-ink-3); }
html[data-buld-theme] .sx-sg span { display: grid; gap: 1px; min-width: 0; }
html[data-buld-theme] .sx-sg b { font-size: 13px; color: var(--buld-ink-1); }

/* ---------- side panel ---------- */
html[data-buld-theme] .sx-panel {
    position: fixed; z-index: 960; top: 12px; bottom: 12px; right: 12px; width: min(460px, calc(100vw - 24px));
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--sx-line); border-radius: 18px;
    /* a blue dawn behind the header, and a faint grid of points that fades before the conversation */
    background:
        radial-gradient(120% 42% at 50% -8%, color-mix(in srgb, var(--buld-cta) 16%, transparent), transparent 70%),
        radial-gradient(60% 30% at 100% 0%, color-mix(in srgb, var(--sx-c3) 10%, transparent), transparent 70%),
        radial-gradient(circle, color-mix(in srgb, var(--buld-ink-1) 9%, transparent) 1px, transparent 1.4px) 0 0 / 18px 18px,
        var(--buld-page);
    box-shadow: 0 30px 80px -24px color-mix(in srgb, var(--buld-ink-1) 40%, transparent), 0 0 0 1px var(--sx-line);
    animation: sx-in .26s var(--sx-ease);
}
html[data-buld-theme] .sx-panel[hidden] { display: none; }
@keyframes sx-in { from { opacity: 0; transform: translateX(16px) scale(.985); } }
html[data-buld-theme] .sx-panel::after { content: ''; position: absolute; inset: 140px 0 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--buld-page) 120px); }
html[data-buld-theme] .sx-panel > * { position: relative; z-index: 1; }
html[data-buld-theme] .sx-panel > .sx-beam { position: absolute; z-index: 4; }
html[data-buld-theme] .sx-panel > .sx-tobottom { position: absolute; z-index: 2; }
html[data-buld-theme] .sx-hd { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--sx-line); }
html[data-buld-theme] .sx-hd-t { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
html[data-buld-theme] .sx-hd-t b { font-family: var(--buld-font-display); font-size: 15px; }
html[data-buld-theme] .sx-hd-t span { font-size: 12px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .sx-conv { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 16px 8px; overscroll-behavior: contain; }
html[data-buld-theme] .sx-root .sx-tobottom {
    position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 2;
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--sx-line-2); border-radius: 50%;
    background: var(--sx-face); color: var(--buld-ink-2); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--buld-ink-1) 30%, transparent);
}
html[data-buld-theme] .sx-root .sx-tobottom[hidden] { display: none; }
html[data-buld-theme] .sx-pfoot { display: grid; gap: 8px; padding: 8px 12px 10px; }
html[data-buld-theme] .sx-legal { font-size: 11px; color: var(--buld-ink-4); text-align: center; }
html[data-buld-theme] .sx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-buld-theme] .sx-pills[hidden] { display: none; }
html[data-buld-theme] .sx-root .sx-pill {
    height: 30px; padding: 0 12px; border: 1px solid var(--sx-line-2); border-radius: 999px;
    background: var(--sx-face); color: var(--buld-ink-2); font-size: 12.5px; white-space: nowrap; transition: background .12s, border-color .12s;
}
html[data-buld-theme] .sx-root .sx-pill:hover:not(:disabled) { background: var(--sx-muted); color: var(--buld-ink-1); border-color: var(--buld-ink-4); }

/* ---------- empty state ---------- */
html[data-buld-theme] .sx-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 4px 8px; text-align: center; }
html[data-buld-theme] .sx-empty > b { margin-top: 10px; font-family: var(--buld-font-display); font-size: 21px; letter-spacing: -.01em; }
html[data-buld-theme] .sx-empty > span { max-width: 340px; font-size: 13px; color: var(--buld-ink-3); }
html[data-buld-theme] .sx-empty-g { display: grid; gap: 6px; width: 100%; margin-top: 14px; }
html[data-buld-theme] .sx-root .sx-empty-g .sx-sg { border: 1px solid var(--sx-line); background: var(--sx-face); }

/* ---------- messages ---------- */
html[data-buld-theme] .sx-msg { margin: 0 0 18px; animation: sx-up .22s var(--sx-ease); }
@keyframes sx-up { from { opacity: 0; transform: translateY(6px); } }
html[data-buld-theme] .sx-msg--user { display: flex; justify-content: flex-start; }

html[data-buld-theme] .sx-bubble {
    max-width: 85%; padding: 9px 14px; border-radius: 18px 18px 6px 18px; background: var(--buld-elevated);
    color: var(--buld-ink-1); white-space: pre-wrap; overflow-wrap: anywhere;
}
html[data-buld-theme] .sx-parts { display: grid; gap: 10px; min-width: 0; }
html[data-buld-theme] .sx-loading { font-size: 13px; padding: 2px 0; }

/* Reasoning */
html[data-buld-theme] .sx-root .sx-rh {
    display: inline-flex; align-items: center; gap: 7px; padding: 2px 0; border: 0; background: transparent; color: var(--buld-ink-3); font-size: 13px;
}
html[data-buld-theme] .sx-root .sx-rh:hover { color: var(--buld-ink-1); }
html[data-buld-theme] .sx-rh > .sx-ic:last-child { transition: transform .2s; }
html[data-buld-theme] .sx-reason.is-open .sx-rh > .sx-ic:last-child { transform: rotate(180deg); }
html[data-buld-theme] .sx-rc {
    display: none; margin: 6px 0 0 7px; padding: 2px 0 2px 12px; border-inline-start: 2px solid var(--sx-line-2);
    font-size: 13px; color: var(--buld-ink-3); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow-y: auto;
}
html[data-buld-theme] .sx-reason.is-open .sx-rc { display: block; }
html[data-buld-theme] .sx-reason.is-live .sx-rc:empty { display: none; }

/* Tool */
html[data-buld-theme] .sx-tool { border: 1px solid var(--sx-line); border-radius: 12px; background: var(--sx-face); overflow: hidden; }
html[data-buld-theme] .sx-root .sx-th {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-radius: 0;
    background: transparent; color: var(--buld-ink-1); text-align: start;
}
html[data-buld-theme] .sx-root .sx-th:hover { background: var(--sx-muted); }
html[data-buld-theme] .sx-th > .sx-ic:first-child { color: var(--buld-ink-3); }
html[data-buld-theme] .sx-tn { flex: 1; min-width: 0; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .sx-st {
    display: inline-flex; align-items: center; gap: 4px; flex: none; height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 500; background: var(--sx-muted); color: var(--buld-ink-2);
}
html[data-buld-theme] .sx-tool[data-state="run"] .sx-st { color: var(--buld-cta); background: var(--buld-cta-soft); }
html[data-buld-theme] .sx-tool[data-state="ok"] .sx-st { color: var(--buld-success); background: var(--buld-success-soft); }
html[data-buld-theme] .sx-tool[data-state="err"] .sx-st, html[data-buld-theme] .sx-tool[data-state="denied"] .sx-st { color: var(--buld-danger); background: var(--buld-danger-soft); }
html[data-buld-theme] .sx-tool[data-state="wait"] .sx-st { color: var(--buld-warning); background: var(--buld-warning-soft); }
html[data-buld-theme] .sx-tool[data-state="wait"] { border-color: color-mix(in srgb, var(--buld-warning) 40%, var(--sx-line)); }
html[data-buld-theme] .sx-tms { flex: none; font-size: 11.5px; color: var(--buld-ink-4); }
html[data-buld-theme] .sx-th > .sx-ic:last-child { color: var(--buld-ink-4); transition: transform .2s; }
html[data-buld-theme] .sx-tool.is-open .sx-th > .sx-ic:last-child { transform: rotate(180deg); }
html[data-buld-theme] .sx-tsum { padding: 0 12px 10px 12px; margin-top: -4px; font-size: 12.5px; color: var(--buld-ink-3); }
html[data-buld-theme] .sx-tc { display: none; border-top: 1px solid var(--sx-line); }
html[data-buld-theme] .sx-tool.is-open .sx-tc { display: block; }
html[data-buld-theme] .sx-tool.has-ui .sx-tc > .sx-sec:first-child { display: none; }
html[data-buld-theme] .sx-tool.has-ui.is-open .sx-tsum { display: none; }
html[data-buld-theme] .sx-sec { padding: 10px 12px; }
html[data-buld-theme] .sx-sec + .sx-sec, html[data-buld-theme] .sx-out .sx-sec { border-top: 1px solid var(--sx-line); }
html[data-buld-theme] .sx-tool.has-ui .sx-out > .sx-sec:first-child { border-top: 0; }
html[data-buld-theme] .sx-sec h5 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--buld-ink-4); }
html[data-buld-theme] .sx-args { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 12.5px; }
html[data-buld-theme] .sx-args dt { color: var(--buld-ink-3); }
html[data-buld-theme] .sx-args dd { margin: 0; color: var(--buld-ink-1); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
html[data-buld-theme] .sx-quiet { font-size: 12.5px; color: var(--buld-ink-3); }
html[data-buld-theme] .sx-errtxt { font-size: 12.5px; color: var(--buld-danger); }
html[data-buld-theme] .sx-gen { display: grid; gap: 10px; }

/* Confirmation */
html[data-buld-theme] .sx-confirm {
    display: grid; gap: 10px; margin: 0 12px 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--buld-warning) 35%, var(--sx-line));
    border-radius: 10px; background: color-mix(in srgb, var(--buld-warning-soft) 60%, var(--sx-face));
}
html[data-buld-theme] .sx-solo > .sx-confirm, html[data-buld-theme] .sx-gen .sx-confirm, html[data-buld-theme] .sx-confirm--inline { margin: 0; }
html[data-buld-theme] .sx-confirm.is-sent { opacity: .6; }
html[data-buld-theme] .sx-confirm-t { display: flex; gap: 10px; align-items: flex-start; }
html[data-buld-theme] .sx-confirm-t > .sx-ic { color: var(--buld-warning); margin-top: 2px; }
html[data-buld-theme] .sx-confirm-t span { display: grid; gap: 2px; min-width: 0; }
html[data-buld-theme] .sx-confirm-t small { color: var(--buld-ink-2); overflow-wrap: anywhere; }
html[data-buld-theme] .sx-confirm-a { display: flex; justify-content: flex-end; gap: 8px; }
html[data-buld-theme] .sx-fine { font-size: 11px; color: var(--buld-ink-4); }
html[data-buld-theme] .sx-root .sx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px;
    border: 1px solid var(--buld-ink-1); border-radius: 8px; background: var(--buld-ink-1); color: var(--buld-page); font-weight: 500;
    transition: opacity .12s;
}
html[data-buld-theme] .sx-root .sx-btn:hover:not(:disabled) { opacity: .88; }
html[data-buld-theme] .sx-root .sx-btn--ghost { background: var(--sx-face); color: var(--buld-ink-1); border-color: var(--sx-line-2); }
html[data-buld-theme] .sx-root .sx-btn--ghost:hover:not(:disabled) { opacity: 1; background: var(--sx-muted); }

/* quick actions inside results */
html[data-buld-theme] .sx-root .sx-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none; height: 28px; padding: 0 11px;
    border: 1px solid var(--sx-line-2); border-radius: 7px; background: var(--sx-face); color: var(--buld-ink-1); font-size: 12.5px; font-weight: 500;
}
html[data-buld-theme] .sx-root .sx-act:hover:not(:disabled) { background: var(--sx-muted); border-color: var(--buld-ink-4); }
html[data-buld-theme] .sx-root .sx-act--soft { color: var(--buld-cta); border-color: color-mix(in srgb, var(--buld-cta) 30%, transparent); background: var(--buld-cta-soft); }
html[data-buld-theme] .sx-acts { display: flex; gap: 8px; }

/* Generative UI — balance */
html[data-buld-theme] .sx-big { display: flex; align-items: baseline; gap: 8px; }
html[data-buld-theme] .sx-big strong { font-family: var(--buld-font-display); font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
html[data-buld-theme] .sx-big span { font-size: 13px; color: var(--buld-ink-3); }
html[data-buld-theme] .sx-afford { display: grid; gap: 8px; }
html[data-buld-theme] .sx-af { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; font-size: 12.5px; }
html[data-buld-theme] .sx-af > span { display: grid; min-width: 0; }
html[data-buld-theme] .sx-af em { font-style: normal; font-size: 11px; color: var(--buld-ink-4); }
html[data-buld-theme] .sx-af i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--buld-cta), color-mix(in srgb, var(--buld-cta) 55%, var(--buld-success))) left / var(--w, 0%) 100% no-repeat, var(--sx-muted); }
html[data-buld-theme] .sx-af b { min-width: 44px; text-align: end; font-size: 12.5px; }

/* orders */
html[data-buld-theme] .sx-table { display: grid; border: 1px solid var(--sx-line); border-radius: 10px; overflow: hidden; }
html[data-buld-theme] .sx-tr { display: flex; align-items: center; gap: 10px; padding: 9px 10px; min-width: 0; }
html[data-buld-theme] .sx-table > * + * { border-top: 1px solid var(--sx-line); }
html[data-buld-theme] .sx-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--buld-ink-4); }
html[data-buld-theme] .sx-tr[data-st="new"] .sx-dot { background: var(--buld-cta); }
html[data-buld-theme] .sx-tr[data-st="confirmed"] .sx-dot, html[data-buld-theme] .sx-tr[data-st="delivered"] .sx-dot { background: var(--buld-success); }
html[data-buld-theme] .sx-tr[data-st="processing"] .sx-dot, html[data-buld-theme] .sx-tr[data-st="shipped"] .sx-dot { background: var(--buld-warning); }
html[data-buld-theme] .sx-tr[data-st="cancelled"] .sx-dot, html[data-buld-theme] .sx-tr[data-st="returned"] .sx-dot { background: var(--buld-danger); }
html[data-buld-theme] .sx-td { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
html[data-buld-theme] .sx-td b, html[data-buld-theme] .sx-td small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .sx-td b { font-size: 13px; }
html[data-buld-theme] .sx-tv { flex: none; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
html[data-buld-theme] .sx-ost { flex: none; font-size: 11.5px; color: var(--buld-ink-3); }
html[data-buld-theme] .sx-table > .sx-confirm { margin: 0; border-width: 1px 0 0; border-radius: 0; }

/* products */
html[data-buld-theme] .sx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
html[data-buld-theme] .sx-tile { display: grid; gap: 3px; align-content: start; padding: 10px; border: 1px solid var(--sx-line); border-radius: 10px; min-width: 0; }
html[data-buld-theme] .sx-tile b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .sx-tile > span { font-size: 12.5px; }
html[data-buld-theme] .sx-tile .sx-act { margin-top: 6px; justify-self: start; }

/* facts / KPIs */
html[data-buld-theme] .sx-facts, html[data-buld-theme] .sx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--sx-line); border-radius: 10px; overflow: hidden; background: var(--sx-line); }
html[data-buld-theme] .sx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-buld-theme] .sx-facts > span, html[data-buld-theme] .sx-kpis > span { display: grid; gap: 2px; padding: 9px 10px; background: var(--sx-face); min-width: 0; }
html[data-buld-theme] .sx-facts .sx-wide { grid-column: 1 / -1; }
html[data-buld-theme] .sx-facts strong, html[data-buld-theme] .sx-kpis strong { font-size: 14px; overflow-wrap: anywhere; }
html[data-buld-theme] .sx-kpis strong { font-family: var(--buld-font-display); font-size: 18px; }
html[data-buld-theme] .sx-curve { display: block; width: 100%; height: 56px; }
html[data-buld-theme] .sx-curve-a { fill: var(--buld-cta-soft); stroke: none; }
html[data-buld-theme] .sx-curve-l { fill: none; stroke: var(--buld-cta); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
html[data-buld-theme] .sx-note { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; background: var(--sx-muted); font-size: 12.5px; color: var(--buld-ink-2); }
html[data-buld-theme] .sx-note .sx-ic { margin-top: 2px; color: var(--buld-ink-3); }
html[data-buld-theme] .sx-list { display: grid; border: 1px solid var(--sx-line); border-radius: 10px; overflow: hidden; }
html[data-buld-theme] .sx-list > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; font-size: 12.5px; }
html[data-buld-theme] .sx-list > div + div { border-top: 1px solid var(--sx-line); }
html[data-buld-theme] .sx-list span { color: var(--buld-ink-3); }

/* answer text */
html[data-buld-theme] .sx-md { font-size: 14px; line-height: 1.7; color: var(--buld-ink-1); overflow-wrap: anywhere; }
html[data-buld-theme] .sx-md--soft { color: var(--buld-ink-2); }
html[data-buld-theme] .sx-md code { padding: 1px 5px; border-radius: 5px; background: var(--sx-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
html[data-buld-theme] .sx-md.is-live::after { content: ''; display: inline-block; width: 7px; height: 14px; margin-inline-start: 3px; vertical-align: -2px; border-radius: 2px; background: var(--buld-ink-1); animation: sx-caret 1s steps(1) infinite; }
@keyframes sx-caret { 50% { opacity: 0; } }

/* turn footer */
html[data-buld-theme] .sx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--buld-ink-4); }
html[data-buld-theme] .sx-chg { display: inline-flex; align-items: center; gap: 4px; color: var(--buld-success); font-weight: 500; }
html[data-buld-theme] .sx-fail { display: inline-flex; align-items: center; gap: 5px; color: var(--buld-danger); }
html[data-buld-theme] .sx-acts-g { display: inline-flex; gap: 2px; margin-inline-start: auto; opacity: 0; transition: opacity .15s; }
html[data-buld-theme] .sx-msg:hover .sx-acts-g, html[data-buld-theme] .sx-acts-g:focus-within { opacity: 1; }

/* ---------- motion: light where the agent works ---------- */
@property --sx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* the edge light — runs around the floating input while the agent works, and glows (Apple Intelligence's cue) */
html[data-buld-theme] .sx-run { z-index: 1; }
html[data-buld-theme] .sx-aura { position: absolute; z-index: 0; inset: auto -2px -2px -2px; height: calc(100% + 4px); border-radius: 28px; pointer-events: none; opacity: 0; transition: opacity .4s; }
html[data-buld-theme] .sx-aura::before, html[data-buld-theme] .sx-aura::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
    background: conic-gradient(from var(--sx-a), var(--sx-c1), var(--sx-c2), var(--sx-c3), var(--sx-c1) 50%, var(--sx-c2), var(--sx-c1));
    -webkit-mask: linear-gradient(var(--buld-ink-1) 0 0) content-box, linear-gradient(var(--buld-ink-1) 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(var(--buld-ink-1) 0 0) content-box exclude, linear-gradient(var(--buld-ink-1) 0 0);
    animation: sx-spin 2.4s linear infinite;
}
html[data-buld-theme] .sx-aura::after { padding: 0; -webkit-mask: none; mask: none; filter: blur(16px); opacity: .55; z-index: -1; }
html[data-buld-theme] .sx-root.is-busy:not(.is-open) .sx-aura { opacity: 1; height: 56px; }
html[data-buld-theme] .sx-root.is-busy .sx-panel form.sx-input { position: relative; }
@keyframes sx-spin { to { --sx-a: 360deg; } }
/* the panel's top beam while a run is live */
html[data-buld-theme] .sx-beam { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: linear-gradient(90deg, transparent, var(--sx-c1) 30%, var(--sx-c2) 50%, var(--sx-c3) 70%, transparent) 0 0 / 50% 100% no-repeat; }
html[data-buld-theme] .sx-root.is-busy .sx-beam { opacity: 1; animation: sx-sweep 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes sx-sweep { from { background-position: -100% 0; } to { background-position: 200% 0; } }
/* the run strip's words slide in when the step changes */
html[data-buld-theme] .sx-run-t.is-swap { animation: sx-shine 1.6s linear infinite, sx-swap .35s var(--sx-ease); }
@keyframes sx-swap { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
/* a finished step: the check draws itself and the block flashes blue once */
html[data-buld-theme] .sx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sx-ink .5s .05s var(--sx-ease) forwards; }
@keyframes sx-ink { to { stroke-dashoffset: 0; } }
html[data-buld-theme] .sx-tool.is-done { animation: sx-ping .9s var(--sx-ease); }
@keyframes sx-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sx-c1) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
html[data-buld-theme] .sx-tool[data-state="run"] { border-color: color-mix(in srgb, var(--sx-c1) 45%, var(--sx-line)); box-shadow: 0 0 22px -8px color-mix(in srgb, var(--sx-c1) 60%, transparent); }
html[data-buld-theme] .sx-ti { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--sx-muted); color: var(--buld-ink-3); }
html[data-buld-theme] .sx-tool[data-state="run"] .sx-ti { color: var(--sx-c1); background: var(--buld-cta-soft); animation: sx-beat .9s ease-in-out infinite; }
html[data-buld-theme] .sx-tool[data-state="ok"] .sx-ti { color: var(--buld-success); background: var(--buld-success-soft); }
/* results enter one after the other */
html[data-buld-theme] :is(.sx-tr, .sx-tile, .sx-af, .sx-list > div, .sx-opt, .sx-pill) { animation: sx-in-up .42s var(--sx-ease) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes sx-in-up { from { opacity: 0; transform: translateY(8px); } }
html[data-buld-theme] .sx-af i { transition: background-size .9s var(--sx-ease); animation: sx-fill 1s var(--sx-ease) backwards; animation-delay: calc(var(--i, 0) * 80ms + 150ms); }
@keyframes sx-fill { from { background-size: 0 100%, auto; } }
html[data-buld-theme] .sx-curve-l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sx-ink 1.2s .1s var(--sx-ease) forwards; }
html[data-buld-theme] .sx-curve-a { animation: sx-fade .8s .6s backwards; }
@keyframes sx-fade { from { opacity: 0; } }
/* the answer is ready: one blue flash runs under the input */
html[data-buld-theme] .sx-root.is-flash:not(.is-open) .sx-float form.sx-input { animation: sx-done 1.1s var(--sx-ease); }
@keyframes sx-done { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sx-c1) 60%, transparent), 0 0 0 1px var(--sx-line); } 100% { box-shadow: 0 0 0 14px transparent, 0 0 0 1px var(--sx-line); } }
/* the send button lights up when there is something to send */
html[data-buld-theme] .sx-root .sx-input.has-text .sx-send, html[data-buld-theme] .sx-root.is-busy .sx-send {
    background: linear-gradient(135deg, var(--sx-c1), var(--sx-c3)); color: var(--buld-elevated-2);
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--sx-c1) 80%, transparent);
}
html[data-buld-theme] .sx-sg-i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--buld-cta-soft); color: var(--sx-c1); }
html[data-buld-theme] .sx-root .sx-sg:hover .sx-sg-i { background: linear-gradient(135deg, var(--sx-c1), var(--sx-c3)); color: var(--buld-elevated-2); }
html[data-buld-theme] .sx-loading { display: flex; align-items: center; gap: 8px; }
html[data-buld-theme] .sx-loadrow { display: flex; align-items: center; gap: 8px; color: var(--sx-c1); }
html[data-buld-theme] .sx-reason.is-live .sx-rc { border-inline-start-color: transparent; border-image: linear-gradient(var(--sx-c1), var(--sx-c2), var(--sx-c3)) 1; }
html[data-buld-theme] .sx-st .sx-dots { color: currentColor; }

/* ---------- ask anywhere: the Barbaros mark beside a selection, Alt + click on an element ---------- */
html[data-buld-theme] .sx-root .sx-mark {
    position: fixed; z-index: 970; left: var(--mx, -999px); top: var(--my, -999px);
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 8px; border: 0; border-radius: 999px;
    background: var(--buld-ink-1); color: var(--buld-page); font-size: 13px; font-weight: 600;
    box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--sx-c1) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--sx-c1) 40%, transparent);
    opacity: 0; visibility: hidden; transform: translateY(6px) scale(.9); pointer-events: none;
    transition: opacity .18s, transform .3s var(--sx-spring, ease), visibility .18s;
}
html[data-buld-theme] .sx-root .sx-mark.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
html[data-buld-theme] .sx-root .sx-mark.is-on .sx-orb { animation: sx-glow 1.6s ease-in-out infinite; }
html[data-buld-theme] .sx-root .sx-mark:hover { transform: translateY(-1px); }
html[data-buld-theme] .sx-lit { outline: 2px solid var(--buld-cta); outline-offset: 2px; border-radius: 6px; box-shadow: 0 0 0 6px var(--buld-cta-soft); cursor: copy; transition: outline-color .15s; }
html[data-buld-theme] .sx-qa { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
html[data-buld-theme] .sx-root .sx-qa-b {
    height: 28px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--sx-c1) 35%, var(--sx-line)); border-radius: 999px;
    background: var(--buld-cta-soft); color: var(--sx-c1); font-size: 12.5px; font-weight: 500; animation: sx-in-up .35s var(--sx-ease) backwards;
}
html[data-buld-theme] .sx-root .sx-qa-b:nth-child(2) { animation-delay: 50ms; } html[data-buld-theme] .sx-root .sx-qa-b:nth-child(3) { animation-delay: 100ms; }
html[data-buld-theme] .sx-root .sx-qa-b:hover:not(:disabled) { background: linear-gradient(135deg, var(--sx-c1), var(--sx-c3)); color: var(--buld-elevated-2); border-color: transparent; }
html[data-buld-theme] .sx-atts { align-items: center; }

/* ---------- mobile: the panel takes the screen ---------- */
@media (max-width: 720px) {
    html[data-buld-theme] .sx-panel { top: 0; bottom: 0; right: 0; width: 100vw; border-radius: 0; border: 0; }
    html[data-buld-theme] .sx-float { bottom: 10px; width: calc(100vw - 20px); }
    html[data-buld-theme] .sx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-buld-theme] .sx-acts-g { opacity: 1; }
    html[data-buld-theme] .sx-root .sx-tobottom { bottom: 160px; }
}
@media (hover: none) { html[data-buld-theme] .sx-acts-g { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    html[data-buld-theme] .sx-root *, html[data-buld-theme] .sx-root *::before, html[data-buld-theme] .sx-root *::after { animation: none; transition: none; }
    html[data-buld-theme] .sx-shimmer { color: var(--buld-ink-3); background: none; }
}

/* Orders bulk bar up (orders.js updateBulkBar shows #bulkActions inline): the input folds to its orb in the corner so
   the bar stays visible; tapping the orb opens the input again (is-focus) and the bar steps aside until the input folds back.
   Matched with :has() because legacy scripts rewrite body.className. */
html[data-buld-theme]:has(#panel-all-orders:not([style*="display: none"]) #bulkActions[data-premium="1"][style*="display: flex"]) .sx-root:not(.is-focus):not(.is-busy):not(.is-peek):not(.is-open) .sx-float { left: auto; right: 16px; bottom: var(--sx-ob, 16px); width: auto; transform: none; }
html[data-buld-theme]:has(#panel-all-orders:not([style*="display: none"]) #bulkActions[data-premium="1"][style*="display: flex"]) .sx-root:not(.is-focus):not(.is-busy):not(.is-peek):not(.is-open) :is(.sx-row, .sx-sugg) { display: none; }
html[data-buld-theme]:has(#panel-all-orders:not([style*="display: none"]) #bulkActions[data-premium="1"][style*="display: flex"]) .sx-root:not(.is-focus):not(.is-busy):not(.is-peek):not(.is-open) .sx-fab { display: grid; animation: sx-pop .36s var(--sx-spring); }
html[data-buld-theme]:has(.sx-root:is(.is-focus, .is-busy, .is-peek):not(.is-open)) #panel-all-orders #bulkActions[data-premium="1"] { opacity: 0; pointer-events: none; animation: none; transition: opacity .2s; }