/* ═══════════════════════════════════════════════════════════════════════
   BEAUTIFUL UI — AI-native interface primitives for Khio
   ═══════════════════════════════════════════════════════════════════════

   Design system adapted from beautifului.dev (by Turbo) into Khio's own
   palette. We took their STRUCTURE and left our BRAND alone:

     taken  — layered surfaces (page/canvas/surface/inset), hairline borders
              drawn as box-shadow instead of border, the six-step shadow
              ladder, tight -0.01em tracking, 120-160ms motion curves,
              and the AI-native component set (thinking traces, streaming
              text, tool chips, task rows, approval + context cards).
     kept   — Khio rust (#c2410c), warm-paper light, matte-black dark via
              the canonical --khio-dark-* tokens.

   EVERYTHING here is namespaced .bui-* / --bui-*. Nothing in this file
   selects an existing Khio class, so dropping the <link> on a page cannot
   restyle anything already on it. That also means shared-nav.js's runtime
   #khio-scheme-override (which forces the accent onto .card / .btn-primary
   / --accent-* with !important, appended LAST to <head>) never collides
   with us: it has no .bui-* selectors to win.

   Dark mode gates on html[data-theme="dark"] — NOT body. See CLAUDE.md.
   Every dark value aliases --khio-dark-* first so this layer tracks the
   app theme automatically, with a Beautiful-UI fallback if a page hasn't
   loaded premium.css.

   AFTER EDITING: bump the ?v= on every page that links this file.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. TOKENS ──────────────────────────────────────────────────────────
   Four surface layers, three ink weights, two line weights, and a set of
   semantic hues that each carry a matching low-alpha tint for backgrounds.
   The tint is what makes status colours readable as fills instead of only
   as text. */

:root {
    /* surfaces, back to front */
    --bui-page:        #faf9f5;   /* the page itself (Khio warm paper) */
    --bui-canvas:      #f2f1ec;   /* a recessed region on the page */
    --bui-surface:     #ffffff;   /* a card sitting on the page */
    --bui-inset:       #f8f7f3;   /* a well inside a card */
    --bui-field:       #f4f3ef;   /* an input */
    --bui-hover:       #f5f4f0;
    --bui-hover-2:     #eae8e2;

    /* ink */
    --bui-ink:         #1f2124;   /* primary text */
    --bui-ink-2:       #62656b;   /* secondary text, labels */
    --bui-ink-3:       #9a9da3;   /* tertiary, timestamps, placeholders */

    /* lines */
    --bui-line:        #e9e7e0;
    --bui-line-strong: #ddd9d0;

    /* semantic hues + tints */
    --bui-accent:      #c2410c;   /* Khio rust */
    --bui-accent-ink:  #9a3412;
    --bui-accent-tint: rgba(194,65,12,.09);
    --bui-green:       #189a4d;
    --bui-green-tint:  rgba(24,154,77,.10);
    --bui-orange:      #ef720c;
    --bui-orange-tint: rgba(239,114,12,.11);
    --bui-red:         #e3474c;
    --bui-red-tint:    rgba(227,71,76,.10);
    --bui-blue:        #0285ff;
    --bui-blue-tint:   rgba(2,133,255,.10);

    /* the shadow ladder. Every "border" in this system is really the
       first stop of a box-shadow, so nothing here changes layout. */
    --bui-shadow-hairline: 0 0 0 1px var(--bui-line);
    --bui-shadow-card:     0 0 0 1px var(--bui-line), 0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.03);
    --bui-shadow-raised:   0 0 0 1px var(--bui-line), 0 2px 10px rgba(0,0,0,.045);
    --bui-shadow-overlay:  0 0 0 1px var(--bui-line), 0 8px 28px rgba(0,0,0,.07);
    --bui-shadow-btn:      0 0 0 1px var(--bui-line-strong), 0 1px 2px rgba(16,24,40,.05);
    --bui-shadow-field:    inset 0 1px 2px rgba(0,0,0,.06);

    /* radii */
    --bui-r-card:    10px;
    --bui-r-control:  8px;
    --bui-r-chip:     6px;
    --bui-r-pill:    99px;

    /* motion */
    --bui-ease:         cubic-bezier(.4,0,.2,1);
    --bui-ease-out:     cubic-bezier(0,0,.2,1);
    --bui-ease-strong:  cubic-bezier(.23,1,.32,1);
    --bui-ease-link:    cubic-bezier(.16,1,.3,1);
}

html[data-theme="dark"] {
    /* Dark inverts the ladder: recessed is DARKER, raised is LIGHTER, so
       it has to run page < canvas < inset < surface. Only page/surface/field
       alias --khio-dark-* because those are the only three steps Khio
       actually defines; canvas and inset are literals that sit between them.
       Do not alias canvas or inset to --khio-dark-surface: that collapses
       them onto --bui-surface and every card header, thinking trace and
       meter track loses its edge on a real page. */
    --bui-page:        var(--khio-dark-bg, #000000);
    --bui-canvas:      #070708;
    --bui-surface:     var(--khio-dark-surface, #0d0d0f);
    --bui-inset:       #0a0a0b;
    --bui-field:       var(--khio-dark-surface-2, #17171a);
    --bui-hover:       var(--khio-dark-surface-2, #17171a);
    --bui-hover-2:     #202024;

    --bui-ink:         var(--khio-dark-text, #f2f3f4);
    --bui-ink-2:       var(--khio-dark-text-soft, #a5a8ad);
    --bui-ink-3:       var(--khio-dark-text-mut, #6c6f75);

    --bui-line:        var(--khio-dark-border, rgba(255,255,255,.12));
    --bui-line-strong: rgba(255,255,255,.20);

    /* Dark's accent is the graphite ink, not an ember lift of the rust:
       James 2026-09-22, "the dark theme having the secondary color being
       orange looks terrible". Anything FILLED with it takes dark ink in dark
       (.bui-btn-primary, .bui-send). The status hues below keep their colour. */
    --bui-accent:      var(--khio-dark-accent, #f4f4f5);
    --bui-accent-ink:  var(--khio-dark-text, #f4f4f5);
    --bui-accent-tint: rgba(255,255,255,.10);
    --bui-green:       #3dbb72;
    --bui-green-tint:  rgba(61,187,114,.16);
    --bui-orange:      #f68f3c;
    --bui-orange-tint: rgba(246,143,60,.16);
    --bui-red:         #ee5c61;
    --bui-red-tint:    rgba(238,92,97,.16);
    --bui-blue:        #3d9aff;
    --bui-blue-tint:   rgba(61,154,255,.16);

    --bui-shadow-hairline: 0 0 0 1px var(--bui-line);
    --bui-shadow-card:     0 0 0 1px var(--bui-line), 0 1px 2px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.20);
    --bui-shadow-raised:   0 0 0 1px var(--bui-line), 0 2px 10px rgba(0,0,0,.22);
    --bui-shadow-overlay:  0 0 0 1px var(--bui-line-strong), 0 8px 28px rgba(0,0,0,.34);
    --bui-shadow-btn:      0 0 0 1px var(--bui-line-strong), 0 1px 2px rgba(0,0,0,.30);
    --bui-shadow-field:    inset 0 1px 2px rgba(0,0,0,.38);
}


/* ── 2. BASE ────────────────────────────────────────────────────────────
   The tracking is doing more work than it looks like it is. Beautiful UI
   runs -0.14px at 14px, which is what stops dense UI text from reading
   soft. We scope it to .bui-* so it never touches page copy. */

.bui,
[class^="bui-"],
[class*=" bui-"] {
    font-family: var(--font-stack, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
[class^="bui-"] *, [class*=" bui-"] * { box-sizing: border-box; }


/* ── 3. CARD ────────────────────────────────────────────────────────────
   The base container. Note there is no `border` property anywhere: the
   1px edge is the first stop of the box-shadow, so a card can gain or
   lose emphasis on hover without shifting a single pixel of layout. */

.bui-card {
    background: var(--bui-surface);
    border-radius: var(--bui-r-card);
    box-shadow: var(--bui-shadow-card);
    color: var(--bui-ink);
    overflow: hidden;
    transition: box-shadow .14s var(--bui-ease-out), transform .14s var(--bui-ease-strong);
}
.bui-card-raised   { box-shadow: var(--bui-shadow-raised); }
.bui-card-flat     { box-shadow: var(--bui-shadow-hairline); }
.bui-card-hover:hover { box-shadow: var(--bui-shadow-raised); transform: translateY(-1px); }

.bui-card-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    font-size: 12.5px; font-weight: 600; color: var(--bui-ink-2);
    background: var(--bui-inset);
    box-shadow: inset 0 -1px 0 var(--bui-line);
}
.bui-card-body { padding: 14px; }
.bui-card-foot {
    padding: 10px 14px;
    background: var(--bui-inset);
    box-shadow: inset 0 1px 0 var(--bui-line);
    display: flex; align-items: center; gap: 8px;
}

.bui-title { font-size: 14px; font-weight: 600; color: var(--bui-ink); margin: 0; }
.bui-sub   { font-size: 12.5px; color: var(--bui-ink-2); margin: 0; line-height: 1.5; }
.bui-meta  { font-size: 11.5px; color: var(--bui-ink-3); }
.bui-mono  { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }


/* ── 4. BUTTONS + CHIPS ─────────────────────────────────────────────────
   Buttons press 1px down rather than scaling, which reads as physical
   at this density. Chips are the workhorse: tool calls, tags, sources,
   filters and statuses all reduce to one. */

.bui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px; padding: 0 11px;
    font-family: inherit; font-size: 12.5px; font-weight: 550; letter-spacing: -0.01em;
    color: var(--bui-ink);
    background: var(--bui-surface);
    border: 0; border-radius: var(--bui-r-control);
    box-shadow: var(--bui-shadow-btn);
    cursor: pointer; white-space: nowrap;
    transition: background-color .14s var(--bui-ease-strong), color .14s var(--bui-ease-strong),
                box-shadow .14s var(--bui-ease-strong), transform .14s var(--bui-ease-strong);
}
.bui-btn:hover  { background: var(--bui-hover); }
.bui-btn:active { transform: translateY(1px); }
.bui-btn:focus-visible { outline: 2px solid var(--bui-accent); outline-offset: 2px; }
.bui-btn[disabled] { opacity: .5; cursor: not-allowed; }

.bui-btn-primary {
    background: var(--bui-accent); color: #fff;
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 1px var(--bui-accent), 0 1px 2px rgba(0,0,0,.10);
}
.bui-btn-primary:hover { background: var(--bui-accent-ink); }
html[data-theme="dark"] .bui-btn-primary { color: #17181a; -webkit-text-fill-color: #17181a; }

.bui-btn-ghost { background: transparent; box-shadow: none; color: var(--bui-ink-2); }
.bui-btn-ghost:hover { background: var(--bui-hover); color: var(--bui-ink); }
.bui-btn-sm { height: 25px; padding: 0 8px; font-size: 11.5px; }

.bui-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 7px; max-width: 100%;
    font-size: 11.5px; font-weight: 500; line-height: 1;
    color: var(--bui-ink-2);
    background: var(--bui-inset);
    border-radius: var(--bui-r-chip);
    box-shadow: var(--bui-shadow-hairline);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color .12s var(--bui-ease-out), color .12s var(--bui-ease-out);
}
a.bui-chip, button.bui-chip { cursor: pointer; border: 0; font-family: inherit; text-decoration: none; }
a.bui-chip:hover, button.bui-chip:hover { background: var(--bui-hover-2); color: var(--bui-ink); }
.bui-chip-accent { background: var(--bui-accent-tint); color: var(--bui-accent-ink); box-shadow: none; }
.bui-chip-green  { background: var(--bui-green-tint);  color: var(--bui-green);  box-shadow: none; }
.bui-chip-orange { background: var(--bui-orange-tint); color: var(--bui-orange); box-shadow: none; }
.bui-chip-red    { background: var(--bui-red-tint);    color: var(--bui-red);    box-shadow: none; }
.bui-chip-blue   { background: var(--bui-blue-tint);   color: var(--bui-blue);   box-shadow: none; }
.bui-chip-pill   { border-radius: var(--bui-r-pill); padding: 0 9px; }

.bui-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bui-ink-3); flex: none; }
.bui-dot-green  { background: var(--bui-green); }
.bui-dot-orange { background: var(--bui-orange); }
.bui-dot-red    { background: var(--bui-red); }
.bui-dot-accent { background: var(--bui-accent); }
.bui-dot-live   { background: var(--bui-green); animation: bui-pulse 1.8s var(--bui-ease) infinite; }


/* ── 5. LOADING STATE ───────────────────────────────────────────────────
   Their signature loader: a 3x3 pixel grid where cells light in a fixed
   pseudo-random order, paired with shimmering label text and an elapsed
   counter. It reads as "work is happening" far better than a spinner
   because the cell pattern never repeats within a glance.
   Elapsed time is written by beautiful-ui.js. */

.bui-loading { display: inline-flex; align-items: center; gap: 9px; }

.bui-pixels {
    display: grid; grid-template-columns: repeat(3, 4px); grid-auto-rows: 4px;
    gap: 2px; flex: none;
}
.bui-pixels i {
    display: block; width: 4px; height: 4px; border-radius: 1px;
    background: var(--bui-ink); opacity: .13;
    animation: bui-pixel-on 1.5s var(--bui-ease) infinite;
}
/* hand-ordered delays. A sequential 0,1,2,3... reads as a wipe; this
   scatter reads as computation. */
.bui-pixels i:nth-child(1) { animation-delay: .00s }
.bui-pixels i:nth-child(2) { animation-delay: .55s }
.bui-pixels i:nth-child(3) { animation-delay: .20s }
.bui-pixels i:nth-child(4) { animation-delay: .75s }
.bui-pixels i:nth-child(5) { animation-delay: .35s }
.bui-pixels i:nth-child(6) { animation-delay: .10s }
.bui-pixels i:nth-child(7) { animation-delay: .65s }
.bui-pixels i:nth-child(8) { animation-delay: .30s }
.bui-pixels i:nth-child(9) { animation-delay: .90s }

/* Shimmer label. The gradient sweeps across the glyphs themselves via
   background-clip, so it works on any text length without a mask element. */
.bui-shimmer {
    font-size: 13px; font-weight: 500;
    background: linear-gradient(90deg, var(--bui-ink-3) 20%, var(--bui-ink) 45%, var(--bui-ink-3) 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: bui-shimmer-text 2.1s linear infinite;
}
.bui-elapsed {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px; color: var(--bui-ink-3); font-variant-numeric: tabular-nums;
}

/* dot + orbit variants, for tighter spots like a composer or a button */
.bui-dots { display: inline-flex; align-items: center; gap: 4px; }
.bui-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--bui-ink-3); animation: bui-bounce 1.2s var(--bui-ease) infinite; }
.bui-dots i:nth-child(2) { animation-delay: .15s }
.bui-dots i:nth-child(3) { animation-delay: .30s }

.bui-orbit { width: 13px; height: 13px; flex: none; border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--bui-line-strong);
    border-top: 1.5px solid var(--bui-accent);
    animation: bui-spin .7s linear infinite; }

.bui-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.bui-eq i { width: 2.5px; background: var(--bui-accent); border-radius: 1px; animation: bui-eq 1s var(--bui-ease) infinite; }
.bui-eq i:nth-child(1) { height: 5px;  animation-delay: 0s }
.bui-eq i:nth-child(2) { height: 11px; animation-delay: .18s }
.bui-eq i:nth-child(3) { height: 7px;  animation-delay: .36s }
.bui-eq i:nth-child(4) { height: 9px;  animation-delay: .54s }


/* ── 6. THINKING TRACE ──────────────────────────────────────────────────
   An expandable reasoning log. Collapsed it is a single quiet line; open
   it shows the steps on a vertical rail. The rail is a ::before on the
   list rather than a border on each row, so the last step's connector
   stops at its own dot instead of running off the bottom. */

.bui-thinking { border-radius: var(--bui-r-card); background: var(--bui-inset); box-shadow: var(--bui-shadow-hairline); overflow: hidden; }

.bui-thinking-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 12px; background: none; border: 0;
    font-family: inherit; font-size: 12.5px; font-weight: 550; color: var(--bui-ink-2);
    cursor: pointer; text-align: left;
    transition: background-color .12s var(--bui-ease-out);
}
.bui-thinking-head:hover { background: var(--bui-hover); }
.bui-thinking-caret {
    margin-left: auto; flex: none; width: 14px; height: 14px; color: var(--bui-ink-3);
    transition: transform .2s var(--bui-ease-strong);
}
.bui-thinking.is-open .bui-thinking-caret { transform: rotate(90deg); }

.bui-thinking-body { display: none; padding: 2px 12px 11px 12px; }
.bui-thinking.is-open .bui-thinking-body { display: block; animation: bui-fade-up .22s var(--bui-ease-out) both; }

.bui-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 17px; }
.bui-steps::before {
    content: ""; position: absolute; left: 4px; top: 7px; bottom: 9px;
    width: 1px; background: var(--bui-line-strong);
}
.bui-step {
    position: relative; padding: 5px 0;
    font-size: 12.5px; line-height: 1.5; color: var(--bui-ink-2);
}
.bui-step::before {
    content: ""; position: absolute; left: -17px; top: 11px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bui-line-strong);
    box-shadow: 0 0 0 3px var(--bui-inset);
}
.bui-step.is-done::before   { background: var(--bui-green); }
.bui-step.is-active::before { background: var(--bui-accent); animation: bui-pulse 1.6s var(--bui-ease) infinite; }
.bui-step.is-active         { color: var(--bui-ink); }
.bui-step-note { display: block; margin-top: 2px; font-size: 11.5px; color: var(--bui-ink-3); }


/* ── 7. STREAMING TEXT ──────────────────────────────────────────────────
   Answer text that arrives in fragments, plus the trailing caret, inline
   citation superscripts, the sources drawer, and follow-up suggestions.
   .bui-stream-seg is applied per fragment so each one fades up on its own
   instead of the whole block re-animating on every token. */

.bui-stream { font-size: 14px; line-height: 1.62; color: var(--bui-ink); }
.bui-stream-seg { animation: bui-stream-in .26s var(--bui-ease-out) both; }
.bui-caret {
    display: inline-block; width: 2px; height: 1.05em; margin-left: 1px;
    vertical-align: text-bottom; background: var(--bui-accent);
    animation: bui-caret 1.05s steps(1) infinite;
}

.bui-cite {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 15px; height: 15px; padding: 0 4px; margin: 0 2px;
    font-size: 10px; font-weight: 600; line-height: 1;
    color: var(--bui-ink-2); background: var(--bui-canvas);
    border-radius: 4px; box-shadow: var(--bui-shadow-hairline);
    text-decoration: none; vertical-align: 1px;
    transition: background-color .12s var(--bui-ease-out), color .12s var(--bui-ease-out);
}
.bui-cite:hover { background: var(--bui-accent-tint); color: var(--bui-accent-ink); }

.bui-sources { margin-top: 10px; }
.bui-sources-head {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 6px; background: none; border: 0;
    font-family: inherit; font-size: 11.5px; font-weight: 550; color: var(--bui-ink-2);
    border-radius: var(--bui-r-chip); cursor: pointer;
    transition: background-color .12s var(--bui-ease-out);
}
.bui-sources-head:hover { background: var(--bui-hover); color: var(--bui-ink); }
.bui-sources-list { display: none; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.bui-sources.is-open .bui-sources-list { display: flex; animation: bui-fade-up .2s var(--bui-ease-out) both; }

.bui-source {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 240px; padding: 5px 9px;
    background: var(--bui-surface); border-radius: var(--bui-r-chip);
    box-shadow: var(--bui-shadow-hairline);
    font-size: 11.5px; color: var(--bui-ink-2); text-decoration: none;
    transition: background-color .12s var(--bui-ease-out), box-shadow .12s var(--bui-ease-out), transform .14s var(--bui-ease-strong);
}
.bui-source:hover { background: var(--bui-hover); box-shadow: var(--bui-shadow-raised); transform: translateY(-1px); }
.bui-source img, .bui-source .bui-favicon {
    width: 13px; height: 13px; border-radius: 3px; flex: none; object-fit: cover;
    background: var(--bui-canvas);
}
.bui-source-name { font-weight: 550; color: var(--bui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bui-source-host { color: var(--bui-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bui-followups { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; }
.bui-followups-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bui-ink-3); margin-bottom: 5px; }
.bui-followup {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 2px; background: none; border: 0;
    box-shadow: inset 0 -1px 0 var(--bui-line);
    font-family: inherit; font-size: 13px; color: var(--bui-ink); text-align: left;
    cursor: pointer;
    transition: color .12s var(--bui-ease-out), padding-left .16s var(--bui-ease-strong);
}
.bui-followup:hover { color: var(--bui-accent); padding-left: 6px; }
.bui-followup::after { content: "+"; color: var(--bui-ink-3); font-size: 14px; flex: none; }


/* ── 8. APPROVAL CARD ───────────────────────────────────────────────────
   Human-in-the-loop. The agent stops and asks before acting. Options are
   radio-style rows; the whole row is the hit target, not just the dot. */

.bui-approval { background: var(--bui-surface); border-radius: var(--bui-r-card); box-shadow: var(--bui-shadow-card); overflow: hidden; }
.bui-approval-q { padding: 13px 14px 11px; font-size: 13.5px; font-weight: 600; color: var(--bui-ink); line-height: 1.45; }
.bui-approval-opts { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.bui-approval-opt {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 10px; background: none; border: 0; border-radius: var(--bui-r-control);
    font-family: inherit; font-size: 13px; color: var(--bui-ink); text-align: left;
    cursor: pointer;
    transition: background-color .12s var(--bui-ease-out);
}
.bui-approval-opt:hover { background: var(--bui-hover); }
.bui-approval-opt::before {
    content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--bui-line-strong);
    transition: box-shadow .14s var(--bui-ease-strong);
}
.bui-approval-opt:hover::before      { box-shadow: inset 0 0 0 1.5px var(--bui-ink-3); }
.bui-approval-opt.is-picked::before  { box-shadow: inset 0 0 0 4.5px var(--bui-accent); }
.bui-approval-opt.is-picked          { background: var(--bui-accent-tint); font-weight: 550; }


/* ── 9. TOOL CHIPS ──────────────────────────────────────────────────────
   Compact record of what the agent actually did: files touched, commands
   run, images read. The +/- diff counts are the part people scan for. */

.bui-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.bui-tool {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; background: var(--bui-surface);
    border-radius: var(--bui-r-chip); box-shadow: var(--bui-shadow-hairline);
    font-size: 11.5px; color: var(--bui-ink-2);
    transition: background-color .12s var(--bui-ease-out);
}
.bui-tool:hover { background: var(--bui-hover); }
.bui-tool-icon { width: 12px; height: 12px; flex: none; color: var(--bui-ink-3); }
.bui-tool-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--bui-ink); font-size: 11px; }
.bui-add { color: var(--bui-green); font-variant-numeric: tabular-nums; font-size: 11px; }
.bui-del { color: var(--bui-red);   font-variant-numeric: tabular-nums; font-size: 11px; }


/* ── 10. TASK ROWS ──────────────────────────────────────────────────────
   Live agent work: running / done / failed, each with sub-steps and an
   optional progress bar. This is also the right shape for a to-do list. */

.bui-tasks { display: flex; flex-direction: column; gap: 7px; }
.bui-task {
    background: var(--bui-surface); border-radius: var(--bui-r-card);
    box-shadow: var(--bui-shadow-card); overflow: hidden;
    transition: box-shadow .14s var(--bui-ease-out);
}
.bui-task:hover { box-shadow: var(--bui-shadow-raised); }
.bui-task-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.bui-task-title { font-size: 13px; font-weight: 550; color: var(--bui-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bui-task-status { margin-left: auto; flex: none; }
.bui-task.is-done  .bui-task-title { color: var(--bui-ink-2); }
.bui-task.is-failed { box-shadow: 0 0 0 1px var(--bui-red-tint), var(--bui-shadow-card); }

.bui-task-sub { padding: 0 12px 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.bui-task-substep {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--bui-ink-2);
}
.bui-task-substep .bui-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--bui-ink-3); font-size: 11.5px; }

.bui-meter { height: 4px; border-radius: 2px; background: var(--bui-canvas); overflow: hidden; }
.bui-meter-fill { height: 100%; border-radius: 2px; background: var(--bui-accent); transition: width .5s var(--bui-ease-strong); }
.bui-meter-fill.is-green { background: var(--bui-green); }
.bui-meter-fill.is-red   { background: var(--bui-red); }


/* ── 11. PROMPT BAR ─────────────────────────────────────────────────────
   The composer. Focus lifts the ring to the accent rather than adding a
   border, so the field never grows by a pixel when you click into it. */

.bui-prompt {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 11px;
    background: var(--bui-surface); border-radius: 14px;
    box-shadow: var(--bui-shadow-raised);
    transition: box-shadow .16s var(--bui-ease-out);
}
.bui-prompt:focus-within { box-shadow: 0 0 0 1px var(--bui-accent), 0 2px 14px var(--bui-accent-tint); }
.bui-prompt-input {
    width: 100%; border: 0; outline: 0; resize: none; background: none;
    font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--bui-ink);
    max-height: 180px;
}
.bui-prompt-input::placeholder { color: var(--bui-ink-3); }
.bui-prompt-row { display: flex; align-items: center; gap: 6px; }
.bui-prompt-row .bui-spacer { flex: 1; }
.bui-send {
    width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bui-accent); color: #fff; cursor: pointer;
    transition: transform .14s var(--bui-ease-strong), opacity .14s var(--bui-ease-out);
}
html[data-theme="dark"] .bui-send { color: #17181a; }
.bui-send:hover  { transform: scale(1.06); }
.bui-send:active { transform: scale(.94); }
.bui-send[disabled] { opacity: .35; cursor: not-allowed; transform: none; }

.bui-field {
    display: flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 10px;
    background: var(--bui-field); border-radius: var(--bui-r-control);
    box-shadow: var(--bui-shadow-hairline);
    transition: box-shadow .14s var(--bui-ease-out);
}
.bui-field:focus-within { box-shadow: 0 0 0 1px var(--bui-accent); }
.bui-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: inherit; font-size: 13px; color: var(--bui-ink); }
.bui-field input::placeholder { color: var(--bui-ink-3); }
.bui-kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px;
    padding: 2px 5px; border-radius: 4px; color: var(--bui-ink-3);
    background: var(--bui-surface); box-shadow: var(--bui-shadow-hairline);
}


/* ── 12. RECOMMENDATION CARD ────────────────────────────────────────────
   A proposal the agent wants to act on, carrying its own confidence and
   a list of runner-up options it considered. */

.bui-rec { background: var(--bui-surface); border-radius: var(--bui-r-card); box-shadow: var(--bui-shadow-card); overflow: hidden; }
.bui-rec-body { padding: 13px 14px; }
.bui-rec-q { font-size: 13.5px; font-weight: 600; color: var(--bui-ink); margin: 0 0 5px; line-height: 1.45; }
.bui-rec-detail { font-size: 12.5px; color: var(--bui-ink-2); line-height: 1.55; margin: 0; }
.bui-rec-alts { margin-top: 11px; display: flex; flex-direction: column; gap: 1px; }
.bui-rec-alt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 0; font-size: 12.5px; color: var(--bui-ink-2);
    box-shadow: inset 0 -1px 0 var(--bui-line);
}
.bui-confidence { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--bui-ink-2); }
.bui-confidence .bui-meter { width: 52px; flex: none; }


/* ── 13. CONTEXT CARDS ──────────────────────────────────────────────────
   Retrieved knowledge with its provenance attached. Khio's memory pool
   and MemPalace recall are exactly this shape. */

.bui-context { background: var(--bui-surface); border-radius: var(--bui-r-card); box-shadow: var(--bui-shadow-card); overflow: hidden; }
.bui-context-head {
    display: flex; align-items: baseline; gap: 8px; padding: 11px 13px 0;
}
.bui-context-title { font-size: 12.5px; font-weight: 600; color: var(--bui-ink); }
.bui-context-size { margin-left: auto; font-size: 11px; color: var(--bui-ink-3); font-variant-numeric: tabular-nums; }
.bui-context-text {
    padding: 7px 13px 11px; font-size: 12.5px; line-height: 1.6; color: var(--bui-ink-2);
}
.bui-context-src {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 13px; background: var(--bui-inset);
    box-shadow: inset 0 1px 0 var(--bui-line);
    font-size: 11.5px; color: var(--bui-ink-2);
}
.bui-filetag {
    display: inline-flex; align-items: center; padding: 1px 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
    border-radius: 3px; background: var(--bui-canvas); color: var(--bui-ink-3);
}


/* ── 14. INSIGHT CARDS ──────────────────────────────────────────────────
   A number with its trend. Tabular figures so a column of them lines up. */

.bui-insights { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.bui-insight {
    padding: 12px 13px; background: var(--bui-surface);
    border-radius: var(--bui-r-card); box-shadow: var(--bui-shadow-card);
    transition: box-shadow .14s var(--bui-ease-out), transform .14s var(--bui-ease-strong);
}
.bui-insight:hover { box-shadow: var(--bui-shadow-raised); transform: translateY(-1px); }
.bui-insight-label { font-size: 11.5px; font-weight: 550; color: var(--bui-ink-2); display: flex; align-items: center; gap: 6px; }
.bui-insight-value {
    margin-top: 6px; font-size: 25px; font-weight: 600; line-height: 1.1;
    color: var(--bui-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.025em;
}
.bui-insight-value small { font-size: 13px; font-weight: 500; color: var(--bui-ink-3); margin-left: 2px; letter-spacing: -0.01em; }
.bui-insight-foot { margin-top: 7px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--bui-ink-3); }
.bui-trend-up   { color: var(--bui-green); font-weight: 600; }
.bui-trend-down { color: var(--bui-red);   font-weight: 600; }

/* sparkline sits flush to the card's bottom edge */
.bui-spark { display: block; width: 100%; height: 26px; margin-top: 8px; overflow: visible; }
.bui-spark path { fill: none; stroke: var(--bui-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bui-spark .bui-spark-area { fill: var(--bui-accent-tint); stroke: none; }


/* ── 15. CODE BLOCK ─────────────────────────────────────────────────────
   Filename header, copy button, tabular line numbers, diff tinting. */

.bui-code { background: var(--bui-surface); border-radius: var(--bui-r-card); box-shadow: var(--bui-shadow-card); overflow: hidden; }
.bui-code-head {
    display: flex; align-items: center; gap: 8px; padding: 7px 10px;
    background: var(--bui-inset); box-shadow: inset 0 -1px 0 var(--bui-line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px; color: var(--bui-ink-2);
}
.bui-code-copy { margin-left: auto; }
.bui-code pre {
    margin: 0; padding: 11px 12px; overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.65; color: var(--bui-ink);
    background: none;
}
.bui-code-line { display: block; padding: 0 3px; border-radius: 2px; }
.bui-code-line.is-add { background: var(--bui-green-tint); }
.bui-code-line.is-del { background: var(--bui-red-tint); }


/* ── 16. TABLES ─────────────────────────────────────────────────────────
   Sticky head, zebra rows, and a diff mode where proposed edits tint in
   place. position: sticky on th needs the wrapper to own the scroll. */

.bui-table-wrap { border-radius: var(--bui-r-card); box-shadow: var(--bui-shadow-card); overflow: auto; background: var(--bui-surface); }
.bui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.bui-table th {
    position: sticky; top: 0; z-index: 1;
    padding: 9px 12px; text-align: left; white-space: nowrap;
    font-size: 11.5px; font-weight: 600; color: var(--bui-ink-2);
    background: var(--bui-inset); box-shadow: inset 0 -1px 0 var(--bui-line);
}
.bui-table td { padding: 9px 12px; color: var(--bui-ink); box-shadow: inset 0 -1px 0 var(--bui-line); vertical-align: middle; }
.bui-table tbody tr { transition: background-color .12s var(--bui-ease-out); }
.bui-table tbody tr:hover { background: var(--bui-hover); }
.bui-table tbody tr:last-child td { box-shadow: none; }
.bui-table .is-added   { background: var(--bui-green-tint); }
.bui-table .is-removed { background: var(--bui-red-tint); text-decoration: line-through; color: var(--bui-ink-3); }
.bui-avatar {
    width: 22px; height: 22px; flex: none; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: var(--bui-ink-2);
    background: var(--bui-canvas);
}


/* ── 17. SIDEBAR NAV + SELECTION ACTIONS ────────────────────────────────
   The active pill is a background, not a left-border, so items do not
   jump horizontally when selection moves. */

.bui-nav { display: flex; flex-direction: column; gap: 1px; }
.bui-nav-label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bui-ink-3); padding: 9px 10px 5px; }
.bui-nav-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; border-radius: var(--bui-r-control);
    font-size: 13px; color: var(--bui-ink-2); text-decoration: none; cursor: pointer;
    transition: background-color .12s var(--bui-ease-out), color .12s var(--bui-ease-out);
}
.bui-nav-item:hover { background: var(--bui-hover); color: var(--bui-ink); }
.bui-nav-item.is-active { background: var(--bui-accent-tint); color: var(--bui-accent-ink); font-weight: 550; }
.bui-nav-item .bui-nav-count { margin-left: auto; font-size: 11px; color: var(--bui-ink-3); font-variant-numeric: tabular-nums; }

/* floating bulk-action bar */
.bui-selection {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 8px 7px 12px;
    background: var(--bui-surface); border-radius: var(--bui-r-pill);
    box-shadow: var(--bui-shadow-overlay);
    animation: bui-pop-in .22s var(--bui-ease-strong) both;
}
.bui-selection-count { font-size: 12.5px; font-weight: 600; color: var(--bui-ink); font-variant-numeric: tabular-nums; }


/* ── 18. KEYFRAMES ──────────────────────────────────────────────────────
   Only transform / opacity / background-position animate here, so none of
   these force layout on the main thread. */

@keyframes bui-pixel-on   { 0%, 62%, 100% { opacity: .13 } 22%, 42% { opacity: 1 } }
@keyframes bui-shimmer-text { 0% { background-position: 130% 0 } 100% { background-position: -30% 0 } }
@keyframes bui-spin       { to { transform: rotate(360deg) } }
@keyframes bui-bounce     { 0%, 100% { opacity: .35; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-3px) } }
@keyframes bui-pulse      { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .55; transform: scale(.86) } }
@keyframes bui-caret      { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes bui-eq         { 0%, 100% { transform: scaleY(.4) } 50% { transform: scaleY(1) } }
@keyframes bui-stream-in  { from { opacity: 0; transform: translateY(2px) } to { opacity: 1; transform: none } }
@keyframes bui-fade-up    { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
@keyframes bui-pop-in     { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }


/* ── 19. RESPONSIVE ─────────────────────────────────────────────────────
   Touch targets go to 36px+ and the desktop hover-lift is dropped: on a
   phone the transform only ever fires as a sticky state after a tap.
   Scoped by width AND by Khio's body.khio-mobile so it matches however
   the page decides it is mobile. See CLAUDE.md landmine #7. */

@media (max-width: 1023px) {
    .bui-card-hover:hover, .bui-insight:hover, .bui-source:hover { transform: none; }
    .bui-btn        { height: 36px; padding: 0 13px; font-size: 13px; }
    .bui-btn-sm     { height: 30px; }
    .bui-chip       { height: 25px; font-size: 12px; }
    .bui-insights   { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .bui-insight-value { font-size: 22px; }
    .bui-approval-opt, .bui-followup, .bui-nav-item { min-height: 42px; }
    .bui-send       { width: 34px; height: 34px; }
    .bui-source     { max-width: 100%; }
    .bui-table-wrap { -webkit-overflow-scrolling: touch; }
    .bui-stream     { font-size: 15px; }
}
body.khio-mobile .bui-card-hover:hover,
body.khio-mobile .bui-insight:hover { transform: none; }

/* Respect the OS setting. Loaders stay visible, they just stop moving. */
@media (prefers-reduced-motion: reduce) {
    .bui-pixels i, .bui-shimmer, .bui-dots i, .bui-orbit, .bui-eq i,
    .bui-dot-live, .bui-step.is-active::before, .bui-caret {
        animation: none !important;
    }
    .bui-shimmer { -webkit-text-fill-color: var(--bui-ink-2); color: var(--bui-ink-2); }
    .bui-pixels i { opacity: .5; }
    [class^="bui-"], [class*=" bui-"] { transition-duration: .01ms !important; }
    .bui-stream-seg, .bui-thinking-body, .bui-selection, .bui-sources-list { animation: none !important; }
}