/* ============================================================
   KNOWLEDGE BASE  —  list/grid page + detail page
   Shared stylesheet for KnowledgeBasePage.js (list/grid, "kb-"
   prefixed classes) and KnowledgeBaseDetailPage.js (detail/tabs,
   "kbd-" prefixed classes). Visual language mirrors
   ProjectCenterPage.css (card grid + create modal) and
   TestCenterPage.css (tabs, section headers, members table) —
   see those files for the established conventions this one
   follows. All values reference the app-wide design tokens
   (app/css/tokens.css) — no hardcoded colours/spacing.
   ============================================================ */

/* ── List page header/toolbar ── */
.kb-header{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--space-5)}
.kb-title{font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:-.02em;line-height:1.2}
.kb-subtitle{font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--text-secondary);line-height:1.4}

.kb-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.kb-search{position:relative;flex:1;max-width:420px}
.kb-search__icon{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);display:flex;color:var(--text-muted);pointer-events:none}
.kb-search__icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kb-search__input{width:100%;height:40px;padding:0 var(--space-3) 0 var(--space-8);background:var(--surface);
  border:1px solid var(--border);border-radius:8px;font-size:var(--text-base);color:var(--text-primary);
  transition:border-color var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease)}
.kb-search__input::placeholder{color:var(--text-muted)}
.kb-search__input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-muted)}

.kb-newbtn{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-4);
  background:var(--brand);color:var(--text-inverse);border-radius:8px;font-size:var(--text-base);
  font-weight:var(--weight-semibold);white-space:nowrap;flex-shrink:0;cursor:pointer;border:none;
  transition:background var(--duration-fast) var(--ease)}
.kb-newbtn:hover{background:var(--brand-alt)}
.kb-newbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Grid + card ── */
.kb-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-5)}
@media(max-width:1200px){.kb-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.kb-grid{grid-template-columns:1fr}}

.kb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);
  transition:box-shadow var(--duration-base) var(--ease),transform var(--duration-base) var(--ease)}
.kb-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kb-card__head{display:flex;align-items:flex-start;gap:var(--space-3)}
.kb-card__icon{width:44px;height:44px;min-width:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  font-size:var(--text-md);font-weight:var(--weight-bold);letter-spacing:-.01em;flex-shrink:0;background:var(--purple-bg);color:var(--purple)}
.kb-card__headtext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.kb-card__name{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-card__desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kb-badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--space-2);border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);flex-shrink:0;white-space:nowrap}
.kb-badge--owner{background:var(--brand-muted);color:var(--brand)}
.kb-badge--member{background:var(--surface-2);color:var(--text-secondary)}

.kb-card__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding-top:var(--space-3);border-top:1px solid var(--border)}
.kb-card__owner{font-size:var(--text-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kb-openbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 var(--space-4);
  background:var(--surface);color:var(--text-primary);border:1px solid var(--border);border-radius:8px;
  font-size:var(--text-sm);font-weight:var(--weight-semibold);white-space:nowrap;cursor:pointer;flex-shrink:0;
  transition:background var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease)}
.kb-openbtn:hover{background:var(--surface-2);border-color:var(--border-hi)}
.kb-openbtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Empty state ── */
.kb-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  text-align:center;padding:var(--space-16) var(--space-4);font-size:var(--text-md);color:var(--text-muted)}
.kb-empty__icon{color:var(--text-muted);margin-bottom:var(--space-2)}
.kb-empty__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary)}
.kb-empty__sub{font-size:var(--text-sm);color:var(--text-secondary);max-width:420px}
.kb-empty .kb-newbtn{margin-top:var(--space-3)}

/* ── Shared modal chrome (create-KB modal on the list page, add-member
   modal on the detail page) — mirrors ProjectCenterPage.css's .pm-* ── */
.kb-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:flex-start;justify-content:center;
  z-index:1000;padding:var(--space-10) var(--space-4);overflow-y:auto}
.kb-modal-overlay.kb-modal-overlay--open{display:flex}
.kb-modal{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:calc(100vh - 80px)}
.kb-modal__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:1px solid var(--border)}
.kb-modal__title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary);line-height:1.2}
.kb-modal__sub{font-size:var(--text-sm);color:var(--text-muted);line-height:1.3;margin-top:2px}
.kb-modal__close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);
  border:none;background:transparent;color:var(--text-muted);cursor:pointer;flex-shrink:0;
  transition:background var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease)}
.kb-modal__close:hover{background:var(--surface-2);color:var(--text-primary)}
.kb-modal__close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kb-modal__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);overflow-y:auto}
.kb-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);
  padding:var(--space-4) var(--space-5);border-top:1px solid var(--border)}

/* ── Form primitives (shared: create-KB modal, add-member modal, Settings tab) ── */
.kb-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.kb-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}
.kb-req{color:var(--error)}
.kb-input{height:40px;border:1px solid var(--border);border-radius:8px;padding:0 var(--space-3);
  font-size:var(--text-base);color:var(--text-primary);background:var(--surface);width:100%;font-family:inherit}
.kb-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-muted)}
.kb-input--err{border-color:var(--error)}
.kb-textarea{height:auto;padding:var(--space-3);resize:vertical;line-height:var(--leading-normal)}
.kb-error{font-size:var(--text-xs);color:var(--error);min-height:14px}
.kb-hint{font-size:var(--text-xs);color:var(--text-secondary)}
.kb-chips{display:flex;flex-wrap:wrap;gap:8px}
.kb-chip{display:inline-flex;align-items:center;height:32px;padding:0 var(--space-3);border:1px solid var(--border);
  border-radius:var(--radius-full);background:var(--surface);font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--text-secondary);cursor:pointer;transition:background var(--duration-fast) var(--ease),
  border-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease)}
.kb-chip:hover{border-color:var(--border-hi)}
.kb-chip--on{background:var(--brand-muted);border-color:var(--brand);color:var(--brand)}

/* ── Buttons (shared across both pages) ── */
.kb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 var(--space-5);
  border-radius:8px;font-size:var(--text-base);font-weight:var(--weight-semibold);cursor:pointer;border:1px solid transparent;
  transition:background var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease),
  color var(--duration-fast) var(--ease),opacity var(--duration-fast) var(--ease)}
.kb-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kb-btn--ghost{background:var(--surface);border-color:var(--border);color:var(--text-secondary)}
.kb-btn--ghost:hover{background:var(--surface-2);border-color:var(--border-hi);color:var(--text-primary)}
.kb-btn--primary{background:var(--brand);border-color:var(--brand);color:var(--text-inverse)}
.kb-btn--primary:hover{background:var(--brand-alt)}
.kb-btn--primary:disabled{opacity:.5;cursor:not-allowed}
.kb-btn--danger{background:transparent;border-color:var(--error);color:var(--error)}
.kb-btn--danger:hover:not(:disabled){background:var(--error-bg)}
.kb-btn--danger:disabled{opacity:.5;cursor:not-allowed}

/* ── Toast ── */
.kb-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(8px);background:var(--navy);color:#fff;
  padding:10px var(--space-4);border-radius:10px;box-shadow:var(--shadow-lg);font-size:var(--text-sm);font-weight:var(--weight-medium);
  z-index:1100;opacity:0;pointer-events:none;transition:opacity var(--duration-base) var(--ease),transform var(--duration-base) var(--ease)}
.kb-toast--show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.kb-toast--error{background:var(--error)}

@media(max-width:680px){.kb-modal{max-width:100%}}


/* ============================================================
   DETAIL PAGE  —  "kbd-" prefixed (mirrors TestCenterPage.css's
   .tc-breadcrumb/.tc-head/.tc-tabs/.tc-secthead/.tc-table/.tc-mrow
   conventions, scoped to just what a KB Group detail page needs)
   ============================================================ */

.kbd-breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-3)}
.kbd-breadcrumb a{color:var(--text-secondary);transition:color var(--duration-fast) var(--ease)}
.kbd-breadcrumb a:hover{color:var(--brand)}
.kbd-breadcrumb__sep{color:var(--text-muted)}
.kbd-breadcrumb__cur{color:var(--text-primary);font-weight:var(--weight-medium)}

.kbd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-5);flex-wrap:wrap}
.kbd-head__left{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.kbd-icon{width:48px;height:48px;min-width:48px;border-radius:var(--radius-md);background:var(--purple-bg);color:var(--purple);
  display:flex;align-items:center;justify-content:center;font-size:var(--text-md);font-weight:var(--weight-bold);letter-spacing:-.01em}
.kbd-head__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.kbd-name{font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--text-primary);letter-spacing:-.02em;line-height:1.1}
.kbd-sub{font-size:var(--text-base);color:var(--text-secondary);line-height:1.3}
.kbd-head__right{display:flex;align-items:center;gap:var(--space-6);flex-shrink:0}
.kbd-stat{display:flex;flex-direction:column;gap:3px}
.kbd-stat__val{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary);line-height:1;white-space:nowrap}
.kbd-stat__label{font-size:var(--text-xs);color:var(--text-muted);line-height:1;white-space:nowrap}
.kbd-badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--space-2);border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap}
.kbd-badge--owner{background:var(--brand-muted);color:var(--brand)}
.kbd-badge--member{background:var(--surface-2);color:var(--text-secondary)}

@media(max-width:1100px){.kbd-head{flex-direction:column}}

/* Tabs */
.kbd-tabs{display:flex;align-items:center;gap:var(--space-5);border-bottom:1px solid var(--border);margin-bottom:var(--space-5)}
.kbd-tab{padding:0 0 var(--space-3);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--text-secondary);
  cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--duration-fast) var(--ease);font-family:inherit;line-height:inherit;outline:none}
.kbd-tab:hover{color:var(--text-primary)}
.kbd-tab--active{color:var(--info);border-bottom-color:var(--info);font-weight:var(--weight-semibold)}
.kbd-tabcontent{min-height:120px}

/* Section header (used at the top of every tab) */
.kbd-secthead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.kbd-sect-title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--text-primary);line-height:1.2}
.kbd-sect-sub{font-size:var(--text-sm);color:var(--text-muted);margin-top:2px}
.kbd-perm-hint{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap}
.kbd-perm-hint svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Generic table used by Files + Members tabs */
.kbd-table{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);
  overflow:hidden;margin-bottom:var(--space-4)}
.kbd-th{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-secondary);white-space:nowrap}
.kbd-th--right{justify-self:end;text-align:right}
.kbd-empty{padding:var(--space-6) var(--space-5);font-size:var(--text-sm);color:var(--text-secondary)}

/* Files tab */
.kbd-actionbar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap}
/* Indeterminate upload progress — no real per-chunk signal to report (see
   renderUploadActionBar's own comment), so this is a reassurance animation
   ("still working"), not a real percentage. The elapsed-time span updates
   every second via textContent only (see tickUploadTimer) — this whole
   block is written once and never touched again while uploading, so the
   sweep animation runs uninterrupted instead of restarting every tick. */
.kbd-progress-wrap{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:140px}
.kbd-progress{flex:1;max-width:240px;height:8px;border-radius:var(--radius-full);
  background:var(--surface-3);overflow:hidden;position:relative}
.kbd-progress__bar{position:absolute;inset:0;width:36%;border-radius:var(--radius-full);
  background:linear-gradient(90deg,transparent,var(--brand) 35%,var(--brand-alt) 65%,transparent);
  animation:kbdProgressSweep 1.7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes kbdProgressSweep{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(370%)}
}
.kbd-progress__time{font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;
  min-width:28px}
.kbd-err{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--error);margin-bottom:var(--space-3)}
.kbd-err svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kbd-summary{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-3)}
.kbd-fthead,.kbd-frow{display:grid;grid-template-columns:minmax(0,2.5fr) 1fr 90px;align-items:center;gap:var(--space-3);padding:0 var(--space-5)}
.kbd-fthead{height:44px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.kbd-frow{min-height:52px;border-bottom:1px solid var(--border)}
.kbd-frow:last-child{border-bottom:none}
.kbd-frow:hover{background:var(--surface-2)}
.kbd-fcell{min-width:0;font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbd-file{display:flex;align-items:center;gap:var(--space-2)}
.kbd-file__name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Row actions (Files + Members tabs) */
.kbd-rowactions{display:flex;align-items:center;gap:2px;justify-self:end}
.kbd-iconbtn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);
  color:var(--text-muted);cursor:pointer;transition:background var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease)}
.kbd-iconbtn:hover{background:var(--error-bg);color:var(--error)}
.kbd-iconbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kbd-iconbtn--view:hover{background:var(--brand-muted);color:var(--brand)}

/* "View chunks" side panel (Files tab) — a right-aligned drawer, not a
   centered .kb-modal, since a file's chunks are page-length and a file can
   have dozens of them (see rag/chunker.py's ~800-word default chunk size):
   the panel gets its own full-height scroll area instead of growing a
   centered dialog to an awkward height. */
.kbd-chunk-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);
  display:flex;align-items:stretch;justify-content:flex-end;z-index:1000}
.kbd-chunk-panel{position:relative;max-width:92vw;height:100%;background:var(--surface);
  border-left:1px solid var(--border);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;flex-shrink:0}
/* Drag-to-resize handle on the panel's left edge. The clickable hit zone
   (12px) is much wider than the visible line (3px, centered inside it via
   ::after) — a bare few-pixel-wide strip is nearly unhittable with a real
   mouse, let alone this app's own narrower zoomed layouts. Transparent
   until hover/drag so it doesn't read as a UI element at rest. */
.kbd-chunk-resize{position:absolute;top:0;left:-6px;width:12px;height:100%;
  cursor:ew-resize;z-index:2;display:flex;justify-content:center}
.kbd-chunk-resize::after{content:"";width:3px;height:100%;background:transparent;
  transition:background var(--duration-fast) var(--ease)}
.kbd-chunk-resize:hover::after,.kbd-chunk-resize--active::after{background:var(--brand)}
.kbd-chunk-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);flex-shrink:0}
.kbd-chunk-filename{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kbd-chunk-body{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.kbd-chunk-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.kbd-chunk-navbtn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);cursor:pointer;flex-shrink:0;
  transition:background var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease)}
.kbd-chunk-navbtn:hover:not(:disabled){background:var(--surface-2);color:var(--text-primary)}
.kbd-chunk-navbtn:disabled{opacity:.4;cursor:not-allowed}
.kbd-chunk-navbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kbd-chunk-navlabel{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kbd-chunk-text{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-secondary);
  white-space:pre-wrap;word-break:break-word}
.kbd-chunk-empty{display:flex;align-items:center;gap:6px;padding:var(--space-6) 0;
  font-size:var(--text-sm);color:var(--text-secondary);justify-content:center;text-align:center}
.kbd-chunk-empty--error{color:var(--error)}
.kbd-chunk-empty svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Members tab */
.kbd-mthead,.kbd-mrow{display:grid;grid-template-columns:minmax(0,2fr) 1fr 70px;align-items:center;gap:var(--space-3);padding:0 var(--space-5)}
.kbd-mthead{height:44px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.kbd-mrow{min-height:56px;border-bottom:1px solid var(--border)}
.kbd-mrow:last-child{border-bottom:none}
.kbd-mrow:hover{background:var(--surface-2)}
.kbd-mcell{min-width:0;font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbd-member{display:flex;align-items:center;gap:var(--space-2)}
.kbd-member__avatar{width:32px;height:32px;min-width:32px;border-radius:var(--radius-full);background:var(--avatar-bg);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:var(--weight-bold);text-transform:uppercase}
.kbd-member__name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
.kbd-rolebadge{display:inline-flex;align-items:center;height:22px;padding:0 var(--space-2);border-radius:var(--radius-full);
  background:var(--purple-bg);color:var(--purple);font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.kbd-rolebadge--muted{background:var(--surface-2);color:var(--text-secondary)}

/* Audit Log tab — ported visual language from ChatPage.css's .chat-kb__* row
   styles (see renderKbModal there), renamed so this page's CSS stays
   self-contained in this file rather than depending on ChatPage.css. */
.kbd-audit__list{display:flex;flex-direction:column;gap:var(--space-2)}
.kbd-audit__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px dashed var(--border);
  border-radius:var(--radius-md);background:transparent}
.kbd-audit__icon{width:30px;height:30px;min-width:30px;border-radius:var(--radius-sm);background:var(--brand-muted);color:var(--brand);
  display:flex;align-items:center;justify-content:center}
.kbd-audit__icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kbd-audit__icon--danger{background:var(--error-bg);color:var(--error)}
.kbd-audit__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kbd-audit__name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbd-audit__meta{font-size:var(--text-xs);color:var(--text-muted)}

/* Settings tab */
.kbd-settings{display:flex;flex-direction:column;gap:var(--space-4);max-width:520px;margin-bottom:var(--space-5)}
.kbd-settings .kb-btn{align-self:flex-start}
.kbd-readonly{font-size:var(--text-base);color:var(--text-primary);padding:var(--space-2) 0}
.kbd-danger{border:1px solid var(--error-border);border-radius:var(--radius-lg);padding:var(--space-4);
  background:var(--error-bg);display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start;max-width:520px}
.kbd-danger__title{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--error)}
.kbd-danger__desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-normal)}

/* Not-found state */
.kbd-notfound{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);
  text-align:center;padding:var(--space-16) var(--space-4)}
.kbd-notfound__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary)}
.kbd-notfound__sub{font-size:var(--text-sm);color:var(--text-secondary)}

@media(max-width:900px){
  .kbd-fthead,.kbd-frow{grid-template-columns:minmax(0,1fr) 70px 70px}
  .kbd-mthead,.kbd-mrow{grid-template-columns:minmax(0,1fr) 70px 60px}
}