/* ============================================================ BrainKup Design System for Bootstrap 5.3 ------------------------------------------------------------ A single stylesheet that: 1. Defines design tokens (shadcn/ui OKLCH palette + BrainKup brand) 2. Maps those tokens onto Bootstrap's --bs-* variables so native Bootstrap components inherit the look 3. Adds the BrainKup component classes (.bk-*) used to build screens Usage: light (default) dark ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap"); /* ============================================================ 1. TOKENS ============================================================ */ :root { /* radius scale */ --radius: 0.56rem; --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); /* shadcn neutral palette (light) */ --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --surface: oklch(0.985 0 0); /* BrainKup brand */ --bk-coral: #f0644a; /* the "ai" accent in the wordmark */ --bk-blue: oklch(0.623 0.214 259.815); /* workspace status dot */ --bk-mail-bg: #eef0fb; /* lavender mail chip */ --bk-mail-fg: #6b73c4; /* type */ --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* elevation */ --shadow-xs: 0 1px 1px 0 rgb(0 0 0 / 0.04); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 1px -1px rgb(0 0 0 / 0.05); --shadow-lg: 0 8px 24px -8px rgb(0 0 0 / 0.12), 0 3px 10px -5px rgb(0 0 0 / 0.08); } [data-theme="dark"] { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.371 0 0); --accent-foreground: oklch(0.985 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --surface: oklch(0.205 0 0); --bk-mail-bg: oklch(0.3 0.04 277); --bk-mail-fg: oklch(0.8 0.06 277); --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.5), 0 4px 12px -4px rgb(0 0 0 / 0.4); } /* ============================================================ 2. BOOTSTRAP VARIABLE MAPPING ============================================================ */ :root { --bs-body-bg: var(--background); --bs-body-color: var(--foreground); --bs-body-font-family: var(--font-sans); --bs-body-font-size: 0.9rem; --bs-body-line-height: 1.5; --bs-border-color: var(--border); --bs-border-radius: var(--radius-md); --bs-border-radius-lg: var(--radius-xl); --bs-border-radius-sm: var(--radius-sm); --bs-emphasis-color: var(--foreground); --bs-secondary-color: var(--muted-foreground); --bs-tertiary-color: var(--muted-foreground); --bs-link-color: var(--foreground); --bs-link-hover-color: var(--foreground); } * { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-feature-settings: "ss01", "cv11"; } ::selection { background: var(--foreground); color: var(--background); } /* ============================================================ 3. SHARED HELPERS ============================================================ */ .bk-mono { font-family: var(--font-mono); } .bk-muted { color: var(--muted-foreground); } .bk-fg { color: var(--foreground); } /* mono uppercase meta label */ .bk-meta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 400; white-space: nowrap; } .bk-meta--link { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--muted-foreground); transition: color 0.14s; } .bk-meta--link:hover { color: var(--foreground); } .bk-meta--link svg { width: 11px; height: 11px; } /* cap Bootstrap's container to the BrainKup brand width */ @media (min-width: 1200px) { .container { max-width: 1140px; } } /* small status dot */ .bk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--muted-foreground); flex: none; } .bk-dot--blue { background: var(--bk-blue); } .bk-dot--green { background: #2aaf7f; } .bk-dot--red { background: var(--destructive); } /* ============================================================ 4. TOP NAV (adjustments over Bootstrap .navbar) ============================================================ */ .bk-nav { border-bottom: 1px solid var(--border); background: var(--background); } .bk-nav .navbar { padding-block: 0; } .bk-nav .navbar > .container {min-height: 54px;} .bk-logo, .navbar-brand.bk-logo { font-family: var(--font-mono); font-weight: 500; font-size: 1.55rem; letter-spacing: -0.03em; color: var(--foreground); line-height: 1; padding-block: 0; } .bk-logo img {max-height: 30px !important;} .bk-logo .bk-logo__ai { color: var(--bk-coral); } /* nav links — restyle Bootstrap .nav-link */ .bk-navlinks { align-items: center; gap: 0.25rem; column-gap: 1.35rem; } .bk-navlinks .nav-link { position: relative; font-size: 0.9rem; color: var(--muted-foreground); font-weight: 400; line-height: 1.2; white-space: nowrap; transition: color .15s ease; } .bk-navlinks .nav-link:hover, .bk-navlinks .nav-link:focus { color: var(--foreground); } .bk-navlinks .nav-link.active { color: var(--foreground); font-weight: 600; } @media (min-width: 1200px) { .bk-navlinks .nav-link { padding-block: 1.08rem; } .bk-navlinks .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--foreground); border-radius: 2px; } } /* primary cta — built on Bootstrap .btn */ .bk-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding-inline: 18px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); border: none; font-size: 0.93rem; font-weight: 500; transition: opacity .15s ease, transform .05s ease; white-space: nowrap; text-decoration: none; } .bk-btn-primary:hover { background: var(--primary); color: var(--primary-foreground); opacity: .9; } .bk-btn-primary:active { transform: translateY(1px); } .bk-btn-primary svg { width: 15px; height: 15px; } /* avatar — built on Bootstrap .btn */ .bk-avatar { width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); font-size: 0.82rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em; } .bk-avatar:hover { background: var(--secondary); color: var(--muted-foreground); } /* ============================================================ 5. USER MENU (dropdown) ============================================================ */ .bk-menu { width: 300px; max-width: calc(100vw - 1.5rem); margin-top: 10px; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 18px; } .bk-menu__name { font-weight: 600; font-size: 0.98rem; margin: 0; letter-spacing: -0.005em; } .bk-menu__mail { font-family: var(--font-mono); font-size: 0.83rem; color: var(--muted-foreground); margin: 6px 0 0; } .bk-menu__org { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); margin: 10px 0 0; } .bk-menu__rule { border: none; border-top: 1px solid var(--border); margin: 14px 0; } .bk-menu__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 10px; } /* segmented light/dark toggle */ .bk-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--secondary); border-radius: var(--radius-md); padding: 3px; } .bk-seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border: none; background: transparent; border-radius: calc(var(--radius-md) - 2px); color: var(--muted-foreground); font-size: 0.92rem; font-weight: 500; cursor: pointer; } .bk-seg__btn svg { width: 14px; height: 14px; } .bk-seg__btn.is-active { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); } .bk-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: none; background: transparent; border-radius: var(--radius-md); color: var(--foreground); font-size: 0.94rem; text-align: left; cursor: pointer; text-decoration: none; } .bk-menu__item:hover { background: var(--secondary); } .bk-menu__item svg { width: 16px; height: 16px; color: var(--muted-foreground); } .bk-menu__items { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; } /* ============================================================ 6. HERO ============================================================ */ .bk-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; } .bk-memory-top { display: grid; gap: 14px; } .bk-memory-jumbotron { /* display: flex; */ align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; position: relative; overflow: hidden; /* border: 1px solid var(--border); */ border-radius: var(--radius-xl); background: linear-gradient(155deg, var(--surface), color-mix(in srgb, var(--surface) 82%, var(--secondary) 18%)); box-shadow: var(--shadow-sm); padding: 16px; } .bk-memory-jumbotron::after { content: ""; position: absolute; inset: auto -18% -58% auto; width: 270px; height: 270px; border-radius: 999px; background: color-mix(in srgb, var(--bk-mail-bg) 58%, transparent); pointer-events: none; } .bk-memory-jumbotron__content { position: relative; z-index: 1; } .bk-memory-top__title { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.012em; margin: 10px 0; } .bk-memory-top__subtitle { margin: 7px 0 0; color: var(--muted-foreground); font-size: 0.91rem; max-width: 64ch; } .bk-memory-top__ctas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; margin-top: 24px; margin-bottom: 30px; } .bk-quick-cta { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding-inline: 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--foreground); text-decoration: none; font-size: 0.86rem; font-weight: 500; transition: background .15s ease, border-color .15s ease; } .bk-quick-cta:hover { background: var(--secondary); border-color: var(--muted-foreground); } .bk-quick-cta svg { width: 14px; height: 14px; } .bk-quick-cta svg:last-child { width: 13px; height: 13px; color: var(--muted-foreground); } .bk-h1 { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.95rem, 1.2rem + 2.7vw, 2.85rem); line-height: 1.07; letter-spacing: -0.02em; color: var(--foreground); margin: 0; } /* ============================================================ 7. ACTION CARDS ============================================================ */ .bk-card { position: relative; display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 22px; text-decoration: none; color: var(--foreground); transition: border-color .15s ease, background .15s ease; height: 100%; } .bk-card:hover { border-color: var(--muted-foreground); } .bk-card__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--background); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--foreground); margin-bottom: 14px; } .bk-card__icon svg { width: 17px; height: 17px; } .bk-card__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-foreground); } .bk-card__title { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.01em; margin: 6px 0 10px; color: var(--foreground); } .bk-card__desc { font-size: 0.94rem; color: var(--muted-foreground); line-height: 1.48; margin: 0; } .bk-card__arrow { position: absolute; top: 22px; right: 22px; color: var(--muted-foreground); } .bk-card__arrow svg { width: 15px; height: 15px; } /* ============================================================ 8. EMAIL BANNER ============================================================ */ .bk-email { display: inline-flex; align-items: flex-start; gap: 14px; border: 1px dashed oklch(0.2 0 0); border-radius: var(--radius-xl); padding: 18px 20px; position: relative; margin: 10px 0; } .bk-email__icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--bk-mail-bg); color: var(--bk-mail-fg); display: inline-flex; align-items: center; justify-content: center; flex: none; } .bk-email__icon svg { width: 16px; height: 16px; } .bk-email__title { font-size: 1rem; font-weight: 600; margin: 1px 0 6px; letter-spacing: -0.008em; } .bk-email__body {font-size: 1rem;color: var(--foreground);line-height: 1.5;margin: 0;margin-top: 16px;} .bk-email__copy { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; color: var(--muted-foreground); font-size: 0.85rem; cursor: pointer; padding: 3px 6px; border-radius: var(--radius-sm); } .bk-email__copy:hover { background: var(--secondary); color: var(--foreground); } .bk-email__copy svg { width: 13px; height: 13px; } .bk-email--compact { align-items: center; padding: 6px 16px; gap: 10px; } .bk-email--compact .bk-email__icon { width: 34px; height: 34px; } .bk-email--compact .bk-email__title { margin: 0 0 2px; font-size: 0.91rem; } .bk-email--compact .bk-email__body { font-size: 0.78rem; color: var(--muted-foreground); } .bk-email--compact .bk-email__copy { position: static; margin-left: auto; /* border: 1px solid var(--border); */ border-radius: 999px; padding: 6px 10px; font-size: 0.8rem; color: var(--foreground); } @media (max-width: 575.98px) { .bk-memory-jumbotron { padding: 14px; } .bk-memory-top__subtitle { max-width: 100%; } .bk-email { flex-wrap: wrap; } .bk-email__copy { position: static; margin-left: auto; } .bk-email--compact { padding: 12px; } .bk-email--compact .bk-email__copy { width: 100%; justify-content: center; } } /* mono chip (email address + kbd-ish tokens) */ .bk-chip { font-family: var(--font-mono); font-size: 1em; background: #fafafa; /* border: 1px solid var(--border); */ border-radius: var(--radius-sm); padding: 2px 7px; color: oklch(0.2 0 0); white-space: nowrap; padding: 6px 20px; } .bk-chip__icon{ font-size: 0.8em !important; } .bk-chip--email { font-weight: 500; } /* ============================================================ 9. SECTION HEADERS + CONNECTOR TRAY ============================================================ */ .bk-sectionhead { display: flex; align-items: center; gap: 14px; } .bk-sectionhead__title { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: -0.008em; } .bk-btn-outline { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding-inline: 14px; border-radius: var(--radius-md); background: var(--background); border: 1px solid var(--border); color: var(--foreground); font-size: 0.9rem; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-xs); transition: background .15s ease; text-decoration: none; } .bk-btn-outline:hover { background: var(--secondary); } .bk-btn-outline svg { width: 14px; height: 14px; } .bk-tray { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 10px; display: flex; flex-wrap: wrap; gap: 7px; background: var(--background); } .bk-connector { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding-inline: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--foreground); font-size: 0.84rem; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .bk-connector:hover { border-color: var(--muted-foreground); } .bk-connector svg { width: 14px; height: 14px; color: var(--muted-foreground); } /* ============================================================ 10. EMPTY STATE ============================================================ */ .bk-empty { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); min-height: 128px; display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); font-size: 0.92rem; text-align: center; padding: 18px; } /* ============================================================ 11. MEMORY HOME SURFACE ============================================================ */ .bk-quick-cta--primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .bk-quick-cta--primary:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); opacity: .92; } .bk-quick-cta--primary svg:last-child { color: currentColor; opacity: .72; } .bk-statbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--background); overflow: hidden; box-shadow: var(--shadow-xs); } .bk-stat { min-height: 92px; padding: 18px 20px; border-right: 1px solid var(--border); display: grid; align-content: center; gap: 4px; } .bk-stat:last-child { border-right: none; } .bk-stat__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); } .bk-stat__value { font-family: var(--font-mono); font-size: clamp(1.35rem, 1rem + 1.1vw, 1.88rem); line-height: 1; letter-spacing: -0.04em; color: var(--foreground); } .bk-stat__detail { color: var(--muted-foreground); font-size: 0.82rem; } .bk-section { position: relative; } .bk-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; } .bk-section__title { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.012em; margin: 0; } .bk-section__meta { color: var(--muted-foreground); margin: 6px 0 0; font-size: 0.88rem; } .bk-section__action { color: var(--muted-foreground); text-decoration: none; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .bk-section__action:hover { color: var(--foreground); } .bk-constellation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .bk-constellation { min-height: 292px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); color: var(--foreground); text-align: left; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .bk-constellation:hover, .bk-constellation:focus-visible { border-color: color-mix(in srgb, var(--foreground) 34%, var(--border)); outline: none; } .bk-constellation.is-selected { border-color: color-mix(in srgb, var(--bk-coral) 72%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-coral) 50%, transparent), var(--shadow-sm); } .bk-constellation__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bk-constellation__type, .bk-constellation__status { display: inline-flex; align-items: center; height: 24px; padding-inline: 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .bk-constellation__type { color: color-mix(in srgb, var(--bk-blue) 54%, var(--foreground)); border-color: color-mix(in srgb, var(--bk-blue) 28%, var(--border)); } .bk-constellation__nameline { display: flex; align-items: center; gap: 9px; } .bk-icon-slot { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--background); color: var(--foreground); } .bk-icon-slot svg { width: 14px; height: 14px; } .bk-constellation__name { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.015em; } .bk-constellation__desc { color: var(--muted-foreground); font-size: 0.86rem; line-height: 1.45; } .bk-constellation__signal { margin-top: 3px; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--background) 86%, var(--surface) 14%); min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; } .bk-constellation__signal-track { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; width: 100%; } .bk-constellation__signal-dot { width: 5px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--muted-foreground) 22%, transparent); } .bk-constellation__signal-dot.is-filled { opacity: 1; } .bk-constellation__signal-dot--blue.is-filled { background: color-mix(in srgb, var(--bk-blue) 74%, var(--foreground)); } .bk-constellation__signal-dot--green.is-filled { background: color-mix(in srgb, #2aaf7f 70%, var(--foreground)); } .bk-constellation__signal-dot--amber.is-filled { background: color-mix(in srgb, #c1892c 76%, var(--foreground)); } .bk-constellation__signal-dot--slate.is-filled { background: color-mix(in srgb, var(--foreground) 62%, var(--muted-foreground)); } .bk-constellation__signal-more { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; white-space: nowrap; } .bk-constellation__metrics { margin-top: 2px; color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; display: flex; flex-wrap: wrap; gap: 8px 14px; } .bk-constellation__metrics span { display: inline-flex; align-items: center; gap: 6px; } .bk-constellation__metrics svg { width: 12px; height: 12px; } .bk-constellation__highlights { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 6px; color: var(--foreground); font-size: 0.86rem; line-height: 1.3; } .bk-constellation__highlights span { position: relative; padding-left: 12px; } .bk-constellation__highlights span::before { content: ""; position: absolute; left: 0; top: .45rem; width: 4px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--foreground) 58%, var(--muted-foreground)); } .bk-constellation--create { border-style: dashed; background: color-mix(in srgb, var(--surface) 74%, var(--background) 26%); } .bk-constellation--create .bk-icon-slot { color: var(--bk-coral); border-color: color-mix(in srgb, var(--bk-coral) 38%, var(--border)); } .bk-constellation--create .bk-constellation__name { margin-top: 4px; } .bk-constellation--create .bk-constellation__metrics { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); } .bk-health { display: inline-flex; align-items: center; height: 25px; padding-inline: 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .bk-health--healthy { border-color: color-mix(in srgb, #1f9d63 34%, var(--border)); color: color-mix(in srgb, #1f9d63 78%, var(--foreground)); } .bk-health--growing { border-color: color-mix(in srgb, var(--bk-blue) 38%, var(--border)); color: color-mix(in srgb, var(--bk-blue) 78%, var(--foreground)); } .bk-health--attention { border-color: color-mix(in srgb, var(--bk-coral) 42%, var(--border)); color: color-mix(in srgb, var(--bk-coral) 82%, var(--foreground)); } .bk-memory-surface { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .75fr); gap: 20px; align-items: stretch; } .bk-memory-surface__main, .bk-memory-surface__aside { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xs); padding: 22px; } .bk-memory-surface__aside { background: radial-gradient(circle at top right, color-mix(in srgb, var(--bk-mail-bg) 55%, transparent), transparent 42%), var(--surface); } .bk-memory-surface__aside-title { margin: 8px 0 0; font-size: 1.08rem; font-weight: 650; line-height: 1.35; letter-spacing: -0.015em; } .bk-map-tree { display: grid; gap: 8px; } .bk-map-tree__item { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); overflow: hidden; } .bk-map-tree__button { width: 100%; min-height: 48px; padding: 9px 12px; display: grid; grid-template-columns: 30px 1fr auto 18px; align-items: center; gap: 10px; border: none; background: transparent; color: var(--foreground); text-align: left; font-weight: 600; cursor: pointer; } .bk-map-tree__button:focus-visible { outline: 2px solid color-mix(in srgb, var(--bk-blue) 64%, transparent); outline-offset: -2px; } .bk-map-tree__icon { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); } .bk-map-tree__icon svg, .bk-map-tree__chevron { width: 14px; height: 14px; } .bk-map-tree__count { font-family: var(--font-mono); color: var(--muted-foreground); font-size: 0.75rem; } .bk-map-tree__detail { border-top: 1px solid var(--border); margin: 0; padding: 10px 12px 12px 52px; color: var(--muted-foreground); font-size: 0.86rem; } .bk-trust-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; } .bk-trust-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--muted-foreground); font-size: 0.88rem; line-height: 1.45; } .bk-trust-list svg { width: 16px; height: 16px; color: var(--foreground); margin-top: 2px; } .bk-context-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .bk-context-pack { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); padding: 18px; box-shadow: var(--shadow-xs); min-height: 178px; display: flex; flex-direction: column; gap: 12px; } .bk-context-pack__type { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-foreground); } .bk-context-pack__title { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.012em; line-height: 1.35; } .bk-context-pack__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted-foreground); font-size: 0.82rem; margin: 0; } .bk-context-pack__footer { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--foreground); font-size: 0.86rem; font-weight: 500; } .bk-context-pack__footer svg { width: 15px; height: 15px; color: var(--bk-coral); } .bk-context-empty { min-height: 154px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; border: 1px dashed var(--border); border-radius: var(--radius-xl); background: var(--surface); padding: 20px; } .bk-context-empty__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--background); border: 1px solid var(--border); color: var(--bk-coral); } .bk-context-empty__icon svg { width: 18px; height: 18px; } .bk-context-empty__title { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; } .bk-context-empty__body { margin: 5px 0 0; color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.5; max-width: 72ch; } /* ---- Recent processed inputs (compact intake table) ---- */ .bk-intake { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; } .bk-intake__head, .bk-intake__row { display: grid; grid-template-columns: minmax(0, 1fr) 128px 152px 124px 52px; align-items: center; gap: 14px; padding: 0 16px; } .bk-intake__head { height: 34px; border-bottom: 1px solid var(--border); background: var(--background); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); } .bk-intake__th-time { text-align: right; } .bk-intake__list { max-height: 440px; overflow-y: auto; } .bk-intake__row { height: 41px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); font-size: 0.82rem; transition: background 0.12s ease; text-decoration: none; color: inherit; } .bk-intake__row:last-child { border-bottom: none; } .bk-intake__row:hover { background: color-mix(in srgb, var(--bk-blue) 5%, var(--surface)); } .bk-intake__file { display: flex; align-items: center; gap: 10px; min-width: 0; } .bk-intake__ftype { flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); color: var(--muted-foreground); } .bk-intake__ftype svg { width: 13px; height: 13px; } .bk-intake__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; color: var(--foreground); } .bk-intake__ext { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 5px; } .bk-intake__channel { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-foreground); font-size: 0.78rem; min-width: 0; } .bk-intake__channel svg { width: 13px; height: 13px; flex: 0 0 auto; } .bk-intake__channel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-intake__cst { min-width: 0; } .bk-intake__cst .bk-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-intake__status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.76rem; font-weight: 550; white-space: nowrap; } .bk-intake__status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--muted-foreground); } .bk-intake__time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted-foreground); text-align: right; } /* file-type tints */ .bk-intake__ftype--coral { color: var(--bk-coral); background: color-mix(in srgb, var(--bk-coral) 12%, transparent); border-color: color-mix(in srgb, var(--bk-coral) 26%, var(--border)); } .bk-intake__ftype--blue { color: var(--bk-blue); background: color-mix(in srgb, var(--bk-blue) 12%, transparent); border-color: color-mix(in srgb, var(--bk-blue) 26%, var(--border)); } .bk-intake__ftype--violet { color: var(--bk-mail-fg); background: color-mix(in srgb, var(--bk-mail-fg) 14%, transparent); border-color: color-mix(in srgb, var(--bk-mail-fg) 30%, var(--border)); } .bk-intake__ftype--green { color: #1f9d63; background: color-mix(in srgb, #1f9d63 12%, transparent); border-color: color-mix(in srgb, #1f9d63 26%, var(--border)); } .bk-intake__ftype--amber { color: #b07d12; background: color-mix(in srgb, #e0a93b 16%, transparent); border-color: color-mix(in srgb, #e0a93b 34%, var(--border)); } .bk-intake__ftype--slate { color: var(--muted-foreground); background: color-mix(in srgb, var(--muted-foreground) 12%, transparent); } /* status tones */ .bk-intake__status--published { color: color-mix(in srgb, #1f9d63 78%, var(--foreground)); } .bk-intake__status--published .bk-intake__status-dot { background: #1f9d63; } .bk-intake__status--processing { color: color-mix(in srgb, var(--bk-blue) 82%, var(--foreground)); } .bk-intake__status--processing .bk-intake__status-dot { background: var(--bk-blue); animation: bk-intake-pulse 1.6s ease-out infinite; } .bk-intake__status--queued { color: var(--muted-foreground); } .bk-intake__status--queued .bk-intake__status-dot { background: var(--muted-foreground); } .bk-intake__status--failed { color: color-mix(in srgb, var(--bk-coral) 84%, var(--foreground)); } .bk-intake__status--failed .bk-intake__status-dot { background: var(--bk-coral); } @keyframes bk-intake-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bk-blue) 50%, transparent); } 70% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--bk-blue) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bk-blue) 0%, transparent); } } @media (max-width: 991.98px) { .bk-statbar, .bk-constellation-grid, .bk-context-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-stat:nth-child(2) { border-right: none; } .bk-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); } .bk-memory-surface { grid-template-columns: 1fr; } .bk-intake__head, .bk-intake__row { grid-template-columns: minmax(0, 1fr) 128px 110px 52px; } .bk-intake__cst { display: none; } } @media (max-width: 575.98px) { .bk-statbar, .bk-constellation-grid, .bk-context-pack-grid { grid-template-columns: 1fr; } .bk-stat { border-right: none; border-bottom: 1px solid var(--border); min-height: 82px; } .bk-stat:last-child { border-bottom: none; } .bk-section__header { align-items: flex-start; flex-direction: column; } .bk-constellation { min-height: 196px; } .bk-context-empty { grid-template-columns: 1fr; align-items: flex-start; } .bk-context-empty .bk-btn-outline { width: 100%; justify-content: center; } .bk-intake__head, .bk-intake__row { grid-template-columns: minmax(0, 1fr) 96px 48px; gap: 10px; } .bk-intake__channel { display: none; } } /* ============================================================ 12. SOURCES TIMELINE ============================================================ */ .bk-source-section { display: grid; gap: 14px; } .bk-source-section__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .bk-source-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .bk-source-filter { height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted-foreground); font-size: 0.78rem; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; padding-inline: 10px; } .bk-source-filter:hover { border-color: var(--muted-foreground); color: var(--foreground); } .bk-source-filter.is-active { background: var(--foreground); border-color: var(--foreground); color: var(--background); } .bk-source-log { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); overflow: hidden; } .bk-source-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); align-items: center; } .bk-source-item:last-child { border-bottom: none; } .bk-source-item__icon { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; } .bk-source-item__icon svg { width: 13px; height: 13px; } .bk-source-item__content { min-width: 0; } .bk-source-item__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bk-source-item__title { margin: 0; font-size: 0.96rem; letter-spacing: -0.01em; font-family: var(--font-mono); } .bk-source-pill, .bk-source-item__channel, .bk-source-status { height: 22px; border-radius: 999px; display: inline-flex; align-items: center; padding-inline: 8px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border); background: var(--background); } .bk-source-pill { color: color-mix(in srgb, var(--bk-blue) 72%, var(--foreground)); border-color: color-mix(in srgb, var(--bk-blue) 24%, var(--border)); } .bk-source-item__channel { color: var(--muted-foreground); } .bk-source-item__meta { margin: 8px 0 0; color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bk-source-item__origin { margin: 6px 0 0; color: var(--muted-foreground); font-size: 0.8rem; } .bk-source-item__time { display: grid; justify-items: end; gap: 2px; min-width: 165px; } .bk-source-item__relative { font-size: 0.82rem; color: var(--foreground); font-weight: 500; } .bk-source-item__stamp { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.7rem; } .bk-source-status { margin-top: 4px; color: var(--muted-foreground); } .bk-source-status--processed { color: color-mix(in srgb, #1f9d63 78%, var(--foreground)); border-color: color-mix(in srgb, #1f9d63 35%, var(--border)); } .bk-source-status--running { color: color-mix(in srgb, var(--bk-blue) 78%, var(--foreground)); border-color: color-mix(in srgb, var(--bk-blue) 32%, var(--border)); } .bk-source-status--review { color: color-mix(in srgb, var(--bk-coral) 78%, var(--foreground)); border-color: color-mix(in srgb, var(--bk-coral) 34%, var(--border)); } @media (max-width: 767.98px) { .bk-source-item { grid-template-columns: 30px minmax(0, 1fr); align-items: start; } .bk-source-item__time { grid-column: 2 / -1; justify-items: start; min-width: 0; margin-top: 8px; } } /* ============================================================ 13. CONSTELLATION DETAIL ("enter the world") ============================================================ */ /* tone helpers shared by header icon, map nodes, entity icons */ .bk-tone-blue { --tone: var(--bk-blue); } .bk-tone-green { --tone: #2aaf7f; } .bk-tone-amber { --tone: #c1892c; } .bk-tone-coral { --tone: var(--bk-coral); } .bk-tone-slate { --tone: var(--muted-foreground); } .bk-cst-back { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-foreground); text-decoration: none; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; } .bk-cst-back:hover { color: var(--foreground); } .bk-cst-back svg { width: 14px; height: 14px; } /* header */ .bk-cst-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .bk-cst-head__main { display: flex; gap: 16px; align-items: flex-start; min-width: 0; } .bk-cst-head__icon { width: 52px; height: 52px; flex: none; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tone, var(--foreground)) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone, var(--border)) 32%, var(--border)); color: color-mix(in srgb, var(--tone, var(--foreground)) 78%, var(--foreground)); } .bk-cst-head__icon svg { width: 22px; height: 22px; } .bk-cst-head__kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bk-cst-type { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--bk-blue) 54%, var(--foreground)); border: 1px solid color-mix(in srgb, var(--bk-blue) 28%, var(--border)); border-radius: 999px; padding: 2px 8px; } .bk-cst-restricted { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--bk-coral) 80%, var(--foreground)); } .bk-cst-restricted svg { width: 12px; height: 12px; } .bk-cst-title { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 0; } .bk-cst-desc { margin: 8px 0 0; color: var(--muted-foreground); font-size: 0.95rem; max-width: 70ch; line-height: 1.5; } .bk-cst-head__actions { display: flex; gap: 8px; flex-wrap: wrap; } .bk-cst-head__actions .bk-btn-primary svg, .bk-cst-head__actions .bk-btn-outline svg { width: 15px; height: 15px; } /* vitals strip */ .bk-cst-vitals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--background); overflow: hidden; box-shadow: var(--shadow-xs); } .bk-cst-vital { padding: 14px 16px; border-right: 1px solid var(--border); display: grid; gap: 3px; align-content: center; } .bk-cst-vital:last-child { border-right: none; } .bk-cst-vital--quality { background: color-mix(in srgb, var(--bk-mail-bg) 30%, var(--background)); } .bk-cst-vital__icon { color: var(--muted-foreground); } .bk-cst-vital__icon svg { width: 15px; height: 15px; } .bk-cst-vital__value { font-family: var(--font-mono); font-size: 1.5rem; line-height: 1; letter-spacing: -0.04em; color: var(--foreground); } .bk-cst-vital__label { font-size: 0.74rem; color: var(--muted-foreground); } /* knowledge map */ .bk-cst-map { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 18px; align-items: stretch; } .bk-cst-map--full { display: block; } .bk-cst-map__canvas { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xs); padding: 10px; min-height: 300px; display: flex; } .bk-cst-map__canvas svg { width: 100%; height: auto; } .bk-cst-edges line { stroke: color-mix(in srgb, var(--muted-foreground) 16%, transparent); stroke-width: 0.15; transition: stroke .2s ease, stroke-width .2s ease; } .bk-cst-edges line.is-active { stroke: color-mix(in srgb, var(--foreground) 22%, transparent); stroke-width: 0.28; } /* All node types muted by default; type color surfaces on interaction */ .bk-cst-node { cursor: pointer; --node: var(--muted-foreground); } .bk-cst-node--blue, .bk-cst-node--green, .bk-cst-node--amber, .bk-cst-node--coral, .bk-cst-node--slate { --node: var(--muted-foreground); } .bk-cst-node--blue:hover, .bk-cst-node--blue.is-active { --node: var(--bk-blue); } .bk-cst-node--green:hover, .bk-cst-node--green.is-active { --node: #2aaf7f; } .bk-cst-node--amber:hover, .bk-cst-node--amber.is-active { --node: #c1892c; } .bk-cst-node--coral:hover, .bk-cst-node--coral.is-active { --node: var(--bk-coral); } .bk-cst-node__halo { fill: color-mix(in srgb, var(--node) 18%, transparent); opacity: 0; transition: opacity .2s ease; } .bk-cst-node__dot { fill: var(--surface); stroke: var(--node); stroke-width: 0.35; transition: fill .2s ease, stroke .2s ease, stroke-width .2s ease; } .bk-cst-node__label { fill: var(--muted-foreground); font-family: var(--font-mono); font-size: 2.0px; letter-spacing: -0.02em; transition: fill .2s ease; } .bk-cst-node:hover .bk-cst-node__halo { opacity: .45; } .bk-cst-node:hover .bk-cst-node__dot { stroke-width: 0.5; } .bk-cst-node:hover .bk-cst-node__label { fill: var(--foreground); } .bk-cst-node.is-active .bk-cst-node__halo { opacity: .7; } .bk-cst-node.is-active .bk-cst-node__dot { fill: color-mix(in srgb, var(--node) 16%, var(--surface)); stroke-width: 0.6; } .bk-cst-node.is-active .bk-cst-node__label { fill: var(--foreground); font-weight: 600; } .bk-cst-node:focus-visible { outline: none; } .bk-cst-node:focus-visible .bk-cst-node__halo { opacity: .7; } /* inspector */ .bk-cst-inspector { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xs); padding: 20px; display: flex; flex-direction: column; gap: 14px; } .bk-cst-inspector__head { display: flex; align-items: center; gap: 12px; } .bk-cst-inspector__icon { width: 38px; height: 38px; flex: none; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tone, var(--foreground)) 14%, var(--background)); border: 1px solid color-mix(in srgb, var(--tone, var(--border)) 34%, var(--border)); color: color-mix(in srgb, var(--tone, var(--foreground)) 80%, var(--foreground)); } .bk-cst-inspector__icon svg { width: 17px; height: 17px; } .bk-cst-inspector__type { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-foreground); } .bk-cst-inspector__name { font-size: 1.12rem; font-weight: 650; letter-spacing: -0.015em; margin: 2px 0 0; } .bk-cst-inspector__summary { color: var(--foreground); font-size: 0.92rem; line-height: 1.5; margin: 0; } .bk-cst-inspector__metrics { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 0.78rem; color: var(--muted-foreground); } .bk-cst-inspector__metrics strong { color: var(--foreground); font-family: var(--font-mono); font-size: 0.95rem; } .bk-cst-inspector__metrics span { display: inline-flex; flex-direction: column; gap: 1px; } .bk-cst-inspector__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); margin: 0; } .bk-cst-inspector__links { display: flex; flex-wrap: wrap; gap: 6px; } .bk-cst-inspector__open { margin-top: auto; align-self: flex-start; } /* context pack spotlight */ .bk-pack { border: 1px solid color-mix(in srgb, var(--bk-blue) 22%, var(--border)); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .bk-pack__query { padding: 18px 22px; background: var(--surface); border-bottom: 1px solid var(--border); } .bk-pack__query-label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-foreground); } .bk-pack__query-label svg { width: 13px; height: 13px; } .bk-pack__query-text { margin: 8px 0 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); } .bk-pack__body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 22px; } .bk-pack__col { display: flex; flex-direction: column; gap: 18px; } .bk-pack__block-title { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 8px; } .bk-pack__block-title svg { width: 13px; height: 13px; } .bk-pack__summary { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--foreground); } .bk-pack__memories { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .bk-pack__memories li { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; } .bk-pack__memory-text { font-size: 0.88rem; color: var(--foreground); line-height: 1.4; } .bk-pack__cite { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-foreground); } .bk-pack__list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 7px; } .bk-pack__list li { position: relative; padding-left: 16px; font-size: 0.88rem; color: var(--foreground); line-height: 1.45; } .bk-pack__list li::before { content: ""; position: absolute; left: 2px; top: .5rem; width: 5px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--bk-coral) 70%, var(--foreground)); } .bk-pack__list--checks li::before { background: color-mix(in srgb, #2aaf7f 70%, var(--foreground)); } .bk-pack__chips { display: flex; flex-wrap: wrap; gap: 6px; } .bk-pack__footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--secondary) 40%, var(--surface)); } .bk-pack__trust { display: flex; flex-wrap: wrap; gap: 8px; } .bk-pack__badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--background); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--muted-foreground); } .bk-pack__badge svg { width: 12px; height: 12px; } .bk-pack__badge--confidence { color: color-mix(in srgb, #1f9d63 80%, var(--foreground)); border-color: color-mix(in srgb, #1f9d63 34%, var(--border)); } .bk-chip--decision { color: color-mix(in srgb, var(--bk-coral) 78%, var(--foreground)); border-color: color-mix(in srgb, var(--bk-coral) 30%, var(--border)); } /* pack strip */ .bk-cst-substack-title { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); margin: 22px 0 10px; } .bk-cst-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .bk-cst-strip__item { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 12px 14px; text-decoration: none; color: var(--foreground); transition: border-color .15s ease; } .bk-cst-strip__item:hover { border-color: var(--muted-foreground); } .bk-cst-strip__icon { width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; } .bk-cst-strip__icon svg { width: 15px; height: 15px; } .bk-cst-strip__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bk-cst-strip__type { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); } .bk-cst-strip__title { font-size: 0.88rem; font-weight: 550; letter-spacing: -0.01em; } .bk-cst-strip__fresh { margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-foreground); white-space: nowrap; } /* split panels (structure/decisions, feed/governance) */ .bk-cst-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .bk-cst-panel { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xs); padding: 22px; } .bk-cst-panel .bk-map-tree__button { cursor: pointer; text-decoration: none; } /* decision lineage */ .bk-decision-line { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .bk-decision { display: grid; grid-template-columns: 14px 1fr; gap: 12px; } .bk-decision__rail { position: relative; } .bk-decision__rail::before { content: ""; position: absolute; left: 5px; top: 4px; width: 6px; height: 6px; border-radius: 999px; background: color-mix(in srgb, #1f9d63 70%, var(--foreground)); } .bk-decision__rail::after { content: ""; position: absolute; left: 7.5px; top: 12px; bottom: -16px; width: 1px; background: var(--border); } .bk-decision:last-child .bk-decision__rail::after { display: none; } .bk-decision--superseded .bk-decision__rail::before { background: var(--muted-foreground); } .bk-decision--proposed .bk-decision__rail::before { background: color-mix(in srgb, var(--bk-blue) 70%, var(--foreground)); } .bk-decision__body { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); padding: 12px 14px; } .bk-decision__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .bk-decision__title { font-size: 0.96rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .bk-decision--superseded .bk-decision__title { color: var(--muted-foreground); text-decoration: line-through; text-decoration-thickness: 1px; } .bk-decision__status { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; } .bk-decision__status--active { color: color-mix(in srgb, #1f9d63 80%, var(--foreground)); border-color: color-mix(in srgb, #1f9d63 34%, var(--border)); } .bk-decision__status--superseded { color: var(--muted-foreground); } .bk-decision__status--proposed { color: color-mix(in srgb, var(--bk-blue) 78%, var(--foreground)); border-color: color-mix(in srgb, var(--bk-blue) 32%, var(--border)); } .bk-decision__note { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted-foreground); line-height: 1.45; } .bk-decision__meta { margin: 9px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-foreground); } .bk-decision__meta span { display: inline-flex; align-items: center; gap: 5px; } .bk-decision__meta svg { width: 11px; height: 11px; } /* entities */ .bk-entity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .bk-entity { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); padding: 16px; text-decoration: none; color: var(--foreground); box-shadow: var(--shadow-xs); transition: border-color .15s ease; } .bk-entity:hover { border-color: var(--muted-foreground); } .bk-entity__icon { width: 38px; height: 38px; grid-row: 1 / 3; align-self: start; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tone, var(--foreground)) 13%, var(--background)); border: 1px solid color-mix(in srgb, var(--tone, var(--border)) 32%, var(--border)); color: color-mix(in srgb, var(--tone, var(--foreground)) 80%, var(--foreground)); } .bk-entity__icon svg { width: 17px; height: 17px; } .bk-entity__type { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); } .bk-entity__name { font-size: 1rem; font-weight: 650; letter-spacing: -0.012em; margin: 1px 0 0; } .bk-entity__note { margin: 3px 0 0; font-size: 0.82rem; color: var(--muted-foreground); } .bk-entity__meta { grid-column: 1 / 3; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-foreground); } /* recent memories feed */ .bk-feed { display: grid; gap: 8px; } .bk-feed__item { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); padding: 12px 14px; } .bk-feed__icon { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; } .bk-feed__icon svg { width: 14px; height: 14px; } .bk-feed__text { margin: 0; font-size: 0.9rem; color: var(--foreground); line-height: 1.4; } .bk-feed__meta { margin: 7px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-foreground); } .bk-feed__confidence { font-family: var(--font-mono); font-size: 0.78rem; color: color-mix(in srgb, #1f9d63 80%, var(--foreground)); white-space: nowrap; } /* agent activity log */ .bk-agent-log { display: grid; gap: 8px; } .bk-agent-log__item { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); padding: 11px 13px; } .bk-agent-log__item.is-denied { border-color: color-mix(in srgb, var(--bk-coral) 30%, var(--border)); background: color-mix(in srgb, var(--bk-coral) 5%, var(--background)); } .bk-agent-log__icon { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; } .bk-agent-log__icon svg { width: 14px; height: 14px; } .bk-agent-log__name { margin: 0; font-size: 0.85rem; font-weight: 600; } .bk-agent-log__prompt { margin: 2px 0 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted-foreground); } .bk-agent-log__result { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; } .bk-agent-log__served { font-size: 0.74rem; color: var(--muted-foreground); } .bk-agent-log__served--denied { display: inline-flex; align-items: center; gap: 5px; color: color-mix(in srgb, var(--bk-coral) 82%, var(--foreground)); font-weight: 500; } .bk-agent-log__served svg { width: 12px; height: 12px; } .bk-agent-log__time { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted-foreground); } .bk-cst-gov-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .bk-cst-gov-foot .bk-meta { display: inline-flex; align-items: center; gap: 6px; } .bk-cst-gov-foot svg { width: 13px; height: 13px; } /* responsive */ @media (max-width: 991.98px) { .bk-cst-vitals { grid-template-columns: repeat(5, minmax(0, 1fr)); } .bk-cst-map, .bk-cst-split, .bk-pack__body { grid-template-columns: 1fr; } .bk-entity-grid, .bk-cst-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .bk-cst-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-cst-head__actions { width: 100%; } .bk-cst-head__actions .bk-btn-primary, .bk-cst-head__actions .bk-btn-outline { flex: 1; justify-content: center; } .bk-entity-grid, .bk-cst-strip { grid-template-columns: 1fr; } } /* ============================================================ 14. FOOTER ============================================================ */ .bk-footer { border-top: 1px solid var(--border); } .bk-footer__inner { display: flex; align-items: center; justify-content: space-between; height: 60px; flex-wrap: wrap; gap: 16px; } .bk-footer__brand { color: var(--muted-foreground); font-size: 0.86rem; } .bk-footer__links { display: flex; gap: 20px; } .bk-footer__link { color: var(--muted-foreground); text-decoration: none; font-size: 0.86rem; } .bk-footer__link:hover { color: var(--foreground); } /* tighten Bootstrap spacing usage in this page only */ main.container.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } /* ============================================================ INGESTION — upload, files, timeline, artifacts, memory ============================================================ */ .bk-dropzone { border: 1.5px dashed var(--border); border-radius: var(--radius-xl); padding: 32px; text-align: center; cursor: pointer; color: var(--muted-foreground); transition: border-color .15s ease, background .15s ease; } .bk-dropzone:hover, .bk-dropzone.is-dragover { border-color: var(--muted-foreground); background: var(--background); } .bk-dropzone i { width: 28px; height: 28px; margin-bottom: 8px; } .bk-upload-options { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; border-top: 1px solid var(--border); } .bk-upload-options__routing { max-width: 36rem; } .bk-upload-routing-select { max-width: 16rem; } .bk-upload-options__actions { display: flex; justify-content: flex-end; } .bk-constellation-pick { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; background: color-mix(in srgb, var(--secondary) 35%, var(--card)); } .bk-constellation-pick__title { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; } .bk-constellation-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; margin-bottom: 12px; } .bk-constellation-pick__item { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); cursor: pointer; font-size: 0.88rem; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .bk-constellation-pick__item:hover { border-color: color-mix(in srgb, var(--muted-foreground) 45%, var(--border)); } .bk-constellation-pick__item.is-checked { border-color: color-mix(in srgb, var(--bk-accent, #1a73e8) 50%, var(--border)); background: color-mix(in srgb, var(--bk-accent, #1a73e8) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-accent, #1a73e8) 18%, transparent); } .bk-constellation-pick__item .form-check-input { margin: 0; flex: 0 0 auto; } .bk-constellation-pick__item span { flex: 1 1 auto; min-width: 0; } .bk-constellation-pick__company { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); border: 1px dashed color-mix(in srgb, var(--muted-foreground) 35%, var(--border)); background: var(--card); color: var(--muted-foreground); font-size: 0.82rem; } .bk-constellation-pick__company i, .bk-constellation-pick__company svg { width: 16px; height: 16px; flex: 0 0 auto; } .bk-filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .bk-filelist__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); } .bk-filelist__item i { width: 18px; height: 18px; color: var(--muted-foreground); } .bk-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .bk-timeline__item { display: flex; gap: 10px; align-items: flex-start; } .bk-timeline__item .bk-dot { margin-top: 6px; } .bk-markdown { white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; line-height: 1.5; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; max-height: 560px; overflow: auto; color: var(--foreground); } .bk-memory-unit { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--background); } /* ============================================================ STORAGE INTEGRATION TEMPLATE ============================================================ */ [x-cloak] { display: none !important; } .bk-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--muted-foreground) 35%, transparent); border-top-color: var(--foreground); border-radius: 50%; animation: bk-spin 0.7s linear infinite; vertical-align: -2px; } .bk-spinner--light { border-color: rgba(255,255,255,0.45); border-top-color: #fff; } @keyframes bk-spin { to { transform: rotate(360deg); } } /* hero */ .bk-conn-hero { display: flex; align-items: flex-start; gap: 18px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--bk-accent, #1a73e8) 10%, transparent), transparent 60%), var(--card); box-shadow: var(--shadow-sm); } .bk-conn-hero__icon { flex: 0 0 auto; width: 54px; height: 54px; display: grid; place-items: center; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bk-accent, #1a73e8) 14%, transparent); color: var(--bk-accent, #1a73e8); } .bk-conn-hero__icon svg { width: 26px; height: 26px; } .bk-conn-hero__body { flex: 1 1 auto; min-width: 0; } .bk-conn-hero__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .bk-conn-hero__title { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; } .bk-conn-hero__desc { color: var(--muted-foreground); margin: 0 0 8px; max-width: 60ch; } .bk-conn-hero__actions { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; } @media (max-width: 720px) { .bk-conn-hero { flex-direction: column; } .bk-conn-hero__actions { flex-direction: row; width: 100%; } } /* status pill */ .bk-status-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; font-weight: 600; border: 1px solid transparent; } .bk-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .bk-status-pill--ok { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); } .bk-status-pill--warn { color: #d97706; background: color-mix(in srgb, #d97706 14%, transparent); } .bk-status-pill--err { color: #dc2626; background: color-mix(in srgb, #dc2626 12%, transparent); } .bk-status-pill--idle { color: var(--muted-foreground); background: var(--secondary); } .bk-status-pill--running { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, transparent); } .bk-status-pill--running::before { animation: bk-pulse 1.1s ease-in-out infinite; } @keyframes bk-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } /* progress */ .bk-run-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); } .bk-progress { height: 10px; border-radius: 999px; background: var(--secondary); overflow: hidden; } .bk-progress__bar { height: 100%; border-radius: 999px; background: var(--bk-accent, #1a73e8); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .bk-progress--active .bk-progress__bar { background-image: linear-gradient(45deg, rgba(255,255,255,0.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25) 75%, transparent 75%, transparent); background-size: 1rem 1rem; animation: bk-stripes 1s linear infinite; } @keyframes bk-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } } .bk-counter-chips { display: flex; flex-wrap: wrap; gap: 8px 16px; } .bk-counter { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted-foreground); } .bk-counter b { color: var(--foreground); font-weight: 600; } .bk-counter__dot { width: 8px; height: 8px; border-radius: 50%; } .bk-counter__dot--blue { background: #2563eb; } .bk-counter__dot--amber { background: #d97706; } .bk-counter__dot--green { background: #16a34a; } .bk-counter__dot--slate { background: #64748b; } .bk-counter__dot--red { background: #dc2626; } /* stat tiles */ .bk-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 720px) { .bk-stat-grid { grid-template-columns: repeat(2, 1fr); } } .bk-stat-tile { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--card); } .bk-stat-tile__label { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); } .bk-stat-tile__value { display: block; font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; } .bk-stat-tile--green .bk-stat-tile__value { color: #16a34a; } .bk-stat-tile--slate .bk-stat-tile__value { color: #64748b; } .bk-stat-tile--red .bk-stat-tile__value { color: #dc2626; } /* empty / error states */ .bk-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 28px 16px; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius-md); } .bk-empty-state svg { width: 26px; height: 26px; opacity: 0.7; } .bk-empty-state--error { border-color: color-mix(in srgb, #dc2626 35%, var(--border)); color: #dc2626; } /* picker layout */ .bk-picker { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } @media (max-width: 860px) { .bk-picker { grid-template-columns: 1fr; } } .bk-picker__pane, .bk-picker__selection { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; background: var(--surface); } .bk-picker__toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; } .bk-seg--source { flex: 0 0 auto; } .bk-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 5px 10px; background: var(--card); flex: 1 1 160px; min-width: 140px; } .bk-search svg { width: 15px; height: 15px; color: var(--muted-foreground); } .bk-search input { border: 0; outline: 0; background: transparent; width: 100%; color: var(--foreground); font-size: 0.9rem; } /* breadcrumbs */ .bk-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 10px; } .bk-crumb { border: 0; background: transparent; padding: 2px 6px; border-radius: var(--radius-sm); color: var(--muted-foreground); font-size: 0.85rem; cursor: pointer; } .bk-crumb:hover { background: var(--secondary); color: var(--foreground); } .bk-crumb.is-current { color: var(--foreground); font-weight: 600; } .bk-crumb__sep { width: 13px; height: 13px; color: var(--muted-foreground); } /* browse list */ .bk-browse-list { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; } .bk-browse-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid transparent; } .bk-browse-item:hover { background: var(--secondary); } .bk-browse-item.is-selected { border-color: color-mix(in srgb, var(--bk-accent, #1a73e8) 45%, transparent); background: color-mix(in srgb, var(--bk-accent, #1a73e8) 8%, transparent); } .bk-browse-item__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--secondary); color: var(--muted-foreground); flex: 0 0 auto; } .bk-browse-item.is-folder .bk-browse-item__icon { color: var(--bk-accent, #1a73e8); background: color-mix(in srgb, var(--bk-accent, #1a73e8) 12%, transparent); } .bk-browse-item__icon svg { width: 16px; height: 16px; } .bk-browse-item__name { flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: transparent; color: var(--foreground); cursor: pointer; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-browse-item__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .bk-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); cursor: pointer; } .bk-icon-btn:hover { background: var(--secondary); color: var(--foreground); } .bk-icon-btn svg { width: 15px; height: 15px; } /* skeleton shimmer */ .bk-skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--secondary) 25%, color-mix(in srgb, var(--secondary) 60%, var(--card)) 37%, var(--secondary) 63%); background-size: 400% 100%; animation: bk-shimmer 1.4s ease infinite; } .bk-skeleton--row { height: 46px; margin-bottom: 4px; } @keyframes bk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* selection chips */ .bk-chip-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow: auto; } .bk-selchip { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); } .bk-selchip svg { width: 15px; height: 15px; color: var(--bk-accent, #1a73e8); flex: 0 0 auto; } .bk-selchip span { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; } .bk-selchip__remove { margin-left: auto; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; display: grid; place-items: center; } .bk-selchip__remove:hover { color: #dc2626; } .bk-selchip__remove svg { width: 14px; height: 14px; color: inherit; } .bk-picker__options { display: flex; flex-direction: column; gap: 6px; } .bk-picker__options .form-check-label { font-size: 0.88rem; } /* file rows */ .bk-filerows { display: flex; flex-direction: column; } .bk-filerow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .bk-filerow:last-child { border-bottom: 0; } .bk-filerow__type { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); background: var(--secondary); padding: 3px 7px; border-radius: var(--radius-sm); flex: 0 0 auto; min-width: 48px; text-align: center; } .bk-filerow__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .bk-filerow__name { font-size: 0.92rem; } .bk-filerow__meta { font-size: 0.78rem; color: #dc2626; } .bk-filerow__size, .bk-filerow__time { flex: 0 0 auto; font-size: 0.78rem; } @media (max-width: 640px) { .bk-filerow__size, .bk-filerow__time { display: none; } } .bk-source-status--skipped { background: color-mix(in srgb, #64748b 14%, transparent); color: #64748b; } /* sync runs */ .bk-runlist { display: flex; flex-direction: column; } .bk-runrow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); } .bk-runrow:last-child { border-bottom: 0; } /* toasts */ .bk-toast-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 1080; display: flex; flex-direction: column; gap: 8px; } .bk-toast { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 0.9rem; } .bk-toast svg { width: 17px; height: 17px; } .bk-toast--success svg { color: #16a34a; } .bk-toast--error svg { color: #dc2626; } .bk-mode-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (max-width: 680px) { .bk-mode-cards { grid-template-columns: 1fr; } } .bk-mode-card { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; background: var(--card); cursor: pointer; } .bk-mode-card.is-active { border-color: color-mix(in srgb, var(--bk-accent, #1a73e8) 45%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-accent, #1a73e8) 25%, transparent); } .bk-mode-card input[type="radio"] { margin-top: 4px; } .bk-tree { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; max-height: 360px; overflow: auto; background: var(--card); } .bk-tree-node + .bk-tree-node { margin-top: 4px; } .bk-tree-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); } .bk-tree-row:hover { background: var(--secondary); } .bk-tree-toggle { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); } .bk-tree-toggle:hover { background: var(--secondary); color: var(--foreground); } .bk-tree-toggle svg { width: 14px; height: 14px; } .bk-tree-icon { width: 14px; height: 14px; color: var(--bk-accent, #1a73e8); } .bk-tree-children { margin-left: 26px; } /* ============================================================ Folder status cards (storage connector page) ============================================================ */ .bk-folder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 860px) { .bk-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .bk-folder-grid { grid-template-columns: 1fr; } } .bk-folder-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; background: var(--card); display: flex; flex-direction: column; gap: 10px; transition: border-color .15s ease; min-width: 0; } .bk-folder-card:hover { border-color: var(--muted-foreground); } .bk-folder-card--new { border-color: color-mix(in srgb, var(--bk-accent, #1a73e8) 38%, var(--border)); background: color-mix(in srgb, var(--bk-accent, #1a73e8) 4%, var(--card)); } .bk-folder-card--error { border-color: color-mix(in srgb, #dc2626 28%, var(--border)); } .bk-folder-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; } .bk-folder-card__icon { width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bk-accent, #1a73e8) 12%, var(--background)); color: var(--bk-accent, #1a73e8); display: inline-flex; align-items: center; justify-content: center; } .bk-folder-card__icon svg { width: 13px; height: 13px; } .bk-folder-card__name { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; padding-top: 4px; } .bk-folder-card__stats { display: flex; gap: 12px; flex-wrap: wrap; } .bk-folder-card__stat { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-foreground); } .bk-folder-card__stat b { color: var(--foreground); font-weight: 600; } .bk-folder-card__stat--error b { color: #dc2626; } .bk-folder-card__meta { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.04em; color: var(--muted-foreground); text-transform: uppercase; } /* ============================================================ CONNECTOR CATALOG ============================================================ */ .bk-connector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 14px; } .bk-connector-card { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); padding: 11px 13px; display: flex; align-items: center; gap: 11px; position: relative; transition: border-color .15s ease; } .bk-connector-card__icon { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--background); flex-shrink: 0; color: var(--muted-foreground); } .bk-connector-card__icon svg { width: 13px; height: 13px; } .bk-connector-card__icon img { width: 18px; height: 18px; object-fit: contain; } a.bk-connector-card { text-decoration: none; color: inherit; cursor: pointer; } a.bk-connector-card:hover { border-color: color-mix(in srgb, #1f9d63 35%, var(--border)); background: color-mix(in srgb, #1f9d63 4%, var(--surface)); } a.bk-connector-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } button.bk-connector-card { width: 100%; text-align: left; font: inherit; cursor: pointer; } button.bk-connector-card--connectable:hover { border-color: color-mix(in srgb, var(--bk-blue) 35%, var(--border)); background: color-mix(in srgb, var(--bk-blue) 4%, var(--surface)); } button.bk-connector-card--connectable:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .bk-connect-preview__header { gap: 12px; } .bk-connect-preview__title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .bk-connect-preview__lead { margin: 0 0 10px; font-size: 0.84rem; font-weight: 600; line-height: 1.45; color: var(--foreground); } .bk-connect-preview__icon { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--background); flex-shrink: 0; } .bk-connect-preview__icon img { width: 18px; height: 18px; object-fit: contain; } .bk-connect-preview__panel { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--background); } .bk-connect-preview__points { margin: 0; padding: 0; list-style: none; color: var(--muted-foreground); font-size: 0.84rem; line-height: 1.5; } .bk-connect-preview__points li { display: flex; align-items: flex-start; gap: 10px; } .bk-connect-preview__points li::before { content: ''; width: 5px; height: 5px; margin-top: 0.55em; border-radius: 50%; background: var(--muted-foreground); flex-shrink: 0; opacity: 0.55; } .bk-connect-preview__points li + li { margin-top: 10px; } .bk-connect-preview__notice { display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 6px; padding: 11px 12px; font-size: 0.78rem; line-height: 1.45; color: var(--foreground); background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius-md); } .bk-connect-preview__notice svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--secondary-foreground); opacity: 1; } .bk-connector-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bk-connector-card__name { font-size: 0.86rem; font-weight: 600; margin: 0; letter-spacing: -0.012em; color: var(--foreground); line-height: 1.25; } .bk-connector-card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bk-connector-card__category { font-family: var(--font-mono); font-size: 0.59rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); } .bk-connector-card__badge { height: 17px; border-radius: 999px; display: inline-flex; align-items: center; padding-inline: 7px; font-family: var(--font-mono); font-size: 0.57rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); flex-shrink: 0; } .bk-connector-card__badge--connected { color: color-mix(in srgb, #1f9d63 72%, var(--foreground)); border-color: color-mix(in srgb, #1f9d63 28%, var(--border)); background: color-mix(in srgb, #1f9d63 6%, var(--background)); } .bk-connector-card--connected { border-color: color-mix(in srgb, #1f9d63 22%, var(--border)); } .bk-connector-card--disabled { opacity: 0.52; } .bk-filter-dropdown { position: relative; } .bk-filter-dropdown .bk-source-filter { display: inline-flex; align-items: center; gap: 5px; } .bk-filter-dropdown .bk-source-filter svg { width: 12px; height: 12px; flex-shrink: 0; } .bk-filter-dropdown__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 168px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); padding: 4px; display: flex; flex-direction: column; gap: 2px; } .bk-filter-dropdown__item { display: block; width: 100%; text-align: left; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--foreground); font-size: 0.8rem; padding: 7px 10px; cursor: pointer; } .bk-filter-dropdown__item:hover { background: var(--secondary); } .bk-filter-dropdown__item.is-active { background: var(--foreground); color: var(--background); } /* Intake table: full-page variant (no scroll cap) */ .bk-intake--full .bk-intake__list { max-height: none; } @media (max-width: 767.98px) { .bk-connector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .bk-connector-grid { grid-template-columns: 1fr; } } /* ============================================================ SOURCE INPUT DETAIL ("what this file became") ============================================================ */ .bk-tone-violet { --tone: oklch(0.55 0.22 295); } .bk-tone-red { --tone: #dc2626; } .bk-backlink { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; } .bk-backlink:hover { color: var(--foreground); } .bk-backlink i { width: 15px; height: 15px; } /* hero */ .bk-detail-hero { display: grid; gap: 22px; padding: 26px 28px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--bk-blue) 9%, transparent), transparent 55%), var(--card); box-shadow: var(--shadow-sm); } .bk-detail-hero__top { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: flex-start; justify-content: space-between; } .bk-detail-hero__main { flex: 1 1 360px; min-width: 0; } .bk-detail-hero__eyebrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .bk-detail-hero__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 12px; color: var(--foreground); word-break: break-word; } .bk-detail-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; color: var(--muted-foreground); font-size: 0.84rem; } .bk-detail-hero__meta span { display: inline-flex; align-items: center; gap: 6px; } .bk-detail-hero__meta i { width: 14px; height: 14px; } .bk-detail-hero__actions { display: flex; gap: 8px; flex: 0 0 auto; } /* transformation tableau — the "file became memory" moment */ .bk-transform { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); overflow: hidden; } .bk-transform__panel { display: grid; gap: 4px; align-content: center; padding: 16px 20px; min-width: 0; } .bk-transform__panel--memory { background: color-mix(in srgb, var(--bk-blue) 5%, transparent); } .bk-transform__label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); } .bk-transform__value { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 650; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--foreground); } .bk-transform__value i { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted-foreground); } .bk-transform__panel--memory .bk-transform__value i { color: color-mix(in srgb, var(--bk-blue) 75%, var(--foreground)); } .bk-transform__sub { font-size: 0.74rem; color: var(--muted-foreground); } .bk-transform__bridge { position: relative; display: grid; place-items: center; padding: 0 20px; } .bk-transform__bridge::before { content: ""; position: absolute; top: 50%; left: -8px; right: -8px; height: 1px; background: linear-gradient(90deg, var(--border), color-mix(in srgb, var(--bk-blue) 45%, var(--border)), var(--border)); } .bk-transform__spark { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: color-mix(in srgb, var(--bk-blue) 70%, var(--foreground)); animation: bk-spark-glow 3.2s ease-in-out infinite; } .bk-transform__spark i { width: 15px; height: 15px; } @keyframes bk-spark-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bk-blue) 22%, transparent); } 55% { box-shadow: 0 0 0 8px transparent; } } @media (max-width: 575.98px) { .bk-detail-hero__actions { width: 100%; } .bk-transform { grid-template-columns: 1fr; } .bk-transform__bridge { padding: 12px 0; } .bk-transform__bridge::before { top: -8px; bottom: -8px; left: 50%; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--border), color-mix(in srgb, var(--bk-blue) 45%, var(--border)), var(--border)); } } /* ── detail flow — continuous full-width stack ── */ .bk-detail-flow { display: grid; gap: 28px; min-width: 0; } /* card sections used in meta band */ .bk-detail-section { border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; min-width: 0; padding: 16px 18px !important; } .bk-detail-section .bk-sectionhead { margin-bottom: 10px !important; } /* ── bare section: header-only, no card border ── */ .bk-detail-bare { min-width: 0; overflow: hidden; } .bk-detail-bare__head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } .bk-detail-bare__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-foreground); } .bk-detail-bare .bk-mem + .bk-mem { margin-top: 8px; } .bk-detail-bare .bk-mem { padding: 13px 15px; } .bk-detail-bare .bk-mem__statement { margin-top: 9px; font-size: 0.92rem; line-height: 1.5; } .bk-detail-bare .bk-mem__summary { font-size: 0.83rem; } .bk-detail-bare .bk-evidence { margin-top: 9px; padding: 8px 12px; font-size: 0.82rem; } .bk-detail-bare .bk-mem__foot { margin-top: 10px; } /* ── structured document — condensed hierarchy map ── */ .bk-docmap { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; } .bk-docmap__stats { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } .bk-docmap__stats span { display: inline-flex; align-items: baseline; gap: 5px; font-size: 0.72rem; color: var(--muted-foreground); } .bk-docmap__stats strong { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 650; letter-spacing: -0.02em; color: var(--foreground); } .bk-docmap__list { max-height: 460px; overflow-y: auto; padding: 4px 0; } .bk-docrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 16px; min-width: 0; } .bk-docrow:hover { background: var(--surface); } .bk-docrow__lvl { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted-foreground); opacity: 0.65; text-align: center; } .bk-docrow__title { font-size: 0.82rem; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .bk-docrow__meta { display: inline-flex; align-items: center; gap: 10px; } .bk-docrow__meta span { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-foreground); white-space: nowrap; } .bk-docrow__meta small { font-size: 0.82em; opacity: 0.7; margin-left: 1px; } /* level → indent + weight, deeper levels recede */ .bk-docrow--l1 { padding-left: 16px; } .bk-docrow--l1 .bk-docrow__title { font-weight: 650; letter-spacing: -0.01em; } .bk-docrow--l2 { padding-left: 30px; } .bk-docrow--l2 .bk-docrow__title { font-weight: 600; } .bk-docrow--l3 { padding-left: 46px; } .bk-docrow--l3 .bk-docrow__title { color: color-mix(in srgb, var(--foreground) 82%, var(--muted-foreground)); } .bk-docrow--l4 { padding-left: 62px; } .bk-docrow--l4 .bk-docrow__title { color: var(--muted-foreground); } .bk-docrow--l3 .bk-docrow__lvl, .bk-docrow--l4 .bk-docrow__lvl { opacity: 0.45; } @media (max-width: 575.98px) { .bk-docrow--l2 { padding-left: 24px; } .bk-docrow--l3 { padding-left: 34px; } .bk-docrow--l4 { padding-left: 44px; } } /* ── vision card — image-input state display ── */ .bk-vision-card { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; } .bk-vision-card--extracted { background: color-mix(in srgb, var(--blue) 4%, transparent); border-color: color-mix(in srgb, var(--blue) 20%, var(--border)); } .bk-vision-card--pending { background: color-mix(in srgb, var(--amber) 4%, transparent); border-color: color-mix(in srgb, var(--amber) 20%, var(--border)); } .bk-vision-card__icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); } .bk-vision-card__icon svg { width: 15px; height: 15px; } .bk-vision-card__body { flex: 1; min-width: 0; } .bk-vision-card__label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 6px; } .bk-vision-card--extracted .bk-vision-card__icon { color: var(--blue); } .bk-vision-card--pending .bk-vision-card__icon { color: var(--amber); } .bk-vision-card__text { font-size: 0.86rem; line-height: 1.65; color: var(--foreground); margin: 0; white-space: pre-wrap; } /* ── reflections — full-width stacked cards ── */ .bk-refl-stack { display: grid; gap: 10px; } .bk-refl { display: grid; gap: 9px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); min-width: 0; overflow: hidden; box-shadow: var(--shadow-xs); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bk-refl:hover { border-color: color-mix(in srgb, var(--refl-c, var(--bk-blue)) 30%, var(--border)); box-shadow: var(--shadow-sm); } .bk-refl__eyebrow { display: flex; align-items: center; gap: 8px; } .bk-refl__chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: var(--refl-c, var(--muted-foreground)); background: color-mix(in srgb, var(--refl-c, var(--border)) 11%, transparent); border: 1px solid color-mix(in srgb, var(--refl-c, var(--border)) 20%, var(--border)); padding: 3px 9px 3px 6px; border-radius: 999px; } .bk-refl__chip i { width: 11px; height: 11px; } /* type accent via custom property */ .bk-refl--fact { --refl-c: var(--bk-blue); } .bk-refl--decision { --refl-c: oklch(0.55 0.22 295); } .bk-refl--constraint { --refl-c: #d97706; } .bk-refl--contradiction { --refl-c: #dc2626; } .bk-refl--relationship { --refl-c: var(--bk-blue); } .bk-refl--question_answer { --refl-c: oklch(0.55 0.22 295); } .bk-refl--entity_surface { --refl-c: #2aaf7f; } .bk-refl--open_question { --refl-c: var(--muted-foreground); } .bk-refl__title { font-size: 1.02rem; font-weight: 650; letter-spacing: -0.015em; color: var(--foreground); line-height: 1.3; margin: 0; } .bk-refl__body { font-size: 0.9rem; color: var(--muted-foreground); line-height: 1.55; margin: 0; max-width: 78ch; } .bk-refl__qa { display: grid; gap: 7px; } .bk-refl__q { font-size: 0.88rem; color: var(--muted-foreground); font-style: italic; padding-left: 12px; border-left: 2px solid var(--border); line-height: 1.45; } .bk-refl__a { font-size: 0.9rem; color: var(--foreground); line-height: 1.55; max-width: 78ch; } /* footer: tags + confidence on same row */ .bk-refl__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 2px; } .bk-refl__tags { display: flex; flex-wrap: wrap; gap: 4px; } .bk-refl__conf { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-foreground); white-space: nowrap; } .bk-refl__conf i { width: 12px; height: 12px; opacity: 0.55; } .bk-refl__conf--green { color: #2aaf7f; } .bk-refl__conf--blue { color: color-mix(in srgb, var(--bk-blue) 80%, var(--foreground)); } .bk-refl__conf--amber { color: #c1892c; } .bk-tag--sm { font-size: 0.68rem; padding: 2px 8px; } .bk-tag--sm i { width: 10px; height: 10px; opacity: 0.6; } @media (max-width: 575.98px) { .bk-refl { padding: 13px 15px; } .bk-refl__conf { margin-left: 0; } } /* ── meta band — entities · evidence · timeline — 3-col grid ── */ .bk-detail-meta-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; } .bk-detail-meta-band .bk-detail-section { padding: 16px 18px !important; } .bk-detail-meta-band .bk-sectionhead { margin-bottom: 10px !important; } .bk-detail-meta-band .bk-filelist__item { padding: 7px 10px; } .bk-detail-meta-band .bk-timeline { gap: 10px; } @media (max-width: 860px) { .bk-detail-meta-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .bk-detail-meta-band { grid-template-columns: 1fr; } .bk-detail-section { padding: 14px 15px !important; } } /* outcome band */ .bk-outcome-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @media (max-width: 860px) { .bk-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bk-outcome { position: relative; overflow: hidden; display: grid; gap: 2px; padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-xs); } .bk-outcome::after { content: none; } .bk-outcome__icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 8px; border-radius: var(--radius-md); color: var(--tone, var(--bk-blue)); background: color-mix(in srgb, var(--tone, var(--bk-blue)) 13%, transparent); } .bk-outcome__icon i { width: 20px; height: 20px; } .bk-outcome__value { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--foreground); } .bk-outcome__label { font-weight: 600; font-size: 0.92rem; color: var(--foreground); margin-top: 4px; } .bk-outcome__detail { font-size: 0.78rem; color: var(--muted-foreground); } /* pipeline stepper */ .bk-pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; } .bk-pipeline__step { position: relative; padding: 0 14px; display: grid; grid-template-rows: 34px auto; gap: 12px; } .bk-pipeline__rail { position: absolute; top: 16px; left: 0; right: 0; height: 2px; background: var(--border); z-index: 0; } .bk-pipeline__step:first-child .bk-pipeline__rail { left: 50%; } .bk-pipeline__step:last-child .bk-pipeline__rail { right: 50%; } .bk-pipeline__node { position: relative; z-index: 1; justify-self: center; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--border); background: var(--card); color: var(--muted-foreground); } .bk-pipeline__node i { width: 16px; height: 16px; } .bk-pipeline__body { text-align: center; display: grid; gap: 3px; } .bk-pipeline__name { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 0.86rem; color: var(--foreground); } .bk-pipeline__name i { width: 14px; height: 14px; color: var(--muted-foreground); } .bk-pipeline__ai { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.08em; padding: 1px 5px; border-radius: 5px; font-weight: 600; color: oklch(0.55 0.22 295); background: color-mix(in srgb, oklch(0.55 0.22 295) 14%, transparent); } .bk-pipeline__detail { font-size: 0.76rem; color: var(--muted-foreground); line-height: 1.35; } .bk-pipeline__metrics { display: inline-flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; } .bk-pipeline__metrics span { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-foreground); } .bk-pipeline__metrics i { width: 12px; height: 12px; } .bk-pipeline__step--done .bk-pipeline__node { border-color: #2aaf7f; background: #2aaf7f; color: #fff; } .bk-pipeline__step--done .bk-pipeline__rail { background: color-mix(in srgb, #2aaf7f 50%, var(--border)); } .bk-pipeline__step--running .bk-pipeline__node { border-color: var(--bk-blue); color: var(--bk-blue); } .bk-pipeline__step--failed .bk-pipeline__node { border-color: var(--destructive); background: var(--destructive); color: #fff; } @media (max-width: 767.98px) { .bk-pipeline { grid-template-columns: 1fr; gap: 0; } .bk-pipeline__step { grid-template-columns: 34px 1fr; grid-template-rows: none; gap: 14px; padding: 0 0 18px 0; align-items: start; } .bk-pipeline__step:last-child { padding-bottom: 0; } .bk-pipeline__rail { top: 0; bottom: 0; left: 16px; right: auto; width: 2px; height: auto; } .bk-pipeline__step:first-child .bk-pipeline__rail { top: 16px; left: 16px; } .bk-pipeline__step:last-child .bk-pipeline__rail { display: none; } .bk-pipeline__body { text-align: left; } .bk-pipeline__name, .bk-pipeline__metrics { justify-content: flex-start; } } /* memory unit rich card */ .bk-mem { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; background: var(--card); } .bk-mem + .bk-mem { margin-top: 12px; } .bk-mem__head { display: flex; align-items: flex-start; gap: 12px; } .bk-mem__aside { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .bk-mem__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted-foreground); opacity: 0.7; } .bk-mem__icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--tone, var(--bk-blue)); background: color-mix(in srgb, var(--tone, var(--bk-blue)) 13%, transparent); } .bk-mem__icon i { width: 18px; height: 18px; } .bk-mem__heading { min-width: 0; } .bk-mem__type { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tone, var(--bk-blue)); font-weight: 600; } .bk-mem__title { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; margin: 2px 0 0; color: var(--foreground); } .bk-mem__statement { margin: 12px 0 0; color: var(--foreground); line-height: 1.5; } .bk-mem__summary { margin: 8px 0 0; color: var(--muted-foreground); font-size: 0.86rem; line-height: 1.5; } .bk-evidence { display: flex; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--border); background: var(--surface); color: var(--muted-foreground); font-size: 0.85rem; font-style: italic; line-height: 1.45; } .bk-evidence i { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; opacity: 0.6; } .bk-mem__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; } /* meter */ .bk-meter-wrap { display: inline-flex; align-items: center; gap: 8px; } .bk-meter { width: 64px; height: 6px; border-radius: 999px; background: var(--secondary); overflow: hidden; } .bk-meter__fill { display: block; height: 100%; border-radius: 999px; background: var(--bk-blue); } .bk-meter--green .bk-meter__fill { background: #16a34a; } .bk-meter--amber .bk-meter__fill { background: #d97706; } .bk-meter--blue .bk-meter__fill { background: var(--bk-blue); } .bk-meter-wrap__label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-foreground); } /* tag */ .bk-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-foreground); background: var(--background); } .bk-tag i { width: 12px; height: 12px; } .bk-tag--green { color: #16a34a; border-color: color-mix(in srgb, #16a34a 30%, var(--border)); } .bk-tag--blue { color: color-mix(in srgb, var(--bk-blue) 80%, var(--foreground)); border-color: color-mix(in srgb, var(--bk-blue) 28%, var(--border)); } .bk-tag--amber { color: #d97706; border-color: color-mix(in srgb, #d97706 32%, var(--border)); } .bk-tag--red { color: #dc2626; border-color: color-mix(in srgb, #dc2626 30%, var(--border)); } /* ── knowledge index — condensed vector coverage map ── */ .bk-kindex { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; } .bk-kindex__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } .bk-kindex__cov { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 240px; } .bk-kindex__cov-val { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: color-mix(in srgb, #2aaf7f 70%, var(--foreground)); } .bk-kindex__bar { flex: 1 1 auto; height: 6px; max-width: 220px; border-radius: 999px; background: var(--secondary); overflow: hidden; } .bk-kindex__bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2aaf7f, color-mix(in srgb, #2aaf7f 70%, var(--bk-blue))); } .bk-kindex__cov-cap { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap; } .bk-kindex__legend { display: inline-flex; align-items: center; gap: 16px; margin-left: auto; } .bk-kindex__leg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--muted-foreground); white-space: nowrap; } .bk-kindex__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 360px; overflow-y: auto; } .bk-krow { display: grid; grid-template-columns: 30px 9px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 14px; min-width: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); } .bk-krow:hover { background: var(--surface); } .bk-krow:nth-child(odd) { border-right: 1px solid color-mix(in srgb, var(--border) 55%, transparent); } .bk-krow__pos { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-foreground); opacity: 0.7; } .bk-krow__sec { font-size: 0.8rem; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .bk-krow__tok { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-foreground); white-space: nowrap; } .bk-krow__tok small { opacity: 0.6; margin-left: 1px; } .bk-kdot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); } .bk-kdot--green { background: #2aaf7f; } .bk-kdot--slate { background: color-mix(in srgb, var(--muted-foreground) 55%, transparent); } .bk-kdot--red { background: #dc2626; } .bk-kdot--idle { background: color-mix(in srgb, var(--muted-foreground) 40%, transparent); } @media (max-width: 767.98px) { .bk-kindex__rows { grid-template-columns: 1fr; } .bk-krow:nth-child(odd) { border-right: none; } .bk-kindex__legend { margin-left: 0; } } .bk-disclosure summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); } .bk-disclosure summary:hover { color: var(--foreground); } /* ai chip */ .bk-ai-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: color-mix(in srgb, oklch(0.55 0.22 295) 7%, var(--card)); } .bk-ai-chip > i { flex: 0 0 auto; width: 18px; height: 18px; color: oklch(0.55 0.22 295); } .bk-ai-chip__model { display: block; font-weight: 600; font-size: 0.86rem; color: var(--foreground); } .bk-ai-chip__meta { display: block; font-size: 0.72rem; color: var(--muted-foreground); } /* key-value list */ .bk-kv { margin: 0; } .bk-kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); } .bk-kv__row:last-child { border-bottom: none; } .bk-kv dt { font-size: 0.8rem; color: var(--muted-foreground); margin: 0; } .bk-kv dd { font-family: var(--font-mono); font-size: 0.82rem; color: var(--foreground); margin: 0; text-align: right; } /* cost split */ .bk-cost-split { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .bk-cost-split__item { padding: 12px 14px; display: grid; gap: 2px; border-right: 1px solid var(--border); } .bk-cost-split__item:last-child { border-right: none; } .bk-cost-split__item strong { font-family: var(--font-mono); font-size: 0.96rem; letter-spacing: -0.02em; color: var(--foreground); } .bk-cost-split__item--total { background: var(--surface); } .bk-cost-split__item--total strong { color: color-mix(in srgb, var(--bk-blue) 70%, var(--foreground)); } /* entity list */ .bk-entity-list { display: flex; flex-direction: column; gap: 8px; } .bk-entity { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); } .bk-entity__icon { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--tone, var(--bk-blue)); background: color-mix(in srgb, var(--tone, var(--bk-blue)) 13%, transparent); } .bk-entity__icon i { width: 16px; height: 16px; } .bk-entity__body { min-width: 0; } .bk-entity__name { display: block; font-weight: 600; font-size: 0.86rem; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-entity__type { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); } /* tabular warning banner */ .bk-tabular-warning { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, #c1892c 35%, var(--border)); background: color-mix(in srgb, #c1892c 8%, var(--card)); } .bk-tabular-warning__icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); color: #c1892c; background: color-mix(in srgb, #c1892c 15%, transparent); } .bk-tabular-warning__icon i { width: 18px; height: 18px; } .bk-tabular-warning__body { flex: 1 1 0; min-width: 0; } .bk-tabular-warning__title { display: block; font-weight: 600; font-size: 0.9rem; color: var(--foreground); margin-bottom: 4px; } .bk-tabular-warning__text { font-size: 0.85rem; color: var(--muted-foreground); margin: 0 0 8px; line-height: 1.5; } .bk-tabular-warning__hint { font-size: 0.8rem; color: var(--muted-foreground); margin: 0 0 10px; line-height: 1.45; font-style: italic; } .bk-tabular-warning__done { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #2aaf7f; margin: 0; } .bk-tabular-warning__done i { width: 15px; height: 15px; } .bk-tabular-warning__cta { font-size: 0.84rem; } /* bk-health extras */ .bk-health--empty { border-color: var(--border); color: var(--muted-foreground); } /* summary card */ .bk-summary-card { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xs); padding: 20px 22px; } .bk-summary-card__status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); } .bk-summary-card__status i { width: 13px; height: 13px; } .bk-summary-card__status--active { color: color-mix(in srgb, #1f9d63 78%, var(--foreground)); } .bk-summary-card__status--stale { color: color-mix(in srgb, #c1892c 82%, var(--foreground)); } .bk-summary-card__status--partial { color: var(--muted-foreground); } .bk-summary-card__status--missing { color: var(--muted-foreground); } .bk-summary-card__section { padding-top: 14px; border-top: 1px solid var(--border); } .bk-summary-card__section + .bk-summary-card__section { margin-top: 12px; } .bk-summary-card__heading { font-size: 0.72rem; font-family: var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 8px; } .bk-summary-card__body { font-size: 0.93rem; line-height: 1.6; color: var(--foreground); margin: 0; } .bk-summary-card__body--navigation { font-style: italic; color: var(--muted-foreground); } /* health grid */ .bk-health-grid { display: flex; flex-wrap: wrap; gap: 12px; } .bk-health-metric { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); min-width: 130px; } .bk-health-metric__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tone, var(--muted-foreground)) 12%, transparent); color: var(--tone, var(--muted-foreground)); flex: 0 0 auto; } .bk-health-metric__icon i { width: 15px; height: 15px; } .bk-health-metric__value { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.03em; color: var(--foreground); line-height: 1; } .bk-health-metric__label { font-size: 0.73rem; color: var(--muted-foreground); line-height: 1.3; } /* hint text */ .bk-hint { font-size: 0.82rem; color: var(--muted-foreground); font-style: italic; margin: 0; } .bk-tone-red { --tone: #e05050; } /* ============================================================ GLOBAL PROCESSING STATUS BAR ============================================================ */ .bk-global-status-bar { position: relative; overflow: hidden; padding: 5px 0; background: color-mix(in srgb, var(--bk-blue) 7%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--bk-blue) 18%, var(--border)); z-index: 1030; } .bk-global-status-bar__rail { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, color-mix(in srgb, var(--bk-blue) 0%, transparent) 0%, var(--bk-blue) 30%, color-mix(in srgb, var(--bk-blue) 70%, #818cf8) 50%, var(--bk-blue) 70%, color-mix(in srgb, var(--bk-blue) 0%, transparent) 100% ); background-size: 300% 100%; animation: bk-bar-flow 2.2s ease-in-out infinite; } @keyframes bk-bar-flow { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .bk-global-status-bar__content { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.045em; text-transform: uppercase; font-weight: 500; color: color-mix(in srgb, var(--bk-blue) 85%, var(--foreground)); } .bk-global-status-bar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bk-blue); flex: none; animation: bk-intake-pulse 1.6s ease-out infinite; } /* ============================================================ UPLOAD PROCESSING QUEUE (inline status in upload section) ============================================================ */ .bk-upload-queue { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; } .bk-upload-queue__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); font-size: 0.875rem; min-width: 0; } .bk-upload-queue__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .bk-upload-queue__status { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; flex: none; white-space: nowrap; } .bk-upload-queue__status--processing, .bk-upload-queue__status--queued { color: var(--bk-blue); } .bk-upload-queue__status--published, .bk-upload-queue__status--processed { color: #1f9d63; } .bk-upload-queue__status--review { color: #d97706; } .bk-upload-queue__status--failed { color: var(--bk-coral); } .bk-upload-queue__link { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; color: var(--muted-foreground); text-decoration: none; border-radius: var(--radius-sm); transition: color .15s ease, background .15s ease; } .bk-upload-queue__link:hover { color: var(--foreground); background: var(--secondary); } .bk-upload-queue__link svg, .bk-upload-queue__link i { width: 14px; height: 14px; } .bk-upload-queue__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; } .bk-upload-queue__spinner { color: var(--bk-blue); flex: none; width: 13px; height: 13px; } /* upload queue status dot — standalone colors (no parent dependency) */ .bk-upload-queue__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted-foreground); } .bk-upload-queue__dot--processing, .bk-upload-queue__dot--queued { background: var(--bk-blue); animation: bk-intake-pulse 1.6s ease-out infinite; } .bk-upload-queue__dot--published, .bk-upload-queue__dot--processed { background: #1f9d63; } .bk-upload-queue__dot--review { background: #d97706; } .bk-upload-queue__dot--failed { background: var(--bk-coral); } /* ============================================================ CONSTELLATION — state-of-the-art knowledge surface ------------------------------------------------------------ Graph inspector glyph, legend, vector coverage gauge + field, memory composition, source bars and the activity heatmap. ============================================================ */ [x-cloak] { display: none !important; } .bk-cst-graph__hint { display: inline-flex; align-items: center; gap: 6px; } .bk-cst-graph__hint svg { width: 13px; height: 13px; } /* inspector */ .bk-cst-inspector__inner { display: flex; flex-direction: column; gap: 14px; height: 100%; } .bk-cst-inspector__glyph { width: 16px; height: 16px; border-radius: 999px; background: color-mix(in srgb, var(--tone, var(--foreground)) 85%, var(--background)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone, var(--foreground)) 20%, transparent); } /* graph legend */ .bk-cst-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; } .bk-cst-legend__item { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-foreground); } .bk-cst-legend__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--tone, var(--muted-foreground)); } /* ── memory intelligence grid ── */ .bk-intel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .bk-intel-card { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xs); padding: 20px; display: flex; flex-direction: column; gap: 16px; } .bk-intel-card--wide { gap: 18px; } .bk-intel-card__head { display: flex; align-items: flex-start; gap: 12px; } .bk-intel-card__icon { width: 34px; height: 34px; flex: none; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--muted-foreground); } .bk-intel-card__icon svg { width: 17px; height: 17px; } .bk-intel-card__title { font-size: 0.95rem; font-weight: 650; letter-spacing: -0.012em; margin: 0; } .bk-intel-card__meta { margin: 2px 0 0; font-size: 0.78rem; color: var(--muted-foreground); line-height: 1.4; } .bk-intel-card__foot { margin: auto 0 0; display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: color-mix(in srgb, #1f9d63 78%, var(--foreground)); } .bk-intel-card__foot svg { width: 14px; height: 14px; } /* ── vector coverage gauge ── */ .bk-gauge { display: flex; align-items: center; gap: 18px; } .bk-gauge__ring { --size: 78px; width: var(--size); height: var(--size); flex: none; border-radius: 999px; display: grid; place-items: center; background: radial-gradient(closest-side, var(--surface) 70%, transparent 71% 100%), conic-gradient( color-mix(in srgb, var(--foreground) 80%, transparent) calc(var(--pct) * 1%), color-mix(in srgb, var(--foreground) 10%, var(--border)) 0 ); } .bk-gauge__value { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 500; letter-spacing: -0.03em; color: var(--foreground); } .bk-gauge__value small { font-size: 0.72rem; color: var(--muted-foreground); } .bk-gauge__legend { display: flex; flex-direction: column; gap: 6px; } .bk-gauge__legend-row { font-size: 0.82rem; color: var(--muted-foreground); } .bk-gauge__legend-row strong { color: var(--foreground); font-family: var(--font-mono); } .bk-chip--mono { font-family: var(--font-mono); font-size: 0.66rem; } /* ── vector field ── */ .bk-vfield { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; } .bk-vfield__cell { aspect-ratio: 1; border-radius: 2px; } .bk-vfield__cell--on { background: color-mix(in srgb, var(--foreground) 36%, var(--surface)); } .bk-vfield__cell--off { background: color-mix(in srgb, var(--muted-foreground) 10%, var(--surface)); } /* ── composition ── */ .bk-stackbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--muted-foreground) 12%, var(--surface)); gap: 2px; } .bk-stackbar__seg { background: color-mix(in srgb, var(--tone, var(--muted-foreground)) 70%, var(--surface)); } .bk-complist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .bk-complist__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.83rem; } .bk-complist__key { display: inline-flex; align-items: center; gap: 8px; color: var(--foreground); } .bk-complist__key .bk-dot { background: var(--tone, var(--muted-foreground)); } .bk-complist__val { font-family: var(--font-mono); color: var(--foreground); } .bk-complist__val small { color: var(--muted-foreground); } .bk-confsplit { display: flex; flex-direction: column; gap: 6px; margin-top: auto; } .bk-confsplit__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); } .bk-confsplit__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; background: color-mix(in srgb, var(--muted-foreground) 12%, var(--surface)); } .bk-confsplit__bar span { background: var(--tone, var(--muted-foreground)); } .bk-confsplit__meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-foreground); } /* ── source contribution bars ── */ .bk-srcbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .bk-srcbar { display: flex; flex-direction: column; gap: 6px; } .bk-srcbar__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .bk-srcbar__name { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--foreground); min-width: 0; } .bk-srcbar__name svg { width: 13px; height: 13px; flex: none; color: var(--muted-foreground); } .bk-srcbar__count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted-foreground); } .bk-srcbar__track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted-foreground) 12%, var(--surface)); overflow: hidden; } .bk-srcbar__fill { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--foreground) 22%, transparent); } /* ── activity heatmap ── */ .bk-heat { display: flex; flex-direction: column; gap: 10px; } .bk-heat__grid { display: flex; gap: 3px; width: 100%; padding-bottom: 2px; } .bk-heat__col { flex: 1 1 0; min-width: 6px; display: flex; flex-direction: column; gap: 3px; } .bk-heat__cell { flex: 1 1 0; aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--muted-foreground) 10%, var(--surface)); } .bk-heat__cell--l0 { background: color-mix(in srgb, var(--muted-foreground) 10%, var(--surface)); } .bk-heat__cell--l1 { background: color-mix(in srgb, var(--foreground) 14%, var(--surface)); } .bk-heat__cell--l2 { background: color-mix(in srgb, var(--foreground) 30%, var(--surface)); } .bk-heat__cell--l3 { background: color-mix(in srgb, var(--foreground) 52%, var(--surface)); } .bk-heat__cell--l4 { background: color-mix(in srgb, var(--foreground) 75%, var(--surface)); } .bk-heat__cell.is-future { opacity: 0.25; } .bk-heat__legend { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted-foreground); } .bk-heat__legend .bk-heat__cell { width: 9px; height: 9px; aspect-ratio: auto; } /* split layout variant */ .bk-cst-split--wide { grid-template-columns: 3fr 2fr; } /* ── Compact source/input list ── */ .bk-input-list { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); overflow: hidden; } .bk-input-row { display: grid; grid-template-columns: 26px 1fr auto auto auto; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 0.84rem; } .bk-input-row:last-child { border-bottom: none; } .bk-input-row__icon { color: var(--muted-foreground); display: flex; align-items: center; } .bk-input-row__icon svg { width: 14px; height: 14px; } .bk-input-row__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--foreground); font-size: 0.84rem; } .bk-input-row__count { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-foreground); white-space: nowrap; } .bk-input-row__time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-foreground); white-space: nowrap; } .bk-input-row__status { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--foreground) 6%, transparent); color: var(--muted-foreground); } .bk-input-row__status--processed, .bk-input-row__status--published { color: color-mix(in srgb, #1f9d63 80%, var(--foreground)); background: color-mix(in srgb, #1f9d63 10%, transparent); } .bk-input-row__status--processing, .bk-input-row__status--pending, .bk-input-row__status--queued { color: color-mix(in srgb, var(--bk-amber) 80%, var(--foreground)); background: color-mix(in srgb, var(--bk-amber) 10%, transparent); } .bk-input-row__status--failed, .bk-input-row__status--error { color: color-mix(in srgb, var(--bk-coral) 80%, var(--foreground)); background: color-mix(in srgb, var(--bk-coral) 10%, transparent); } /* ── Composition: monochromatic stackbar (overrides tone-based color) ── */ .bk-intel-card .bk-stackbar__seg:nth-child(1) { background: color-mix(in srgb, var(--foreground) 65%, transparent); } .bk-intel-card .bk-stackbar__seg:nth-child(2) { background: color-mix(in srgb, var(--foreground) 36%, transparent); } .bk-intel-card .bk-stackbar__seg:nth-child(3) { background: color-mix(in srgb, var(--foreground) 20%, transparent); } .bk-intel-card .bk-stackbar__seg:nth-child(n+4) { background: color-mix(in srgb, var(--foreground) 12%, transparent); } /* ── Composition dots: match bar shading ── */ .bk-intel-card .bk-complist__key .bk-dot { background: color-mix(in srgb, var(--foreground) 65%, transparent); } .bk-intel-card .bk-complist__row:nth-child(2) .bk-dot { background: color-mix(in srgb, var(--foreground) 36%, transparent); } .bk-intel-card .bk-complist__row:nth-child(3) .bk-dot { background: color-mix(in srgb, var(--foreground) 20%, transparent); } .bk-intel-card .bk-complist__row:nth-child(n+4) .bk-dot { background: color-mix(in srgb, var(--foreground) 12%, transparent); } /* ── Confidence bar: three-shade monochromatic ── */ .bk-intel-card .bk-confsplit__bar span:first-child { background: color-mix(in srgb, var(--foreground) 70%, transparent); } .bk-intel-card .bk-confsplit__bar span:nth-child(2) { background: color-mix(in srgb, var(--foreground) 36%, transparent); } .bk-intel-card .bk-confsplit__bar span:nth-child(3) { background: color-mix(in srgb, var(--foreground) 16%, transparent); } /* ── Context pack: neutral border instead of blue tint ── */ .bk-pack { border-color: var(--border); } @media (max-width: 991.98px) { .bk-intel-grid { grid-template-columns: 1fr; } .bk-cst-split--wide { grid-template-columns: 1fr; } }