/* Custom layer on top of Bootstrap 5 light theme.
 * Pulse.ai — Agentic AI Platform · a Digitide product
 *   Brand palette inspired by digitide.com: deep navy text, primary
 *   Digitide blue, amber pulse-dot accent, clean white surfaces.
 */

:root[data-bs-theme="light"] {
  /* Pulse.ai brand palette (light) */
  --pulse-blue:       #1a73e8;   /* primary — Digitide blue */
  --pulse-blue-deep:  #0d47a1;
  --pulse-blue-soft:  #e8f0fe;
  --pulse-amber:      #f59e0b;   /* the dot in "Pulse.ai" */
  --pulse-amber-deep: #ea580c;
  --pulse-ink:        #0f1f3a;   /* navy headlines */

  /* Backwards-compatible aliases (legacy --or-* tokens still in CSS) */
  --or-navy-deep:   #f5f7fb;   /* page background */
  --or-navy:        #ffffff;   /* sidebar / topbar surface */
  --or-navy-soft:   #ffffff;   /* card / panel surface */
  --or-navy-line:   #e3e7ee;   /* borders + dividers */
  --or-blue:        var(--pulse-blue);    /* primary brand */
  --or-aqua:        #1a73e8;              /* accent / link */
  --or-text:        var(--pulse-ink);     /* body */
  --or-text-mute:   #5f6b7a;
  --or-warn:        var(--pulse-amber);   /* tool / amber accent */
  --or-think:       #7c3aed;              /* reasoning */

  /* Override Bootstrap design tokens */
  --bs-body-bg:           var(--or-navy-deep);
  --bs-body-color:        var(--or-text);
  --bs-secondary-bg:      var(--or-navy-soft);
  --bs-secondary-bg-rgb:  255, 255, 255;
  --bs-tertiary-bg:       var(--or-navy);
  --bs-tertiary-bg-rgb:   255, 255, 255;
  --bs-border-color:      var(--or-navy-line);
  --bs-primary:           var(--or-blue);
  --bs-primary-rgb:       0, 102, 204;
  --bs-link-color:        var(--or-aqua);
  --bs-link-hover-color:  #007bb3;
  --bs-info:              var(--or-aqua);
  --bs-info-rgb:          0, 153, 207;
  --bs-secondary-color:   var(--or-text-mute);
  --bs-emphasis-color:    var(--or-text);
  --bs-heading-color:     var(--or-text);

  /* internal helpers */
  --pane-bg:        var(--bs-body-bg);
  --soft-border:    var(--bs-border-color);
  --tool-color:     var(--or-warn);
  --tool-soft:      #fef3c7;
  --thinking-color: var(--or-think);
  --thinking-soft:  #ede9fe;

  /* Platform shell tokens */
  --atlas-sidebar-w: 224px;
  --atlas-topbar-h:  52px;
  --atlas-radius:    8px;
  --atlas-radius-sm: 6px;
  --atlas-shadow:    0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.06);
}

/* Tighter, more refined platform typography */
:root[data-bs-theme="dark"] body {
  font-family: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.005em;
}

/* ========================================================================
   Atlas platform shell — sidebar + topbar + content
   ====================================================================== */

.atlas-sidebar {
  width: var(--atlas-sidebar-w);
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid var(--or-navy-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.atlas-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--or-navy-line);
}
.atlas-brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pulse-blue), var(--pulse-blue-deep));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 1px 2px rgba(15,31,58,.10), 0 4px 12px rgba(26,115,232,.22);
}
.atlas-brand-mark.pulse-mark-img {
  background: transparent;
  box-shadow: none;
  padding: 0;
  object-fit: contain;
}
.atlas-brand-text { line-height: 1.1; }
.atlas-brand-name {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--pulse-ink);
  font-family: "Google Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.pulse-brand-name { display: inline-flex; align-items: baseline; gap: 0; }
.pulse-brand-dot {
  color: var(--pulse-amber);
  font-weight: 800;
  margin: 0 1px;
}
.pulse-brand-ai {
  color: var(--pulse-blue);
  font-weight: 700;
}
.atlas-brand-sub {
  font-size: 10px;
  color: var(--or-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-top: 1px;
}
.atlas-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 8px 16px;
}
.atlas-nav-section + .atlas-nav-section { margin-top: 14px; }
.atlas-nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--or-text-mute);
  padding: 6px 10px 4px;
}
.atlas-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--or-text);
  padding: 8px 10px;
  border-radius: var(--atlas-radius-sm);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  margin-bottom: 1px;
  position: relative;
}
.atlas-nav-item i { width: 18px; font-size: 15px; color: var(--or-text-mute); }
.atlas-nav-item:hover {
  background: rgba(0,102,204,.06);
  color: var(--or-text);
}
.atlas-nav-item:hover i { color: var(--or-aqua); }
.atlas-nav-item.active {
  background: linear-gradient(90deg, rgba(0,102,204,.10), rgba(0,153,207,.04));
  color: var(--or-blue);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--or-aqua);
}
.atlas-nav-item.active i { color: var(--or-aqua); }
.atlas-nav-tail {
  margin-left: auto;
  font-size: 10px;
  color: var(--or-text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.atlas-sidebar-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--or-navy-line);
  background: #f8fafc;
}
.atlas-status-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--or-text-mute);
}
.atlas-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6c757d;
  box-shadow: 0 0 0 2px rgba(108,117,125,.18);
}
.atlas-status-dot.connected { background: #4caf50; box-shadow: 0 0 0 2px rgba(76,175,80,.20); }
.atlas-status-dot.busy      { background: #ffb74d; box-shadow: 0 0 0 2px rgba(255,183,77,.20); animation: atlas-pulse 1.4s ease-in-out infinite; }
.atlas-status-dot.error     { background: #ef5350; box-shadow: 0 0 0 2px rgba(239,83,80,.20); }
@keyframes atlas-pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.atlas-version {
  font-size: 10px;
  color: var(--or-text-mute);
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ----- Topbar ----- */
.atlas-topbar {
  height: var(--atlas-topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: #ffffff;
  border-bottom: 1px solid var(--or-navy-line);
}
.atlas-topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.atlas-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.atlas-breadcrumb-root { color: var(--or-text-mute); }
.atlas-breadcrumb-sep  { font-size: 10px; color: var(--or-text-mute); margin: 0 2px; }
.atlas-breadcrumb-page { color: var(--or-text); }

.atlas-topbar-search {
  flex: 1 1 auto;
  max-width: 480px;
  display: flex; align-items: center;
  background: #f3f5f9;
  border: 1px solid var(--or-navy-line);
  border-radius: var(--atlas-radius-sm);
  padding: 0 10px;
  height: 32px;
  font-size: 13px;
}
.atlas-topbar-search:focus-within { border-color: var(--or-aqua); background: #ffffff; box-shadow: 0 0 0 3px rgba(0,153,207,.10); }
.atlas-topbar-search i { color: var(--or-text-mute); margin-right: 8px; }
.atlas-topbar-search input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  color: var(--or-text);
  outline: none;
  font-size: 13px;
}
.atlas-topbar-search input::placeholder { color: var(--or-text-mute); }
.atlas-topbar-search kbd {
  font-size: 10px;
  background: #ffffff;
  color: var(--or-text-mute);
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--or-navy-line);
  margin-left: 8px;
}

.atlas-topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.atlas-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f3f5f9;
  border: 1px solid var(--or-navy-line);
  color: var(--or-text);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.atlas-pill i { color: var(--or-aqua); font-size: 11px; }
.atlas-icon-btn {
  width: 32px; height: 32px;
  background: transparent; border: none;
  color: var(--or-text-mute);
  border-radius: var(--atlas-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.atlas-icon-btn:hover { background: rgba(0,0,0,.06); color: var(--or-text); }

/* ----- Content area + uniform page header ----- */
.atlas-content { background: #f3f5f9; position: relative; }
.atlas-content > div[id^="view-"] { background: transparent; }

/* Boot loader — full-viewport overlay shown until applyRoute() picks a view.
   Sits above the sidebar + topbar so reload doesn't flash the wrong route. */
.boot-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  z-index: 9999;
}
.boot-loader.d-none { display: none !important; }
.boot-loader-inner {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.boot-loader-brand {
  display: flex; align-items: center; gap: 14px;
}
.boot-loader-mark { width: 56px; height: 56px; }
.boot-loader-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.boot-loader-brand-name {
  font-family: "Google Sans", "Inter", sans-serif;
  font-weight: 800; font-size: 1.9rem; color: #0f1f3a; letter-spacing: -0.02em;
}
.boot-loader-brand-sub {
  font-family: "Google Sans Text", sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  color: #6b7488; text-transform: uppercase; margin-top: 2px;
}
.boot-loader .spinner-border {
  width: 2.25rem; height: 2.25rem; border-width: 0.22em;
}

/* Page-header utility — apply to first .container-fluid inside any view  */
.atlas-content > div[id^="view-"] .container-fluid > .d-flex.justify-content-between:first-child {
  padding-bottom: 14px;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--or-navy-line);
}
.atlas-content h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--or-text);
}
.atlas-content h4 .bi {
  color: var(--or-aqua);
  margin-right: 8px !important;
}
.atlas-content h4 + small,
.atlas-content h4 + .small {
  display: block;
  margin-top: 2px;
  color: var(--or-text-mute);
  font-size: 12px;
  letter-spacing: 0;
}

/* Refined card defaults inside the platform shell */
.atlas-content .card {
  border-radius: var(--atlas-radius);
  box-shadow: var(--atlas-shadow);
}
.atlas-content .list-group-item {
  border-radius: var(--atlas-radius-sm);
  margin-bottom: 2px;
}

/* Refined buttons */
.atlas-content .btn-primary {
  background: linear-gradient(180deg, #0a78dc 0%, var(--or-blue) 100%);
  border: 1px solid #0d7fe0;
  font-weight: 500;
}
.atlas-content .btn-primary:hover {
  background: linear-gradient(180deg, #1186e8 0%, #0a78dc 100%);
}
.atlas-content .btn-success {
  background: linear-gradient(180deg, #2ea44f 0%, #228636 100%);
  border-color: #2ea44f;
}

/* On smaller screens collapse sidebar to icons-only */
@media (max-width: 920px) {
  :root[data-bs-theme="dark"] { --atlas-sidebar-w: 60px; }
  .atlas-brand-text, .atlas-nav-label, .atlas-nav-item span:not(.atlas-nav-tail),
  .atlas-sidebar-footer .atlas-status-text, .atlas-version {
    display: none;
  }
  .atlas-brand { justify-content: center; }
  .atlas-nav-item { justify-content: center; padding: 10px 0; }
  .atlas-nav-tail { display: none; }
  .atlas-topbar-search { max-width: 280px; }
}

/* Brand-feel navbar: deep navy band with a subtle aqua underline */
body > nav.navbar {
  background: linear-gradient(180deg, var(--or-navy) 0%, #0c2a4d 100%) !important;
  border-bottom: 1px solid var(--or-blue) !important;
  box-shadow: 0 2px 0 rgba(0, 163, 224, 0.18);
}
body > nav.navbar .navbar-brand {
  color: #fff;
  letter-spacing: 0.4px;
  font-weight: 600;
}
body > nav.navbar .navbar-brand .text-secondary {
  color: var(--or-aqua) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

/* Tighter, corporate buttons */
.btn { border-radius: 4px; }
.btn-primary { background: var(--or-blue); border-color: var(--or-blue); }
.btn-primary:hover, .btn-primary:focus { background: #1a78d6; border-color: #1a78d6; }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); }
.btn-outline-secondary { color: var(--or-text); border-color: var(--or-navy-line); }
.btn-outline-secondary:hover { background: rgba(0, 163, 224, 0.10); border-color: var(--or-aqua); color: var(--or-aqua); }

/* Cards / panels: lift slightly, sharper radius */
.card { background: var(--or-navy-soft); border-color: var(--or-navy-line); border-radius: 6px; }
.card .card-body { background: transparent; }

/* Headings get the corporate weight */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: 0.2px; }

/* List groups */
.list-group-item { background: var(--or-navy-soft); border-color: var(--or-navy-line); color: var(--or-text); }
.list-group-item-action:hover { background: rgba(0, 153, 207, 0.06); }
.list-group-item.active { background: rgba(0, 102, 204, 0.10); border-color: var(--or-blue); color: var(--or-blue); font-weight: 500; }

/* Form controls in light palette */
.form-control, .form-select {
  background: #ffffff;
  border-color: var(--or-navy-line);
  color: var(--or-text);
}
.form-control:focus, .form-select:focus {
  background: #ffffff;
  border-color: var(--or-aqua);
  color: var(--or-text);
  box-shadow: 0 0 0 0.2rem rgba(0, 153, 207, 0.18);
}
.form-control::placeholder { color: var(--or-text-mute); }

/* Badges */
.badge.text-bg-secondary { background: #eef1f5 !important; color: var(--or-text) !important; }
.badge.text-bg-info      { background: var(--or-aqua) !important; color: #ffffff !important; }
.badge.text-bg-warning   { background: var(--or-warn) !important; color: #ffffff !important; }

/* Status pill on navbar */
#status.text-bg-secondary { background: #eef1f5 !important; color: var(--or-text) !important; }

/* Code spans + pre blocks */
code { color: var(--or-aqua); }
pre {
  background: #f8fafc;
  border: 1px solid var(--or-navy-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11.5px;
}

html, body { height: 100%; }
body { overflow: hidden; }

/* layout panes */
.threads-pane { width: 280px; flex-shrink: 0; background: #f8fafc; border-right: 1px solid var(--or-navy-line); }
.chat-pane    { background: #ffffff; }
.side-pane    { width: 360px; flex-shrink: 0; background: #f8fafc; border-left: 1px solid var(--or-navy-line); transition: width 0.2s; }
.side-pane.collapsed { width: 0; overflow: hidden; border: none !important; }

/* Threads sidebar (ChatGPT-style) */
.thread-group-label {
  letter-spacing: 0.5px;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 4px;
}
.thread-row {
  color: var(--bs-body-color);
  text-decoration: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 13px;
}
.thread-row:hover { background: var(--bs-secondary-bg); }
.thread-row.active {
  background: rgba(var(--bs-primary-rgb), 0.18);
  border-left-color: var(--bs-primary);
}
.thread-row .thread-title-text { font-weight: 500; }
.thread-row .thread-agent { font-size: 10px; opacity: 0.7; }

.empty-chat { padding: 60px 20px; }

/* topbar diagram */
.diagram .node {
  border: 1px solid var(--soft-border);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  background: var(--bs-secondary-bg);
  text-align: center;
  min-width: 110px;
  line-height: 1.2;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.diagram .node.active {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}
.wire {
  position: relative;
  width: 80px; height: 2px;
  background: var(--soft-border);
  border-radius: 2px;
}
.wire .dot {
  position: absolute; top: -3px; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tool-color);
  opacity: 0;
  transition: opacity 0.2s;
}
.wire.active { background: linear-gradient(90deg, var(--bs-primary), var(--tool-color)); }
.wire.active .dot { animation: travel 0.9s linear infinite; opacity: 1; }
@keyframes travel { from { left: 0; } to { left: 72px; } }

/* agent list items */
#agents-list .list-group-item {
  background: transparent;
  cursor: pointer;
  border-color: var(--soft-border);
}
#agents-list .list-group-item:hover { background: var(--bs-secondary-bg); }
#agents-list .list-group-item.active {
  background: rgba(var(--bs-primary-rgb), 0.18);
  border-color: var(--bs-primary);
  color: var(--bs-body-color);
}

/* chat messages */
.conversation { display: flex; flex-direction: column; gap: 10px; }
.msg {
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid var(--soft-border);
}
.msg .who { font-size: 11px; color: var(--bs-secondary-color); margin-bottom: 4px; }
.msg.user      { align-self: flex-end; background: rgba(var(--bs-primary-rgb), 0.10); border-color: rgba(var(--bs-primary-rgb), 0.30); color: var(--or-text); }
.msg.assistant { align-self: flex-start; background: #f8fafc; color: var(--or-text); }

/* Resources tab: per-RAG-call CPU / RAM / wall-time + batch grouping */
#view-resources .resource-summary {
  background: var(--or-navy-soft);
  border: 1px solid var(--or-navy-line);
  border-left: 3px solid var(--or-aqua);
  border-radius: 6px;
}
#view-resources .resource-summary strong { color: var(--or-text); }
#view-resources .rg-group {
  background: var(--or-navy-soft);
  border: 1px solid var(--or-navy-line);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
}
#view-resources .rg-header {
  display: flex; align-items: center;
  font-size: 11px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--soft-border);
  flex-wrap: wrap; gap: 4px;
}
#view-resources .rg-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
#view-resources .rg-tag.batch  { background: rgba(0,153,207,.14); color: var(--or-aqua); }
#view-resources .rg-tag.single { background: #eef1f5; color: var(--or-text-mute); }
#view-resources .rg-row {
  padding: 5px 0;
  border-bottom: 1px solid #eef1f5;
}
#view-resources .rg-row:last-child { border-bottom: 0; }
#view-resources .rg-row.rg-err { background: rgba(220,53,69,.06); padding-left: 6px; border-left: 2px solid var(--bs-danger); }
#view-resources .rg-row-top {
  font-size: 12px;
  color: var(--or-text);
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-resources .rg-q { font-weight: 500; }
#view-resources .rg-filt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--or-text-mute);
}
#view-resources .rg-bar {
  height: 4px;
  background: #eef1f5;
  border-radius: 2px;
  overflow: hidden;
  margin: 3px 0;
}
#view-resources .rg-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--or-blue), var(--or-aqua));
}
#view-resources .rg-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
}
#view-resources .rg-stats .bi { margin-right: 2px; color: var(--or-text-mute); }

/* ===== v2: Costs / Workflows / Tests / Governance ===== */
.cost-row { cursor: pointer; transition: background-color .12s; }
.cost-row:hover { background: rgba(0,163,224,.06); }
.cost-row .cost-title { font-weight: 500; }
.cost-bar {
  height: 4px; background: #eef1f5;
  border-radius: 2px; overflow: hidden; margin-top: 4px;
}
.cost-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--or-blue), var(--or-aqua));
}

/* v3.5: compact costs header strip + credit rail + tile strip */
.costs-header {
  display: flex; align-items: stretch; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.costs-header-title { display: flex; flex-direction: column; justify-content: center; }
.costs-credit-rail {
  display: flex; gap: 8px; flex-grow: 1; min-width: 0;
  flex-wrap: wrap;
}
.costs-credit-card {
  flex: 1 1 220px; min-width: 220px;
  border: 1px solid var(--soft-border);
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--bs-body-bg);
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
}
.costs-credit-card.costs-credit-warn   { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.05); }
.costs-credit-card.costs-credit-danger { border-color: rgba(220,38,38,.5);  background: rgba(220,38,38,.06);  }
.costs-credit-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.costs-credit-numbers strong { font-size: 16px; }
.costs-credit-bar { height: 4px; background: #eef1f5; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.costs-credit-fill {
  height: 100%;
  background: linear-gradient(90deg, #1a73e8, #34a853);
}
.costs-credit-warn   .costs-credit-fill { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.costs-credit-danger .costs-credit-fill { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.costs-refresh-btn { align-self: center; }

.costs-summary-strip {
  display: grid; gap: 8px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.costs-tile {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--soft-border);
  border-radius: 12px;
  background: var(--bs-body-bg);
}
.costs-tile-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,115,232,.1); color: #1a73e8;
  border-radius: 10px; font-size: 18px;
}
.costs-tile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.costs-tile-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.costs-tile-value { font-size: 18px; font-weight: 600; }
.costs-tile-sub   { font-size: 11px; color: var(--bs-secondary-color); margin-top: 1px; }

.costs-tabs .nav-link { padding: 6px 12px; font-size: 13px; }
.cost-row-user { margin-left: 8px; font-size: 11px; }
.costs-thread-filters select { font-size: 12px; }
.costs-ing-table th, .costs-users-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); }
.costs-ing-daily {
  display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.costs-ing-day {
  border: 1px solid var(--soft-border); border-radius: 8px;
  background: var(--bs-tertiary-bg); padding: 6px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.costs-ing-day-label { font-weight: 600; font-size: 12px; }
.costs-ing-day-bar { height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; }
.costs-ing-day-fill { height: 100%; background: linear-gradient(90deg, #1a73e8, #7c3aed); }
.costs-ing-day-meta { font-size: 11px; color: var(--bs-secondary-color); }

#costs-trace .trace-turn { background: var(--or-navy-soft); }
#costs-trace .trace-turn-head { font-size: 12px; }
#costs-trace .trace-user, #costs-trace .trace-assist {
  font-size: 12px; padding: 6px 8px;
  background: #f8fafc;
  border-radius: 4px;
  white-space: pre-wrap;
}
#costs-trace .trace-events { display: flex; flex-direction: column; gap: 4px; }
#costs-trace .trace-ev {
  font-size: 11px;
  padding: 3px 6px;
  border-left: 2px solid var(--soft-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#costs-trace .trace-ev-type {
  display: inline-block;
  font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bs-secondary-color);
  margin-right: 6px;
  min-width: 110px;
}
#costs-trace .trace-args, #costs-trace .trace-code {
  display: inline-block;
  font-size: 11px;
  background: #eef1f5;
  color: var(--or-text);
  padding: 1px 5px; border-radius: 3px;
  margin: 2px 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ========================================================================
   Workflow visual designer (Langflow-style)
   ====================================================================== */

/* Full-bleed workflow page: drop the 1200px reading width and let the
   designer fill the available content area horizontally. */
.view-workflows-full .wf-page-container {
  max-width: none !important;
  padding-left: 18px;
  padding-right: 18px;
}

/* Workflow overview (table + empty state) */
.wf-overview-table {
  background: #ffffff;
  border: 1px solid var(--or-navy-line);
  border-radius: 10px;
  overflow: hidden;
}
.wf-overview-table .table { margin-bottom: 0; }
.wf-overview-table thead th {
  background: #f8fafc;
  border-bottom: 1px solid var(--or-navy-line);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 14px;
}
.wf-overview-table tbody td { padding: 12px 14px; vertical-align: middle; }
.wf-overview-table .wf-row-name { font-weight: 600; color: var(--or-text); }
.wf-overview-table .wf-row-id   { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                                   font-size: 10px; color: var(--or-text-mute); }
.wf-overview-table .wf-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.wf-overview-table .wf-row-actions .btn { font-size: 11px; }

.wf-overview-empty {
  background: #ffffff;
  border: 1px dashed var(--or-navy-line);
  border-radius: 12px;
  padding: 40px 32px;
}
.wf-overview-empty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.wf-overview-empty-feature {
  text-align: left;
  padding: 18px;
  background: #f8fafc;
  border: 1px solid var(--or-navy-line);
  border-radius: 10px;
  animation: wf-feat-rise .5s ease-out;
}
.wf-overview-empty-feature h6 { margin: 0 0 4px; font-size: 14px; }
.wf-feat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(15,23,42,.12);
  animation: wf-feat-float 3s ease-in-out infinite;
}
.wf-overview-empty-feature:nth-child(2) .wf-feat-icon { animation-delay: .25s; }
.wf-overview-empty-feature:nth-child(3) .wf-feat-icon { animation-delay: .50s; }
.wf-overview-empty-feature:nth-child(4) .wf-feat-icon { animation-delay: .75s; }
@keyframes wf-feat-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wf-feat-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Zen mode: hide the global atlas sidebar so the workflow designer gets
   the full window width. Triggered by adding `.atlas-zen-mode` to <body>
   when the workflows view is active. A floating "show sidebar" pill
   restores it (also hides the breadcrumb's chevron noise). */
body.atlas-zen-mode .atlas-sidebar { display: none; }
body.atlas-zen-mode .atlas-zen-restore {
  position: fixed; left: 12px; top: 10px;
  z-index: 1080;
  background: #ffffff;
  border: 1px solid var(--or-navy-line);
  color: var(--or-text);
  border-radius: 999px;
  font-size: 12px; padding: 4px 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
  display: inline-flex; align-items: center; gap: 6px;
}
body:not(.atlas-zen-mode) .atlas-zen-restore { display: none; }
body.atlas-zen-mode .atlas-topbar { padding-left: 130px; }

.wf-designer {
  display: grid;
  grid-template-columns: 240px 1fr 340px;
  gap: 10px;
  height: calc(100vh - 200px);
  min-height: 620px;
  position: relative;
}
.wf-designer.is-palette-collapsed { grid-template-columns: 0 1fr 340px; }
.wf-designer.is-rail-collapsed    { grid-template-columns: 240px 1fr 0; }
.wf-designer.is-palette-collapsed.is-rail-collapsed { grid-template-columns: 0 1fr 0; }
.wf-designer.is-palette-collapsed > .wf-palette { display: none; }
.wf-designer.is-rail-collapsed    > .wf-rail-right { display: none; }
/* Pin the canvas + right-rail to explicit grid columns. Without this,
   when .wf-palette is display:none under is-palette-collapsed, auto-
   placement flows the canvas into column 1 (0-width) and the rail into
   column 2 (1fr) — the visible bug where the Inspect/Trace pane took
   the entire visible width. */
.wf-designer > .wf-canvas-host { grid-column: 2 / 3; }
.wf-designer > .wf-rail-right  { grid-column: 3 / 4; }

/* ----- Left palette (categorized, draggable node templates) ------------- */
.wf-palette {
  background: #ffffff;
  border: 1px solid var(--or-navy-line);
  border-radius: 10px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.wf-palette-header {
  position: sticky; top: 0;
  padding: 10px;
  background: #ffffff;
  border-bottom: 1px solid var(--or-navy-line);
  z-index: 1;
}
.wf-palette-section { padding: 10px 8px 6px; }
.wf-palette-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--or-text-mute);
  padding: 0 6px 6px;
  display: flex; align-items: center; gap: 6px;
}
.wf-palette-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  border-radius: 8px;
  cursor: grab;
  transition: background-color .12s, box-shadow .12s, transform .12s;
}
.wf-palette-item:hover {
  background: #f3f6fb;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.wf-palette-item:active { cursor: grabbing; transform: scale(.98); }
.wf-palette-item.is-dragging { opacity: .5; }
.wf-palette-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15,23,42,.10);
}
.wf-palette-body { min-width: 0; }
.wf-palette-name {
  font-size: 13px; font-weight: 600; color: var(--or-text);
  line-height: 1.2;
}
.wf-palette-desc {
  font-size: 11px; color: var(--or-text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ----- Right rail (tabbed inspector + trace) --------------------------- */
.wf-rail-right {
  background: #ffffff;
  border: 1px solid var(--or-navy-line);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.wf-rail-tabs {
  display: flex;
  border-bottom: 1px solid var(--or-navy-line);
  background: #f8fafc;
  flex-shrink: 0;
}
.wf-rail-tab {
  flex: 1 1 50%;
  background: transparent;
  border: none;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--or-text-mute);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-bottom: 2px solid transparent;
}
.wf-rail-tab:hover  { color: var(--or-text); }
.wf-rail-tab.active {
  color: var(--or-blue);
  background: #ffffff;
  border-bottom-color: var(--or-blue);
}
.wf-rail-trace-badge {
  display: inline-block;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  font-size: 10px; font-weight: 600;
  background: var(--or-aqua); color: #fff;
  padding: 0 5px; line-height: 18px;
  text-align: center;
}
.wf-rail-pane {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Trace pane structure */
.wf-trace-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--or-navy-line);
  background: #f8fafc;
}
.wf-trace-summary {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}
.wf-trace-summary .wf-trace-stat {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--or-text-mute);
}
.wf-trace-summary .wf-trace-stat strong { color: var(--or-text); }
.wf-trace-input-line {
  font-size: 11px;
  color: var(--or-text-mute);
  margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-trace-body { padding: 10px 12px; }

/* Per-step structured cards (OpenAI Agent Builder feel) */
.wf-step-card {
  border: 1px solid var(--or-navy-line);
  border-radius: 8px;
  margin-bottom: 8px;
  background: #ffffff;
  overflow: hidden;
}
.wf-step-card.is-running { border-color: var(--or-aqua); box-shadow: 0 0 0 2px rgba(0,153,207,.10); }
.wf-step-card.is-fail    { border-color: #ef4444; }
.wf-step-head {
  padding: 8px 10px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  background: #f8fafc;
  border-bottom: 1px solid transparent;
  transition: background-color .12s, border-color .12s;
}
.wf-step-head:hover { background: #eef2f7; }
.wf-step-card.is-open .wf-step-head { border-bottom-color: var(--or-navy-line); background: #ffffff; }
.wf-step-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px;
  flex-shrink: 0;
}
.wf-step-icon.t-trigger  { background: #10b981; }
.wf-step-icon.t-agent    { background: var(--or-blue); }
.wf-step-icon.t-verifier { background: #d97706; }
.wf-step-icon.t-branch   { background: #7c3aed; }
.wf-step-icon.t-tool     { background: #64748b; }
.wf-step-icon.t-end      { background: #475569; }

.wf-step-title { flex: 1 1 auto; min-width: 0; }
.wf-step-title .wf-step-name {
  font-size: 12.5px; font-weight: 600; color: var(--or-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-step-title .wf-step-sub {
  font-size: 10.5px; color: var(--or-text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.wf-step-meta {
  font-size: 10.5px;
  color: var(--or-text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.wf-step-meta .badge { margin-right: 4px; }
.wf-step-toggle { color: var(--or-text-mute); font-size: 11px; }
.wf-step-toggle .bi { transition: transform .15s ease; }
.wf-step-card.is-open .wf-step-toggle .bi { transform: rotate(180deg); }

/* Body holds input / activity / output / files / errors. Collapsed by
   default — only revealed when the parent card has `.is-open`
   (set by the head's click handler, or auto-set on failure so errors
   are never hidden). */
.wf-step-body { padding: 8px 12px 10px; font-size: 12px; display: none; }
.wf-step-card.is-open .wf-step-body { display: block; }
.wf-step-row {
  display: flex; gap: 6px;
  padding: 4px 0;
  align-items: baseline;
}
.wf-step-row .wf-step-row-label {
  font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--or-text-mute);
  width: 64px; flex-shrink: 0;
}
.wf-step-row .wf-step-row-val {
  flex: 1 1 auto;
  word-break: break-word;
}
.wf-step-row pre {
  background: #0b1220; color: #e2e8f0;
  font-size: 10.5px; padding: 8px 10px;
  border-radius: 6px; margin: 4px 0 0;
  max-height: 200px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Inner sub-events (reasoning + tool calls) */
.wf-substeps {
  margin-top: 6px;
  border-left: 2px solid #e2e8f0;
  padding-left: 10px;
}
.wf-sub {
  padding: 4px 0;
  font-size: 11.5px;
}
.wf-sub-head {
  display: flex; align-items: baseline; gap: 6px;
  flex-wrap: wrap;
}
.wf-sub-tag {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 6px; border-radius: 4px;
}
.wf-sub.kind-thinking .wf-sub-tag { background: #ede9fe; color: #7c3aed; }
.wf-sub.kind-tool_use .wf-sub-tag { background: #fef3c7; color: #b45309; }
.wf-sub.kind-tool_result .wf-sub-tag { background: #dcfce7; color: #14532d; }
.wf-sub.kind-text .wf-sub-tag { background: #dbeafe; color: #1d4ed8; }
.wf-sub-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--or-text);
}
.wf-sub-body {
  margin-top: 3px;
  color: var(--or-text);
}
.wf-sub-body pre {
  background: #f8fafc;
  color: var(--or-text);
  font-size: 10.5px;
  border: 1px solid var(--or-navy-line);
  padding: 6px 8px; border-radius: 4px; margin: 3px 0 0;
  max-height: 160px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.wf-trace-rawlog { padding: 0 12px 12px; }
.wf-trace-rawlog summary { padding: 6px 0; }
.wf-rail-empty {
  text-align: center; padding: 36px 16px;
  color: var(--or-text-mute);
}
.wf-rail-empty i { font-size: 24px; color: var(--or-aqua); }
.wf-rail-section {
  padding: 10px 12px;
  border-top: 1px solid var(--or-navy-line);
}
.wf-rail-section-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--or-text-mute);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.wf-rail-section-head strong { color: var(--or-text); font-weight: 600; }
.wf-rail-section-head i { color: var(--or-aqua); }

/* ----- Canvas host: stacked header + canvas ----------------------------- */
.wf-canvas-host {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--or-navy-line);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.wf-canvas-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid var(--or-navy-line);
}
.wf-canvas-header-left { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.wf-canvas-name { max-width: 320px; font-weight: 500; }
.wf-canvas-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
}
.wf-canvas-header-right { display: flex; align-items: center; gap: 4px; }

/* ----- Live status bar (top of canvas during execution) ---------------- */
.wf-live-status {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  margin: 0 0 8px 0;
  background: linear-gradient(90deg, #eff6ff 0%, #e0e7ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  font-size: 13px;
  color: #1e3a8a;
  transition: opacity .35s ease, transform .35s ease;
}
.wf-live-status.d-none { display: none !important; }
.wf-live-status.is-fading { opacity: 0; transform: translateY(-4px); }
.wf-live-status.is-completed {
  background: linear-gradient(90deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #bbf7d0; color: #166534;
}
.wf-live-status.is-error {
  background: linear-gradient(90deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fecaca; color: #991b1b;
}
.wf-live-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.65);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wf-live-status-pill i { font-size: 14px; }
.wf-live-status-current {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  font-size: 12.5px;
  min-width: 0;
}
.wf-live-status-label {
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; font-size: 10.5px;
  color: inherit; opacity: 0.65;
}
#wf-live-current-name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 320px;
}

/* ----- Inline Run launcher (below Start node) ------------------------- */
.wf-start-launcher {
  padding: 6px 12px 8px;
  border-top: 1px dashed #e6ecf5;
  margin-top: 2px;
}
.wf-start-launcher .wf-start-play {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600;
}
.wf-start-launcher-callout {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  width: 320px;
  background: #ffffff;
  border: 1px solid #d1dde8;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16),
              0 2px 4px rgba(15, 23, 42, 0.06);
  padding: 12px 14px 14px;
  z-index: 9;
  font-size: 12.5px;
  pointer-events: auto;
}
.wf-start-launcher-arrow {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px; height: 12px;
  background: #ffffff;
  border-left: 1px solid #d1dde8;
  border-top:  1px solid #d1dde8;
  transform: translateX(-50%) rotate(45deg);
}
.wf-start-launcher-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: #0f1f3a;
  margin-bottom: 10px;
}
.wf-start-launcher-head i { color: #2563eb; font-size: 16px; }
.wf-start-launcher-close {
  margin-left: auto;
  width: 22px; height: 22px;
  background: transparent; border: none;
  color: #6b7488; padding: 0;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.wf-start-launcher-close:hover { background: #f1f5f9; color: #1e293b; }
.wf-start-launcher-label {
  display: block; font-size: 11px; font-weight: 600;
  color: #6b7488; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.wf-start-launcher-input {
  resize: vertical;
  font-size: 13px;
  margin-bottom: 10px;
}
.wf-start-launcher-attach-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.wf-start-launcher-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: 14px;
  font-size: 11.5px; color: #075985;
  max-width: 180px; min-width: 0;
}
.wf-start-launcher-chip.d-none { display: none !important; }
.wf-start-launcher-chip i.bi-file-earmark { font-size: 13px; }
.wf-start-chip-name {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-start-chip-remove {
  background: transparent; border: none;
  color: #075985; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
}
.wf-start-chip-remove:hover { background: #bae6fd; }
.wf-start-launcher-run {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600;
}

/* ----- HITL action callout (below HITL node while paused) ------------- */
.wf-hitl-callout {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  width: 300px;
  background: #faf5ff;
  border: 1px solid #d8b4fe;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.18),
              0 2px 4px rgba(15, 23, 42, 0.06);
  padding: 12px 14px;
  z-index: 8;
  font-size: 12.5px;
  pointer-events: auto;
  animation: wf-hitl-pulse 2s ease-in-out infinite;
}
.wf-hitl-callout.is-resolved {
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.16),
              0 2px 4px rgba(15, 23, 42, 0.05);
  animation: none;
}
.wf-hitl-callout-arrow {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px; height: 12px;
  background: inherit;
  border-left: 1px solid #d8b4fe;
  border-top:  1px solid #d8b4fe;
  transform: translateX(-50%) rotate(45deg);
}
.wf-hitl-callout.is-resolved .wf-hitl-callout-arrow {
  border-color: #bbf7d0;
}
.wf-hitl-callout-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
  color: #5b21b6;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.18);
  margin-bottom: 10px;
}
.wf-hitl-callout.is-resolved .wf-hitl-callout-head {
  color: #166534;
  border-bottom-color: #bbf7d0;
}
.wf-hitl-callout-head i { font-size: 16px; }
.wf-hitl-callout-status {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #ede9fe; color: #5b21b6;
  padding: 2px 8px; border-radius: 999px;
}
.wf-hitl-callout.is-resolved .wf-hitl-callout-status {
  background: #dcfce7; color: #166534;
}
.wf-hitl-callout-prompt {
  font-size: 12.5px;
  color: #1e293b;
  line-height: 1.45;
  background: #ffffff;
  border: 1px solid #e9d5ff;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.wf-hitl-callout-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #7c3aed; color: #ffffff;
  font-weight: 700; font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .15s ease;
}
.wf-hitl-callout-cta:hover {
  background: #6d28d9; color: #ffffff; text-decoration: none;
}
.wf-hitl-callout-cta i { font-size: 14px; }
.wf-hitl-callout-url {
  margin-top: 8px;
  font-size: 10.5px; color: #6b7488;
  font-family: ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}
.wf-hitl-callout-response {
  font-size: 12.5px;
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 8px 10px;
}
.wf-hitl-callout-response-label {
  font-weight: 700; color: #166534;
  margin-right: 6px;
}
.wf-hitl-callout-response-value { color: #1e293b; }
@keyframes wf-hitl-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(124, 58, 237, 0.18),
                          0 2px 4px rgba(15, 23, 42, 0.06); }
  50%      { box-shadow: 0 10px 32px rgba(124, 58, 237, 0.32),
                          0 0 0 4px rgba(124, 58, 237, 0.08); }
}

/* ----- Outcome card (below End node after run completes) --------------- */
.wf-outcome-card {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  width: 320px;
  background: #ffffff;
  border: 1px solid #d1dde8;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14),
              0 2px 4px rgba(15, 23, 42, 0.06);
  padding: 12px 14px;
  z-index: 7;
  font-size: 12.5px;
  pointer-events: auto;
}
.wf-outcome-card.is-completed { border-color: #bbf7d0; }
.wf-outcome-card.is-error     { border-color: #fecaca; background: #fef2f2; }
.wf-outcome-arrow {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px; height: 12px;
  background: inherit;
  border-left: 1px solid #d1dde8;
  border-top:  1px solid #d1dde8;
  transform: translateX(-50%) rotate(45deg);
}
.wf-outcome-card.is-completed .wf-outcome-arrow {
  border-color: #bbf7d0; background: #ffffff;
}
.wf-outcome-card.is-error .wf-outcome-arrow {
  border-color: #fecaca; background: #fef2f2;
}
.wf-outcome-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
  color: #0f1f3a;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6ecf5;
  margin-bottom: 10px;
}
.wf-outcome-card.is-completed .wf-outcome-head i { color: #16a34a; }
.wf-outcome-card.is-error     .wf-outcome-head i { color: #b91c1c; }
.wf-outcome-status {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7488;
  background: #f1f5f9;
  padding: 2px 8px; border-radius: 999px;
}
.wf-outcome-card.is-completed .wf-outcome-status { background: #dcfce7; color: #166534; }
.wf-outcome-card.is-error     .wf-outcome-status { background: #fee2e2; color: #991b1b; }
.wf-outcome-section { margin-bottom: 10px; }
.wf-outcome-section:last-child { margin-bottom: 0; }
.wf-outcome-section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7488;
  margin-bottom: 6px;
}
.wf-outcome-section-title i { color: #2563eb; }
.wf-outcome-decision {
  font-size: 16px; font-weight: 600;
  color: #0f1f3a;
  background: #f8fafc;
  border: 1px solid #e6ecf5;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.4;
}
.wf-outcome-card.is-completed .wf-outcome-decision { background: #f0fdf4; border-color: #bbf7d0; }
.wf-outcome-card.is-error     .wf-outcome-decision { background: #fff;   border-color: #fecaca; color: #991b1b; }
.wf-outcome-summary {
  background: #f8fafc;
  border: 1px solid #e6ecf5;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #1e293b;
  white-space: pre-wrap; word-break: break-word;
  max-height: 200px; overflow-y: auto;
}
.wf-outcome-files {
  display: flex; flex-direction: column; gap: 6px;
}
.wf-outcome-file {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc; border: 1px solid #e6ecf5;
  color: #1e3a8a; font-weight: 500;
  text-decoration: none;
  font-size: 12.5px;
}
.wf-outcome-file:hover { background: #eff6ff; border-color: #bfdbfe; text-decoration: none; }
.wf-outcome-file i { color: #2563eb; }
.wf-outcome-file-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-outcome-file-size {
  background: #e0e7ff; color: #4338ca;
  font-size: 10.5px; font-weight: 600;
  padding: 2px 6px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.wf-outcome-foot {
  display: flex; gap: 12px;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed #e6ecf5;
  font-size: 11px;
  color: #6b7488;
  font-variant-numeric: tabular-nums;
}
.wf-outcome-foot i { font-size: 12px; margin-right: 2px; }

/* Workflow switcher dropdown */
.wf-switcher-pop {
  position: absolute;
  top: 50px; left: 12px;
  width: 320px; max-height: 380px;
  background: #ffffff;
  border: 1px solid var(--or-navy-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,.12), 0 2px 4px rgba(15,23,42,.06);
  overflow: hidden;
  z-index: 50;
  display: flex; flex-direction: column;
}
.wf-switcher-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--or-navy-line);
}
.wf-switcher-pop .list-group-flush { overflow-y: auto; }

/* ----- Canvas (zoomable, pannable) -------------------------------------- */
.wf-canvas {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.10) 1px, transparent 0) 0 0 / 22px 22px,
    #f8fafc;
  cursor: grab;
}
.wf-canvas.is-panning { cursor: grabbing; }
.wf-canvas.is-drop-target {
  background:
    radial-gradient(circle at 1px 1px, rgba(0,153,207,.15) 1px, transparent 0) 0 0 / 22px 22px,
    #eef7fc;
}
.wf-canvas-hint {
  position: absolute; left: 12px; bottom: 12px;
  font-size: 11px; color: var(--or-text-mute);
  pointer-events: none;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--or-navy-line);
  padding: 5px 10px; border-radius: 6px;
}

/* Floating zoom / fit controls */
.wf-floating-controls {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 4px;
  background: #ffffff;
  border: 1px solid var(--or-navy-line);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.06);
}
.wf-fc-btn {
  width: 32px; height: 32px;
  background: transparent; border: none;
  color: var(--or-text);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.wf-fc-btn:hover { background: #f3f6fb; color: var(--or-aqua); }
#wf-zoom-pct { font-size: 10px; font-weight: 600; }

.wf-svg, .wf-nodes-layer {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  width: 8000px; height: 5000px;
}
.wf-svg { pointer-events: none; }
.wf-svg path.wf-edge {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 2;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke .15s, stroke-width .15s;
}
.wf-svg path.wf-edge:hover { stroke: var(--or-aqua); stroke-width: 3; }
.wf-svg path.wf-edge.wf-edge-true  { stroke: #10b981; }
.wf-svg path.wf-edge.wf-edge-false { stroke: #f59e0b; }
.wf-svg path.wf-edge.is-temp { stroke-dasharray: 6 4; opacity: .7; stroke: var(--or-aqua); }
.wf-svg text.wf-edge-label {
  fill: var(--or-text);
  font-size: 10px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linejoin: round;
}

/* ----- Nodes (Langflow-style: bigger, header-strip, inline params) ------ */
.wf-node {
  position: absolute;
  width: 280px;
  background: #ffffff;
  border: 1.5px solid var(--or-navy-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 16px rgba(15,23,42,.06);
  user-select: none;
  font-size: 12.5px;
  cursor: default;
  color: var(--or-text);
  transition: box-shadow .15s, border-color .15s, transform .12s;
}
.wf-node:hover { box-shadow: 0 2px 4px rgba(15,23,42,.08), 0 10px 24px rgba(15,23,42,.10); }
.wf-node.wf-node-selected {
  border-color: var(--or-aqua);
  box-shadow: 0 0 0 4px rgba(0,153,207,.16), 0 8px 24px rgba(15,23,42,.12);
}

/* Node category colors (header strip) */
.wf-node-strip { height: 4px; border-radius: 12px 12px 0 0; }
.wf-node-trigger  .wf-node-strip { background: #10b981; }
.wf-node-agent    .wf-node-strip { background: var(--or-blue); }
.wf-node-verifier .wf-node-strip { background: #d97706; }
.wf-node-branch   .wf-node-strip { background: #7c3aed; }
.wf-node-tool     .wf-node-strip { background: #64748b; }
.wf-node-end      .wf-node-strip { background: #475569; }

/* Persistent "setup steps pending / ready to run" pill in the canvas header. */
.wf-setup-steps { margin: 8px 12px 0; }
.wf-actions-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: box-shadow .12s ease, transform .12s ease;
}
.wf-actions-pill:hover { box-shadow: 0 2px 8px rgba(15,23,42,.12); transform: translateY(-1px); }
.wf-actions-pill.is-pending { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.wf-actions-pill.is-ready   { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.wf-actions-pill-cta {
  margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  background: #ea580c; color: #fff; font-size: 11px; font-weight: 700;
}

/* Action-items popup rows. */
.wf-ai-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; margin-bottom: 10px;
  border-radius: 10px; border: 1px solid #e2e8f0;
}
.wf-ai-row.is-pending { background: #fff7ed; border-color: #fdba74; }
.wf-ai-row.is-done    { background: #f8fafc; border-color: #e2e8f0; }
.wf-ai-num {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; background: #ea580c;
}
.wf-ai-row.is-done .wf-ai-num { background: #059669; }
.wf-ai-text { flex: 1 1 auto; min-width: 0; }
.wf-ai-title { font-size: 14px; font-weight: 600; color: #0f172a; margin-bottom: 2px; }
.wf-ai-desc { font-size: 12px; color: #64748b; }
.wf-ai-line { display: flex; gap: 8px; font-size: 12px; color: #475569; line-height: 1.35; }
.wf-ai-k {
  flex: 0 0 auto; min-width: 52px;
  font-weight: 700; color: #64748b; text-transform: uppercase;
  font-size: 10px; letter-spacing: .04em; padding-top: 2px;
}

/* Excel-mapper empty state (no template yet) — upload / create chooser. */
.wf-mapper-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; height: 100%; min-height: 320px; padding: 40px 20px; color: #475569;
}
.wf-mapper-empty > .bi { font-size: 34px; color: #94a3b8; }

/* Trace step → Excel output affordance + read-only viewer. */
.wf-excel-output { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-excel-output > .bi { font-size: 18px; color: #16a34a; }
.wf-excel-output-name { font-size: 13px; font-weight: 600; color: #0f172a; }
.wf-excel-output-link {
  background: none; border: none; padding: 0;
  font-size: 13px; font-weight: 600; color: #2563eb; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.wf-excel-output-link:hover { color: #1d4ed8; }

/* Field-picker: tabbed cell-operation builder (map / lookup / llm / web). */
.triage-picker-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.triage-picker-tab {
  flex: 1 1 0; padding: 5px 6px; border: 1px solid #e2e8f0; border-radius: 6px;
  background: #f8fafc; font-size: 11px; font-weight: 600; color: #64748b; cursor: pointer;
}
.triage-picker-tab.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.triage-ptab { display: flex; flex-direction: column; }
.triage-field-list { max-height: 220px; overflow: auto; }
.triage-prebuilt-list { display: flex; flex-direction: column; gap: 4px; }
.triage-prebuilt-item {
  display: flex; align-items: center; gap: 6px; text-align: left;
  padding: 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff;
  font-size: 12px; font-weight: 600; color: #0f172a; cursor: pointer;
}
.triage-prebuilt-item:hover { border-color: #2563eb; background: #eff6ff; }
.triage-op-builder { padding: 8px; border-top: 1px solid #e2e8f0; }
#triage-op-form { border-top: 1px solid #e2e8f0; padding-top: 8px; margin-top: 4px; }
.triage-op-builder-label { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.triage-op-fields { display: flex; flex-direction: column; }
.triage-op-hint { font-size: 11px; color: #94a3b8; margin-top: 4px; line-height: 1.3; }
#triage-field-picker { max-height: 80vh; overflow: auto; width: 320px; }
.triage-binding-op-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 5px; border-radius: 4px; margin-right: 4px; color: #fff;
}
.triage-binding-op-badge.op-map    { background: #2563eb; }
.triage-binding-op-badge.op-lookup { background: #0891b2; }
.triage-binding-op-badge.op-llm    { background: #7c3aed; }
.triage-binding-op-badge.op-web    { background: #ea580c; }
.output-viewer-sheet { margin-bottom: 18px; }
.output-viewer-sheet-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: 6px; }
.output-viewer-table { font-size: 12px; }
.output-viewer-table th { background: #f1f5f9; font-weight: 700; white-space: nowrap; }
.output-viewer-table td { white-space: nowrap; }
.wf-ai-ready {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 10px 12px;
  border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0;
  font-size: 13px; font-weight: 600; color: #065f46;
}
.wf-ai-ready .bi { color: #059669; }

.wf-node-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px;
  cursor: move;
}
.wf-node-header .wf-node-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
.wf-node-trigger  .wf-node-header .wf-node-icon { background: #10b981; }
.wf-node-agent    .wf-node-header .wf-node-icon { background: var(--or-blue); }
.wf-node-verifier .wf-node-header .wf-node-icon { background: #d97706; }
.wf-node-branch   .wf-node-header .wf-node-icon { background: #7c3aed; }
.wf-node-tool     .wf-node-header .wf-node-icon { background: #64748b; }
.wf-node-end      .wf-node-header .wf-node-icon { background: #475569; }
.wf-node-title-block { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.wf-node-title {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-node-type-badge {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--or-text-mute);
  font-weight: 500;
}
.wf-node-status-pip {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  background: #cbd5e1;
}
.wf-node-status-pip.ok    { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.20); }
.wf-node-status-pip.error { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.20); }

.wf-node-body {
  padding: 6px 12px 10px;
}
.wf-node-field {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 0;
  font-size: 11px;
}
.wf-node-field-label {
  color: var(--or-text-mute);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
}
.wf-node-field-value {
  color: var(--or-text);
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-node-field-value.is-empty { color: var(--or-text-mute); font-style: italic; font-weight: 400; }
.wf-node-field-value code {
  font-size: 11px;
  background: #f3f5f9;
  border: 1px solid var(--or-navy-line);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--or-text);
}

.wf-node-footer {
  padding: 8px 12px;
  border-top: 1px solid #eef1f5;
  background: #fafbfc;
  border-radius: 0 0 12px 12px;
  font-size: 10.5px;
  display: flex; gap: 8px; align-items: center;
}
.wf-node-footer .wf-node-stat {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--or-text-mute);
}
.wf-node-footer .wf-node-stat strong { color: var(--or-text); }

/* ----- Ports: HORIZONTAL (left = input, right = output) ----------------- */
.wf-port {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid var(--or-aqua);
  cursor: crosshair;
  z-index: 2;
  transition: transform .12s, box-shadow .12s;
}
.wf-port::after {
  content: "";
  position: absolute; inset: -8px;
}
.wf-port.wf-port-in {
  left: -8px; top: 50%; transform: translateY(-50%);
  border-color: #94a3b8;
}
.wf-port.wf-port-out {
  right: -8px; top: 50%; transform: translateY(-50%);
}
.wf-port.wf-port-true {
  right: -8px; top: 38%; transform: translateY(-50%);
  border-color: #10b981;
}
.wf-port.wf-port-false {
  right: -8px; top: 68%; transform: translateY(-50%);
  border-color: #f59e0b;
}
.wf-port:hover {
  transform: translateY(-50%) scale(1.30);
  box-shadow: 0 0 0 4px rgba(0,153,207,.18);
}
.wf-port.wf-port-true:hover  { box-shadow: 0 0 0 4px rgba(16,185,129,.22); }
.wf-port.wf-port-false:hover { box-shadow: 0 0 0 4px rgba(245,158,11,.22); }
.wf-port-label {
  position: absolute;
  font-size: 9px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--or-text-mute);
  pointer-events: none;
}
.wf-port-true ~ .wf-port-label-true,
.wf-port-false ~ .wf-port-label-false { right: 16px; }

/* ----- Properties panel (right rail body) ------------------------------- */
.wf-properties .form-label { font-size: 10px; margin-bottom: 1px; }
.wf-properties .wf-prop-section { padding: 12px; }
.wf-properties .wf-prop-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--or-navy-line);
}
.wf-properties .wf-prop-header .wf-prop-type-badge {
  margin-left: auto;
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  background: rgba(0,153,207,.12); color: var(--or-aqua);
  padding: 2px 8px; border-radius: 4px;
  font-weight: 600;
}

/* ----- Empty state when no workflow is picked --------------------------- */
.wf-empty-hint {
  grid-column: 2 / span 1;
  display: flex; align-items: center; justify-content: center;
}
.wf-empty-card {
  text-align: center;
  padding: 40px 32px;
  background: #ffffff;
  border: 1px dashed var(--or-navy-line);
  border-radius: 12px;
  max-width: 360px;
}
.wf-empty-card i { font-size: 36px; color: var(--or-aqua); }
.wf-empty-card h5 { color: var(--or-text); margin: 0; }

/* ----- Run-step result mini-cards (right-rail) -------------------------- */
#wf-run-result { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.wf-step {
  padding: 6px 8px;
  border: 1px solid var(--or-navy-line);
  border-left: 3px solid var(--or-aqua);
  border-radius: 4px;
  margin-bottom: 6px;
  background: #f8fafc;
}
.wf-step.wf-step-fail { border-left-color: var(--bs-danger); }

/* Tests */
.test-row { background: var(--or-navy-soft); }
.test-row .test-result {
  border-top: 1px dashed var(--soft-border);
  padding-top: 6px;
}

/* Governance */
.gov-event { background: var(--or-navy-soft); }

/* progress strip docked above the composer (active step + history + ETA) */
.chat-progress {
  border-top: 1px solid var(--soft-border);
  background: linear-gradient(180deg, rgba(0, 163, 224, 0.06), rgba(0, 163, 224, 0.02));
  padding: 8px 12px;
  font-size: 12px;
  color: var(--or-text);
  display: flex; flex-direction: column; gap: 4px;
}
.chat-progress .cp-active {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500;
}
.chat-progress .cp-active .cp-text {
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--or-aqua);
}
.chat-progress .cp-time {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--bs-secondary-color);
}
.chat-progress .cp-spinner {
  width: 14px; height: 14px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(0, 163, 224, 0.25);
  border-top-color: var(--or-aqua);
  animation: cp-spin 0.85s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }
.chat-progress .cp-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--bs-secondary-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.chat-progress .cp-meta .bi { margin-right: 3px; }
.chat-progress .cp-eta { color: var(--bs-secondary-color); }
.chat-progress .cp-eta.over { color: var(--or-warn); }
.chat-progress .cp-cost {
  color: var(--or-aqua, #0ea5a4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chat-progress .cp-cost-zero { color: var(--bs-secondary-color); font-weight: 400; }
.chat-progress .cp-active { gap: 8px; }
.chat-progress .cp-stop-btn {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.2;
}
.chat-progress .cp-stop-btn .bi { margin-right: 2px; }
.chat-progress .cp-history {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--soft-border);
  max-height: 110px; overflow-y: auto;
}
.chat-progress .cp-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--bs-secondary-color);
}
.chat-progress .cp-step .cp-icon { color: #4caf50; flex: 0 0 auto; }
.chat-progress .cp-step .cp-text {
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-progress .cp-step .cp-time { flex: 0 0 auto; }

/* duration footer pinned to the final assistant message after `done` */
.msg .msg-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--soft-border);
  font-size: 11px;
  color: var(--bs-secondary-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.msg .msg-footer strong { color: var(--or-aqua); font-weight: 600; }
.msg .msg-footer .bi { margin-right: 4px; }

/* "Sources (N)" link under an assistant bubble that used web_search. */
.msg .msg-sources-row { font-size: 12px; }
.msg .msg-sources-link { font-weight: 500; }

/* Slide-out right-side panel for web-search sources. Anchored to the
   .chat-pane (relatively positioned) so it overlays the conversation
   without disturbing the existing 3-column layout. */
.chat-pane { position: relative; }
.sources-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 92%;
  height: 100%;
  background: #fff;
  border-left: 1px solid var(--soft-border, #e5e7eb);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
  transform: translateX(105%);
  transition: transform 180ms ease-out;
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.sources-panel.open { transform: translateX(0); }
.sources-panel[hidden] { display: none !important; }
.sources-panel-head { background: #f8fafc; }
.sources-panel-body { flex: 1 1 auto; }
.sources-group + .sources-group { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--soft-border, #e5e7eb); }
.sources-list { list-style: none; padding: 0; margin: 8px 0 0 0; }
.sources-item { padding: 8px 0; border-bottom: 1px dotted var(--soft-border, #e5e7eb); }
.sources-item:last-child { border-bottom: 0; }
.sources-item-title { font-weight: 500; }
.sources-item-host { margin-top: 2px; }
.sources-item-snippet { margin-top: 4px; color: #475569; }

/* tool events nested in chat */
.tool-event {
  align-self: stretch;
  border: 1px solid var(--soft-border);
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.tool-event.call   { border-left: 3px solid var(--bs-primary); }
.tool-event.result { border-left: 3px solid var(--tool-color); margin-top: 6px; }
.tool-event.result.err { border-left-color: var(--bs-danger); }
.tool-event .label {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-right: 6px;
}
.tool-event pre {
  margin: 4px 0 0 0;
  white-space: pre-wrap;
  color: var(--bs-body-color);
  background: transparent;
}

.note { align-self: center; color: var(--bs-secondary-color); font-size: 12px; }

.download-badge {
  display: inline-block;
  background: rgba(var(--bs-success-rgb), 0.15);
  border: 1px solid var(--bs-success);
  color: var(--bs-success);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
}
.download-badge:hover { filter: brightness(1.15); }

/* right side activity log */
.activity-log .log-entry {
  border: 1px solid var(--soft-border);
  background: var(--bs-body-bg);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
}
.activity-log .log-entry .log-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px;
  color: var(--bs-secondary-color);
  margin-bottom: 4px;
}
.activity-log .log-entry .log-summary {
  color: var(--bs-body-color);
  font-size: 12.5px;
  margin-bottom: 4px;
  word-break: break-word;
}
.activity-log .log-entry details summary {
  cursor: pointer;
  user-select: none;
}
.activity-log .log-entry pre {
  margin: 4px 0 0 0;
  font-size: 11px;
  white-space: pre-wrap;
  color: var(--bs-secondary-color);
  background: transparent;
  max-height: 240px;
  overflow: auto;
}

.log-entry.status     { border-left: 3px solid var(--bs-info); }
.log-entry.session    { border-left: 3px solid var(--bs-info); }
.log-entry.thinking   { border-left: 3px solid var(--thinking-color); background: var(--thinking-soft); }
.log-entry.tool-call  { border-left: 3px solid var(--bs-primary); }
.log-entry.tool-result{ border-left: 3px solid var(--tool-color); }
.log-entry.assistant  { border-left: 3px solid var(--bs-success); }
.log-entry.done       { border-left: 3px solid var(--bs-success); background: rgba(var(--bs-success-rgb), 0.08); }
.log-entry.error      { border-left: 3px solid var(--bs-danger); background: rgba(var(--bs-danger-rgb), 0.08); }
.log-entry.delegation       { border-left: 3px solid var(--bs-warning); background: rgba(var(--bs-warning-rgb), 0.05); }
.log-entry.delegation-end   { border-left: 3px solid var(--bs-warning); }
.log-entry.delegation .log-icon, .log-entry.delegation-end .log-icon { color: var(--bs-warning); }
.log-entry.security         { border-left: 3px solid var(--bs-danger); background: rgba(var(--bs-danger-rgb), 0.10); }
.log-entry.security .log-icon { color: var(--bs-danger); }
.log-entry.budget           { border-left: 3px solid var(--bs-warning); background: rgba(var(--bs-warning-rgb), 0.08); }
.log-entry.budget .log-icon { color: var(--bs-warning); }
.log-entry.memory           { border-left: 3px solid var(--bs-info); background: rgba(var(--bs-info-rgb), 0.06); }
.log-entry.memory .log-icon { color: var(--bs-info); }
.log-entry.kb-signal        { border-left: 3px solid var(--or-aqua); background: rgba(0, 163, 224, 0.08); }
.log-entry.kb-signal .log-icon { color: var(--or-aqua); }

/* Numbered flow-diagram look for "step" entries.
   Each step has a circular number badge on the left; consecutive steps are
   joined by a vertical connector line. The current/running step pulses. */
.activity-log .log-entry.is-step {
  position: relative;
  padding-left: 38px;
}
.activity-log .log-entry.is-step::before {
  content: "";
  position: absolute;
  left: 14px; top: 30px; bottom: -10px;
  width: 2px;
  background: var(--bs-border-color, #e2e8f0);
  z-index: 0;
}
.activity-log .log-entry.is-step:last-child::before { display: none; }
.activity-log .log-step-num {
  position: absolute;
  left: 4px; top: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: #ffffff;
  border: 2px solid var(--bs-border-color, #cbd5e1);
  color: var(--bs-secondary-color, #64748b);
  z-index: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.activity-log .log-entry.is-step.is-current {
  border-color: var(--or-aqua);
  box-shadow: 0 0 0 2px rgba(0,153,207,.18);
  background: linear-gradient(90deg, rgba(0,153,207,.08), rgba(0,153,207,.02));
}
.activity-log .log-entry.is-step.is-current .log-step-num {
  background: var(--or-aqua); color: #fff; border-color: var(--or-aqua);
  animation: log-step-pulse 1.4s ease-in-out infinite;
}
@keyframes log-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,153,207,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(0,153,207,.00); }
}
.activity-log .log-entry.is-step.is-done .log-step-num {
  background: #10b981; color: #fff; border-color: #10b981;
}

/* Nested (depth>0) steps drop the connector to keep things readable */
.activity-log .log-entry.nested.is-step::before { display: none; }
.activity-log .log-entry.nested {
  border-left: 2px solid var(--bs-warning);
  padding-left: 8px;
}

/* Voice input mic button */
.mic-btn { transition: background 0.2s, color 0.2s; }
.mic-btn.recording {
  background: var(--bs-danger);
  color: #fff;
  border-color: var(--bs-danger);
  animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(var(--bs-danger-rgb), 0); }
}

/* Memory list rows */
.memory-row .card-body { background: var(--bs-tertiary-bg); }
.log-entry.nested {
  background: rgba(255, 255, 255, 0.02);
}
.log-entry .log-agent {
  font-size: 9px;
  font-weight: 500;
}

/* delegation badge inline in conversation */
.delegation-event {
  border: 1px dashed rgba(var(--bs-warning-rgb), 0.5);
  border-radius: 6px;
  background: rgba(var(--bs-warning-rgb), 0.05);
  padding: 8px 10px;
  margin: 6px 0;
  font-size: 12px;
}
.delegation-event .label {
  display: inline-block;
  background: var(--bs-warning);
  color: var(--bs-body-bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: middle;
}
.delegation-event pre {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 6px 0 0 0;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}

.log-entry .log-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 11px;
  color: var(--bs-body-color);
}
.log-entry.thinking  .log-icon { color: var(--thinking-color); }
.log-entry.tool-call .log-icon { color: var(--bs-primary); }
.log-entry.tool-result .log-icon { color: var(--tool-color); }
.log-entry.done      .log-icon { color: var(--bs-success); }
.log-entry.error     .log-icon { color: var(--bs-danger); }

.turn-divider {
  text-align: center;
  font-size: 10px;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 0;
  border-top: 1px dashed var(--soft-border);
  border-bottom: 1px dashed var(--soft-border);
  background: var(--bs-tertiary-bg);
  margin: 4px 0;
}

/* reset-password reveal modal */
.rp-password-box {
  display: flex; gap: 8px; align-items: stretch;
  border: 1px solid var(--soft-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--bs-tertiary-bg);
}
.rp-password-code {
  flex-grow: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  word-break: break-all;
  background: transparent;
  color: var(--bs-body-color);
  padding: 4px 6px;
  user-select: all;
}
.rp-copy-btn {
  white-space: nowrap;
  align-self: center;
}

/* tools panel cards */
.tool-card {
  border: 1px solid var(--soft-border);
  background: var(--bs-body-bg);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}
.tool-card .tool-card-head {
  display: flex; align-items: center; gap: 8px;
  justify-content: space-between;
}
.tool-card .tool-card-actions {
  display: flex; gap: 4px; justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--soft-border);
}
.tool-src-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase;
}
.tool-src-badge.tool-src-builtin {
  background: rgba(26,115,232,.10); color: #1a73e8;
}
.tool-src-badge.tool-src-custom {
  background: rgba(124,58,237,.10); color: #7c3aed;
}
/* search bar (Tools page) */
.tools-search-wrap {
  position: relative;
}
.tools-search-wrap > i.bi-search {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--bs-secondary-color); font-size: 13px;
  pointer-events: none;
}
.tools-search-wrap > .tools-search-input {
  padding-left: 30px;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
}
.tools-search-wrap > .tools-search-input:focus {
  background: var(--bs-body-bg);
}
.tools-source-select {
  width: auto; max-width: 220px; border-radius: 999px;
}
.tool-card .tool-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}
.tool-card .tool-desc {
  font-size: 12px;
  color: var(--bs-secondary-color);
  margin: 6px 0;
  white-space: pre-wrap;
}
.tool-card .params { font-size: 11px; }
.tool-card .params table { width: 100%; }
.tool-card .params th {
  font-weight: 500;
  color: var(--bs-secondary-color);
  border-bottom: 1px solid var(--soft-border);
  text-align: left;
  padding: 2px 6px;
}
.tool-card .params td { padding: 2px 6px; vertical-align: top; }
.tool-card .params td code {
  background: var(--bs-tertiary-bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.tool-card .params .req { color: var(--bs-danger); font-size: 10px; }

/* status badge color states */
#status.connected { background-color: var(--bs-success) !important; color: #fff; }
#status.busy      { background-color: var(--bs-warning) !important; color: #000; }
#status.error     { background-color: var(--bs-danger) !important; color: #fff; }

/* draft list rows (Tools page list mode) */
.draft-row {
  border: 1px solid var(--soft-border);
  background: var(--bs-tertiary-bg);
  border-radius: 8px;
}
.draft-row:hover { background: var(--bs-secondary-bg); }
.draft-row code { font-size: 13px; }

/* draft card (Tools page focus mode) */
.draft-card {
  border: 1px solid var(--soft-border);
  background: var(--bs-tertiary-bg);
  border-radius: 8px;
  padding: 16px 18px;
  position: relative;
}
.draft-card.busy { opacity: 0.65; pointer-events: none; }
.draft-card.busy::after {
  content: "working...";
  position: absolute; top: 8px; right: 12px;
  font-size: 11px;
  color: var(--bs-warning);
  letter-spacing: 0.5px;
}
.draft-card .code-area {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--bs-body-bg);
  white-space: pre;
}
.draft-card .test-panel {
  border-top: 1px dashed var(--soft-border);
  padding-top: 8px;
}
.draft-card .test-output {
  background: var(--bs-body-bg);
  border: 1px solid var(--soft-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--bs-body-color);
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}

/* tool cards inside the modal */
.modal .tool-card .tool-name { font-size: 13px; }

/* plan block on a draft card */
.plan-block {
  border: 1px solid var(--soft-border);
  background: var(--bs-body-bg);
  border-radius: 6px;
  padding: 10px 12px;
}
.plan-block ul { padding-left: 18px; margin-bottom: 6px; }
.plan-empty { border: 1px dashed var(--soft-border); }

/* configuration block */
.config-block {
  border: 1px solid var(--soft-border);
  background: var(--bs-body-bg);
  border-radius: 6px;
  padding: 10px 12px;
}
.config-empty { border: 1px dashed var(--soft-border); }

/* draft chat */
.draft-chat-history {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--soft-border);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--bs-body-bg);
}
.dchat-msg {
  padding: 4px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  word-break: break-word;
}
.dchat-msg .dchat-role {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-right: 6px;
  font-weight: 600;
}
.dchat-user      { background: rgba(var(--bs-primary-rgb), 0.10); }
.dchat-assistant { background: var(--bs-tertiary-bg); }
.dchat-error     { background: rgba(var(--bs-danger-rgb), 0.10); color: var(--bs-danger); }

/* chat pane attachments + dragover */
.attachments-bar:empty { display: none !important; }
.chat-pane.dragover { box-shadow: inset 0 0 0 3px var(--bs-primary); }

/* documents page */
.doc-row {
  border: 1px solid var(--soft-border);
  background: var(--bs-tertiary-bg);
  border-radius: 8px;
}
.doc-row:hover { background: var(--bs-secondary-bg); }
.doc-upload .card { background: var(--bs-tertiary-bg); border-color: var(--soft-border); }

/* User Context tab */
.ctx-card {
  border: 1px solid var(--soft-border);
  background: var(--bs-body-bg);
  border-radius: 6px;
}
.ctx-type-label { letter-spacing: 0.5px; font-size: 10px; }
.ctx-entity { margin-left: 8px; }
.ctx-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bs-warning);
  margin-left: 4px;
  vertical-align: middle;
  animation: ctx-pulse 1.4s infinite;
}
@keyframes ctx-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.4; }
}

/* ========================================================================
   Excel inline preview + detail overlay
   ====================================================================== */

.excel-preview-card {
  margin-top: 8px;
  border: 1px solid var(--or-navy-line);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}
.excel-preview-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
  border-bottom: 1px solid var(--or-navy-line);
}
.excel-sheet-block { padding: 8px 12px 4px; border-top: 1px solid #f1f5f9; }
.excel-sheet-block:first-of-type { border-top: none; }
.excel-sheet-head { font-size: 12.5px; padding: 4px 0 6px; color: var(--or-text); }
.excel-table-block {
  border: 1px solid var(--or-navy-line);
  border-radius: 6px;
  background: #fafbfc;
  margin: 6px 0;
  padding: 8px 10px;
}
.excel-table-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.excel-table-name { font-size: 12px; }
.excel-more-cols  { font-size: 10.5px; color: var(--or-text-mute); font-style: italic; }
.excel-table-summary { margin-bottom: 6px; }
.excel-table-scroll { max-height: 240px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 4px; background: #ffffff; }
.excel-preview-table { margin-bottom: 0; font-size: 11.5px; }
.excel-preview-table thead th {
  position: sticky; top: 0;
  background: #f8fafc;
  border-bottom: 1px solid var(--or-navy-line);
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.excel-preview-table .excel-col-type {
  font-size: 9px; font-weight: 500;
  color: var(--or-text-mute);
  background: #eef2f7;
  padding: 1px 5px; border-radius: 3px;
  margin-left: 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
.excel-preview-table tbody td {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  white-space: nowrap;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}

/* Full-screen Excel detail overlay (data on left, chat on right) */
.excel-detail-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 1100;
  display: none;
  align-items: stretch; justify-content: center;
  padding: 24px;
}
.excel-detail-shell {
  flex: 1 1 auto;
  max-width: 1400px;
  background: #ffffff;
  border-radius: 12px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15,23,42,.30);
}
.excel-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--or-navy-line);
  background: linear-gradient(180deg, #f8fafc, #ffffff);
}
.excel-detail-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  overflow: hidden;
}
.excel-detail-data {
  overflow-y: auto;
  padding: 12px 16px;
  background: #ffffff;
  border-right: 1px solid var(--or-navy-line);
}
.excel-detail-chat {
  display: flex; flex-direction: column;
  background: #f8fafc;
  overflow: hidden;
}
.excel-detail-chat-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--or-navy-line);
  background: #ffffff;
}
.excel-detail-chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.excel-msg {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  max-width: 100%;
  white-space: pre-wrap;
}
.excel-msg.user      { background: var(--or-blue); color: #fff; align-self: flex-end; }
.excel-msg.assistant { background: #ffffff; border: 1px solid var(--or-navy-line); color: var(--or-text); align-self: flex-start; }
.excel-detail-chat-form {
  display: flex; gap: 4px;
  padding: 10px;
  border-top: 1px solid var(--or-navy-line);
  background: #ffffff;
}

/* Grounded answer card with collapsible reasoning trail */
.excel-msg.excel-msg-grounded { width: 100%; }
.excel-msg-answer {
  padding-bottom: 6px;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 6px;
  white-space: pre-wrap;
}
.excel-msg-footer {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
}
.excel-reasoning-toggle {
  text-decoration: none;
  font-size: 11px;
  color: var(--or-blue);
}
.excel-reasoning-toggle .bi {
  transition: transform .12s;
  display: inline-block;
}
.excel-reasoning-toggle.is-open .bi { transform: rotate(180deg); }
.excel-reasoning-trail {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.excel-step {
  border: 1px solid var(--or-navy-line);
  border-radius: 6px;
  background: #f8fafc;
  overflow: hidden;
}
.excel-step-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: #ffffff;
  border-bottom: 1px solid var(--or-navy-line);
}
.excel-step-tag {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  background: #e0f2fe;
  color: #075985;
  padding: 2px 8px; border-radius: 4px;
}
.excel-step-tag.is-ok   { background: #dcfce7; color: #14532d; }
.excel-step-tag.is-warn { background: #fef3c7; color: #b45309; }
.excel-step-body { padding: 8px 10px; font-size: 11.5px; }
.excel-step-body pre {
  background: #ffffff;
  border: 1px solid var(--or-navy-line);
  border-radius: 4px;
  margin: 0;
  font-size: 10.5px;
  max-height: 200px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  padding: 6px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.excel-step-block { margin-bottom: 6px; }
.excel-step-block:last-child { margin-bottom: 0; }
.excel-step-sql code {
  display: block;
  background: #0b1220;
  color: #e2e8f0;
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  white-space: pre-wrap;
}
.excel-step-fail .excel-step-sql code { border-left: 3px solid #ef4444; }

/* ========================================================================
   Login overlay + onboarding walkthrough
   ====================================================================== */

.atlas-login-overlay {
  position: fixed; inset: 0;
  /* Pulse.ai sign-in: rich navy → blue gradient with subtle radial glow,
     evoking the Digitide product visual identity. */
  background:
    radial-gradient(circle at 18% 22%, rgba(26,115,232,.20) 0, transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(245,158,11,.15) 0, transparent 50%),
    linear-gradient(135deg, #f7f9fd 0%, #e8eef7 100%);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.atlas-login-overlay.is-hidden { display: none; }
.atlas-login-card {
  background: #ffffff;
  width: 420px;
  max-width: 92vw;
  border-radius: 18px;
  box-shadow:
    0 28px 70px rgba(15,31,58,.14),
    0 6px 18px rgba(15,31,58,.08),
    0 0 0 1px rgba(26,115,232,.06);
  padding: 30px 32px 26px;
}
.atlas-login-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin-bottom: 22px;
}
.atlas-login-brand .pulse-logo-img {
  width: 168px; height: auto; display: block;
}
.atlas-login-brand .pulse-tagline {
  font-size: 11.5px; color: var(--or-text-mute);
  letter-spacing: .02em;
}
.atlas-login-brand .pulse-tagline a {
  color: var(--pulse-blue);
  text-decoration: none;
  border-bottom: 1px dotted rgba(26,115,232,.4);
}
.atlas-login-brand .pulse-tagline a:hover { border-bottom-style: solid; }
.atlas-login-hint code {
  background: #f3f5f9; border: 1px solid var(--or-navy-line);
  padding: 1px 5px; border-radius: 3px; font-size: 10px;
}

/* Welcome carousel (first-time login) — sits ABOVE onboarding overlay */
.welcome-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
  z-index: 2200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: welcome-fade-in .25s ease;
}
@keyframes welcome-fade-in { from { opacity: 0; } to { opacity: 1; } }
.welcome-card {
  position: relative;
  width: 560px; max-width: 100%;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(15,23,42,.30);
  padding: 28px 28px 22px;
  text-align: center;
  animation: welcome-pop .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes welcome-pop {
  from { transform: translateY(12px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);     opacity: 1; }
}
.welcome-close-btn {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  border: none; background: transparent;
  border-radius: 50%; cursor: pointer;
  color: var(--bs-secondary-color);
}
.welcome-close-btn:hover { background: var(--bs-tertiary-bg); }
.welcome-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; color: #1a73e8;
  margin-bottom: 4px;
}
.welcome-title {
  font-size: 22px; font-weight: 600; margin: 4px 0 14px;
  color: var(--bs-body-color);
  font-family: "Google Sans", sans-serif;
}
.welcome-slide {
  min-height: 180px;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin-bottom: 8px;
}
.welcome-slide-icon {
  width: 78px; height: 78px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px;
  font-size: 38px; color: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.18);
  animation: welcome-icon-float 2.4s ease-in-out infinite;
}
@keyframes welcome-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.welcome-slide-text {
  margin: 0; font-size: 14px; line-height: 1.55;
  color: var(--bs-secondary-color);
  max-width: 460px;
}
.welcome-slide-counter {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--bs-secondary-color);
  margin-bottom: 8px;
}
.welcome-dots {
  display: flex; gap: 6px; justify-content: center; margin-bottom: 14px;
}
.welcome-dot {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--soft-border);
  transition: background-color .15s, transform .15s;
}
.welcome-dot:hover  { transform: scale(1.2); }
.welcome-dot.active { background: #1a73e8; transform: scale(1.2); }
.welcome-controls {
  display: flex; gap: 8px; align-items: center;
  justify-content: space-between;
}
.welcome-controls .welcome-skip {
  color: var(--bs-secondary-color);
  text-decoration: underline;
}
.welcome-controls .welcome-skip:hover { color: var(--bs-body-color); }

/* Onboarding overlay (highlight + tooltip) */
.onboarding-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.50);
  z-index: 1900;
  pointer-events: none;
}
.onboarding-overlay:not(.d-none) { pointer-events: auto; }
.onboarding-spotlight {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(15,23,42,.55);
  pointer-events: none;
  transition: top .2s, left .2s, width .2s, height .2s;
}
.onboarding-tooltip {
  position: absolute;
  width: 360px; max-width: 92vw;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(15,23,42,.30);
  padding: 18px 18px 16px;
  z-index: 2;
}
.onboarding-tooltip h5 { margin: 0 0 6px; font-size: 16px; }
.onboarding-step-counter {
  position: absolute; top: -10px; left: 18px;
  font-size: 10px; font-weight: 600;
  background: var(--or-blue); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: .04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.atlas-nav-section-admin .atlas-nav-label { color: var(--or-warn); }

/* Department mandate alert in user-KB view */
.dept-mandate-row {
  padding: 6px 8px;
  background: #fef3c7;
  border-radius: 6px;
  font-size: 11.5px;
  margin-bottom: 4px;
}
.dept-mandate-row strong { color: #b45309; }

/* Upload-progress card: live "N of M pages · ETA …" while a PDF is being
   chunked / OCR'd / embedded in the background. */
.upload-progress {
  border: 1px solid var(--soft-border);
  background: var(--bs-tertiary-bg);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px;
  animation: upload-progress-in .2s ease;
}
@keyframes upload-progress-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.upload-progress.is-done    { border-color: rgba(52,168,83,.40); background: rgba(52,168,83,.04); }
.upload-progress.is-error   { border-color: rgba(220,38,38,.50); background: rgba(220,38,38,.05); }
.upload-progress-head {
  display: flex; align-items: center; gap: 8px;
}
.upload-progress-phase {
  margin-left: auto;
  font-size: 11px;
  color: var(--bs-secondary-color);
  font-style: italic;
}
.upload-progress-bar {
  height: 6px; background: rgba(15,31,58,.08);
  border-radius: 3px; overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pulse-blue), var(--pulse-blue-deep));
  transition: width .35s ease;
  border-radius: 3px;
}
.upload-progress.is-done .upload-progress-fill {
  background: linear-gradient(90deg, #34a853, #0f9d58);
}
.upload-progress.is-error .upload-progress-fill {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
}
.upload-progress-meta {
  font-size: 11.5px;
  color: var(--bs-secondary-color);
}
.kg-chip-spin {
  display: inline-block;
  animation: kg-chip-spin 1.2s linear infinite;
}
@keyframes kg-chip-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* OCR badge on document cards — surfaces "this scan got OCR'd". */
.ocr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pulse-amber-deep, #ea580c);
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.30);
  border-radius: 999px;
}
.ocr-chip i { font-size: 10px; }

/* ── Storage-backend chips on each KB document card ─────────────────────
   The user wants to see at a glance whether a doc has data in the vector
   store (Chroma), the relational store (kb_tables), or both. Each chip is
   visually distinct enough that the row reads like a "stored in: vector |
   SQL" badge strip. */
.kb-storage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
}
.kb-storage-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: help;
}
.kb-storage-chip i { font-size: 11px; }
.kb-storage-chip.kb-storage-vector {
  color:        #6d28d9;
  background:   rgba(124, 58, 237, .10);
  border-color: rgba(124, 58, 237, .35);
}
.kb-storage-chip.kb-storage-sql {
  color:        #047857;
  background:   rgba(16, 185, 129, .10);
  border-color: rgba(16, 185, 129, .35);
}
.kb-storage-chip.kb-storage-none {
  color:        #64748b;
  background:   rgba(100, 116, 139, .10);
  border-color: rgba(100, 116, 139, .30);
  font-weight:  500;
  font-style:   italic;
}
.kb-storage-row .kb-storage-label {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #94a3b8;
  margin-right: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   Material Design 2 — Tools page
   Scoped under `.m2-page` so the rest of the app keeps its current look.
   Tokens follow the M2 spec (https://m2.material.io/) with our amber
   primary `#d97706`. If you approve this look, the same tokens roll out
   to every page.
   ════════════════════════════════════════════════════════════════════════ */
.m2-page {
  /* Color roles */
  --m2-primary:           #d97706;
  --m2-primary-variant:   #b45309;
  --m2-on-primary:        #ffffff;
  --m2-secondary:         #0f766e;
  --m2-background:        #fafafa;
  --m2-surface:           #ffffff;
  --m2-on-surface:        #1f2937;
  --m2-on-surface-med:    rgba(31, 41, 55, 0.60);
  --m2-on-surface-low:    rgba(31, 41, 55, 0.38);
  --m2-outline:           rgba(0, 0, 0, 0.12);
  --m2-outline-hover:     rgba(217, 119, 6, 0.45);

  /* Elevation (paste-ready box-shadows) */
  --m2-elev-1: 0 2px 1px -1px rgba(0,0,0,.20), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  --m2-elev-2: 0 3px 1px -2px rgba(0,0,0,.20), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  --m2-elev-4: 0 2px 4px -1px rgba(0,0,0,.20), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);

  background: var(--m2-background);
  color: var(--m2-on-surface);
  font-family: "Roboto", -apple-system, system-ui, "Segoe UI", sans-serif;
}

/* Page header */
.m2-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  padding: 24px 32px 16px;
  background: var(--m2-surface);
  border-bottom: 1px solid var(--m2-outline);
}
.m2-page-header-eyebrow {
  font-size: 10px; font-weight: 400; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--m2-on-surface-med);
  line-height: 16px; margin-bottom: 4px;
}
.m2-page-header-title {
  font-size: 28px; font-weight: 400; letter-spacing: 0;
  line-height: 36px; color: var(--m2-on-surface); margin: 0;
}
.m2-page-header-sub {
  font-size: 14px; font-weight: 400; letter-spacing: 0.25px;
  line-height: 20px; color: var(--m2-on-surface-med);
  margin-top: 4px;
}

/* M2 primary button (matches FAB tone, not Bootstrap blue) */
.m2-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border: none; border-radius: 18px;
  background: var(--m2-primary); color: var(--m2-on-primary);
  font-size: 14px; font-weight: 500; letter-spacing: 1.25px;
  text-transform: uppercase;
  box-shadow: var(--m2-elev-2);
  cursor: pointer; transition: background 0.12s, box-shadow 0.12s;
}
.m2-btn-primary:hover { background: var(--m2-primary-variant); box-shadow: var(--m2-elev-4); }
.m2-btn-primary:active { box-shadow: var(--m2-elev-1); }
.m2-btn-primary i { font-size: 18px; }

/* Section title (Subtitle 1) */
.m2-section {
  padding: 24px 32px 0;
}
.m2-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.m2-section-title {
  font-size: 20px; font-weight: 500; letter-spacing: 0.15px;
  line-height: 32px; color: var(--m2-on-surface);
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
}
.m2-section-title-count {
  font-size: 14px; font-weight: 400; letter-spacing: 0.25px;
  color: var(--m2-on-surface-med);
}

/* Filter row */
.m2-filter-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.m2-search {
  position: relative; min-width: 280px; flex: 1 1 280px; max-width: 420px;
}
.m2-search input {
  width: 100%; height: 40px;
  padding: 0 12px 0 40px;
  border: 1px solid var(--m2-outline);
  border-radius: 4px; background: var(--m2-surface);
  font-size: 14px; color: var(--m2-on-surface);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.m2-search input:focus {
  outline: none; border-color: var(--m2-primary);
  box-shadow: 0 0 0 1px var(--m2-primary);
}
.m2-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--m2-on-surface-med); font-size: 18px;
}
.m2-select {
  height: 40px; padding: 0 28px 0 12px;
  border: 1px solid var(--m2-outline); border-radius: 4px;
  background: var(--m2-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231f2937' d='M0 0l5 6 5-6z'/></svg>")
              no-repeat right 10px center;
  font-size: 14px; color: var(--m2-on-surface);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.m2-icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--m2-outline); border-radius: 50%;
  background: var(--m2-surface); color: var(--m2-on-surface-med);
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.m2-icon-btn:hover {
  background: rgba(217, 119, 6, 0.08);
  color: var(--m2-primary); border-color: var(--m2-outline-hover);
}
.m2-icon-btn i { font-size: 18px; }

/* Card grid */
.m2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 0 32px 32px;
}
@media (min-width: 1280px) { .m2-grid { gap: 24px; } }

/* Filter chips (M2 segmented control). Used on Agents page tabs. */
.m2-filter-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
  margin: 0 0 8px;
}
.m2-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--m2-surface);
  border: 1px solid var(--m2-outline);
  color: var(--m2-on-surface);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.m2-filter-chip i { font-size: 14px; }
.m2-filter-chip:hover {
  background: rgba(217, 119, 6, 0.06);
  border-color: var(--m2-outline-hover);
}
.m2-filter-chip.is-active {
  background: var(--m2-primary);
  border-color: var(--m2-primary);
  color: var(--m2-on-primary);
}
.m2-filter-chip .m2-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(31, 41, 55, 0.10);
  color: inherit;
  font-size: 11px; font-weight: 600;
}
.m2-filter-chip.is-active .m2-chip-count {
  background: rgba(255, 255, 255, 0.20);
}

/* Outlined card (M2 spec). Click anywhere on the card body to expand
   the parameter detail. Action buttons stop propagation. */
.m2-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--m2-surface);
  border: 1px solid var(--m2-outline);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
  cursor: pointer;
}
.m2-card:hover {
  border-color: var(--m2-outline-hover);
  box-shadow: var(--m2-elev-4);
}
.m2-card.is-open {
  border-color: var(--m2-primary);
  box-shadow: var(--m2-elev-2);
}
.m2-card-body { padding: 16px; flex-grow: 1; }
.m2-card-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 8px;
}
.m2-card-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(217, 119, 6, 0.10);
  color: var(--m2-primary);
}
.m2-card-icon i { font-size: 18px; }
.m2-card-icon.is-secondary {
  background: rgba(15, 118, 110, 0.10);
  color: var(--m2-secondary);
}
.m2-card-title-wrap {
  flex-grow: 1; min-width: 0;
}
.m2-card-overline {
  font-size: 10px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--m2-on-surface-med);
  line-height: 16px;
}
.m2-card-title {
  font-size: 16px; font-weight: 500; letter-spacing: 0.15px;
  line-height: 24px; color: var(--m2-on-surface);
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m2-card-desc {
  font-size: 14px; font-weight: 400; letter-spacing: 0.25px;
  line-height: 20px; color: var(--m2-on-surface-med);
  /* 2-line clamp at rest */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0 0;
  min-height: 40px;  /* keep card heights tidy when desc is empty */
}
.m2-card.is-open .m2-card-desc {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* Status / source chips */
.m2-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
}
.m2-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 10px;
  border-radius: 11px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.25px;
  background: rgba(31, 41, 55, 0.06);
  color: var(--m2-on-surface);
  border: 1px solid transparent;
}
.m2-chip i { font-size: 12px; }
.m2-chip.is-primary {
  background: rgba(217, 119, 6, 0.10);
  color: var(--m2-primary-variant);
}
.m2-chip.is-secondary {
  background: rgba(15, 118, 110, 0.10);
  color: var(--m2-secondary);
}
.m2-chip.is-warning {
  background: rgba(202, 138, 4, 0.12);
  color: #854d0e;
}
.m2-chip.is-success {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
}
.m2-chip.is-info {
  background: rgba(14, 165, 233, 0.10);
  color: #0369a1;
}
.m2-chip.is-muted {
  background: rgba(31, 41, 55, 0.05);
  color: var(--m2-on-surface-med);
  font-style: italic;
}

/* Action row at card foot. Right-aligned. */
.m2-card-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 4px 8px 8px;
  border-top: 1px solid var(--m2-outline);
}
.m2-card-actions .m2-text-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: transparent; border: none; border-radius: 16px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--m2-primary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.m2-card-actions .m2-text-btn:hover {
  background: rgba(217, 119, 6, 0.08);
}
.m2-card-actions .m2-text-btn.is-danger { color: #b91c1c; }
.m2-card-actions .m2-text-btn.is-danger:hover {
  background: rgba(220, 38, 38, 0.08);
}
.m2-card-actions .m2-text-btn i { font-size: 16px; }
.m2-card-actions .m2-readonly-tag {
  font-size: 12px; color: var(--m2-on-surface-low);
  letter-spacing: 0.4px;
}

/* Expand region — params detail revealed on card click */
.m2-card-expand {
  border-top: 1px solid var(--m2-outline);
  padding: 12px 16px 16px;
  background: rgba(31, 41, 55, 0.02);
  display: none;
}
.m2-card.is-open .m2-card-expand { display: block; }
.m2-card-expand h6 {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--m2-on-surface-med);
  margin: 0 0 8px;
}
.m2-card-expand table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.m2-card-expand th,
.m2-card-expand td {
  text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--m2-outline);
  vertical-align: top;
}
.m2-card-expand th {
  font-weight: 500; color: var(--m2-on-surface-med);
  font-size: 11px; letter-spacing: 0.4px;
  text-transform: uppercase;
}
.m2-card-expand td code {
  font-size: 11.5px; color: var(--m2-on-surface);
  background: rgba(31, 41, 55, 0.04);
  padding: 1px 6px; border-radius: 3px;
}
.m2-card-expand .req {
  color: #b91c1c; font-weight: 600; margin-left: 2px;
}
.m2-card-empty-params {
  font-size: 12.5px; color: var(--m2-on-surface-low);
  font-style: italic;
}

/* ──────────────────────── Data table (Material 2) ─────────────────────
   Replaces the .m2-card grid on listing pages. Comfortable density
   (52px rows), 14px body / 12px UPPERCASE header, hairline dividers,
   hover-highlight, and a sticky header for long lists. Action buttons
   live in the trailing cell. */
.m2-table-wrap {
  margin: 0 32px 32px;
  background: var(--m2-surface);
  border: 1px solid var(--m2-outline);
  border-radius: 8px;
  overflow: hidden;
}
.m2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--m2-on-surface);
}
.m2-table thead th {
  background: var(--m2-surface);
  border-bottom: 1px solid var(--m2-outline);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--m2-on-surface-med);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.m2-table thead th:first-child { padding-left: 24px; }
.m2-table thead th:last-child  { padding-right: 24px; text-align: right; }
.m2-table tbody td {
  border-bottom: 1px solid var(--m2-outline);
  padding: 14px 16px;
  vertical-align: middle;
  letter-spacing: 0.25px;
}
.m2-table tbody td:first-child { padding-left: 24px; }
.m2-table tbody td:last-child  { padding-right: 24px; text-align: right; }
.m2-table tbody tr:last-child td { border-bottom: none; }
.m2-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
.m2-table tbody tr:hover {
  background: rgba(217, 119, 6, 0.05);
}
.m2-table tbody tr.is-active {
  background: rgba(217, 119, 6, 0.10);
}
/* Title-column cell: leading icon + name + faint subtitle below */
.m2-cell-title {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.m2-cell-title .m2-card-icon {
  /* re-use card-icon styles for the leading 32px tinted square */
  flex-shrink: 0;
}
.m2-cell-title-text {
  display: flex; flex-direction: column; min-width: 0;
}
.m2-cell-name {
  font-weight: 500; color: var(--m2-on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m2-cell-sub {
  font-size: 12px; color: var(--m2-on-surface-med);
  letter-spacing: 0.4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m2-cell-desc {
  color: var(--m2-on-surface-med);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 480px;
}
/* Compact action cell — icon-only buttons aligned right */
.m2-row-actions {
  display: inline-flex; gap: 2px; justify-content: flex-end;
}
.m2-row-actions button {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  color: var(--m2-on-surface-med);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.m2-row-actions button i { font-size: 16px; }
.m2-row-actions button:hover {
  background: rgba(217, 119, 6, 0.10);
  color: var(--m2-primary);
}
.m2-row-actions button.is-danger:hover {
  background: rgba(220, 38, 38, 0.10);
  color: #b91c1c;
}

/* Dark theme */
:root[data-bs-theme="dark"] .m2-table-wrap { background: var(--m2-surface); }
:root[data-bs-theme="dark"] .m2-table tbody tr:hover {
  background: rgba(217, 119, 6, 0.10);
}

/* Empty state */
.m2-empty {
  padding: 32px; text-align: center;
  background: var(--m2-surface);
  border: 1px dashed var(--m2-outline);
  border-radius: 8px;
  color: var(--m2-on-surface-med);
  font-size: 14px;
}
.m2-empty i { font-size: 32px; opacity: 0.4; display: block; margin-bottom: 8px; }

/* Dark-theme override */
:root[data-bs-theme="dark"] .m2-page {
  --m2-background:        #0f172a;
  --m2-surface:           #1e293b;
  --m2-on-surface:        #f1f5f9;
  --m2-on-surface-med:    rgba(241, 245, 249, 0.68);
  --m2-on-surface-low:    rgba(241, 245, 249, 0.42);
  --m2-outline:           rgba(255, 255, 255, 0.16);
  --m2-outline-hover:     rgba(217, 119, 6, 0.55);
}
:root[data-bs-theme="dark"] .m2-page-header { background: #0b1220; }
:root[data-bs-theme="dark"] .m2-card-expand  { background: rgba(0,0,0,0.18); }
:root[data-bs-theme="dark"] .m2-chip         { background: rgba(255,255,255,0.06); color: #f1f5f9; }

/* ── Empty-chat hero ────────────────────────────────────────────────────
   Shown in #conversation when a new (empty) thread is opened, so the
   chat pane isn't a blank rectangle. Disappears the moment the first
   message bubble lands. Mirrors the existing welcome-card visual
   language but lives inline (no overlay). */
.empty-chat-hero {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 28px 16px;
}
.empty-chat-card {
  max-width: 640px;
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--m3-outline, #e2e8f0);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
              0 8px 24px rgba(15, 23, 42, 0.05);
  text-align: left;
}
.empty-chat-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--pulse-amber-deep, #d97706);
  margin-bottom: 8px;
}
.empty-chat-eyebrow i { font-size: 13px; }
.empty-chat-title {
  font-size: 22px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 6px;
  line-height: 1.25;
}
.empty-chat-agent {
  color: var(--pulse-amber-deep, #d97706);
  font-weight: 600;
}
.empty-chat-sub {
  color: #475569;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.empty-chat-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 540px) {
  .empty-chat-chips { grid-template-columns: 1fr; }
}
.empty-chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--m3-outline, #e2e8f0);
  border-radius: 10px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.empty-chat-chip:hover {
  background: #fff7ed;
  border-color: rgba(217, 119, 6, .35);
}
.empty-chat-chip:active { transform: translateY(1px); }
.empty-chat-chip i {
  font-size: 15px;
  color: var(--pulse-amber-deep, #d97706);
  flex-shrink: 0;
}
.empty-chat-foot {
  display: flex; align-items: flex-start; gap: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--m3-outline, #e2e8f0);
  margin-top: 4px;
  line-height: 1.45;
}
.empty-chat-foot i {
  margin-top: 2px;
  color: #94a3b8;
}

/* Dark theme — keep contrast right when bootstrap data-bs-theme="dark". */
:root[data-bs-theme="dark"] .empty-chat-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
              0 8px 24px rgba(0, 0, 0, 0.35);
}
:root[data-bs-theme="dark"] .empty-chat-title { color: #f1f5f9; }
:root[data-bs-theme="dark"] .empty-chat-sub   { color: #cbd5e1; }
:root[data-bs-theme="dark"] .empty-chat-chip  {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}
:root[data-bs-theme="dark"] .empty-chat-chip:hover {
  background: #1e293b;
  border-color: rgba(217, 119, 6, .55);
}
:root[data-bs-theme="dark"] .empty-chat-foot {
  border-top-color: #334155;
}

/* Streaming-text typewriter caret on the in-flight assistant bubble */
.stream-caret {
  display: inline-block;
  width: 7px; height: 14px;
  margin-left: 2px;
  background: var(--pulse-blue, #1a73e8);
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: stream-caret-blink 0.9s steps(2, start) infinite;
}
@keyframes stream-caret-blink { 50% { opacity: 0; } }

/* Sentinel preview blocks (Excel/Doc) live above the streaming body */
.msg-sentinel { margin-bottom: 8px; }

/* Feedback bar on assistant messages: thumbs up / thumbs down */
.msg.assistant .feedback-bar {
  display: flex; gap: 6px; align-items: center;
  padding-top: 6px; margin-top: 6px;
  border-top: 1px dashed #e2e8f0;
  font-size: 11px;
}
.msg.assistant .feedback-bar .fb-btn {
  background: transparent; border: 1px solid var(--soft-border);
  color: var(--bs-secondary-color);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .12s;
}
.msg.assistant .feedback-bar .fb-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.msg.assistant .feedback-bar .fb-thumbs-up:hover:not(:disabled) {
  color: #34a853; border-color: rgba(52,168,83,.5); background: rgba(52,168,83,.06);
}
.msg.assistant .feedback-bar .fb-thumbs-down:hover:not(:disabled) {
  color: #ef4444; border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.06);
}
.msg.assistant .feedback-bar .fb-view-prompt {
  margin-left: auto; /* push to the right edge of the feedback bar */
}
.msg.assistant .feedback-bar .fb-view-prompt:hover:not(:disabled) {
  color: #1a73e8; border-color: rgba(26,115,232,.5); background: rgba(26,115,232,.06);
}
.msg.assistant .feedback-bar .fb-btn.is-active {
  cursor: default;
}
.msg.assistant .feedback-bar .fb-thumbs-up.is-active {
  color: #fff; background: #34a853; border-color: #34a853;
}
.msg.assistant .feedback-bar .fb-thumbs-down.is-active {
  color: #fff; background: #ef4444; border-color: #ef4444;
}
.msg.assistant .feedback-bar .fb-btn:disabled { opacity: .85; }
.msg.assistant .fb-status { font-style: italic; }

/* "View prompt sent to LLM" pill on each assistant reply. Sits at the
   end of the feedback-bar so the thumbs cluster on the left and the
   debug surface lives on the right. Bookish blue hover so it reads as
   informational, not destructive. */
.msg.assistant .feedback-bar .fb-view-prompt {
  margin-left: auto;
}
.msg.assistant .feedback-bar .fb-view-prompt:hover:not(:disabled) {
  color: #2563eb;
  border-color: rgba(37, 99, 235, .5);
  background: rgba(37, 99, 235, .08);
}

/* Inline thumbs-down popup (lives inside the assistant message bubble) */
.fb-popup {
  margin-top: 6px;
  max-width: 420px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.04);
  border-radius: 10px;
  padding: 8px 10px;
  animation: fb-popup-in .18s ease;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
}
@keyframes fb-popup-in {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.fb-popup-head { font-size: 12px; line-height: 1.3; }
.fb-popup-body { display: flex; flex-direction: column; gap: 6px; }
.fb-popup-kind { display: flex; gap: 4px; flex-wrap: wrap; }
.fb-popup-kind-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  border: 1px solid var(--soft-border);
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  background: var(--bs-body-bg);
  margin: 0;
}
.fb-popup-kind-chip input { display: none; }
.fb-popup-kind-chip.is-on {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.5);
  color: #b91c1c;
}
.fb-popup .fb-popup-remarks,
.fb-popup .fb-popup-correction {
  font-size: 12px;
  resize: vertical;
  min-height: 38px;
  max-height: 90px;
  padding: 4px 8px;
  line-height: 1.35;
}
.fb-popup-correction-wrap { margin: 0; }
.fb-popup-correction-wrap > summary {
  cursor: pointer; font-size: 11px; color: var(--bs-secondary-color);
  padding: 2px 0;
  list-style: none;
}
.fb-popup-correction-wrap > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform .15s;
}
.fb-popup-correction-wrap[open] > summary::before { content: "▾ "; }
.fb-popup-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.fb-popup-actions { display: flex; gap: 4px; }
.fb-popup-actions .btn { padding: 2px 10px; font-size: 11px; }
.fb-popup-hint {
  max-width: 60%;
  font-size: 10.5px;
  line-height: 1.3;
}

/* Admin Feedback queue */
.fb-filter-pills .nav-link { padding: 4px 12px; font-size: 12px; border-radius: 999px; }
.fb-filter-pills .nav-link.active { background-color: #1a73e8; color: #fff; }
.fb-filter-pills .badge { font-size: 9.5px; }
.fb-item {
  border-radius: 12px;
  border: 1px solid var(--soft-border);
  background: var(--bs-body-bg);
}
.fb-item .fb-actions {
  display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end;
  border-top: 1px dashed var(--soft-border); padding-top: 8px;
}
.fb-item .fb-correction {
  background: rgba(26,115,232,.06);
  padding: 4px 8px; border-radius: 6px;
  border-left: 3px solid #1a73e8;
}
.badge.fb-kind-good       { background: #34a853; color: #fff; }
.badge.fb-kind-wrong      { background: #ef4444; color: #fff; }
.badge.fb-kind-incomplete { background: #f59e0b; color: #fff; }
.badge.fb-kind-correction { background: #1a73e8; color: #fff; }

/* Admin-table styling */
#admin-users-tbody td, #admin-users-tbody th { vertical-align: middle; font-size: 12px; }
#admin-users-tbody .badge { font-size: 9.5px; }

/* Generated password reveal block */
#nu-result { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Knowledge Graph viz (admin tab) */
.kbg-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 8px;
  height: 580px;
  border: 1px solid var(--or-navy-line);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}
.kbg-canvas {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.10) 1px, transparent 0) 0 0 / 22px 22px,
    #f8fafc;
}
.kbg-side {
  border-left: 1px solid var(--or-navy-line);
  background: #ffffff;
  overflow-y: auto;
  padding: 12px;
}
.kbg-side h6 { margin: 0 0 6px; font-size: 13px; }
.kbg-prop-row {
  display: flex; gap: 6px;
  padding: 3px 0;
  font-size: 11.5px;
  border-bottom: 1px dashed #eef1f5;
}
.kbg-prop-key { color: var(--or-text-mute); width: 100px; flex-shrink: 0; }
.kbg-prop-val { color: var(--or-text); word-break: break-word; }
.kbg-side .kbg-edge-list { margin-top: 10px; }
.kbg-edge-row {
  font-size: 11px;
  padding: 3px 0;
  border-bottom: 1px solid #f1f5f9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.kbg-edge-row.in  { color: var(--or-blue); }
.kbg-edge-row.out { color: #b45309; }
#kbg-stats { display: flex; align-items: center; }

/* Document Processing: inline preview + detail */
.doc-preview-card {
  margin-top: 8px;
  border: 1px solid var(--or-navy-line);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}
.doc-preview-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  border-bottom: 1px solid var(--or-navy-line);
}
.doc-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
  padding: 10px;
}
.doc-field-cell {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  background: #fafbfc;
  font-size: 11.5px;
}
.doc-field-cell.is-missing  { border-color: #fca5a5; background: #fef2f2; }
.doc-field-cell.is-conflict { border-color: #f59e0b; background: #fef3c7; }
.doc-field-label { font-size: 10px; color: var(--or-text-mute); text-transform: uppercase; letter-spacing: .04em; }
.doc-field-value { font-weight: 600; color: var(--or-text); word-break: break-word; }
.doc-field-status {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .06em;
  margin-left: 4px;
}
.doc-field-status.ok       { background: #dcfce7; color: #14532d; }
.doc-field-status.missing  { background: #fee2e2; color: #991b1b; }
.doc-field-status.conflict { background: #fef3c7; color: #b45309; }

/* nav-pills look */
.nav-pills .nav-link {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid transparent;
}
.nav-pills .nav-link:not(.active) {
  color: var(--bs-secondary-color);
  border-color: var(--soft-border);
  background: transparent;
}
.nav-pills .nav-link.active { background-color: var(--bs-primary); }

/* ========================================================================
   Workflow live log + per-node run indicators + traces UI
   ====================================================================== */
.wf-live-log {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  max-height: 220px;
  overflow-y: auto;
  background: #0b1220;
  color: #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.wf-live-log .wfev      { display: block; padding: 1px 0; }
.wf-live-log .wfev-time { color: #64748b; margin-right: 6px; }
.wf-live-log .wfev-tag  { color: #38bdf8; margin-right: 6px; font-weight: 600; }
.wf-live-log .wfev-ok   { color: #4ade80; }
.wf-live-log .wfev-err  { color: #f87171; }
.wf-live-log .wfev-info { color: #cbd5e1; }
.wf-live-log .wfev-tool { color: #fbbf24; }
.wf-live-log .wfev-skip { color: #94a3b8; font-style: italic; }
.wf-live-log .wfev-detail { color: #94a3b8; padding-left: 14px; display: block; }

/* Floating sub-step callout — a small "Live activity" box that floats
   BELOW each running node, anchored with an arrow pointing up at the node.
   Lives outside the node card geometry so it doesn't push connectors
   around. Rows show todo / in-progress / closure icons next to a business-
   readable label. */
.wf-node-substeps-callout {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  width: 260px;
  background: #ffffff;
  border: 1px solid #d1dde8;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12),
              0 2px 4px rgba(15, 23, 42, 0.06);
  padding: 10px 12px;
  z-index: 6;
  pointer-events: none;
  font-size: 12px;
}
.wf-node-substeps-callout.d-none { display: none !important; }
.wf-node-substeps-arrow {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: #ffffff;
  border-left: 1px solid #d1dde8;
  border-top:  1px solid #d1dde8;
  transform-origin: center;
  transform: translateX(-50%) rotate(45deg);
}
.wf-node-substeps-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #6b7488;
  margin-bottom: 8px;
}
.wf-node-substeps-head i { color: var(--or-aqua, #0099cf); }
.wf-node-substeps-body {
  display: flex; flex-direction: column; gap: 6px;
}
.wf-node-substep {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: #475569;
  line-height: 1.35;
}
.wf-node-substep-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.wf-node-substep.is-active .wf-node-substep-icon { color: var(--or-aqua, #0099cf); }
.wf-node-substep.is-done   .wf-node-substep-icon { color: #16a34a; }
.wf-node-substep.is-failed .wf-node-substep-icon { color: #b91c1c; }
.wf-node-substep.is-active .wf-node-substep-label {
  color: #1e3a8a; font-weight: 500;
}
.wf-node-substep.is-done   .wf-node-substep-label { color: #166534; }
.wf-node-substep.is-failed .wf-node-substep-label {
  color: #b91c1c; font-weight: 500;
}
.wf-substep-spin {
  display: inline-block;
  animation: wf-substep-rotate 1s linear infinite;
}
@keyframes wf-substep-rotate {
  to { transform: rotate(360deg); }
}

/* Node running / pending overlays for live execution */
.wf-node.is-running {
  border-color: var(--or-aqua);
  box-shadow: 0 0 0 4px rgba(0,153,207,.18), 0 8px 24px rgba(15,23,42,.12);
  animation: wf-node-pulse 1.4s ease-in-out infinite;
}
.wf-node.is-running .wf-node-strip { background: var(--or-aqua) !important; }
/* "▼ Executing" marker hovering above the node so a user scanning the
   canvas can instantly see which step is currently running. The arrow
   bobs gently so it stands out even on a busy canvas. */
.wf-node.is-running::before {
  content: "▼  Executing";
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  background: var(--or-aqua, #0099cf);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 153, 207, 0.35);
  animation: wf-node-bob 0.9s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}
@keyframes wf-node-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.wf-node.is-replay-cursor {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245,158,11,.22), 0 8px 24px rgba(15,23,42,.12);
}
@keyframes wf-node-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,153,207,.18), 0 8px 24px rgba(15,23,42,.12); }
  50%      { box-shadow: 0 0 0 8px rgba(0,153,207,.10), 0 8px 24px rgba(15,23,42,.10); }
}
.wf-node-status-pip.running { background: var(--or-aqua); box-shadow: 0 0 0 3px rgba(0,153,207,.20); animation: wf-node-pulse 1.4s ease-in-out infinite; }
.wf-node-status-pip.skipped { background: #94a3b8; }

/* Traces tab UI */
.wf-trace-card {
  border: 1px solid var(--or-navy-line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  cursor: pointer;
  transition: background-color .12s, box-shadow .12s;
}
.wf-trace-card:hover  { background: #f3f6fb; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.wf-trace-card.active { border-color: var(--or-aqua); box-shadow: 0 0 0 2px rgba(0,153,207,.15); }
.wf-trace-card .wf-trace-input {
  font-size: 12px; color: var(--or-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.wf-trace-card .wf-trace-meta {
  font-size: 10.5px;
  color: var(--or-text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.wf-trace-step {
  border-left: 3px solid #e2e8f0;
  padding: 6px 10px;
  margin-bottom: 4px;
  background: #fafbfc;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
}
.wf-trace-step.is-cursor { border-left-color: #f59e0b; background: #fff7ed; }
.wf-trace-step.is-played { border-left-color: #10b981; }
.wf-trace-step.is-fail   { border-left-color: #ef4444; background: #fef2f2; }
.wf-trace-step pre {
  background: #0b1220; color: #e2e8f0;
  font-size: 10.5px; padding: 6px 8px;
  border-radius: 4px; margin: 4px 0 0;
  max-height: 140px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.wf-replay-bar {
  display: flex; gap: 6px; align-items: center;
  padding: 6px 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* =========================================================================
 * v3.3 — Material-3 / Google product styling pass
 * Modern surfaces, motion, type. Layered on top of the existing Atlas
 * tokens; doesn't break older views, just elevates the polish.
 * ========================================================================= */

:root[data-bs-theme="light"] {
  /* M3 surface tokens */
  --m3-primary:        #1a73e8;     /* Google Blue 600 */
  --m3-primary-strong: #1558b8;
  --m3-on-primary:     #ffffff;
  --m3-primary-container: #d3e3fd;
  --m3-on-primary-container: #001b3f;
  --m3-secondary:      #34a853;     /* Green 600 (success accent) */
  --m3-tertiary:       #ea8600;     /* Amber 600 */
  --m3-error:          #d93025;
  --m3-surface:        #ffffff;
  --m3-surface-1:      #f8f9fc;
  --m3-surface-2:      #f1f3f9;
  --m3-surface-3:      #e8eaf2;
  --m3-on-surface:     #1f1f1f;
  --m3-on-surface-var: #44474f;
  --m3-outline:        #c4c7cf;
  --m3-outline-var:    #e3e5ec;

  /* Material elevation (soft, layered) */
  --m3-elev-1: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px rgba(60,64,67,.06);
  --m3-elev-2: 0 1px 2px rgba(60,64,67,.10), 0 2px 6px rgba(60,64,67,.08);
  --m3-elev-3: 0 4px 8px rgba(60,64,67,.10), 0 1px 3px rgba(60,64,67,.06);
  --m3-elev-4: 0 6px 16px rgba(60,64,67,.14), 0 2px 6px rgba(60,64,67,.08);

  --m3-radius-sm: 8px;
  --m3-radius:    12px;
  --m3-radius-lg: 20px;
  --m3-radius-xl: 28px;

  --m3-motion-fast: 160ms cubic-bezier(.2,.0,.2,1);
  --m3-motion-med:  240ms cubic-bezier(.2,.0,.0,1);
  --m3-motion-slow: 400ms cubic-bezier(.2,.0,.0,1);
}

/* Google product typography */
body, html {
  font-family: "Google Sans Text", "Roboto", "Inter", -apple-system,
               BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.atlas-brand-name, .topbar-title,
.kg-hero-title {
  font-family: "Google Sans", "Google Sans Text", "Roboto", sans-serif;
  letter-spacing: -0.012em;
}
code, pre, .kg-mono, .font-mono {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Subtle motion on interactive surfaces */
.btn, .atlas-nav-item, .nav-link,
.card, .form-control, .form-select,
button {
  transition:
    background-color var(--m3-motion-fast),
    color var(--m3-motion-fast),
    border-color var(--m3-motion-fast),
    box-shadow var(--m3-motion-fast),
    transform var(--m3-motion-fast);
}

/* Buttons — Material 3 filled / tonal / text */
.btn-primary {
  background: var(--m3-primary);
  border-color: var(--m3-primary);
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.005em;
  box-shadow: var(--m3-elev-1);
}
.btn-primary:hover {
  background: var(--m3-primary-strong);
  border-color: var(--m3-primary-strong);
  box-shadow: var(--m3-elev-2);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: var(--m3-elev-1); }
.btn-outline-primary { border-radius: 999px; }
.btn-outline-secondary { border-radius: 999px; }
.btn-outline-danger { border-radius: 999px; }
.btn-success { border-radius: 999px; }
.btn-sm { border-radius: 999px; }

/* Sidebar nav items get a Material rail feel */
.atlas-nav-item {
  border-radius: 999px !important;
  position: relative;
  overflow: hidden;
}
.atlas-nav-item.active {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
}
.atlas-nav-item.active i {
  color: var(--m3-primary);
}
.atlas-nav-item:hover:not(.active) {
  background: rgba(26,115,232,0.06);
}
.atlas-nav-item:hover:not(.active) i { color: var(--m3-primary-strong); }

/* Cards get a softer M3 elevation */
.card {
  border-radius: var(--m3-radius);
  border-color: var(--m3-outline-var);
  box-shadow: none;
  transition: box-shadow var(--m3-motion-med), transform var(--m3-motion-med);
}
.card:hover {
  box-shadow: var(--m3-elev-2);
}

/* Form fields — outlined Material 3 */
.form-control, .form-select {
  border-radius: var(--m3-radius-sm);
  border-color: var(--m3-outline);
}
.form-control:focus, .form-select:focus {
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}

/* Inputs in chat composer + topbar */
.atlas-topbar { box-shadow: var(--m3-elev-1); }

/* =========================================================================
 * Knowledge Graph view (Neo4j-backed)
 * ========================================================================= */
.kg-page {
  padding: 28px 36px 40px;
  max-width: 1400px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
  animation: kg-fade-in var(--m3-motion-slow) ease-out;
}
@keyframes kg-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kg-hero {
  display: flex; gap: 24px; align-items: stretch; justify-content: space-between;
  flex-wrap: wrap;
  padding: 28px;
  border-radius: var(--m3-radius-lg);
  background:
    radial-gradient(circle at 90% 0%, rgba(26,115,232,0.18) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(52,168,83,0.10) 0%, transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
  border: 1px solid var(--m3-outline-var);
  box-shadow: var(--m3-elev-1);
}
.kg-hero-text { flex: 1 1 320px; min-width: 0; }
.kg-hero-eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--m3-primary);
  margin-bottom: 8px;
}
.kg-hero-title {
  font-size: 32px; font-weight: 600; margin: 0 0 8px;
  color: var(--m3-on-surface);
}
.kg-hero-sub {
  font-size: 14.5px; color: var(--m3-on-surface-var);
  margin: 0; max-width: 640px; line-height: 1.55;
}
.kg-hero-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; min-width: 360px;
}
.kg-stat-card {
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--m3-elev-1);
  transition: transform var(--m3-motion-med), box-shadow var(--m3-motion-med);
}
.kg-stat-card:hover { transform: translateY(-2px); box-shadow: var(--m3-elev-3); }
.kg-stat-label {
  font-size: 11.5px; color: var(--m3-on-surface-var);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
.kg-stat-value {
  font-family: "Google Sans","Google Sans Text",sans-serif;
  font-size: 24px; font-weight: 600; color: var(--m3-on-surface);
  line-height: 1.05;
}
.kg-stat-sub { font-size: 11.5px; color: var(--m3-on-surface-var); }

.kg-controls {
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--m3-elev-1);
}
.kg-controls-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kg-controls-spacer { flex: 1 1 auto; }

.kg-search {
  position: relative; flex: 1 1 320px; min-width: 280px;
}
.kg-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--m3-on-surface-var); pointer-events: none;
}
.kg-search input {
  width: 100%; height: 40px;
  padding: 0 14px 0 38px;
  border-radius: 999px;
  border: 1px solid var(--m3-outline);
  background: var(--m3-surface-1);
  font-size: 14px; color: var(--m3-on-surface);
  transition: border-color var(--m3-motion-fast), background var(--m3-motion-fast),
              box-shadow var(--m3-motion-fast);
}
.kg-search input:focus {
  outline: none; background: var(--m3-surface);
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.18);
}

.kg-select {
  height: 40px; padding: 0 36px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--m3-outline);
  background: var(--m3-surface);
  font-size: 13.5px; color: var(--m3-on-surface);
  cursor: pointer;
}
.kg-select:focus {
  outline: none; border-color: var(--m3-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.18);
}

.kg-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--m3-elev-1);
}
.kg-btn:hover { box-shadow: var(--m3-elev-2); transform: translateY(-1px); }
.kg-btn:active { transform: translateY(0); }
.kg-btn[disabled] { opacity: 0.55; cursor: wait; }

.kg-btn-tonal {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
}
.kg-btn-tonal:hover { background: #c0d7fc; }

.kg-btn-ghost {
  background: transparent;
  color: var(--m3-on-surface-var);
  border-color: var(--m3-outline);
  box-shadow: none;
}
.kg-btn-ghost:hover {
  background: var(--m3-surface-1); color: var(--m3-primary);
  border-color: var(--m3-primary);
  box-shadow: none; transform: none;
}

.kg-btn-danger {
  background: transparent; color: var(--m3-error);
  border-color: var(--m3-outline);
  box-shadow: none;
}
.kg-btn-danger:hover {
  background: rgba(217,48,37,0.08);
  border-color: var(--m3-error);
  box-shadow: none; transform: none;
}

.kg-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 4px;
}
.kg-legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--m3-surface-1);
  border: 1px solid var(--m3-outline-var);
  font-size: 12px; color: var(--m3-on-surface-var);
  cursor: pointer;
  user-select: none;
  transition: background var(--m3-motion-fast),
              border-color var(--m3-motion-fast),
              transform var(--m3-motion-fast);
}
.kg-legend-chip:hover {
  background: var(--m3-surface-2);
  border-color: var(--m3-primary);
  color: var(--m3-on-surface);
}
.kg-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.kg-legend-chip em {
  color: var(--m3-on-surface-var);
  font-style: normal; font-weight: 600; margin-left: 2px;
}

.kg-shell {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  height: calc(100vh - 380px);
  min-height: 520px;
}
.kg-canvas {
  background:
    radial-gradient(circle at 1px 1px, rgba(26,115,232,0.06) 1px, transparent 0) 0 0 / 24px 24px,
    linear-gradient(180deg, #fdfdff 0%, #f8f9fc 100%);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  box-shadow: var(--m3-elev-1);
  overflow: hidden;
  position: relative;
}
.kg-side {
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  box-shadow: var(--m3-elev-1);
  overflow-y: auto;
  padding: 18px;
}
.kg-side-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px;
  padding: 40px 16px;
  color: var(--m3-on-surface-var);
  text-align: center;
}
.kg-side-empty-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--m3-primary-container);
  color: var(--m3-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.kg-side-empty-title { font-weight: 500; color: var(--m3-on-surface); }
.kg-side-empty-body { font-size: 12.5px; max-width: 240px; line-height: 1.45; }

.kg-side-card { animation: kg-side-in var(--m3-motion-med) ease-out; }
@keyframes kg-side-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.kg-side-head {
  display: flex; gap: 12px; align-items: center;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--m3-outline-var);
}
.kg-side-dot {
  width: 16px; height: 16px; border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.10);
}
.kg-side-title {
  font-family: "Google Sans","Google Sans Text",sans-serif;
  font-size: 17px; font-weight: 600; color: var(--m3-on-surface);
  line-height: 1.2;
}
.kg-side-sub {
  font-size: 12px; color: var(--m3-on-surface-var);
  margin-top: 3px;
}
.kg-side-section { margin-top: 16px; }
.kg-side-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--m3-on-surface-var);
  margin-bottom: 6px;
}
.kg-side-meta { color: var(--m3-on-surface-var); font-size: 11.5px; }
.kg-side-muted {
  font-size: 12.5px; color: var(--m3-on-surface-var); font-style: italic;
}
.kg-side-error {
  background: #fce8e6; color: var(--m3-error);
  padding: 10px 12px; border-radius: var(--m3-radius-sm);
  font-size: 13px;
}
.kg-prop {
  display: flex; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--m3-outline-var);
  font-size: 12.5px;
}
.kg-prop:last-child { border-bottom: none; }
.kg-prop-key {
  color: var(--m3-on-surface-var);
  width: 110px; flex-shrink: 0;
  font-weight: 500;
}
.kg-prop-val { color: var(--m3-on-surface); word-break: break-word; }
.kg-edge-row {
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: var(--m3-radius-sm);
  margin-bottom: 4px;
  background: var(--m3-surface-1);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.kg-edge-arrow {
  color: var(--m3-primary); font-weight: 700;
  font-family: "Roboto Mono", monospace;
}
.kg-edge-kind {
  font-family: "Roboto Mono", monospace;
  font-size: 11.5px; color: var(--m3-on-surface-var);
  background: var(--m3-surface-2);
  padding: 1px 6px; border-radius: 4px;
}
.kg-stats { display: block; padding-top: 4px; }

.kg-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px;
  height: 100%; padding: 40px;
  text-align: center;
  color: var(--m3-on-surface-var);
  animation: kg-fade-in var(--m3-motion-med) ease-out;
}
.kg-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--m3-primary-container);
  color: var(--m3-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.kg-empty-title {
  font-family: "Google Sans","Google Sans Text",sans-serif;
  font-size: 18px; font-weight: 500; color: var(--m3-on-surface);
}
.kg-empty-body { max-width: 420px; font-size: 13.5px; line-height: 1.5; }
.kg-empty-error { color: var(--m3-error); }

@media (max-width: 1100px) {
  .kg-shell { grid-template-columns: 1fr; height: auto; }
  .kg-canvas { height: 460px; }
  .kg-hero-stats { grid-template-columns: repeat(4, 1fr); min-width: 0; }
}
@media (max-width: 720px) {
  .kg-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .kg-page { padding: 16px; }
}

/* =========================================================================
 * Graph chips + per-doc breakdown rendered on the Documents page
 * ========================================================================= */
.kg-chip-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.kg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--m3-outline-var);
  background: var(--m3-surface-1);
  color: var(--m3-on-surface-var);
  white-space: nowrap;
}
.kg-chip-ready {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  border-color: transparent;
  cursor: pointer;
  transition: filter var(--m3-motion-fast), transform var(--m3-motion-fast);
}
.kg-chip-ready:hover { filter: brightness(0.97); transform: translateY(-1px); }
.kg-chip-pending {
  background: #fef7e0; color: #5f4400; border-color: #fde293;
}
.kg-chip-empty {
  background: #f1f3f9; color: var(--m3-on-surface-var);
}
.kg-chip-error {
  background: #fce8e6; color: var(--m3-error); border-color: #f6c5c1;
}
.kg-chip-spin {
  animation: kg-spin 1.6s linear infinite;
  display: inline-block;
}
@keyframes kg-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.kg-chip-caret {
  margin-left: 2px;
  transition: transform var(--m3-motion-fast);
}
.kg-chip-caret.open { transform: rotate(180deg); }
.kg-chip-link {
  font-size: 12px; padding: 0 4px; text-decoration: none;
  color: var(--m3-primary);
}
.kg-chip-link:hover { color: var(--m3-primary-strong); text-decoration: underline; }

.kg-doc-detail {
  margin-top: 10px;
  border-top: 1px solid var(--m3-outline-var);
  padding-top: 10px;
  animation: kg-fade-in var(--m3-motion-med) ease-out;
}
.kg-doc-detail-loading {
  font-size: 12px; color: var(--m3-on-surface-var);
  display: flex; align-items: center; gap: 6px;
}
.kg-doc-detail-summary {
  font-size: 12.5px; color: var(--m3-on-surface);
  margin-bottom: 8px;
}
.kg-doc-detail-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .kg-doc-detail-grid { grid-template-columns: 1fr; }
}
.kg-doc-detail-title {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--m3-on-surface-var);
  margin-bottom: 4px;
}
.kg-doc-table {
  margin-bottom: 0; font-size: 12.5px;
}
.kg-doc-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--m3-outline-var);
  vertical-align: middle;
}
.kg-doc-table tr:last-child td { border-bottom: none; }
.kg-prop-pill {
  display: inline-block;
  padding: 1px 8px;
  background: var(--m3-surface-2);
  border-radius: 6px;
  font-size: 11px;
  color: var(--m3-on-surface-var);
  margin-right: 4px;
}
.kg-prop-pill strong {
  color: var(--m3-on-surface);
  font-weight: 500;
}
.kg-rel-pill {
  display: inline-block;
  padding: 2px 10px;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  border-radius: 999px;
}

/* =========================================================================
 * Knowledge Graph: mode tabs + table view + path finder
 * ========================================================================= */
.kg-mode-tabs {
  display: inline-flex;
  background: var(--m3-surface-1);
  border: 1px solid var(--m3-outline-var);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.kg-mode-tab {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--m3-on-surface-var);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background var(--m3-motion-fast),
              color var(--m3-motion-fast),
              box-shadow var(--m3-motion-fast);
}
.kg-mode-tab:hover { color: var(--m3-on-surface); }
.kg-mode-tab.active {
  background: var(--m3-surface);
  color: var(--m3-primary);
  box-shadow: var(--m3-elev-1);
}

/* Path-finder panel */
.kg-pathfinder {
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  padding: 14px 16px;
  box-shadow: var(--m3-elev-1);
}
.kg-path-row {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
.kg-path-input {
  position: relative;
  flex: 1 1 240px;
  min-width: 220px;
}
.kg-path-input label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m3-on-surface-var);
  margin-bottom: 4px;
}
.kg-path-input input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--m3-outline);
  background: var(--m3-surface-1);
  font-size: 14px;
  color: var(--m3-on-surface);
}
.kg-path-input input:focus {
  outline: none;
  background: var(--m3-surface);
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.18);
}
.kg-path-arrow {
  align-self: center;
  color: var(--m3-on-surface-var);
  font-size: 18px;
  margin-bottom: 6px;
}
.kg-path-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius-sm);
  box-shadow: var(--m3-elev-3);
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
}
.kg-path-suggest:empty { display: none; }
.kg-path-suggest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--m3-outline-var);
}
.kg-path-suggest-row:last-child { border-bottom: none; }
.kg-path-suggest-row:hover { background: var(--m3-surface-1); }

.kg-path-status {
  margin-top: 10px;
  font-size: 13px;
  color: var(--m3-on-surface-var);
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}

/* Path-finder DAG: emphasize source (green) and target (red) endpoints */

/* Table view */
.kg-table-shell {
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  box-shadow: var(--m3-elev-1);
  padding: 14px;
  min-height: 520px;
  display: flex; flex-direction: column;
}
.kg-table-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.kg-table-toolbar input {
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--m3-outline);
  padding: 0 14px;
  flex: 1 1 280px; max-width: 360px;
}
.kg-table-toolbar input:focus {
  outline: none; border-color: var(--m3-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.18);
}
.kg-table-wrap { flex: 1 1 auto; overflow-y: auto; max-height: calc(100vh - 460px); }
.kg-table {
  margin-bottom: 0; font-size: 13px;
}
.kg-table thead th {
  position: sticky; top: 0;
  background: var(--m3-surface-1);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--m3-on-surface-var);
  border-bottom: 1px solid var(--m3-outline-var);
}
.kg-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--m3-outline-var);
  vertical-align: middle;
}
.kg-table tr:hover td { background: var(--m3-surface-1); }
.kg-conf-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: "Roboto Mono", monospace;
  font-size: 11.5px;
  background: linear-gradient(90deg,
                 #34a853 0%,
                 #fbbc04 var(--c, 50%),
                 #ea4335 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* =========================================================================
 * Documents page: Knowledge Graph summary card
 * ========================================================================= */
.kgsum-card {
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  transition: box-shadow var(--m3-motion-med), transform var(--m3-motion-med);
}
.kgsum-card:hover { box-shadow: var(--m3-elev-2); transform: translateY(-1px); }
.kgsum-card-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--m3-on-surface-var);
}
.kgsum-card-value {
  font-family: "Google Sans","Google Sans Text",sans-serif;
  font-size: 22px; font-weight: 600; color: var(--m3-on-surface);
  line-height: 1.05;
}
.kgsum-card-mono {
  font-family: "Google Sans","Google Sans Text",sans-serif;
  font-size: 18px;
}
.kgsum-card-sub { font-size: 11.5px; color: var(--m3-on-surface-var); }

.kgsum-kinds-row {
  display: flex; flex-direction: column; gap: 6px;
}
.kgsum-kinds-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.kgsum-kinds-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--m3-on-surface-var);
  min-width: 110px;
}

.kgsum-doc-table thead th {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--m3-on-surface-var);
  background: transparent;
  border-bottom: 1px solid var(--m3-outline-var);
}
.kg-mini-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  color: #fff;
  margin-right: 3px;
  font-weight: 500;
}

/* =========================================================================
 * Chat assistant message — Markdown renderer (.md-body)
 * ========================================================================= */
.md-body { line-height: 1.55; color: var(--m3-on-surface); }
.md-body p { margin: 0 0 8px; }
.md-body p:last-child { margin-bottom: 0; }
.md-body h1, .md-body h2, .md-body h3,
.md-body h4, .md-body h5, .md-body h6 {
  font-family: "Google Sans","Google Sans Text",sans-serif;
  font-weight: 600;
  margin: 14px 0 8px;
  color: var(--m3-on-surface);
}
.md-body h1 { font-size: 22px; }
.md-body h2 { font-size: 18px; }
.md-body h3 { font-size: 16px; }
.md-body h4, .md-body h5, .md-body h6 { font-size: 14px; }
.md-body ul, .md-body ol { margin: 4px 0 8px 22px; padding: 0; }
.md-body li { margin: 2px 0; }
.md-body strong { font-weight: 600; color: var(--m3-on-surface); }
.md-body em { font-style: italic; }
.md-body code {
  font-family: "Roboto Mono", monospace;
  font-size: 12.5px;
  background: var(--m3-surface-2);
  color: #b3261e;
  padding: 1px 6px;
  border-radius: 4px;
}
.md-body pre {
  background: var(--m3-surface-2);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius-sm);
  padding: 10px 12px;
  overflow-x: auto;
  margin: 6px 0 10px;
}
.md-body pre code {
  background: transparent;
  color: var(--m3-on-surface);
  padding: 0;
  font-size: 12.5px;
}
.md-body blockquote {
  margin: 6px 0 10px;
  padding: 4px 12px;
  border-left: 3px solid var(--m3-primary);
  background: var(--m3-surface-1);
  color: var(--m3-on-surface-var);
  border-radius: 0 var(--m3-radius-sm) var(--m3-radius-sm) 0;
}
.md-body hr {
  border: none;
  border-top: 1px solid var(--m3-outline-var);
  margin: 12px 0;
}
.md-body a {
  color: var(--m3-primary);
  text-decoration: none;
}
.md-body a:hover { text-decoration: underline; }

/* Tables — the headline reason this CSS exists */
.md-body table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 10px 0 14px;
  font-size: 13px;
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  overflow: hidden;
  box-shadow: var(--m3-elev-1);
  background: var(--m3-surface);
}
.md-body thead th {
  background: var(--m3-surface-1);
  color: var(--m3-on-surface-var);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--m3-outline-var);
  white-space: nowrap;
}
.md-body tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--m3-outline-var);
  vertical-align: top;
}
.md-body tbody tr:last-child td { border-bottom: none; }
.md-body tbody tr:nth-child(even) td { background: var(--m3-surface-1); }
.md-body tbody tr:hover td { background: rgba(26,115,232,0.06); }
.md-body th[align="right"], .md-body td[align="right"] { text-align: right; }
.md-body th[align="center"], .md-body td[align="center"] { text-align: center; }
.md-body th[align="left"], .md-body td[align="left"] { text-align: left; }
.md-body td:has(strong) { font-weight: 500; }

/* =========================================================================
 * Composer document picker
 * ========================================================================= */
.composer-doc-picker { position: relative; }
.composer-doc-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 360px;
  max-height: 420px;
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  box-shadow: var(--m3-elev-4);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: kg-side-in var(--m3-motion-fast) ease-out;
}
.composer-doc-menu-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--m3-outline-var);
  background: var(--m3-surface-1);
}
.composer-doc-menu-head input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--m3-outline);
  border-radius: 999px;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
}
.composer-doc-menu-head input:focus {
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.18);
}
.composer-doc-menu-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px;
}
.composer-doc-empty {
  text-align: center;
  padding: 20px;
  color: var(--m3-on-surface-var);
  font-style: italic;
  font-size: 12.5px;
}
.composer-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--m3-radius-sm);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  color: var(--m3-on-surface);
  transition: background var(--m3-motion-fast);
}
.composer-doc-item:hover { background: var(--m3-surface-1); }
.composer-doc-item i { color: var(--m3-primary); font-size: 18px; flex-shrink: 0; }
.composer-doc-item-body { flex: 1 1 auto; min-width: 0; }
.composer-doc-item-name {
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.composer-doc-item-meta {
  font-size: 11px; color: var(--m3-on-surface-var);
  margin-top: 1px;
}
.composer-doc-item-badge {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  flex-shrink: 0;
}

/* =========================================================================
 * Role Groups (admin tab)
 * ========================================================================= */
.rg-list-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--m3-motion-fast),
              border-color var(--m3-motion-fast),
              transform var(--m3-motion-fast);
}
.rg-list-item:hover {
  background: var(--m3-surface-1);
  border-color: var(--m3-primary);
  transform: translateY(-1px);
}
.rg-list-item.active {
  background: var(--m3-primary-container);
  border-color: var(--m3-primary);
}
.rg-list-item-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--m3-on-surface);
}
.rg-list-item-meta {
  font-size: 11.5px;
  color: var(--m3-on-surface-var);
  margin-top: 2px;
}

.rg-detail-empty {
  padding: 36px 18px;
  text-align: center;
  background: var(--m3-surface-1);
  border: 1px dashed var(--m3-outline);
  border-radius: var(--m3-radius);
}
.rg-detail-card {
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  box-shadow: var(--m3-elev-1);
  padding: 18px 20px;
}
.rg-detail-head {
  display: flex; gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--m3-outline-var);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.rg-detail-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--m3-primary);
  margin-bottom: 4px;
}
.rg-detail-title { margin: 0; }
.rg-name-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 20px;
  font-weight: 600;
  font-family: "Google Sans","Google Sans Text",sans-serif;
  color: var(--m3-on-surface);
  padding: 0 2px;
  width: 100%;
  outline: none;
  transition: border-color var(--m3-motion-fast);
}
.rg-name-input:focus { border-bottom-color: var(--m3-primary); }
.rg-desc-input {
  margin-top: 6px;
  border: 1px solid var(--m3-outline);
  border-radius: var(--m3-radius-sm);
  font-size: 12.5px;
}

.rg-detail-section { margin-top: 16px; }
.rg-detail-section-head {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--m3-on-surface-var);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.rg-detail-section-head i { color: var(--m3-primary); font-size: 14px; }

.rg-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.rg-perm-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--m3-outline-var);
  background: var(--m3-surface-1);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
  transition: background var(--m3-motion-fast),
              border-color var(--m3-motion-fast);
}
.rg-perm-chip:hover {
  background: var(--m3-surface-2);
  border-color: var(--m3-primary);
}
.rg-perm-chip.is-on {
  background: var(--m3-primary-container);
  border-color: var(--m3-primary);
  color: var(--m3-on-primary-container);
}
.rg-perm-chip input[type="checkbox"] {
  margin: 0;
  accent-color: var(--m3-primary);
}

.rg-member-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.rg-member-list li {
  padding: 4px 8px;
  background: var(--m3-surface-1);
  border-radius: var(--m3-radius-sm);
  font-size: 12.5px;
}

.rg-detail-actions {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--m3-outline-var);
  display: flex; align-items: center;
}


/* =========================================================================
 * Admin Dashboard (top banner + KPI cards + activity feed)
 * ========================================================================= */
.admin-summary-banner {
  background:
    radial-gradient(circle at 90% 0%, rgba(26,115,232,0.16) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(52,168,83,0.10) 0%, transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius-lg);
  box-shadow: var(--m3-elev-1);
  padding: 22px 24px;
  margin-bottom: 18px;
  animation: kg-fade-in var(--m3-motion-slow) ease-out;
}
.admin-summary-loading {
  display: flex; align-items: center; gap: 8px;
  color: var(--m3-on-surface-var);
}
.admin-summary-head { margin-bottom: 16px; }
.admin-summary-eyebrow {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--m3-primary);
  margin-bottom: 4px;
}
.admin-summary-title {
  font-size: 24px; font-weight: 600; margin: 0 0 4px;
  color: var(--m3-on-surface);
  font-family: "Google Sans", "Google Sans Text", sans-serif;
}
.admin-summary-highlights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.admin-highlight {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--m3-on-surface);
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  box-shadow: var(--m3-elev-1);
  transition: transform var(--m3-motion-fast), box-shadow var(--m3-motion-fast);
}
.admin-highlight[data-jump]:hover {
  transform: translateY(-1px);
  box-shadow: var(--m3-elev-2);
}
.admin-highlight i { font-size: 16px; }
.admin-highlight-warn { background: #fef7e0; border-color: #fde293; color: #5f4400; }
.admin-highlight-warn i { color: #ea8600; }
.admin-highlight-danger { background: #fce8e6; border-color: #f6c5c1; color: #b3261e; }
.admin-highlight-danger i { color: #d93025; }
.admin-highlight-info i { color: var(--m3-primary); }
.admin-highlight-ok { background: #e6f4ea; border-color: #a8dab5; color: #1e5128; }
.admin-highlight-ok i { color: #34a853; }

.admin-kpi {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--m3-surface);
  border: 1px solid var(--m3-outline-var);
  border-radius: var(--m3-radius);
  box-shadow: var(--m3-elev-1);
  transition: transform var(--m3-motion-med), box-shadow var(--m3-motion-med);
  height: 100%;
}
.admin-kpi:hover { transform: translateY(-2px); box-shadow: var(--m3-elev-3); }
.admin-kpi-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, white);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.admin-kpi-body { min-width: 0; flex: 1 1 auto; }
.admin-kpi-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--m3-on-surface-var);
}
.admin-kpi-value {
  font-family: "Google Sans","Google Sans Text",sans-serif;
  font-size: 22px; font-weight: 600; color: var(--m3-on-surface);
  line-height: 1.05;
  word-break: break-word;
}
.admin-kpi-sub {
  font-size: 11.5px; color: var(--m3-on-surface-var);
  margin-top: 2px;
  white-space: normal;
}

.admin-dash-card { box-shadow: var(--m3-elev-1); border-radius: var(--m3-radius); height: 100%; }
.admin-dash-card-title {
  font-size: 13px; font-weight: 500;
  color: var(--m3-on-surface);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.admin-dash-card-title i { color: var(--m3-primary); }

.admin-dash-feed, .admin-dash-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto;
}
.admin-dash-feed-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--m3-surface-1);
  border-radius: var(--m3-radius-sm);
  font-size: 12.5px;
}
.admin-dash-feed-row i { color: var(--m3-primary); flex-shrink: 0; }
.admin-dash-feed-label {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--m3-on-surface);
}
.admin-dash-feed-ts {
  font-family: "Roboto Mono", monospace;
  font-size: 11px; color: var(--m3-on-surface-var);
  flex-shrink: 0;
}
.admin-dash-list-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--m3-surface-1);
  border-radius: var(--m3-radius-sm);
  font-size: 12.5px;
}
.admin-dash-list-meta {
  font-size: 11.5px; color: var(--m3-on-surface-var);
  font-family: "Roboto Mono", monospace;
}
.admin-dash-spend-row {
  display: grid;
  grid-template-columns: 90px 1fr 80px;
  gap: 10px; align-items: center;
  padding: 6px 0;
  font-size: 12px;
}
.admin-dash-spend-day {
  font-family: "Roboto Mono", monospace;
  font-size: 11.5px; color: var(--m3-on-surface-var);
}
.admin-dash-spend-bar {
  height: 6px;
  background: var(--m3-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.admin-dash-spend-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--m3-primary) 0%, var(--m3-secondary) 100%);
  border-radius: 999px;
  transition: width var(--m3-motion-slow) ease-out;
}
.admin-dash-spend-val {
  font-family: "Roboto Mono", monospace;
  font-size: 11.5px;
  color: var(--m3-on-surface);
  text-align: right;
}

/* ───────── Long-answer "View more" collapse ───────── */
.msg.assistant {
  position: relative;
}
.msg.assistant.msg-truncated .msg-body {
  max-height: 480px;
  overflow: hidden;
  position: relative;
}
.msg.assistant.msg-truncated .msg-body::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 84px;
  background: linear-gradient(to bottom, transparent, #f8fafc 85%);
  pointer-events: none;
}
.msg-view-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 12px;
  border: 1px solid #e6ecf5;
  border-radius: 18px;
  background: white;
  color: #1a73e8;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.msg-view-more:hover {
  background: #eff6ff;
  transform: translateY(-1px);
}

/* ───────── Clickable [KB] / [Web] citation chips ───────── */
.kb-cite, .web-cite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  margin: 0 2px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  vertical-align: baseline;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .15s;
}
.kb-cite {
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fcd34d;
}
.kb-cite:hover {
  background: #fef3c7;
  transform: translateY(-1px);
}
.web-cite {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}
.kb-cite .bi, .web-cite .bi { font-size: 11px; }

/* ───────── KB source-viewer modal ───────── */
.kb-src-body {
  max-height: 60vh;
  overflow: auto;
  font-size: 13.5px;
  line-height: 1.6;
  background: #fafbfc;
  border: 1px solid #e6ecf5;
  border-radius: 12px;
  padding: 16px 18px;
  white-space: pre-wrap;
  font-family: "Google Sans","Segoe UI",system-ui,sans-serif;
}
.kb-src-body mark {
  background: #fef08a;
  color: inherit;
  padding: 1px 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #facc15;
}
.kb-src-body .kb-src-chunk {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e6ecf5;
}
.kb-src-body .kb-src-chunk:last-child {
  border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}
.kb-src-body .kb-src-heading {
  font-size: 11.5px;
  text-transform: uppercase;
  color: #6b7280;
  letter-spacing: .04em;
  font-weight: 600;
  margin-bottom: 4px;
}
.kb-src-body table {
  border-collapse: collapse; width: 100%; margin: 6px 0;
}
.kb-src-body table th,
.kb-src-body table td {
  border: 1px solid #e6ecf5; padding: 4px 8px; font-size: 12.5px;
}
.kb-src-body table th { background: #f1f5f9; font-weight: 600; }

/* ───────── KB source modal — multi-candidate picker ───────── */
.kb-src-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px 10px;
  margin: -6px -8px 12px;
  border-bottom: 1px solid #e6ecf5;
  position: sticky;
  top: 0;
  background: #fafbfc;
  z-index: 1;
}
.kb-src-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: white;
  border: 1px solid #e6ecf5;
  border-radius: 999px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.kb-src-pill:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  transform: translateY(-1px);
}
.kb-src-pill.active {
  background: #1a73e8;
  border-color: #1a73e8;
  color: white;
}
.kb-src-loading {
  padding: 24px 8px;
  text-align: center;
}

/* ───────── KB source modal — PDF viewer mode ───────── */
.kb-src-modal-body { display: flex; flex-direction: column; min-height: 0; }
.kb-src-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid #e6ecf5;
  background: #ffffff;
  position: sticky; top: 0; z-index: 3;
}
.kb-src-toolbar .btn-sm { padding: 3px 8px; font-size: 13px; }
.kb-src-pagelabel,
.kb-src-zoom-label {
  font-size: 12.5px;
  color: #475569;
  min-width: 70px; text-align: center;
  font-family: ui-monospace, monospace;
}
.kb-src-divider {
  width: 1px; height: 22px; background: #e6ecf5; margin: 0 6px;
}
.kb-src-status {
  padding: 12px 16px;
  font-size: 13px;
  color: #475569;
}
.kb-src-status .text-danger { color: #b91c1c !important; }
.kb-src-viewer {
  flex: 1;
  overflow: auto;
  background: #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 12px;
  min-height: 400px;
  max-height: 70vh;
}
.kb-pdf-page-wrap {
  position: relative;
  background: white;
  box-shadow: 0 4px 20px rgba(15, 23, 42, .12);
  border-radius: 4px;
  overflow: hidden;
}
.kb-pdf-page-wrap canvas {
  display: block;
}
.kb-pdf-textLayer {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  overflow: hidden;
  line-height: 1.0;
  opacity: 1;
  user-select: text;
  -webkit-user-select: text;
}
.kb-pdf-textLayer > span,
.kb-pdf-textLayer > br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.kb-pdf-textLayer ::selection { background: rgba(26, 115, 232, .35); }

/* Base highlight styling — overridden per-style below. We default to the
   marker variant so the toolbar can stay in sync via the .style-* class. */
.kb-pdf-textLayer > span.kb-pdf-mark {
  border-radius: 2px;
  transition: background-color .2s, box-shadow .2s, border-bottom-color .2s;
}

/* ── MARKER: highlighter-pen look. `mix-blend-mode: multiply` darkens the
   canvas pixels underneath instead of covering them, so the underlying
   text stays readable through the yellow. ── */
.kb-src-viewer.style-marker .kb-pdf-textLayer > span.kb-pdf-mark {
  background-color: rgba(253, 224, 71, 0.55);
  mix-blend-mode: multiply;
  box-shadow: none;
}
.kb-src-viewer.style-marker .kb-pdf-textLayer > span.kb-pdf-mark-primary {
  background-color: rgba(250, 204, 21, 0.78);
}

/* ── UNDERLINE: yellow bar beneath the cited span only, leaves the text
   completely visible. Good for screenshots / dark backgrounds. ── */
.kb-src-viewer.style-underline .kb-pdf-textLayer > span.kb-pdf-mark {
  background-color: transparent;
  border-bottom: 2px solid rgba(202, 138, 4, 0.55);
  mix-blend-mode: normal;
  box-shadow: none;
  border-radius: 0;
}
.kb-src-viewer.style-underline .kb-pdf-textLayer > span.kb-pdf-mark-primary {
  border-bottom-width: 3px;
  border-bottom-color: #ca8a04;
}

/* ── OUTLINE: just a yellow box around the cited spans, fully transparent
   inside. Useful when the highlight density is high and you want minimum
   visual interference. ── */
.kb-src-viewer.style-box .kb-pdf-textLayer > span.kb-pdf-mark {
  background-color: transparent;
  box-shadow: 0 0 0 1px rgba(202, 138, 4, 0.45);
  mix-blend-mode: normal;
}
.kb-src-viewer.style-box .kb-pdf-textLayer > span.kb-pdf-mark-primary {
  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.85);
}

/* Toolbar style toggle */
.kb-style-group .btn { padding: 3px 8px; font-size: 12.5px; }
.kb-style-group .btn-check:checked + .btn {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

/* DOCX rendering branch */
.kb-docx-host {
  background: white;
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, .12);
  border-radius: 4px;
  font-family: "Calibri","Segoe UI",sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #1e293b;
}
.kb-docx-host mark {
  padding: 1px 2px;
  border-radius: 2px;
  transition: background-color .2s, border-bottom-color .2s, box-shadow .2s;
}
.kb-src-viewer.style-marker .kb-docx-host mark {
  background-color: rgba(253, 224, 71, 0.55);
  mix-blend-mode: multiply;
}
.kb-src-viewer.style-underline .kb-docx-host mark {
  background-color: transparent;
  border-bottom: 2px solid #ca8a04;
}
.kb-src-viewer.style-box .kb-docx-host mark {
  background-color: transparent;
  box-shadow: 0 0 0 1px rgba(202, 138, 4, 0.55);
}
.kb-docx-host p, .kb-docx-host h1, .kb-docx-host h2, .kb-docx-host h3 {
  margin: 0.5em 0;
}
.kb-docx-host table { border-collapse: collapse; margin: 6px 0; }
.kb-docx-host td, .kb-docx-host th {
  border: 1px solid #cbd5e1; padding: 4px 8px;
}

/* ── Native-format citation renderers (PPTX-as-PDF, XLSX, JSON, image, text) ── */
/* XLSX — looks like a spreadsheet with banded rows and sheet tabs. */
.kb-xlsx-host {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, .10);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}
.kb-xlsx-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  background: #e2e8f0;
  border-bottom: 1px solid #cbd5e1;
  overflow-x: auto;
}
.kb-xlsx-tab {
  background: #cbd5e1;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
.kb-xlsx-tab:hover { background: #94a3b8; color: white; }
.kb-xlsx-tab.active {
  background: white;
  color: #0f172a;
  border-color: #cbd5e1;
  font-weight: 600;
  position: relative;
  top: 1px;
  border-bottom: 1px solid white;
}
.kb-xlsx-sheet-head {
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  color: #475569;
}
.kb-xlsx-table-wrap {
  overflow: auto;
  max-height: calc(70vh - 80px);
}
.kb-xlsx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Calibri", sans-serif;
  background: white;
}
.kb-xlsx-table thead th {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid #cbd5e1;
  position: sticky;
  top: 0;
  z-index: 1;
}
.kb-xlsx-table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  white-space: nowrap;
  color: #0f172a;
}
.kb-xlsx-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.kb-xlsx-table tbody tr:nth-child(even) td { background: #f8fafc; }
.kb-xlsx-table tbody tr.kb-xlsx-row-match td {
  background: rgba(253, 224, 71, 0.35) !important;
}
.kb-xlsx-table tbody tr.kb-xlsx-row-match td:first-child {
  border-left: 3px solid #ca8a04;
}

/* JSON — pretty-printed with key/value/number colouring. */
.kb-json-host {
  background: #0f172a;
  color: #e2e8f0;
  padding: 18px 22px;
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  margin: 0;
  align-self: stretch;
  white-space: pre;
  tab-size: 2;
}
.kb-json-host .kb-json-key  { color: #93c5fd; }
.kb-json-host .kb-json-str  { color: #fcd34d; }
.kb-json-host .kb-json-num  { color: #86efac; }
.kb-json-host .kb-json-bool { color: #f472b6; font-style: italic; }
.kb-json-host mark {
  background: rgba(253, 224, 71, 0.22);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* Image — fit-to-container with shadow. */
.kb-image-host {
  background: white;
  padding: 18px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, .10);
  max-width: 100%;
  display: flex;
  justify-content: center;
}
.kb-image-host img {
  max-width: 100%;
  max-height: calc(70vh - 60px);
  object-fit: contain;
  background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
                    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
                    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* Plain text / CSV / MD / LOG — monospace with subtle line styling. */
.kb-text-host {
  background: #ffffff;
  color: #0f172a;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, .08);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  width: 100%;
  max-width: 100%;
  margin: 0;
  align-self: stretch;
  white-space: pre;
  overflow: auto;
  max-height: calc(70vh - 40px);
}
.kb-text-host mark {
  background: rgba(253, 224, 71, 0.55);
  padding: 1px 2px;
  border-radius: 2px;
}

/* Dark-mode overrides */
:root[data-bs-theme="dark"] .kb-xlsx-host { background: #1e293b; }
:root[data-bs-theme="dark"] .kb-xlsx-tabs { background: #0f172a; border-color: #334155; }
:root[data-bs-theme="dark"] .kb-xlsx-tab  { background: #334155; color: #cbd5e1; border-color: #334155; }
:root[data-bs-theme="dark"] .kb-xlsx-tab.active { background: #1e293b; color: #f8fafc; border-bottom-color: #1e293b; }
:root[data-bs-theme="dark"] .kb-xlsx-sheet-head { background: #0f172a; border-color: #334155; color: #94a3b8; }
:root[data-bs-theme="dark"] .kb-xlsx-table { background: #1e293b; }
:root[data-bs-theme="dark"] .kb-xlsx-table thead th { background: #0f172a; color: #f8fafc; border-color: #334155; }
:root[data-bs-theme="dark"] .kb-xlsx-table tbody td { color: #e2e8f0; border-color: #334155; }
:root[data-bs-theme="dark"] .kb-xlsx-table tbody tr:nth-child(even) td { background: #283244; }
:root[data-bs-theme="dark"] .kb-text-host { background: #0f172a; color: #e2e8f0; }
:root[data-bs-theme="dark"] .kb-image-host { background: #1e293b; }

/* Near-fullscreen doc viewer — leaves a thin frame so the user can see
   they're in a modal and click outside to dismiss. */
.kb-src-dialog.modal-dialog {
  max-width: 96vw;
  width: 96vw;
  height: 96vh;
  margin: 2vh auto;
}
.kb-src-dialog .modal-content {
  height: 96vh;
  border-radius: 14px;
  overflow: hidden;
}
.kb-src-dialog .modal-body { overflow: hidden; }
.kb-src-dialog .kb-src-viewer {
  /* Fill all available height between toolbar and footer. */
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

/* ───────── Inline generated-file download card ───────── */
.filegen-card {
  display: flex; align-items: center; gap: 10px;
  background: white;
  border: 1px solid #e6ecf5;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 6px 0;
  /* Parent .msg has white-space: pre-wrap; reset inside so template-literal
     newlines don't render as visible whitespace inflating the card. */
  white-space: normal;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
  transition: box-shadow .15s, transform .15s;
}
.filegen-card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}
.filegen-icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 17px;
}
.filegen-meta-col { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.filegen-title {
  font-weight: 600; font-size: 13px; color: #0f1f3a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filegen-sub {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  font-size: 11px; color: #475569; margin-top: 1px;
}
.filegen-kind {
  background: #eff6ff; color: #1d4ed8;
  padding: 0 6px; border-radius: 999px; font-weight: 600;
  font-size: 10px; letter-spacing: .02em;
}
.filegen-name {
  font-family: ui-monospace, monospace; opacity: .75;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 200px;
}
.filegen-bytes { opacity: .65; }
.filegen-meta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.filegen-actions { display: flex; flex-direction: row; gap: 4px; align-items: center; flex: 0 0 auto; }
.filegen-actions .btn-sm {
  padding: 3px 9px; font-size: 11.5px; white-space: nowrap;
  border-radius: 7px; line-height: 1.25;
}
.filegen-actions .btn-sm i { font-size: 11px; margin-right: 1px; }

/* ─────────── Facebook-feed style skeleton loader (chat boot) ─────────── */
@keyframes chat-skel-shimmer {
  0%   { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}
.chat-skeleton {
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 2px;
}
.chat-skel-row {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 85%;
}
.chat-skel-row.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-skel-avatar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(90deg, #eef2f7 0%, #f6f8fb 30%, #eef2f7 60%);
  background-size: 480px 100%;
  animation: chat-skel-shimmer 1.4s linear infinite;
}
.chat-skel-bubble {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--soft-border, #e6ecf5);
  min-width: 220px;
}
.chat-skel-row.user .chat-skel-bubble {
  background: rgba(var(--bs-primary-rgb), 0.06);
  border-color: rgba(var(--bs-primary-rgb), 0.18);
}
.chat-skel-line {
  height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #e8edf3 0%, #f4f6fa 30%, #e8edf3 60%);
  background-size: 480px 100%;
  animation: chat-skel-shimmer 1.4s linear infinite;
}
.chat-skel-line.w-90 { width: 90%; }
.chat-skel-line.w-75 { width: 75%; }
.chat-skel-line.w-60 { width: 60%; }
.chat-skel-line.w-45 { width: 45%; }
.chat-skel-line.w-30 { width: 30%; }
.chat-skel-line.h-card {
  height: 56px; border-radius: 10px; margin-top: 4px;
}

/* ─────────── Explanation tab — developer debug trace ─────────── */
.explanation-log {
  position: relative;
  padding: 6px 4px 8px 24px;
  font-size: 12px;
}
.explanation-log::before {
  content: "";
  position: absolute;
  left: 12px; top: 40px; bottom: 12px; width: 2px;
  background: linear-gradient(180deg, #cfd8e3 0%, #cfd8e3 80%, rgba(207,216,227,0) 100%);
  border-radius: 2px;
}
.explain-thread-header {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, #f8fafc 0%, #f8fafc 80%, rgba(248,250,252,0));
  padding: 4px 0 8px 0;
  margin: 0 0 6px -20px;
  padding-left: 20px;
  font-size: 11px;
  color: #64748b;
  display: flex; align-items: center; gap: 6px;
}
.explain-thread-header .bi { color: #2563eb; }
.explain-thread-header strong { color: #0f1f3a; font-size: 12px; }
.explain-thread-header .explain-meta {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: #94a3b8;
}
.explain-step {
  position: relative;
  margin-bottom: 10px;
  padding: 8px 10px 9px 12px;
  background: white;
  border: 1px solid var(--soft-border, #e6ecf5);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  transition: box-shadow .15s;
}
.explain-step:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, .07); }
.explain-step.depth-worker {
  margin-left: 16px;
  border-left: 3px solid #c7d2fe;
}
.explain-step::before {
  /* numbered bullet on the timeline rail */
  content: attr(data-step);
  position: absolute;
  left: -22px; top: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: white;
  border: 2px solid #cfd8e3;
  color: #475569;
  font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
  z-index: 1;
}
.explain-step.depth-worker::before {
  left: -38px;
}
.explain-step.is-current::before {
  border-color: #2563eb; color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
  animation: explain-pulse 1.5s ease-in-out infinite;
}
.explain-step.is-done::before {
  border-color: #16a34a; color: white; background: #16a34a;
}
.explain-step.is-error::before {
  border-color: #dc2626; color: white; background: #dc2626;
}
@keyframes explain-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .15); }
  50%      { box-shadow: 0 0 0 7px rgba(37, 99, 235, .05); }
}
.explain-step-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-weight: 600; font-size: 12.5px; color: #0f1f3a;
  margin-bottom: 4px;
}
.explain-step-head > .bi { font-size: 13px; color: #2563eb; }
.explain-step-head .explain-title { flex: 0 1 auto; }
.explain-step-head .explain-time {
  margin-left: auto; font-size: 10px; color: #94a3b8; font-weight: 500;
  font-family: ui-monospace, monospace;
}
/* Chips for kind / tool / server / agent / depth / call-id */
.explain-chip {
  display: inline-block;
  padding: 0 6px; border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  vertical-align: baseline;
  white-space: nowrap;
  line-height: 1.7;
}
.explain-chip.kind-tool    { background: #fef3c7; color: #92400e; }
.explain-chip.kind-result  { background: #dcfce7; color: #14532d; }
.explain-chip.kind-error   { background: #fee2e2; color: #991b1b; }
.explain-chip.kind-think   { background: #ede9fe; color: #5b21b6; }
.explain-chip.kind-deleg   { background: #dbeafe; color: #1e40af; }
.explain-chip.kind-reply   { background: #e0f2fe; color: #075985; }
.explain-chip.kind-kb      { background: #f3e8ff; color: #6b21a8; }
.explain-chip.kind-meta    { background: #f1f5f9; color: #475569; }
.explain-chip.kind-agent   { background: #eef2ff; color: #3730a3; }
.explain-chip.kind-server  { background: #fdf4ff; color: #86198f; }
.explain-chip.kind-id      { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.explain-chip.kind-depth-sup    { background: #fef9c3; color: #854d0e; }
.explain-chip.kind-depth-worker { background: #ede9fe; color: #5b21b6; }
/* Duration chip with heat-tint based on elapsed time. */
.explain-chip.explain-dur {
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 3px;
}
.explain-chip.explain-dur .bi { font-size: 10px; opacity: .75; }
.explain-chip.explain-dur[data-dur-empty] { display: none; }
.explain-chip.explain-dur.dur-fast   { background: #dcfce7; color: #14532d; }
.explain-chip.explain-dur.dur-medium { background: #fef9c3; color: #854d0e; }
.explain-chip.explain-dur.dur-slow   { background: #fee2e2; color: #991b1b; }
.explain-step-body { color: #334155; line-height: 1.45; font-size: 12px; }
.explain-step-body > p,
.explain-step-body > div.explain-text { margin: 0 0 4px 0; }
/* INPUT / OUTPUT blocks — the heart of the developer trace */
.explain-io {
  margin-top: 5px;
  border: 1px solid #e6ecf5;
  border-radius: 6px;
  overflow: hidden;
}
.explain-io + .explain-io { margin-top: 4px; }
.explain-io-label {
  display: flex; align-items: center; gap: 6px;
  font-family: ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: #f6f8fb;
  border-bottom: 1px solid #e6ecf5;
  color: #64748b;
}
.explain-io.in  .explain-io-label { color: #1e40af; background: #eff6ff; }
.explain-io.out .explain-io-label { color: #14532d; background: #f0fdf4; }
.explain-io.err .explain-io-label { color: #991b1b; background: #fef2f2; }
.explain-io-label .explain-io-meta {
  margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: #94a3b8;
}
.explain-io-body {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  padding: 6px 8px;
  background: #fbfcfe;
  color: #0f1f3a;
  max-height: 280px; overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.explain-io.err .explain-io-body { background: #fef9f9; color: #7f1d1d; }
.explain-io-body.is-empty { color: #94a3b8; font-style: italic; }
/* Optional "show more" wrapper when payload exceeds the cap */
.explain-io details > summary {
  cursor: pointer; user-select: none;
  font-size: 10.5px; color: #64748b;
  padding: 4px 8px; background: #f6f8fb;
  border-top: 1px solid #e6ecf5;
}
.explain-turn-divider {
  font-size: 10px; color: #94a3b8;
  text-align: center;
  margin: 8px 0 8px;
  text-transform: uppercase; letter-spacing: .12em;
  position: relative;
  font-family: ui-monospace, monospace;
}
.explain-turn-divider::before,
.explain-turn-divider::after {
  content: ""; position: absolute; top: 50%; width: 36%; height: 1px;
  background: #e6ecf5;
}
.explain-turn-divider::before { left: 0; }
.explain-turn-divider::after  { right: 0; }
.explain-empty {
  text-align: center; padding: 30px 12px;
  color: #94a3b8; font-size: 12px;
}

/* ===================== Workflow Wizard ===================== */
.wizard-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.wizard-shell {
  width: min(1280px, 100%); height: min(86vh, 880px);
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wizard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid #e6ecf5;
  background: linear-gradient(90deg, #f8fafc, #fff);
}
.wizard-phase-pill {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  background: #f1f5f9; color: #475569; padding: 2px 8px; border-radius: 10px;
  margin-left: 6px;
}
.wizard-phase-pill[data-phase="propose"]    { background:#ede9fe; color:#5b21b6; }
.wizard-phase-pill[data-phase="walkthrough"] { background:#dbeafe; color:#1e3a8a; }
.wizard-phase-pill[data-phase="done"]        { background:#dcfce7; color:#14532d; }
.wizard-body {
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 0; flex-grow: 1; min-height: 0;
}
.wizard-chat {
  display: flex; flex-direction: column;
  border-right: 1px solid #e6ecf5;
  background: #fafbfd;
  min-height: 0;
}
.wizard-chat-log {
  flex-grow: 1; overflow-y: auto;
  padding: 14px 14px 8px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.wizard-msg {
  font-size: 13px; line-height: 1.45;
  padding: 8px 12px; border-radius: 10px;
  max-width: 92%;
}
.wizard-msg.user {
  align-self: flex-end;
  background: #2563eb; color: #fff;
  border-bottom-right-radius: 3px;
}
.wizard-msg.assistant {
  align-self: flex-start;
  background: #fff; color: #1e293b;
  border: 1px solid #e6ecf5;
  border-bottom-left-radius: 3px;
}
.wizard-msg.assistant.is-thinking { color: #94a3b8; font-style: italic; }
.wizard-chat-composer {
  border-top: 1px solid #e6ecf5;
  background: #fff;
  padding: 10px 12px;
}
.wizard-chat-composer textarea {
  width: 100%;
  border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 8px 10px; font: 13px/1.4 inherit;
  resize: none;
}
.wizard-chat-composer textarea:focus {
  outline: none; border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.wizard-preview {
  display: flex; flex-direction: column;
  min-height: 0;
  background: #f6f8fb;
}
.wizard-preview-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-grow: 1;
  padding: 24px;
  text-align: center;
}

/* ----- Wizard "Drafting your workflow" indicator (single LLM call) ----- */
.wizard-progress {
  flex-grow: 1;
  display: flex; align-items: flex-start;
  padding: 28px 32px;
  background: linear-gradient(180deg, #f6f8fb 0%, #eef2f9 100%);
}
.wizard-progress.d-none { display: none !important; }
.wizard-progress-spinner {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid #e6ecf5; border-radius: 12px;
  padding: 16px 20px;
  width: 100%;
  box-shadow: 0 1px 2px rgba(15, 31, 58, 0.04);
}
.wizard-progress-spinner .spinner-border {
  margin-top: 3px; width: 1.1rem; height: 1.1rem;
}
.wizard-progress-text {
  display: flex; flex-direction: column; gap: 4px;
}
.wizard-progress-text strong {
  font-size: 1.02rem; color: #0f1f3a;
  font-family: "Google Sans", "Inter", sans-serif;
}
#wizard-progress-elapsed {
  margin-left: 6px; color: #2563eb; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.wizard-progress.is-awaiting .wizard-progress-spinner {
  background: #fffbeb; border-color: #fde68a;
}
.wizard-progress.is-awaiting .spinner-border { display: none; }
.wizard-progress.is-awaiting .wizard-progress-text strong { color: #92400e; }
.wizard-preview-body {
  display: grid;
  grid-template-rows: minmax(220px, 1fr) auto;
  flex-grow: 1; min-height: 0;
}
.wizard-canvas-host {
  position: relative; overflow: auto;
  background: #fff;
  background-image:
    radial-gradient(circle, #e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid #e6ecf5;
  min-height: 240px;
}
.wizard-canvas-edges, .wizard-canvas-nodes {
  position: absolute; inset: 0;
}
.wizard-canvas-nodes { pointer-events: none; }
.wiz-node {
  position: absolute;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 10px;
  width: 200px; min-height: 56px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  font-size: 12px;
  transition: all 180ms ease;
}
.wiz-node-title {
  font-weight: 600; color: #1e293b;
  display: flex; align-items: center; gap: 6px;
}
.wiz-node-type {
  font-size: 10px; color: #64748b;
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: 2px;
}
.wiz-node-meta {
  font-size: 11px; color: #475569;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wiz-node.is-cursor {
  border-color: #7c3aed;
  background: #faf5ff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.22), 0 4px 14px rgba(124,58,237,.18);
  transform: scale(1.03);
}
.wiz-node.is-done {
  border-color: #16a34a;
  background: #f0fdf4;
}
.wiz-node-trigger .wiz-node-title { color: #047857; }
.wiz-node-agent   .wiz-node-title { color: #1e3a8a; }
.wiz-node-verifier .wiz-node-title { color: #a16207; }
.wiz-node-branch  .wiz-node-title { color: #6b21a8; }
.wiz-node-tool    .wiz-node-title { color: #334155; }
.wiz-node-end     .wiz-node-title { color: #475569; }
.wiz-edge { stroke: #cbd5e1; stroke-width: 1.5; fill: none; }

.wizard-steps {
  padding: 12px 14px 14px 14px;
  border-top: 1px solid #e6ecf5;
  background: #fff;
  display: flex; flex-direction: column; min-height: 0;
}
.wizard-steps-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.wizard-steps-list {
  list-style: none; padding: 0; margin: 0 0 8px 0;
  max-height: 130px; overflow-y: auto;
  font-size: 12.5px;
}
.wizard-steps-list li {
  padding: 5px 8px; border-radius: 6px;
  cursor: pointer;
  display: flex; gap: 8px; align-items: flex-start;
  margin-bottom: 2px;
}
.wizard-steps-list li:hover { background: #f1f5f9; }
.wizard-steps-list li.is-current {
  background: #f5f3ff; border-left: 3px solid #7c3aed;
  font-weight: 500;
}
.wizard-steps-list li.is-done { color: #166534; }
.wizard-steps-list .step-num {
  font-weight: 600; color: #64748b; min-width: 18px;
}
.wizard-step-detail {
  background: #f8fafc;
  border: 1px solid #e6ecf5;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12.5px; line-height: 1.45;
  color: #1e293b;
  min-height: 50px;
}
.wizard-step-actions {
  display: flex; gap: 6px;
  margin-top: 10px;
}

/* ===== Trace step file downloads ===== */
.wf-step-files {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0;
}
.wf-step-file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  background: #f0f9ff; border: 1px solid #bae6fd;
  color: #075985; text-decoration: none;
  font-size: 12.5px; font-weight: 500;
  transition: background 120ms ease, transform 120ms ease;
}
.wf-step-file:hover {
  background: #e0f2fe; color: #0c4a6e; text-decoration: none;
  transform: translateY(-1px);
}
.wf-step-file i { font-size: 14px; }
.wf-step-file-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-step-file-size {
  background: #e0f2fe; color: #0369a1;
  font-size: 11px; padding: 1px 6px; border-radius: 8px;
}

/* Compact file pill inside the collapsed step header — same colour
   family as `.wf-step-file` but smaller so it fits inline with the
   wall-time and cost metadata. */
.wf-step-file-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  padding: 1px 8px; border-radius: 999px;
  background: #f0f9ff; border: 1px solid #bae6fd;
  color: #075985; text-decoration: none;
  font-size: 11.5px; font-weight: 500;
  max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}
.wf-step-file-chip:hover {
  background: #e0f2fe; color: #0c4a6e; text-decoration: none;
}
.wf-step-file-chip i { font-size: 12px; }

.wf-step-time, .wf-step-cost {
  font-variant-numeric: tabular-nums;
}

/* ===== Workflow assistant — unified trace Q&A + in-place wizard ===== */
.wf-assistant { display: flex; flex-direction: column; max-height: 480px; }
.wf-assistant-head {
  display: flex; align-items: center; gap: 8px;
  justify-content: space-between;
}
.wf-assistant-modes {
  display: inline-flex; gap: 2px;
  background: #eef2f7; border-radius: 6px; padding: 2px;
}
.wf-assistant-mode {
  border: none; background: transparent;
  font-size: 11px; color: #475569;
  padding: 3px 8px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.wf-assistant-mode:hover { background: #fff; color: #0f172a; }
.wf-assistant-mode.active {
  background: #fff; color: #0f172a;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  font-weight: 500;
}
.wf-assistant-log {
  flex-grow: 1; min-height: 80px; max-height: 280px;
  overflow-y: auto;
  padding: 8px 4px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
  background: #fafbfd; border: 1px solid #e6ecf5; border-radius: 6px;
}
.wf-assistant-log:empty::before {
  content: "Ask me to tweak this workflow, or switch to \"Ask trace\" to query the last run.";
  color: #94a3b8; font-style: italic; font-size: 11.5px;
  padding: 10px;
}
.wf-asst-msg {
  font-size: 12.5px; line-height: 1.4;
  padding: 6px 9px; border-radius: 8px;
  max-width: 95%;
}
.wf-asst-msg.user {
  align-self: flex-end; background: #2563eb; color: #fff;
  border-bottom-right-radius: 2px;
}
.wf-asst-msg.assistant {
  align-self: flex-start; background: #fff; color: #1e293b;
  border: 1px solid #e6ecf5;
  border-bottom-left-radius: 2px;
}
.wf-asst-msg.assistant.is-thinking { color: #94a3b8; font-style: italic; }
.wf-asst-msg .wf-asst-tag {
  display: inline-block; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .65; margin-right: 4px;
}
.wf-asst-msg .wf-asst-meta {
  font-size: 10.5px; color: #64748b; margin-top: 3px;
}
.wf-assistant-composer textarea {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 6px 8px; font: 12px/1.4 inherit; resize: none;
  margin-top: 8px;
}
.wf-assistant-composer textarea:focus {
  outline: none; border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}
.wf-assistant.is-wizard textarea:focus {
  border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.18);
}

/* ===== Wizard test result panel ===== */
.wizard-test-result {
  margin-top: 10px;
  border: 1px solid #e6ecf5; border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  font-size: 12.5px;
  max-height: 200px; overflow-y: auto;
}
.wizard-test-result .test-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.wizard-test-result .test-status { font-weight: 600; }
.wizard-test-result .test-status.ok { color: #15803d; }
.wizard-test-result .test-status.fail { color: #b91c1c; }
.wizard-test-result .test-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px; align-items: baseline;
  padding: 3px 0;
  border-top: 1px dashed #f1f5f9;
}
.wizard-test-result .test-row:first-of-type { border-top: 0; }
.wizard-test-result .test-row .ok-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #15803d; display: inline-block;
}
.wizard-test-result .test-row.is-fail .ok-dot { background: #b91c1c; }
.wizard-test-result .test-row .test-name { font-weight: 500; color: #1e293b; }
.wizard-test-result .test-row .test-meta { color: #64748b; font-size: 11px; }
.wizard-test-result .test-row .test-preview {
  grid-column: 2 / -1;
  color: #475569;
  font-size: 11.5px;
  margin-top: 1px;
  white-space: pre-wrap;
  word-break: break-word;
}
.wizard-test-result .test-files {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #e6ecf5;
}

/* Prompt-inspect modal — must always sit ABOVE every other overlay
   (wizard preview, workflow-test overlay at 1090, onboarding/auth
   overlays at 1900-2200, Bootstrap modals at 1055). The "View prompt"
   button is a debug surface; users invoke it from inside other
   popups, so the inspector has to win the stacking war every time. */
#promptInspectModal { z-index: 11055 !important; }
.modal-backdrop.prompt-inspect-backdrop { z-index: 11050 !important; }


/* ===================== Workflow Test panel (full overlay) ===================== */
.wftest-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.65);
  z-index: 1090;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wftest-overlay.d-none { display: none !important; }
.wftest-shell {
  width: min(1100px, 100%); height: min(90vh, 920px);
  background: #fff; border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wftest-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid #e6ecf5;
  background: linear-gradient(90deg, #f0f7ff, #fff);
}
.wftest-title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; color: #0f1f3a; font-size: 1.05rem;
}
.wftest-title .bi { color: #2563eb; }

.wftest-stepper {
  display: flex; gap: 0;
  padding: 12px 22px;
  border-bottom: 1px solid #e6ecf5;
  background: #f8fafc;
}
.wftest-stepper-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  margin-right: 8px;
  background: transparent; color: #6b7488;
  font-size: 13px; font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.wftest-stepper-item.is-current {
  background: #dbeafe; color: #1e3a8a;
}
.wftest-stepper-item.is-done {
  background: #dcfce7; color: #166534;
}
.wftest-stepper-no {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  border: 1px solid #e6ecf5;
}
.wftest-stepper-item.is-current .wftest-stepper-no { border-color: #2563eb; color: #2563eb; }
.wftest-stepper-item.is-done    .wftest-stepper-no { background: #16a34a; color: #fff; border-color: #16a34a; }

.wftest-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 18px;
}
.wftest-section {
  background: #fff; border: 1px solid #e6ecf5;
  border-radius: 12px; padding: 16px 18px;
}
.wftest-section-head { margin-bottom: 10px; }
.wftest-section-head h6 { font-weight: 700; color: #0f1f3a; }
.wftest-section-actions {
  display: flex; gap: 8px; margin-top: 12px;
}

.wftest-trace { display: flex; flex-direction: column; gap: 8px; }
.wftest-trace-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 12px;
  border: 1px solid #e6ecf5; border-radius: 10px;
  background: #fbfcfe;
}
.wftest-trace-row.is-fail { border-color: #fecaca; background: #fef2f2; }
.wftest-trace-row.is-pending { border-color: #fde68a; background: #fffbeb; }
.wftest-trace-no {
  width: 26px; height: 26px; border-radius: 50%;
  background: #2563eb; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.wftest-trace-row.is-fail .wftest-trace-no { background: #b91c1c; }
.wftest-trace-row.is-pending .wftest-trace-no { background: #d97706; }
.wftest-trace-main { display: flex; flex-direction: column; min-width: 0; }
.wftest-trace-name { font-weight: 600; color: #0f1f3a; font-size: 13.5px; }
.wftest-trace-meta { color: #6b7488; font-size: 11.5px; }
.wftest-trace-preview {
  color: #4a5566; font-size: 12.5px; margin-top: 4px;
  white-space: pre-wrap; word-break: break-word;
}
.wftest-trace-note { color: #92400e; font-size: 12px; margin-top: 4px; }
.wftest-trace-error { color: #b91c1c; font-size: 12px; margin-top: 4px; }

.wftest-final {
  border-top: 1px dashed #e6ecf5; padding-top: 10px;
  font-size: 13px; color: #1e293b;
}
.wftest-final strong { color: #0f1f3a; }

.wftest-verdict-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wftest-verdict-row .btn.is-active[data-verdict="yes"] {
  background: #15803d; color: #fff; border-color: #15803d;
}
.wftest-verdict-row .btn.is-active[data-verdict="no"] {
  background: #b91c1c; color: #fff; border-color: #b91c1c;
}

.wftest-empty {
  color: #6b7488; font-style: italic; font-size: 13px;
  padding: 12px;
}

/* ===== Workflow trigger attachment ===== */
.wf-attachment-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wf-attachment-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 14px;
  background: #f0f9ff; border: 1px solid #bae6fd;
  font-size: 11.5px; color: #075985;
  max-width: 100%; min-width: 0;
}
.wf-attachment-chip i.bi-file-earmark { font-size: 13px; }
.wf-attachment-chip .wf-attachment-name {
  font-weight: 500; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-attachment-chip .wf-attachment-size {
  background: #e0f2fe; color: #0369a1;
  padding: 1px 5px; border-radius: 7px; font-size: 10.5px;
}
.wf-attachment-clear {
  background: transparent; border: 0; color: #0369a1;
  padding: 0 2px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center;
}
.wf-attachment-clear:hover { color: #b91c1c; }

/* ===== HITL trace callout ===== */
.wf-hitl-card {
  border: 1.5px solid #7c3aed;
  background: #faf5ff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.wf-hitl-card.wf-hitl-resolved {
  border-color: #16a34a; background: #f0fdf4;
}
.wf-hitl-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.wf-hitl-head i.bi-person-raised-hand { color: #7c3aed; font-size: 14px; }
.wf-hitl-card.wf-hitl-resolved .wf-hitl-head i.bi-person-raised-hand { color: #16a34a; }
.wf-hitl-prompt {
  background: #fff; border-radius: 4px; padding: 6px 8px;
  border: 1px solid #ede9fe;
  white-space: pre-wrap; line-height: 1.4;
}
.wf-hitl-card.wf-hitl-resolved .wf-hitl-prompt { border-color: #dcfce7; }
.wf-hitl-value {
  margin-top: 6px; padding: 4px 8px;
  background: #f0fdf4; border-radius: 4px; font-size: 11.5px;
  color: #166534; font-style: italic;
}

/* ===== HITL node strip / icon colours on the canvas ===== */
.wf-node-hitl .wf-node-strip { background: #7c3aed; }
.wf-node-hitl .wf-node-header .wf-node-icon { background: #7c3aed; }

/* ===== HITL page — clear context + form layout ===== */
.hitl-view { background: #f7f8fb; }
.hitl-header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
  border: 1px solid #d8b4fe;
  border-radius: 12px;
  margin-bottom: 16px;
}
.hitl-header-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #7c3aed; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.hitl-header-text { min-width: 0; }
.hitl-eyebrow {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #6d28d9; font-weight: 600;
}
.hitl-workflow-name {
  margin: 2px 0 0; font-size: 1.25rem; color: #1e1b4b;
  word-break: break-word;
}
.hitl-section {
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.hitl-section-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13px;
  color: #1e293b;
  margin-bottom: 8px;
}
.hitl-section-head i { color: #6d28d9; }
.hitl-step-pill, .hitl-schema-pill {
  margin-left: auto;
  font-size: 10.5px; letter-spacing: .04em;
  background: #ede9fe; color: #5b21b6;
  padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; font-weight: 600;
}
.hitl-ask {
  border-color: #d8b4fe;
  background: #faf5ff;
}
.hitl-ask-prompt {
  font-size: 16px; line-height: 1.5;
  color: #1e1b4b;
  background: #fff;
  padding: 12px 14px; border-radius: 6px;
  border: 1px solid #ede9fe;
  white-space: pre-wrap; word-break: break-word;
  margin-bottom: 8px;
}
.hitl-ask-prompt:empty::before {
  content: "(no prompt set on this node)";
  color: #94a3b8; font-style: italic;
}
.hitl-ask-hint {
  font-size: 12.5px; color: #6b7280; font-style: italic;
}
.hitl-timeline {
  list-style: none; padding: 0; margin: 0;
  counter-reset: hitl-step;
}
.hitl-timeline li {
  position: relative;
  padding: 8px 8px 8px 36px;
  border-radius: 6px;
  margin-bottom: 4px;
  background: #f8fafc;
  counter-increment: hitl-step;
}
.hitl-timeline li::before {
  content: counter(hitl-step);
  position: absolute; left: 8px; top: 9px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #16a34a; color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hitl-timeline li.is-fail::before { background: #b91c1c; }
.hitl-timeline-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.hitl-timeline-name { font-weight: 600; color: #1e293b; font-size: 13px; }
.hitl-timeline-type {
  font-size: 10.5px; color: #64748b;
  text-transform: uppercase; letter-spacing: .05em;
}
.hitl-timeline-ms { font-size: 11px; color: #94a3b8; margin-left: auto; }
.hitl-timeline-preview {
  margin-top: 4px;
  font-size: 12px; line-height: 1.45;
  color: #475569;
  background: #fff;
  padding: 6px 9px; border-radius: 4px;
  border: 1px solid #e6ecf5;
  white-space: pre-wrap; word-break: break-word;
  max-height: 130px; overflow-y: auto;
}
.hitl-timeline:empty::before {
  content: "No prior steps recorded — this is the first node.";
  color: #94a3b8; font-style: italic; font-size: 12px;
}
.hitl-upstream {
  margin: 0; padding: 10px 12px;
  background: #f8fafc; border: 1px solid #e6ecf5; border-radius: 6px;
  max-height: 280px; overflow: auto;
  font-size: 12px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
  color: #1e293b;
}
.hitl-upstream:empty::before {
  content: "(no upstream data)";
  color: #94a3b8; font-style: italic;
}
.hitl-form-section { border-color: #c7d2fe; }
.hitl-form-section .hitl-section-head { color: #1e3a8a; }

/* ----- Business-friendly HITL briefing ----- */
.hitl-ask-summary {
  font-size: 16px; line-height: 1.55;
  color: #1e1b4b;
  font-family: "Google Sans Text", "Inter", sans-serif;
  margin-bottom: 10px;
}
.hitl-attachments-title {
  font-size: 11px; font-weight: 600;
  color: #6b7488; text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 10px; margin-bottom: 6px;
}
.hitl-attachments-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hitl-attachment-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: #fff; border: 1px solid #d8b4fe;
  color: #5b21b6; font-size: 12.5px; font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease;
}
.hitl-attachment-chip:hover {
  background: #faf5ff;
  text-decoration: none;
}
.hitl-attachment-chip i { font-size: 14px; }
.hitl-briefing-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 720px) {
  .hitl-briefing-cols { grid-template-columns: 1fr; }
}
.hitl-briefing-col {
  background: #f8fafc;
  border: 1px solid #e6ecf5;
  border-radius: 8px;
  padding: 12px 14px;
}
.hitl-briefing-col-title {
  font-size: 12.5px; font-weight: 600;
  color: #475569; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.hitl-briefing-col:first-child .hitl-briefing-col-title i { color: #15803d; }
.hitl-briefing-col:last-child  .hitl-briefing-col-title i { color: #2563eb; }
.hitl-briefing-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.hitl-briefing-list li {
  font-size: 13.5px; line-height: 1.5; color: #1e293b;
  padding-left: 16px; position: relative;
}
.hitl-briefing-list li::before {
  content: "•"; position: absolute; left: 4px; top: 0;
  color: #94a3b8; font-weight: 700;
}
.hitl-remarks-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #e6ecf5;
}
[data-hitl-pick].is-selected {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 1px;
}
.hitl-form-section .hitl-section-head i { color: #2563eb; }
.hitl-form-foot { gap: 12px; flex-wrap: wrap; }

/* =========================================================================
 * Cleaner chat composer — pill shape with controls inside
 *
 * Replaces the old row-of-buttons-and-textarea look with a single rounded
 * pill containing: textarea on top, two control rows underneath
 * (left: + / docs / agent · right: mic / send). The agent picker lives
 * inside the pill so users don't need a separate "pick agent" modal
 * for new chats — Generic Supervisor is the default; the chip lets
 * them switch.
 * ========================================================================= */
.composer-wrap {
  padding: 10px 14px 16px;
  background: transparent;
  border-top: 0;
}
.composer-pill {
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--soft-border, #e5e7eb);
  border-radius: 26px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
              0 8px 24px rgba(15, 23, 42, 0.06);
  padding: 10px 14px 8px;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}
.composer-pill:focus-within {
  border-color: rgba(26, 115, 232, 0.6);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
              0 8px 24px rgba(15, 23, 42, 0.08),
              0 0 0 3px rgba(26, 115, 232, 0.12);
}
.composer-input {
  width: 100%;
  min-height: 28px;
  max-height: 180px;
  resize: none;
  border: 0;
  outline: 0;
  padding: 6px 4px 2px;
  font-size: 16px;
  line-height: 1.5;
  background: transparent;
  color: var(--or-text, #0f172a);
  font-family: inherit;
}
.composer-input::placeholder { color: #94a3b8; }
.composer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.composer-controls-left,
.composer-controls-right {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
/* 🐞 Debug button in chat header. Compact, amber accent (matches
   btn-outline-warning) so it doesn't compete visually with rename /
   delete but is still obviously "diagnostic". The icon-plus-text
   layout keeps the affordance discoverable — icon alone wasn't
   enough on first user-test of the feature. */
#btn-debug-snapshot {
  font-size: 12px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#btn-debug-snapshot .bi { font-size: 14px; line-height: 1; }
#btn-debug-snapshot:disabled { cursor: progress; }

.composer-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  flex-shrink: 0;
}
.composer-btn:hover { background: #f1f5f9; color: #0f172a; }
.composer-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.25);
}
.composer-btn .bi { font-size: 18px; line-height: 1; }
.composer-btn.mic-btn.recording {
  color: #ef4444;
  background: #fee2e2;
}
.composer-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: #0f172a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, transform 80ms ease;
  flex-shrink: 0;
}
.composer-send:hover { background: #1f2937; }
.composer-send:active { transform: scale(0.96); }
.composer-send .bi { font-size: 18px; line-height: 1; }

/* Agent picker chip — sits inline with the other left-side controls */
.composer-agent-picker { position: relative; }
.composer-agent-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--soft-border, #e5e7eb);
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  max-width: 230px;
}
.composer-agent-btn:hover { background: #eef2f7; border-color: #cbd5e1; }
.composer-agent-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.25);
}
.composer-agent-btn > .bi:first-child { font-size: 15px; color: #1a73e8; }
.composer-agent-btn .composer-agent-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.composer-agent-btn .composer-agent-caret {
  font-size: 12px;
  color: #94a3b8;
  margin-left: 2px;
}
.composer-agent-btn[data-locked="1"] {
  cursor: default;
  opacity: 0.78;
}
.composer-agent-btn[data-locked="1"] .composer-agent-caret { display: none; }

.composer-agent-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-height: 380px;
  background: var(--m3-surface, #fff);
  border: 1px solid var(--m3-outline-var, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.composer-agent-menu-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--m3-outline-var, #e5e7eb);
  background: var(--m3-surface-1, #f8fafc);
}
.composer-agent-menu-head input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--m3-outline, #cbd5e1);
  border-radius: 999px;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
}
.composer-agent-menu-head input:focus {
  border-color: var(--m3-primary, #1a73e8);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
}
.composer-agent-menu-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px;
}
.composer-agent-empty {
  text-align: center;
  padding: 20px;
  color: var(--m3-on-surface-var, #64748b);
  font-style: italic;
  font-size: 12.5px;
}
.composer-agent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  color: var(--m3-on-surface, #0f172a);
  transition: background 120ms ease;
}
.composer-agent-item:hover { background: var(--m3-surface-1, #f1f5f9); }
.composer-agent-item.is-active { background: rgba(26, 115, 232, 0.08); }
.composer-agent-item i { font-size: 16px; flex-shrink: 0; }
.composer-agent-item-body { flex: 1 1 auto; min-width: 0; }
.composer-agent-item-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-agent-item-desc {
  font-size: 11.5px;
  color: var(--m3-on-surface-var, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-agent-item-kind {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.composer-agent-item-kind.kind-sup { background: #fef3c7; color: #92400e; }
.composer-agent-item-kind.kind-worker { background: #dbeafe; color: #1d4ed8; }

/* Doc picker menu: re-anchor for new layout (was anchored to row-flex; pill
   layout places it inside the controls row instead). */
.composer-pill .composer-doc-menu { left: 0; bottom: calc(100% + 12px); }

/* Conversation: cap reading width + lighter spacing so bubbles breathe. */
.chat-pane > #conversation { padding-left: 24px; padding-right: 24px; }
.chat-pane #conversation > .msg { max-width: 760px; margin-left: auto; margin-right: auto; }
.chat-pane #conversation > .msg + .msg { margin-top: 16px; }

/* Trim the chat header chrome — no agent name pill once it's surfaced
   in the composer; keep title + actions only. */
#chat-header { padding-top: 10px; padding-bottom: 10px; }
#thread-agent-label { font-size: 12px; }

/* =========================================================================
 * Attachment chips inside the composer pill
 *
 * Replaces the prior `badge bg-secondary` chip. Each attachment renders
 * as a clean card with icon + name + size (or % progress while
 * uploading) + close button. Pending uploads show an animated bar.
 * ========================================================================= */
.composer-pill .attachments-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 2px 0;
}
.composer-pill .attachments-bar:empty { display: none; }
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f1f5f9;
  border: 1px solid var(--soft-border, #e5e7eb);
  border-radius: 12px;
  padding: 6px 8px 6px 6px;
  max-width: 280px;
  position: relative;
  transition: background 140ms ease, border-color 140ms ease;
}
.attach-chip:hover { background: #e8eef5; }
.attach-chip.is-error   { background: #fef2f2; border-color: rgba(239, 68, 68, 0.30); }
.attach-chip-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1a73e8;
  flex-shrink: 0;
  position: relative;  /* anchors the progress-ring SVG overlay */
}
.attach-chip.is-error .attach-chip-icon { color: #b91c1c; }
.attach-chip-icon .bi { font-size: 18px; position: relative; z-index: 1; }

/* Circular upload progress ring — ChatGPT-style. Sits on top of the
   file icon while the chip is .is-pending; r=15 / circumference≈94.247
   matched by `_updateChipProgress` and `_ATTACH_RING_CIRCUMFERENCE`
   in app.js. */
.attach-chip-ring {
  position: absolute;
  inset: -3px;            /* slight overflow so the stroke clears the icon edge */
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  transform: rotate(-90deg);    /* arc starts at 12 o'clock */
  pointer-events: none;
  z-index: 2;
}
.attach-chip-ring circle {
  fill: none;
  stroke-width: 2.5;
}
.attach-chip-ring .ring-track {
  /* Slightly darker than before so the empty circle is visible
     against the chip's #eef4ff is-pending background even before
     any real progress has reported. */
  stroke: rgba(26, 115, 232, 0.35);
}
.attach-chip-ring .ring-progress {
  stroke: #1a73e8;
  stroke-linecap: round;
  stroke-dasharray: 94.247;
  stroke-dashoffset: 94.247;    /* full = 0% progress; JS rewrites this */
  transition: stroke-dashoffset 140ms linear;
}
.attach-chip.is-error .attach-chip-ring .ring-progress { stroke: #b91c1c; }

/* Indeterminate spinner — while no real progress has reported yet,
   show a short arc that revolves around the ring. The animation
   targets the SVG container's rotation (compounding with the static
   -90deg) so the dashoffset-driven progress arc remains usable as
   soon as the first XHR onprogress event fires. JS removes the
   `is-indeterminate` class on the first progress event > 0. */
.attach-chip-ring.is-indeterminate {
  animation: attach-chip-ring-spin 1.1s linear infinite;
}
.attach-chip-ring.is-indeterminate .ring-progress {
  stroke-dasharray: 22 94.247;   /* short visible arc + long invisible gap */
  stroke-dashoffset: 0;
  transition: none;
}
@keyframes attach-chip-ring-spin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}

/* While a file is still uploading, blend the chip background a touch
   toward blue so the ring reads as "in progress" even at a glance. */
.attach-chip.is-pending { background: #eef4ff; border-color: rgba(26, 115, 232, 0.30); }
.attach-chip-body {
  display: flex; flex-direction: column;
  gap: 1px;
  min-width: 0; flex: 1 1 auto;
}
.attach-chip-name {
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.attach-chip-meta { font-size: 11px; color: #64748b; line-height: 1.2; }
.attach-chip-size { color: #64748b; }
.attach-chip-pct  { color: #1a73e8; font-variant-numeric: tabular-nums; font-weight: 500; }
.attach-chip-error { color: #b91c1c; font-weight: 500; }
.attach-chip-close {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #64748b;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.attach-chip-close:hover { background: rgba(15, 23, 42, 0.08); color: #0f172a; }
.attach-chip-close .bi { font-size: 16px; }

/* When the send button is blocked by pending uploads. */
.composer-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================================================================
 * Conversation bubbles — ChatGPT-style: user pill on the right (no
 * "user" label), assistant prose flat-left without a card background.
 *
 * One font, one stack — match the rest of the app ("Google Sans Text"),
 * pinned with !important on every descendant the cascade can touch
 * (.md-body h1..h6 hard-codes Google Sans, and several Bootstrap-class
 * elements override font-family). The probe at /tmp/cdp_probe.py
 * confirmed that without these, the user pill renders in one font and
 * the assistant prose in another on the same screen.
 *
 * Size is unified at 15px / 1.55 so the user pill and assistant body
 * read as a single transcript, not a two-typeface diff.
 * ========================================================================= */
.chat-pane #conversation,
.chat-pane #conversation .msg,
.chat-pane #conversation .msg-body,
.chat-pane #conversation .msg-pre-text,
.chat-pane #conversation .msg.user,
.chat-pane #conversation .msg.assistant,
.chat-pane #conversation .md-body,
.chat-pane #conversation .md-body p,
.chat-pane #conversation .md-body li,
.chat-pane #conversation .md-body strong,
.chat-pane #conversation .md-body em,
.chat-pane #conversation .md-body h1,
.chat-pane #conversation .md-body h2,
.chat-pane #conversation .md-body h3,
.chat-pane #conversation .md-body h4,
.chat-pane #conversation .md-body h5,
.chat-pane #conversation .md-body h6 {
  font-family: "Google Sans Text", "Roboto", "Inter", -apple-system,
               BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}
.chat-pane #conversation .msg,
.chat-pane #conversation .msg-body,
.chat-pane #conversation .msg-pre-text,
.chat-pane #conversation .md-body,
.chat-pane #conversation .md-body p,
.chat-pane #conversation .md-body li {
  font-size: 16px !important;
  line-height: 1.55 !important;
}
/* Code blocks keep their mono stack but pinned to the same set so a
   user inline-code in the user pill matches a fenced block in the
   assistant reply. */
.chat-pane #conversation .md-body code,
.chat-pane #conversation .md-body pre,
.chat-pane #conversation .md-body pre code {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
.chat-pane #conversation { padding: 28px 24px 24px; }
.chat-pane #conversation > .msg {
  max-width: 760px;
  margin: 0 auto 22px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  position: relative;
}
.chat-pane #conversation > .msg .who { display: none !important; }

/* The legacy `.msg { white-space: pre-wrap }` rule renders the LITERAL
   whitespace text-nodes between sibling HTML elements (`\n` and indent
   between `<div class="who">` and `<div class="msg-pre-text">`, or
   between `<div class="msg-body">` and `<div class="md-body">`) as
   visible blank lines INSIDE the message. That's the bug that puffed
   the user pill up to ~130px and stretched the assistant message by
   ~400px. Reset to `normal` on BOTH the `.msg` parent and its block
   children; pre-wrap is only needed on the leaf text container
   (`.msg-pre-text`) where multi-line user input must keep newlines. */
.chat-pane #conversation > .msg,
.chat-pane #conversation > .msg.user,
.chat-pane #conversation > .msg.assistant,
.chat-pane #conversation > .msg .msg-body,
.chat-pane #conversation > .msg .md-body {
  white-space: normal;
}
.chat-pane #conversation > .msg.user > .msg-pre-text {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* User message: soft grey pill, right-aligned, no border. */
.chat-pane #conversation > .msg.user {
  margin-left: auto;
  margin-right: 0;
  max-width: 70%;
  background: #f1f5f9;
  border-radius: 22px;
  padding: 10px 16px;
  color: #0f172a;
}
.chat-pane #conversation > .msg.user .msg-body {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Assistant: flat prose, no bubble, full width. Keeps the markdown
   renderer happy — only the bubble chrome is stripped. */
.chat-pane #conversation > .msg.assistant {
  background: transparent;
  color: #0f172a;
  padding: 0 4px;
  margin-left: 0;
  margin-right: auto;
}
.chat-pane #conversation > .msg.assistant .msg-body {
  font-size: 15px;
  line-height: 1.65;
}

/* Footer / sources row sit underneath assistant text, lighter. */
.chat-pane #conversation > .msg .msg-footer {
  border-top: 0;
  padding-top: 6px;
  margin-top: 12px;
  color: #94a3b8;
}
.chat-pane #conversation > .msg .msg-sources-row { margin-top: 6px; }

/* Tighten feedback bar so it sits flush under the assistant prose. */
.chat-pane #conversation > .msg.assistant .feedback-bar { margin-top: 10px; }

/* Workflow node inspector config cards (extract / excel_mapper) */
.wf-node-config-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}
.wf-node-config-head {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 8px;
}
.wf-node-config-head i { font-size: 18px; color: #0891b2; margin-top: 1px; }
.wf-node-config-status { display: flex; gap: 4px; flex-wrap: wrap; }
:root[data-bs-theme="dark"] .wf-node-config-card { background: #1e293b; border-color: #334155; }

/* x-spreadsheet font normalization inside the mapper modal */
#mapper-spreadsheet .x-spreadsheet,
#mapper-spreadsheet .x-spreadsheet * {
  font-family: -apple-system, "Inter", "Segoe UI", sans-serif !important;
}

/* ═══════════════ Triage Designer (wide wizard) ═══════════════ */
.triage-shell { display: flex; flex-direction: column; min-height: 0; }
.triage-shell #triage-list-mode { display: block; }

/* Designer: full-height column with topbar + split body */
.triage-designer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #f8fafc;
}
.triage-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.triage-topbar .triage-name-input {
  max-width: 320px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  background: transparent;
}
.triage-topbar .triage-name-input:hover { background: #f1f5f9; border-color: #cbd5e1; }
.triage-topbar .triage-name-input:focus  { background: white; border-color: #94a3b8; }
.triage-stepper {
  display: flex; align-items: center; gap: 2px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px;
}
.triage-step {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  transition: background-color .15s ease;
}
.triage-step:hover { background: #e2e8f0; }
.triage-step.active {
  background: white;
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.triage-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #cbd5e1; color: white;
  font-size: 11px; font-weight: 600;
}
.triage-step.active .triage-step-num { background: #d97706; }

/* Workflow node strip */
.triage-nodestrip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  flex-shrink: 0;
}
.triage-nodestrip-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #94a3b8; font-weight: 600; white-space: nowrap;
}
.triage-node {
  display: inline-flex; align-items: center; gap: 6px;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
  transition: all .12s ease;
}
.triage-node:hover { border-color: #94a3b8; }
.triage-node.active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
  font-weight: 600;
}
.triage-node-arrow { color: #cbd5e1; font-size: 14px; }
.triage-node-add {
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  width: 30px; height: 30px;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.triage-node-add:hover { border-color: #d97706; color: #d97706; }

/* Body: split chat / panel */
.triage-body {
  display: grid;
  grid-template-columns: minmax(280px, 35%) 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left chat rail */
.triage-chat {
  display: flex; flex-direction: column;
  background: white;
  border-right: 1px solid #e2e8f0;
  min-height: 0;
}
.triage-chat-head { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.triage-chat-log {
  flex: 1; overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.triage-chat-msg {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 90%;
}
.triage-chat-msg.user {
  align-self: flex-end;
  background: #d97706; color: white;
  border-bottom-right-radius: 4px;
}
.triage-chat-msg.pulse {
  align-self: flex-start;
  background: #f1f5f9; color: #0f172a;
  border-bottom-left-radius: 4px;
}
.triage-chat-composer {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid #f1f5f9;
}
.triage-chat-composer textarea {
  flex: 1;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  resize: none;
  font-family: inherit;
}
.triage-chat-composer textarea:focus { outline: none; border-color: #d97706; }

/* Right panel */
.triage-panel {
  display: flex; flex-direction: column;
  background: #f8fafc;
  min-height: 0;
  overflow: hidden;
}
.triage-step-panel {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.triage-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
}
.triage-panel-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  background: white;
  border-top: 1px solid #e2e8f0;
}

/* Schema editor (Step 1) */
.triage-schema-host {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.triage-section {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.triage-section-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: #fef3c7;
  border-bottom: 1px solid #fde68a;
}
.triage-section-name {
  border: 1px solid transparent;
  background: transparent;
  font-weight: 600;
  font-size: 14px;
  max-width: 320px;
}
.triage-section-name:hover { background: white; border-color: #cbd5e1; }
.triage-section-name:focus { background: white; border-color: #d97706; }
.triage-fields { padding: 4px 14px; }
.triage-field {
  display: grid;
  grid-template-columns: 1fr 140px auto auto auto;
  gap: 10px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f8fafc;
}
.triage-field:last-child { border-bottom: none; }
.triage-field-name { font-size: 13px; }
.triage-field-req {
  display: inline-flex; align-items: center; gap: 4px;
  user-select: none;
  cursor: pointer;
  font-size: 12px;
  color: #64748b;
}
.triage-field-validation {
  grid-column: 1 / -1;
  padding: 10px 0 4px;
  border-top: 1px dashed #e2e8f0;
  margin-top: 4px;
}
.triage-field-validation label {
  display: block;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #94a3b8; margin-bottom: 2px;
}

.triage-empty {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;
}
.triage-empty i { font-size: 36px; opacity: .6; }

/* Template editor (Step 2) */
.triage-template-host {
  flex: 1; overflow: hidden;
  padding: 16px 20px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.triage-template-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: white;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  color: #94a3b8;
  text-align: center;
  padding: 40px 20px;
}
.triage-template-empty i { font-size: 36px; opacity: .5; }
#triage-spreadsheet {
  flex: 1; min-height: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
/* Tame x-spreadsheet's own font so it matches our shell */
#triage-spreadsheet .x-spreadsheet,
#triage-spreadsheet .x-spreadsheet * {
  font-family: -apple-system, "Inter", "Segoe UI", sans-serif !important;
}
.triage-bindings-summary {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
}
.triage-bindings-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.triage-binding-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color .12s;
}
.triage-binding-chip:hover { background: #fde68a; }
.triage-binding-chip-cell { font-family: ui-monospace, monospace; color: #92400e; }
.triage-binding-chip-arrow { color: #94a3b8; }
.triage-binding-chip-path  { color: #0f172a; font-family: ui-monospace, monospace; }
.triage-binding-chip i     { color: #b91c1c; opacity: .6; }

/* Field picker overlay */
.triage-field-picker {
  position: fixed;
  z-index: 9999;
  width: 320px;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  padding: 8px;
  display: flex; flex-direction: column;
  max-height: 380px;
}
.triage-field-picker[hidden] { display: none; }
.triage-field-list {
  flex: 1; overflow-y: auto;
  margin-top: 6px;
}
.triage-field-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.triage-field-item:hover { background: #f1f5f9; }
.triage-field-item-label { color: #0f172a; font-weight: 500; }
.triage-field-item-meta  { color: #94a3b8; font-family: ui-monospace, monospace; }
.triage-field-foot {
  padding: 6px;
  border-top: 1px solid #f1f5f9;
  display: flex; justify-content: flex-end;
}

/* Run / test panel (Step 3) */
.triage-run-host {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
}
.triage-run-empty {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;
  background: white;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
}
.triage-run-empty i { font-size: 36px; opacity: .5; }
#triage-run-result {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 20px;
}
.triage-validation-summary { display: flex; gap: 8px; }
.triage-vbadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
}
.triage-vbadge.ok   { background: #dcfce7; color: #15803d; }
.triage-vbadge.warn { background: #fef3c7; color: #92400e; }
.triage-vbadge.fail { background: #fee2e2; color: #b91c1c; }

/* Diagnostic banner (extraction failed / all-empty) */
.triage-diag {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.triage-diag i { font-size: 18px; margin-top: 1px; }
.triage-diag-error { background: #fee2e2; color: #991b1b; }
.triage-diag-warn  { background: #fef3c7; color: #92400e; }
.triage-diag code {
  background: rgba(0,0,0,.06);
  padding: 1px 5px; border-radius: 4px;
  font-size: 12px;
}

/* Raw-extraction debug disclosure */
.triage-debug-details summary {
  cursor: pointer; color: #64748b;
  padding: 4px 0;
}
.triage-debug-json {
  background: #0f172a; color: #e2e8f0;
  padding: 12px 14px; border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; line-height: 1.5;
  max-height: 260px; overflow: auto;
  white-space: pre; margin: 6px 0 0;
}

/* Inline filled-spreadsheet view */
#triage-inline-host {
  margin-top: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.triage-inline-loading { padding: 24px; text-align: center; color: #94a3b8; }
.triage-inline-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.triage-inline-body { max-height: 50vh; overflow: auto; }
.triage-inline-sheet .kb-xlsx-table-wrap { max-height: none; }

:root[data-bs-theme="dark"] #triage-inline-host { border-color: #334155; }
:root[data-bs-theme="dark"] .triage-inline-head { background: #0f172a; border-color: #334155; }
:root[data-bs-theme="dark"] .triage-diag code { background: rgba(255,255,255,.1); }

/* Dark-mode overrides */
:root[data-bs-theme="dark"] .triage-designer { background: #0f172a; }
:root[data-bs-theme="dark"] .triage-topbar,
:root[data-bs-theme="dark"] .triage-chat,
:root[data-bs-theme="dark"] .triage-panel-head,
:root[data-bs-theme="dark"] .triage-panel-foot,
:root[data-bs-theme="dark"] .triage-section,
:root[data-bs-theme="dark"] #triage-spreadsheet,
:root[data-bs-theme="dark"] .triage-bindings-summary,
:root[data-bs-theme="dark"] #triage-run-result {
  background: #1e293b; border-color: #334155; color: #e2e8f0;
}
:root[data-bs-theme="dark"] .triage-panel { background: #0f172a; }
:root[data-bs-theme="dark"] .triage-step:hover { background: #334155; }
:root[data-bs-theme="dark"] .triage-step.active { background: #1e293b; color: #f8fafc; }
:root[data-bs-theme="dark"] .triage-section-head { background: #422006; border-color: #78350f; }
:root[data-bs-theme="dark"] .triage-chat-msg.pulse { background: #334155; color: #f8fafc; }
:root[data-bs-theme="dark"] .triage-field-picker { background: #1e293b; border-color: #334155; }
:root[data-bs-theme="dark"] .triage-field-item:hover { background: #334155; }
:root[data-bs-theme="dark"] .triage-template-empty,
:root[data-bs-theme="dark"] .triage-run-empty {
  background: #1e293b; border-color: #334155; color: #64748b;
}
:root[data-bs-theme="dark"] .triage-binding-chip { background: #422006; border-color: #78350f; }
:root[data-bs-theme="dark"] .triage-binding-chip-cell { color: #fbbf24; }
:root[data-bs-theme="dark"] .triage-binding-chip-path { color: #f8fafc; }
:root[data-bs-theme="dark"] .triage-nodestrip { background: #0f172a; border-color: #334155; }
:root[data-bs-theme="dark"] .triage-node { background: #1e293b; border-color: #334155; color: #cbd5e1; }
:root[data-bs-theme="dark"] .triage-node.active { background: #422006; border-color: #b45309; color: #fbbf24; }