/* Shared chat bar — sticky footer on every page that opts in.
   Sister component to app-topnav.css. */

/* Kill the horizontal scrollbar on pages with the chatbar — on Safari with
 * "Always show scroll bars" enabled, Safari reserves a 4px gutter at the
 * viewport bottom even when no element actually overflows horizontally.
 * That gutter ate the bottom 4px of the chatbar (operator-confirmed
 * 2026-06-06 from posted diagnostic). The page's overflow-x: hidden
 * eliminates the gutter. Vertical scrolling is untouched. */
html.has-app-chatbar, body.has-app-chatbar { overflow-x: hidden; }

/* 2026-06-14 · reserve space at the bottom of the body equal to the
 * chatbar's min-height + a small buffer, so the last row of page
 * content doesn't slide under the fixed-bottom chatbar at scroll=0.
 * Affects every page that loads /js/app-chatbar.js (the script
 * adds .has-app-chatbar to html + body). 76px = chatbar min-height
 * 60 + 16px buffer for visual breathing room. */
body.has-app-chatbar { padding-bottom: 76px; }

.app-chatbar {
  position: fixed;
  bottom: 0;
  left: 0;
  /* width:100vw (instead of right:0) makes the chatbar extend BEHIND the
   * vertical scrollbar instead of stopping at its inside edge. On Macs with
   * "Always show scroll bars" right:0 leaves a 5px gap on the right where
   * the scrollbar track lives; with width:100vw the chatbar background
   * reaches the true viewport right edge and the scrollbar paints over it. */
  width: 100vw;
  z-index: 9999;
  background: #0f172a;
  border-top: 2px solid #2563eb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 13px;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.18);
  display: flex !important;                  /* defensive: can't be display:none'd */
  flex-direction: column;
  min-height: 60px !important;               /* defensive: can't be shrunk */
}

.app-chatbar .narration {
  max-height: 220px;
  overflow-y: auto;
  padding: 0;
  background: #f8fafc;
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
  display: none;
}
.app-chatbar .narration.has-rows { display: block; }

/* Grip handle — drag to resize the narration area vertically. */
.app-chatbar .grip {
  height: 8px;
  background: #0f172a;
  border-bottom: 1px solid #1e293b;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  flex-shrink: 0;
  transition: background 0.12s ease;
}
.app-chatbar .grip:hover { background: #1e293b; }
.app-chatbar .grip::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: #475569;
  transition: background 0.12s ease;
}
.app-chatbar .grip:hover::before { background: #94a3b8; }
.app-chatbar.dragging { user-select: none; }
.app-chatbar.dragging .grip { background: #2563eb; }
.app-chatbar.dragging .grip::before { background: #fff; }
.app-chatbar.minimized .grip { display: none; }

.app-chatbar .narration .row {
  padding: 8px 14px;
  border-bottom: 1px solid #f1f5f9;
  line-height: 1.45;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  position: relative;                              /* so .copy-btn can absolute-position */
}
.app-chatbar .narration .row:hover { background: #f1f5f9; }
.app-chatbar .narration .row.you:hover { background: #dbeafe; }
.app-chatbar .narration .row:last-child { border-bottom: 0; }
.app-chatbar .narration .row.you { background: #eff6ff; }
.app-chatbar .narration .row.sys { background: #ffffff; }
.app-chatbar .narration .row.event { background: #fafafa; color: #475569; font-size: 12px; }
.app-chatbar .narration .row.event.pulsing {
  background: #fef3c7;
  color: #78350f;
  font-weight: 600;
  animation: chatbar-pulse 1.4s ease-in-out infinite;
}
@keyframes chatbar-pulse {
  0%, 100% { background: #fef3c7; }
  50%      { background: #fde68a; }
}
.app-chatbar .narration .row.error { background: #fef2f2; color: #991b1b; }
.app-chatbar .narration .row .who { font-weight: 600; font-size: 11px; color: #64748b; min-width: 42px; flex-shrink: 0; }
.app-chatbar .narration .row .body { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; }
.app-chatbar .narration .row code { background: #e2e8f0; padding: 1px 5px; border-radius: 3px; font-size: 11px; }

/* Diff preview / applied rows */
.app-chatbar .narration .row.diff {
  background: #f8fafc;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  flex-direction: row;
  align-items: stretch;
}
/* Confirm-before-effect card — inline [Do it]/[Cancel] for effect proposals */
.app-chatbar .narration .row.confirm-card {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  margin: 6px 8px;
  padding: 10px 12px;
}
.app-chatbar .narration .row.confirm-card .who { color: #b45309; font-weight: 700; min-width: 72px; }
.app-chatbar .narration .row.confirm-card .cc-what { font-size: 13px; color: #111; font-weight: 600; margin-bottom: 2px; }
.app-chatbar .narration .row.confirm-card .cc-meta { font-size: 11px; color: #92400e; margin-bottom: 8px; }
.app-chatbar .narration .row.confirm-card .cc-actions { display: flex; gap: 8px; }
.app-chatbar .narration .row.confirm-card .cc-do {
  padding: 5px 14px; font-size: 12.5px; font-weight: 600; border: 0; border-radius: 6px;
  background: #2563eb; color: #fff; cursor: pointer;
}
.app-chatbar .narration .row.confirm-card .cc-do:hover { background: #1d4ed8; }
.app-chatbar .narration .row.confirm-card .cc-cancel {
  padding: 5px 14px; font-size: 12.5px; border: 1px solid #d1d5db; border-radius: 6px;
  background: #fff; color: #374151; cursor: pointer;
}
.app-chatbar .narration .row.confirm-card button:disabled { opacity: .5; cursor: default; }
.app-chatbar .narration .row.confirm-card .cc-status { font-size: 12px; margin-top: 6px; color: #475569; }
.app-chatbar .narration .row.confirm-card .cc-status.cc-ok { color: #15803d; font-weight: 600; }
.app-chatbar .narration .row.confirm-card .cc-status.cc-err { color: #b91c1c; font-weight: 600; }
.app-chatbar .narration .row.diff .who {
  font-weight: 700;
  color: #2563eb;
  font-size: 11px;
  min-width: 42px;
  flex-shrink: 0;
}
.app-chatbar .narration .row.diff .body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app-chatbar .narration .row.diff .diff-hdr {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}
.app-chatbar .narration .row.diff .diff-block {
  margin: 0;
  padding: 8px 10px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.app-chatbar .narration .row.diff .diff-file { color: #94a3b8; font-weight: 700; }
.app-chatbar .narration .row.diff .diff-hunk { color: #38bdf8; }
.app-chatbar .narration .row.diff .diff-add  { color: #4ade80; background: rgba(74, 222, 128, 0.10); }
.app-chatbar .narration .row.diff .diff-del  { color: #f87171; background: rgba(248, 113, 113, 0.10); }
.app-chatbar .narration .row.diff .diff-ctx  { color: #cbd5e1; }

.app-chatbar .narration .row .copy-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  color: #475569;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
  z-index: 1;
}
.app-chatbar .narration .row:hover .copy-btn { opacity: 1; }
.app-chatbar .narration .row .copy-btn:hover { background: #fff; color: #0f172a; border-color: #94a3b8; }
.app-chatbar .narration .row .copy-btn.copied { background: #16a34a; color: #fff; border-color: #15803d; opacity: 1; }

.app-chatbar .confirm {
  padding: 8px 14px;
  background: #fef3c7;
  color: #78350f;
  border-bottom: 1px solid #fbbf24;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.app-chatbar .confirm button {
  padding: 4px 12px;
  border: 0;
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
}
.app-chatbar .confirm button.yes { background: #16a34a; color: #fff; }
.app-chatbar .confirm button.no  { background: #e2e8f0; color: #0f172a; }

.app-chatbar .input-row {
  display: flex;
  flex-wrap: wrap;                          /* allow buttons to wrap onto a 2nd line
                                               when the viewport is narrow — prevents
                                               horizontal scrollbar from pushing the
                                               whole bar up off bottom: 0 */
  align-items: center;
  padding: 10px 14px;                        /* taller input row so bar feels solid */
  gap: 8px;
  min-height: 48px;
}
.app-chatbar .input-row .glyph { color: #94a3b8; font-size: 14px; line-height: 1; }
.app-chatbar .input-row input {
  flex: 1 1 200px;                          /* min-width 200px so the input never
                                               collapses to 0; shrinks gracefully
                                               instead of pushing buttons off-screen */
  min-width: 0;                             /* allow flex shrink below content size */
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #f1f5f9;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.app-chatbar .input-row input:focus { border-color: #2563eb; }
.app-chatbar .input-row input::placeholder { color: #64748b; }
.app-chatbar .input-row .scope {
  color: #94a3b8;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid #334155;
  border-radius: 3px;
  white-space: nowrap;
}
.app-chatbar .input-row .clear-btn,
.app-chatbar .input-row .copy-all-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.app-chatbar .input-row .clear-btn:hover,
.app-chatbar .input-row .copy-all-btn:hover { color: #f1f5f9; border-color: #475569; }
.app-chatbar .input-row .copy-all-btn.copied { background: #16a34a; color: #fff; border-color: #15803d; }

/* Agent persona mode — cycles Focused → Balanced → Open. */
.app-chatbar .input-row .mode-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  min-width: 84px;
  text-align: center;
}
.app-chatbar .input-row .mode-btn:hover { color: #f1f5f9; border-color: #475569; }
.app-chatbar .input-row .mode-btn[data-mode="focused"]  { border-color: #334155; color: #94a3b8; }
.app-chatbar .input-row .mode-btn[data-mode="balanced"] { border-color: #65a30d; color: #84cc16; }
.app-chatbar .input-row .mode-btn[data-mode="open"]     { border-color: #2563eb; color: #93c5fd; }

/* Plain English mode — toggle that hides the tool-call / tool-result /
   ui-action / diff rows so the operator only sees their messages, the
   agent's reasoning, and final summaries. Tagged via .k-* classes added
   in renderEventRow / renderDiffRow. */
.app-chatbar .input-row .plain-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.app-chatbar .input-row .plain-btn:hover { color: #f1f5f9; border-color: #475569; }
.app-chatbar .input-row .plain-btn.active {
  background: #2563eb; color: #fff; border-color: #1d4ed8;
}
.app-chatbar.plain-english .narration .row.k-tool_call,
.app-chatbar.plain-english .narration .row.k-tool_result,
.app-chatbar.plain-english .narration .row.k-ui_action,
.app-chatbar.plain-english .narration .row.k-diff {
  display: none;
}
/* Visible badge so the operator knows Plain mode is active — sits at
   the top of the narration as a sticky banner. Without this, when an
   agent turn produces no tool calls (because it refused, or because
   the question didn't need tools), Plain mode looks identical to
   Detailed mode and the operator can't tell whether the toggle worked. */
.app-chatbar.plain-english .narration::before {
  content: "👁  Plain English mode  ·  technical tool calls hidden — click 👁️ Plain again to see them";
  display: block;
  padding: 6px 14px;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Reasoning rows pop a bit more in Plain mode so they read like a
   story instead of one row in a stream of noise. */
.app-chatbar.plain-english .narration .row.k-reasoning {
  background: #fafafa;
  border-left: 3px solid #2563eb;
  padding-left: 11px;
}
.app-chatbar.plain-english .narration .row.k-reasoning .body {
  font-size: 13px;
  line-height: 1.5;
  color: #1e293b;
}

/* Autopilot button — opens a goal prompt + starts the background loop. */
.app-chatbar .input-row .autopilot-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.app-chatbar .input-row .autopilot-btn:hover { color: #f1f5f9; border-color: #475569; }
.app-chatbar.autopilot-running .input-row .autopilot-btn {
  background: #16a34a; color: #fff; border-color: #15803d;
  animation: chatbar-autopilot-pulse 2s ease-in-out infinite;
}
@keyframes chatbar-autopilot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}
.app-chatbar .narration .row.event .abort-continue-btn {
  margin-left: 8px;
  padding: 2px 8px;
  background: #dc2626;
  color: #fff;
  border: 0;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.app-chatbar .narration .row.event .abort-continue-btn:hover { background: #b91c1c; }

/* Stop button — only visible while the agent driver is operating.
   Click → kills the action queue + hides the ghost cursor. */
.app-chatbar .input-row .stop-btn {
  display: none;
  background: #dc2626;
  border: 1px solid #b91c1c;
  color: #fff;
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  animation: chatbar-stop-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
}
.app-chatbar.agent-busy .input-row .stop-btn { display: inline-flex; align-items: center; }
.app-chatbar .input-row .stop-btn:hover { background: #b91c1c; border-color: #991b1b; }
@keyframes chatbar-stop-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

/* "More" drawer toggle — opens a popover above the chat bar with the
   secondary controls (mode, plain English, autopilot, copy, clear). Keeps
   the input row visually clean. */
.app-chatbar .input-row .drawer-toggle {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.app-chatbar .input-row .drawer-toggle:hover { color: #f1f5f9; border-color: #475569; }
.app-chatbar .input-row .drawer-toggle.open { background: #2563eb; color: #fff; border-color: #1d4ed8; }

/* Voice-input mic button — visible only when the browser supports the Web
   Speech API (button starts [hidden]; the JS un-hides it on init).
   Listening state shows a pulsing red ring + 🔴 emoji.  2026-06-05. */
.app-chatbar .input-row .mic-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.app-chatbar .input-row .mic-btn:hover { color: #f1f5f9; border-color: #475569; }

/* Copy-all (input row) — operator wanted this visible without opening the
   drawer (2026-06-05).  Compact: just the 📋 glyph; tooltip explains.
   Same styling family as the other utility buttons. */
.app-chatbar .input-row .copy-all-row-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.app-chatbar .input-row .copy-all-row-btn:hover { color: #f1f5f9; border-color: #475569; }
.app-chatbar .input-row .copy-all-row-btn.copied {
  background: #16a34a; color: #fff; border-color: #15803d;
}

.app-chatbar .input-row .mic-btn.listening {
  background: #7f1d1d;
  border-color: #dc2626;
  color: #fff;
  animation: chatbar-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes chatbar-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* The drawer itself — sits ABOVE the input row, anchored to the right edge
   of the chat bar. When open it pushes nothing — it's a popover. */
/* 2026-06-19 · drawer is now FLOATING + DRAGGABLE (operator-requested).
   Default anchor: just above the chat bar's More button. When dragged,
   the drawer switches to position:fixed with left/top set by the drag
   handler · localStorage remembers the position across sessions. */
.app-chatbar .drawer {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 6px);
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  z-index: 10000;
}
.app-chatbar .drawer.is-dragged {
  position: fixed;
  right: auto;
  bottom: auto;
  /* left/top set inline by drag handler */
}
.app-chatbar .drawer .drawer-handle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid #1e293b;
  cursor: grab;
  user-select: none;
}
.app-chatbar .drawer .drawer-handle:active { cursor: grabbing; }
.app-chatbar .drawer .drawer-reset {
  background: transparent;
  border: 0;
  color: #64748b;
  cursor: pointer;
  padding: 0 6px;
  font-size: 13px;
  border-radius: 3px;
}
.app-chatbar .drawer .drawer-reset:hover { color: #cbd5e1; background: #1e293b; }
.app-chatbar .drawer[hidden] { display: none; }
.app-chatbar .drawer button {
  background: transparent;
  border: 1px solid #334155;
  color: #cbd5e1;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.01em;
}
.app-chatbar .drawer button:hover { color: #f1f5f9; background: #1e293b; border-color: #475569; }
.app-chatbar .drawer .mode-btn[data-mode="focused"]  { border-left: 3px solid #64748b; }
.app-chatbar .drawer .mode-btn[data-mode="balanced"] { border-left: 3px solid #84cc16; color: #d9f99d; }
.app-chatbar .drawer .mode-btn[data-mode="open"]     { border-left: 3px solid #2563eb; color: #93c5fd; }
.app-chatbar .drawer .plain-btn.active     { background: #2563eb; color: #fff; border-color: #1d4ed8; }
.app-chatbar.autopilot-running .drawer .autopilot-btn {
  background: #16a34a; color: #fff; border-color: #15803d;
}
.app-chatbar .drawer .copy-all-btn.copied  { background: #16a34a; color: #fff; border-color: #15803d; }

/* Minimize / expand */
.app-chatbar .input-row .minimize-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.app-chatbar .input-row .minimize-btn:hover { color: #f1f5f9; border-color: #475569; }

.app-chatbar.minimized .narration,
.app-chatbar.minimized .confirm,
.app-chatbar.minimized .input-row { display: none !important; }
/* Even minimized, keep enough height that the strip is unambiguously visible
 * and the Expand button is touchable. Was `min-height: 0` which produced a
 * sliver that looked broken (operator-reported 3× in 5 days). */
.app-chatbar.minimized { min-height: 36px !important; border-top-width: 1px; }

.app-chatbar .minimized-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: #0f172a;
  color: #94a3b8;
  font-size: 12px;
}
.app-chatbar .minimized-strip .min-label { letter-spacing: 0.02em; }
.app-chatbar .minimized-strip .expand-btn {
  background: #2563eb;
  border: 0;
  color: #fff;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.app-chatbar .minimized-strip .expand-btn:hover { background: #1d4ed8; }

/* Body padding hint — pages can opt to add bottom padding so content
   isn't hidden by the chatbar. */
body.has-app-chatbar { padding-bottom: 90px; }
body.has-app-chatbar:has(.app-chatbar.minimized) { padding-bottom: 32px; }

/* Lift any fixed-bottom UI elements above the chat bar so they stay
   accessible. Known elements per page:
     filing_review: #toast, #research-fab, #history-drawer, #research-drawer
     dms.html:      .toast
     carlson.html:  .qa-toast
   If new pages add other fixed-bottom elements, add their selectors here.   */
body.has-app-chatbar #toast,
body.has-app-chatbar #research-fab,
body.has-app-chatbar .toast,
body.has-app-chatbar .qa-toast {
  bottom: 100px !important;
}
body.has-app-chatbar #history-drawer,
body.has-app-chatbar #research-drawer {
  bottom: 90px !important;
}
/* When the chat bar is minimized to a thin strip, things can sit closer
   to the bottom again. */
body.has-app-chatbar:has(.app-chatbar.minimized) #toast,
body.has-app-chatbar:has(.app-chatbar.minimized) #research-fab,
body.has-app-chatbar:has(.app-chatbar.minimized) .toast,
body.has-app-chatbar:has(.app-chatbar.minimized) .qa-toast {
  bottom: 42px !important;
}
body.has-app-chatbar:has(.app-chatbar.minimized) #history-drawer,
body.has-app-chatbar:has(.app-chatbar.minimized) #research-drawer {
  bottom: 32px !important;
}

/* ───── Substrate badge (2026-06-12 · Phases 1-3 surfacing) ───── */
/* Renders after each agent turn · UTT- pills, routing badge, claim-trace */
.row.substrate-badge {
  display: block;
  margin: 2px 0 6px 0;
  padding: 4px 0;
  font: 10.5px/1.4 ui-monospace, Menlo, monospace;
}
.substrate-badge-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.substrate-badge .utt-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  background: #1f2937;
  color: #cbd5e1;
  cursor: pointer;
  border: 1px solid #374151;
  letter-spacing: 0.2px;
  user-select: none;
  transition: background 0.12s ease;
}
.substrate-badge .utt-pill:hover { background: #374151; color: #fff; }
.substrate-badge .route-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.15px;
}
.substrate-badge .route-badge.deterministic {
  background: #d1fae5; color: #065f46; border: 1px solid #34d399;
}
.substrate-badge .route-badge.llm {
  background: #fef3c7; color: #78350f; border: 1px solid #fbbf24;
}
.substrate-badge .trace-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  border: 1px solid transparent;
}
.substrate-badge .trace-badge.ok {
  background: #dcfce7; color: #166534; border-color: #4ade80;
}
.substrate-badge .trace-badge.warn {
  background: #fee2e2; color: #991b1b; border-color: #f87171;
}
.substrate-badge .trace-badge.open {
  background: #e5e7eb; color: #4b5563; border-color: #9ca3af;
}
.substrate-badge .trace-badge:hover { filter: brightness(0.95); }
.substrate-badge .trace-detail {
  margin: 6px 0 0 8px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
}
.substrate-badge .trace-row {
  display: flex; gap: 6px;
  padding: 2px 0;
  font-size: 10.5px;
  line-height: 1.35;
}
.substrate-badge .trace-glyph {
  flex-shrink: 0; width: 14px; text-align: center; font-weight: 700;
}
.substrate-badge .trace-row.trace-traced .trace-glyph { color: #15803d; }
.substrate-badge .trace-row.trace-unsourced .trace-glyph { color: #b91c1c; }
.substrate-badge .trace-row.trace-open .trace-glyph { color: #6b7280; }
.substrate-badge .trace-row.trace-unsourced .trace-text {
  background: #fef2f2;
  color: #7f1d1d;
  padding: 0 3px;
  border-radius: 3px;
}

/* Meaning + clarify pills (2026-06-12 · Phase 4 wiring) */
.substrate-badge .meaning-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  border: 1px solid transparent;
}
.substrate-badge .meaning-badge.ok {
  background: #e0f2fe; color: #075985; border-color: #38bdf8;
}
.substrate-badge .meaning-badge.warn {
  background: #fef3c7; color: #92400e; border-color: #fbbf24;
}
.substrate-badge .meaning-badge:hover { filter: brightness(0.95); }
.substrate-badge .clarify-detail {
  margin: 6px 0 0 8px;
  padding: 8px 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 5px;
  font-size: 10.5px;
}
.substrate-badge .clarify-row {
  padding: 4px 0;
  display: grid;
  grid-template-columns: 130px 110px 1fr;
  align-items: baseline;
  gap: 6px;
}
.substrate-badge .clarify-word {
  font-weight: 700;
  color: #92400e;
  font-family: ui-monospace, Menlo, monospace;
}
.substrate-badge .clarify-reason {
  color: #78350f;
  font-size: 10px;
}
.substrate-badge .clarify-cands {
  grid-column: 1 / -1;
  margin-left: 4px;
  color: #57534e;
  font-style: italic;
  padding-left: 6px;
  border-left: 2px solid #fbbf24;
  font-size: 10px;
}

/* Inline clarification form · 2026-06-12 */
.substrate-badge .clarify-help {
  padding: 4px 8px 8px 8px;
  font-size: 10.5px;
  color: #78350f;
  font-style: italic;
  border-bottom: 1px solid #fde68a;
  margin-bottom: 8px;
}
.substrate-badge .clarify-row {
  padding: 8px 4px;
  border-bottom: 1px dashed #fde68a;
  display: block;
  grid-template-columns: none;
}
.substrate-badge .clarify-row:last-child { border-bottom: 0; }
.substrate-badge .clarify-head {
  display: flex; gap: 10px; align-items: baseline;
  margin-bottom: 4px;
}
.substrate-badge .clarify-action {
  margin-left: 12px;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.substrate-badge .clarify-cand-list {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 3px;
}
.substrate-badge .clarify-cand-btn {
  text-align: left;
  padding: 5px 8px;
  font-size: 10.5px;
  font-family: inherit;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  color: #1f2937;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.substrate-badge .clarify-cand-btn:hover {
  background: #ecfdf5;
  border-color: #34d399;
}
.substrate-badge .clarify-cand-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.substrate-badge .clarify-or {
  font-size: 9.5px;
  color: #92400e;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 2px 0;
}
.substrate-badge .clarify-input {
  padding: 5px 8px;
  font-size: 11px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.substrate-badge .clarify-input:focus {
  outline: 2px solid #fbbf24;
  outline-offset: 0;
  border-color: #fbbf24;
}
.substrate-badge .clarify-submit {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 11px;
  background: #f59e0b;
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.substrate-badge .clarify-submit:hover { background: #d97706; }
.substrate-badge .clarify-submit:disabled { opacity: 0.6; cursor: wait; }
.substrate-badge .clarify-row.clarify-resolved {
  background: #d1fae5;
  border-radius: 4px;
}
.substrate-badge .clarify-row.clarify-resolved .clarify-action { display: none; }
.substrate-badge .clarify-defined {
  font-size: 10.5px;
  color: #065f46;
  font-weight: 600;
  font-family: ui-monospace, Menlo, monospace;
}

/* Soft summary line · operator-feedback rewrite 2026-06-12 ·
   replaces the technical-pills row as the default look. */
.substrate-badge .substrate-summary {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font: 10.5px/1.3 -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}
.substrate-badge .substrate-summary.ok {
  background: #f0fdf4; color: #15803d;
}
.substrate-badge .substrate-summary.warn {
  background: #fef3c7; color: #92400e;
}
.substrate-badge .substrate-summary:hover {
  filter: brightness(0.95);
}