/* PaLocal agent chat — Sovereign Trust / rmx design system.
   All selectors are scoped under `.rmx` so tokens resolve from roadmap.css.
   THREE copies must stay byte-identical:
     apps/unityzm/assets/css/pa_local.css          ← source
     apps/unityzm/priv/static/assets/pa_local.css  ← served
     apps/unityzm_sso/priv/static/assets/pa_local.css */

/* ── Google Fonts (matches roadmap.css for visual parity) ──────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

/* ── Self-contained rmx design tokens scoped to .pa-shell ───────
   roadmap.css is NOT linked on /pa, so we define the full token set
   here. Values copied verbatim from roadmap.css .rmx { … } block.
   Scoped to .pa-shell (which also carries .rmx) so tokens cascade to
   all chat children without leaking to other pages. ─────────────── */
.pa-shell {
  /* ink scale */
  --ink-0:#ffffff; --ink-50:#fafafa; --ink-100:#f4f4f5; --ink-150:#ececee; --ink-200:#e4e4e7;
  --ink-300:#d4d4d8; --ink-400:#a1a1aa; --ink-500:#71717a; --ink-600:#52525b; --ink-700:#3f3f46;
  --ink-800:#27272a; --ink-900:#18181b; --ink-950:#09090b;
  /* sovereign blue */
  --sov-50:#eef3fb; --sov-100:#d6e1f3; --sov-200:#adc1e6; --sov-300:#7d99d3; --sov-400:#4f72bb;
  --sov-500:#3253a0; --sov-600:#243f82; --sov-700:#1d3268; --sov-800:#172551; --sov-900:#111a3a;
  /* semantic colours */
  --emerald-50:#ecfdf5; --emerald-200:#a7f3d0; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857;
  --amber-50:#fffbeb; --amber-200:#fde68a; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309;
  --rose-50:#fef2f2; --rose-200:#fecaca; --rose-500:#ef4444; --rose-600:#dc2626; --rose-700:#b91c1c;
  --sky-50:#f0f9ff; --sky-200:#bae6fd; --sky-500:#0ea5e9; --sky-600:#0284c7;
  /* semantic aliases */
  --border:var(--ink-200); --border-strong:var(--ink-300); --input:var(--ink-200); --ring:var(--sov-500);
  /* decorative */
  --ledger-stripe:repeating-linear-gradient(135deg,transparent 0 6px,rgba(15,23,42,.035) 6px 7px);
  /* radii */
  --radius-xs:2px; --radius-sm:4px; --radius:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:14px;
  /* shadows */
  --shadow-xs:0 1px 0 rgba(9,9,11,.04);
  --shadow-sm:0 1px 2px rgba(9,9,11,.06),0 1px 1px rgba(9,9,11,.04);
  --shadow-md:0 4px 12px rgba(9,9,11,.08),0 2px 4px rgba(9,9,11,.04);
  --shadow-lg:0 12px 32px rgba(9,9,11,.10),0 4px 8px rgba(9,9,11,.04);
  --shadow-focus:0 0 0 3px color-mix(in oklab,var(--ring) 30%,transparent);
  /* typography */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --font-serif:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --tracking-mark:0.18em;
}

/* dark mode token overrides — values copied from roadmap.css dark block */
html[data-theme="dark"] .pa-shell {
  --ink-0:#09090b; --ink-50:#111113; --ink-100:#1b1b1e; --ink-150:#202023; --ink-200:#27272a;
  --ink-300:#3f3f46; --ink-400:#71717a; --ink-500:#a1a1aa; --ink-600:#d4d4d8; --ink-700:#e4e4e7;
  --ink-800:#f4f4f5; --ink-900:#fafafa; --ink-950:#ffffff;
  --border:#232327; --border-strong:#3f3f46;
  --emerald-50:rgba(16,185,129,.12); --emerald-200:rgba(16,185,129,.35); --emerald-600:#34d399; --emerald-700:#6ee7b7;
  --amber-50:rgba(245,158,11,.12); --amber-200:rgba(245,158,11,.35); --amber-700:#fbbf24;
  --rose-50:rgba(239,68,68,.12); --rose-200:rgba(239,68,68,.35);
  --sky-50:rgba(14,165,233,.12); --sky-200:rgba(14,165,233,.35); --sky-600:#38bdf8;
  --sov-50:rgba(79,114,187,.14); --sov-100:rgba(79,114,187,.22); --sov-200:rgba(79,114,187,.45); --sov-700:#7d99d3;
  --ledger-stripe:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.045) 6px 7px);
  --shadow-xs:0 1px 0 rgba(0,0,0,.4); --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.4);
  --shadow-lg:0 12px 32px rgba(0,0,0,.6),0 4px 8px rgba(0,0,0,.4);
}

/* ── shell layout ───────────────────────────────────────────────── */
.rmx .pa-shell {
  display: grid;
  /* topbar / body / mobile bottom tab bar (the tab row collapses to 0 at lg+) */
  grid-template-rows: auto 1fr auto;
  /* The :user_app layout wraps this in <main min-height:100vh>. On mobile,
     100vh (large viewport) exceeds 100dvh (dynamic), leaving dead space below
     the composer. Pin the shell to the visible viewport so it always fills the
     screen exactly and the composer sits on the bottom edge. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--ink-0);
  font-family: var(--font-sans);
}

/* ── slim top bar ───────────────────────────────────────────────── */
.rmx .pa-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  padding: 0 20px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-0);
  position: sticky;
  top: 0;
  z-index: 20;
}

.rmx .pa-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.rmx .pa-topbar-wordmark {
  font: 600 14px/1 var(--font-mono);
  letter-spacing: -0.01em;
  color: var(--ink-950);
}

.rmx .pa-topbar-label {
  font: 600 9px/1 var(--font-sans);
  letter-spacing: var(--tracking-mark);
  text-transform: uppercase;
  color: var(--ink-500);
  padding-left: 10px;
  border-left: 1px solid var(--ink-300);
}

.rmx .pa-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rmx .pa-topbar-tier {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  font: 700 11px/1 var(--font-mono);
  color: var(--sov-700);
  background: var(--sov-50);
  border: 1px solid var(--sov-200);
  border-radius: 999px;
  padding: 0 6px;
}

/* Home / back — a clear bordered icon button; label shows from lg+. */
.rmx .pa-topbar-back {
  font: 500 12px/1 var(--font-sans);
  color: var(--ink-700);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius);
  transition: background 120ms, color 120ms;
}

.rmx .pa-topbar-back:hover {
  background: var(--ink-100);
  color: var(--ink-950);
}

.rmx .pa-topbar-back-label {
  display: none;
}

@media (min-width: 1024px) {
  .rmx .pa-topbar-back {
    padding: 6px 10px;
    border: 1px solid var(--ink-200);
  }

  .rmx .pa-topbar-back-label {
    display: inline;
  }
}

/* ── mobile bottom tab bar — cross-app navigation (hidden at lg+) ──── */
.rmx .pa-tabbar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-top: 1px solid var(--ink-200);
  background: var(--ink-0);
  padding: 4px 6px calc(env(safe-area-inset-bottom) + 4px);
  z-index: 20;
}

.rmx .pa-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink-500);
  font: 600 9.5px/1 var(--font-sans);
  transition: color 120ms;
}

.rmx .pa-tab svg {
  width: 20px;
  height: 20px;
}

.rmx .pa-tab:hover {
  color: var(--ink-800);
}

.rmx .pa-tab.is-active {
  color: var(--sov-600);
}

@media (min-width: 1024px) {
  .rmx .pa-tabbar {
    display: none;
  }
}

/* ── three-column body ──────────────────────────────────────────── */
.rmx .pa-body {
  display: grid;
  /* mobile: single column — rail + dock are off-canvas drawers */
  grid-template-columns: 1fr;
  min-height: 0;
  /* explicit height ensures grid row fills its track and children
     can anchor their own overflow:auto scroll areas */
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* At lg+: restore three-column static layout (no drawers) */
@media (min-width: 1024px) {
  .rmx .pa-body {
    grid-template-columns: 220px 1fr 240px;
  }
}

/* ── mobile-only controls (burger + dock toggle) ────────────────── */
.rmx .pa-only-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ink-700);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius);
  transition: background 120ms, color 120ms;
}

.rmx .pa-only-mobile:hover {
  background: var(--ink-100);
  color: var(--ink-950);
}

@media (min-width: 1024px) {
  .rmx .pa-only-mobile {
    display: none;
  }
}

/* ── overlay (behind open drawers, above thread) ────────────────── */
.rmx .pa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 40;
}

@media (min-width: 1024px) {
  .rmx .pa-overlay {
    display: none;
  }
}

/* ── conversation rail ──────────────────────────────────────────── */
/* mobile: left off-canvas drawer */
.rmx .pa-rail-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ink-200);
  background: var(--ink-0);
  background-image: var(--ledger-stripe);
  overflow: hidden;
  /* drawer positioning */
  position: fixed;
  top: 52px;
  bottom: 0;
  left: 0;
  width: min(86vw, 320px);
  transform: translateX(-100%);
  transition: transform 240ms ease;
  z-index: 50;
  box-shadow: var(--shadow-lg);
}

.rmx .pa-rail-panel.is-open {
  transform: translateX(0);
}

/* lg+: back to static grid column */
@media (min-width: 1024px) {
  .rmx .pa-rail-panel {
    position: static;
    width: auto;
    transform: none;
    transition: none;
    z-index: auto;
    box-shadow: none;
    background: var(--ink-50);
  }
}

.rmx .pa-rail-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-200);
}

.rmx .pa-newchat {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--sov-600);
  color: #fff;
  font: 600 12px/1 var(--font-sans);
  border: none;
  cursor: pointer;
  transition: background 120ms;
}

.rmx .pa-newchat:hover { background: var(--sov-700); }

.rmx .pa-newchat svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

.rmx .pa-rail-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.rmx .pa-conv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink-100);
  text-align: left;
  background: transparent;
  border-left: 2px solid transparent;
  cursor: pointer;
  width: 100%;
  transition: background 120ms, border-left-color 120ms;
}

.rmx .pa-conv:hover {
  background: var(--ink-100);
}

.rmx .pa-conv.is-active {
  border-left-color: var(--sov-600);
  background: var(--ink-0);
}

.rmx .pa-conv-title {
  font: 500 12.5px/1.35 var(--font-sans);
  color: var(--ink-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rmx .pa-conv.is-active .pa-conv-title {
  color: var(--ink-950);
  font-weight: 600;
}

/* ── thread area ────────────────────────────────────────────────── */
.rmx .pa-thread-panel {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  overflow: hidden;
}

.rmx .pa-thread {
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── empty state ────────────────────────────────────────────────── */
.rmx .pa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-500);
  min-height: 240px;
}

.rmx .pa-empty-title {
  font: 600 15px/1.3 var(--font-sans);
  color: var(--ink-700);
  margin: 0;
}

.rmx .pa-empty-hint {
  font: 400 13px/1.6 var(--font-sans);
  color: var(--ink-500);
  max-width: 36ch;
  margin: 0;
}

/* ── messages ───────────────────────────────────────────────────── */
.rmx .pa-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.rmx .pa-msg {
  display: flex;
}

.rmx .pa-msg--user {
  justify-content: flex-end;
}

.rmx .pa-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font: 400 13.5px/1.6 var(--font-sans);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-xs);
}

.rmx .pa-bubble--user {
  background: var(--sov-600);
  color: #fff;
  border-color: var(--sov-700);
}

.rmx .pa-bubble--agent {
  background: var(--ink-0);
  color: var(--ink-800);
  border-color: var(--ink-200);
  border-left: 2px solid var(--sov-300);
}

/* ── prose (markdown inside bubbles) ───────────────────────────── */
.rmx .pa-prose p { margin: .5rem 0; }
.rmx .pa-prose p:first-child { margin-top: 0; }
.rmx .pa-prose p:last-child { margin-bottom: 0; }
.rmx .pa-prose ul, .rmx .pa-prose ol {
  margin: .5rem 0;
  padding-left: 1.25rem;
}
.rmx .pa-prose ul { list-style: disc; }
.rmx .pa-prose ol { list-style: decimal; }
.rmx .pa-prose li { margin: .25rem 0; }
.rmx .pa-prose code {
  font-family: var(--font-mono);
  font-size: .85em;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  color: var(--ink-800);
}
.rmx .pa-bubble--user .pa-prose code {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
  color: #fff;
}
.rmx .pa-prose pre {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  padding: .75rem;
  background: var(--ink-900);
  color: var(--ink-100);
  font: 400 12px/1.6 var(--font-mono);
  border: 1px solid var(--ink-800);
  margin: .5rem 0;
}
.rmx .pa-prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ── thinking indicator ─────────────────────────────────────────── */
.rmx .pa-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  font: 500 12px/1 var(--font-mono);
  color: var(--ink-500);
  border-left: 2px solid var(--sov-300);
}

/* ── streaming caret ────────────────────────────────────────────── */
.rmx .pa-caret::after,
.pa-caret::after {
  content: "▍";
  margin-left: 1px;
  animation: pa-blink 1s steps(2, start) infinite;
  color: var(--sov-500, rgb(50 83 160));
}

@keyframes pa-blink { to { visibility: hidden; } }

/* ── composer ───────────────────────────────────────────────────── */
.rmx .pa-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--ink-200);
  background: var(--ink-0);
}

.rmx .pa-input {
  flex: 1;
  resize: none;
  max-height: 200px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  padding: 9px 13px;
  font: 400 13.5px/1.5 var(--font-sans);
  color: var(--ink-900);
  background: var(--ink-0);
  transition: border-color 120ms, box-shadow 120ms;
}

.rmx .pa-input:focus {
  outline: none;
  border-color: var(--sov-500);
  box-shadow: var(--shadow-focus);
}

.rmx .pa-input::placeholder { color: var(--ink-400); }

.rmx .pa-send {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--sov-600);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 120ms, transform 80ms;
}

.rmx .pa-send:hover { background: var(--sov-700); }
.rmx .pa-send:active { transform: translateY(1px); }
.rmx .pa-send:disabled { opacity: .45; cursor: default; transform: none; }

.rmx .pa-send svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

/* ── legacy rail chip (used in later phase) ─────────────────────── */
.pa-rail {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: 11px; font-weight: 600;
  padding: .125rem .5rem; border-radius: 9999px;
  background: rgba(50, 83, 160, 0.12); color: rgb(36 63 130);
}
.pa-rail[data-status="done"] { background: rgb(16 185 129 / 0.12); color: rgb(5 150 105); }

/* ── right dock ─────────────────────────────────────────────────── */
/* mobile: right off-canvas drawer (hidden by default) */
.rmx .pa-dock {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--ink-200);
  background: var(--ink-0);
  background-image: var(--ledger-stripe);
  overflow: hidden;
  min-height: 0;
  /* drawer positioning */
  position: fixed;
  top: 52px;
  bottom: 0;
  right: 0;
  width: min(86vw, 320px);
  transform: translateX(100%);
  transition: transform 240ms ease;
  z-index: 50;
  box-shadow: var(--shadow-lg);
}

.rmx .pa-dock.is-open {
  transform: translateX(0);
}

/* lg+: static grid column */
@media (min-width: 1024px) {
  .rmx .pa-dock {
    position: static;
    width: auto;
    transform: none;
    transition: none;
    z-index: auto;
    box-shadow: none;
    background: var(--ink-50);
  }
}

/* ── dock tab bar ───────────────────────────────────────────────── */
.rmx .pa-dock-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ink-200);
  padding: 0 12px;
  background: var(--ink-0);
  flex-shrink: 0;
}

.rmx .pa-dock-tab {
  flex: 1;
  padding: 10px 10px 9px;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: var(--tracking-mark);
  text-transform: uppercase;
  color: var(--ink-500);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: color 120ms, border-bottom-color 120ms;
}

.rmx .pa-dock-tab:hover {
  color: var(--sov-700);
}

.rmx .pa-dock-tab.is-active {
  color: var(--sov-700);
  border-bottom-color: var(--sov-600);
}

.rmx .pa-dock-tab.is-disabled {
  color: var(--ink-400);
  opacity: .6;
}

/* ── dock catalogue content ─────────────────────────────────────── */
.rmx .pa-dock-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 4px;
}

.rmx .pa-dock-empty {
  padding: 20px 14px;
  font: 400 11px/1.5 var(--font-mono);
  color: var(--ink-400);
}

/* ── agents tab ─────────────────────────────────────────────────── */
.rmx .pa-agent-row {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.rmx .pa-agent-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rmx .pa-agent-name {
  font: 600 12px/1.2 var(--font-sans);
  color: var(--ink-700);
}

.rmx .pa-agent-status {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  font: 600 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mark);
}

.rmx .pa-agent-status--ok {
  color: #047857;
  background: rgba(16, 185, 129, .12);
}

.rmx .pa-agent-status--idle {
  color: var(--ink-500);
  background: rgba(0, 0, 0, .05);
}

.rmx .pa-agent-role {
  margin: 5px 0 0;
  font: 400 11px/1.45 var(--font-sans);
  color: var(--ink-500);
}

/* ── dock group ─────────────────────────────────────────────────── */
.rmx .pa-dock-group {
  margin-bottom: 4px;
}

.rmx .pa-dock-group-label {
  padding: 7px 14px 3px;
  font: 700 9px/1 var(--font-mono);
  letter-spacing: var(--tracking-mark);
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ── rail row ───────────────────────────────────────────────────── */
.rmx .pa-rail-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  cursor: default;
  transition: background 100ms;
}

.rmx .pa-rail-row:hover {
  background: var(--ink-100);
}

.rmx .pa-rail-row-name {
  flex: 1;
  font: 500 11.5px/1.3 var(--font-sans);
  color: var(--ink-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── tier badges ────────────────────────────────────────────────── */
.rmx .pa-tier-badge {
  flex-shrink: 0;
  font: 600 9px/1 var(--font-mono);
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 9999px;
  border: 1px solid transparent;
}

.rmx .pa-tier-badge--auto {
  background: rgb(16 185 129 / 0.12);
  color: rgb(5 150 105);
  border-color: rgb(16 185 129 / 0.25);
}

.rmx .pa-tier-badge--confirm {
  background: rgb(245 158 11 / 0.12);
  color: rgb(180 95 0);
  border-color: rgb(245 158 11 / 0.30);
}

/* ── rail-run timeline ──────────────────────────────────────────── */
.rmx .pa-runs {
  border-top: 1px solid var(--ink-200);
  padding: 8px 0 6px;
  flex-shrink: 0;
}

.rmx .pa-runs-label {
  padding: 0 14px 5px;
  font: 700 9px/1 var(--font-mono);
  letter-spacing: var(--tracking-mark);
  text-transform: uppercase;
  color: var(--ink-400);
}

.rmx .pa-run-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px 14px;
  font: 400 10px/1.4 var(--font-mono);
  color: var(--ink-600);
}

.rmx .pa-run-key {
  color: var(--ink-800);
  font-weight: 600;
}

.rmx .pa-run-status {
  padding: 1px 4px;
  border-radius: var(--radius-xs, 3px);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.rmx .pa-run-status--running {
  background: rgb(50 83 160 / 0.10);
  color: var(--sov-700);
}

.rmx .pa-run-status--done {
  background: rgb(16 185 129 / 0.12);
  color: rgb(5 150 105);
}

.rmx .pa-run-status--error {
  background: rgb(239 68 68 / 0.10);
  color: rgb(185 28 28);
}

.rmx .pa-run-summary {
  color: var(--ink-500);
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* ── persisted dispatch history ("Recent") ──────────────────────── */
.rmx .pa-runs--history {
  border-top: 1px dashed var(--ink-200);
  opacity: .92;
}

.rmx .pa-run-time {
  margin-left: auto;
  color: var(--ink-400);
  font-size: 9.5px;
  white-space: nowrap;
}

/* ── confirm card ───────────────────────────────────────────────── */
.rmx .pa-confirm-card {
  margin-top: 14px;
  border: 1.5px solid rgb(245 158 11 / 0.45);
  border-radius: var(--radius-md);
  background: rgb(255 251 235);
  box-shadow: 0 2px 8px rgb(245 158 11 / 0.10);
  overflow: hidden;
  max-width: 560px;
}

html[data-theme="dark"] .rmx .pa-confirm-card {
  background: rgb(55 48 20);
  border-color: rgb(245 158 11 / 0.35);
}

.rmx .pa-confirm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid rgb(245 158 11 / 0.20);
}

.rmx .pa-confirm-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgb(217 119 6);
}

.rmx .pa-confirm-title {
  font: 500 12.5px/1.35 var(--font-sans);
  color: rgb(120 65 0);
}

html[data-theme="dark"] .rmx .pa-confirm-title {
  color: rgb(253 210 100);
}

.rmx .pa-confirm-title strong {
  font-weight: 700;
}

.rmx .pa-confirm-args {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid rgb(245 158 11 / 0.15);
}

.rmx .pa-confirm-arg-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 400 11px/1.4 var(--font-mono);
}

.rmx .pa-confirm-arg-key {
  color: rgb(180 95 0);
  font-weight: 600;
  white-space: nowrap;
}

.rmx .pa-confirm-arg-val {
  color: var(--ink-700);
  word-break: break-all;
}

.rmx .pa-confirm-actions {
  display: flex;
  gap: 8px;
  padding: 9px 14px;
}

/* ── PIN authorization step (SP-B) ──────────────────────────────── */
.rmx .pa-pin {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 14px 0;
}

.rmx .pa-pin-label {
  font: 600 11px/1.3 var(--font-sans);
  color: var(--ink-600);
}

.rmx .pa-pin-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius);
  background: var(--ink-0);
  color: var(--ink-950);
  font: 600 18px/1 var(--font-mono);
  letter-spacing: 0.4em;
  text-align: center;
}

.rmx .pa-pin-input:focus {
  outline: none;
  border-color: var(--sov-500);
  box-shadow: 0 0 0 3px var(--sov-100, rgba(36, 63, 130, 0.12));
}

.rmx .pa-pin-error {
  font: 600 11px/1.3 var(--font-sans);
  color: #e11d48;
}

.rmx .pa-confirm-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: var(--radius);
  font: 600 11.5px/1 var(--font-sans);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
}

.rmx .pa-confirm-btn:active { transform: translateY(1px); }

.rmx .pa-confirm-btn--ok {
  background: rgb(245 158 11);
  color: #fff;
  border-color: rgb(217 119 6);
}

.rmx .pa-confirm-btn--ok:hover {
  background: rgb(217 119 6);
}

.rmx .pa-confirm-btn--cancel {
  background: var(--ink-0);
  color: var(--ink-700);
  border-color: var(--ink-300);
}

.rmx .pa-confirm-btn--cancel:hover {
  background: var(--ink-100);
  border-color: var(--ink-400);
}

/* busy ("executing") state — disabled buttons with a spinner affordance */
.rmx .pa-confirm-btn[disabled] {
  opacity: .6;
  cursor: default;
  transform: none;
}

.rmx .pa-confirm-btn[disabled]:active {
  transform: none;
}

.rmx .pa-confirm-btn[aria-busy="true"] {
  position: relative;
  padding-left: 28px;
}

.rmx .pa-confirm-btn[aria-busy="true"]::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pa-spin .7s linear infinite;
}

@keyframes pa-spin { to { transform: rotate(360deg); } }

/* ── confirm card: inline execution-error state ─────────────────── */
.rmx .pa-confirm-card--error {
  border-color: rgb(239 68 68 / 0.50);
  background: rgb(254 242 242);
  box-shadow: 0 2px 8px rgb(239 68 68 / 0.10);
}

html[data-theme="dark"] .rmx .pa-confirm-card--error {
  background: rgb(55 24 24);
  border-color: rgb(239 68 68 / 0.40);
}

.rmx .pa-confirm-card--error .pa-confirm-title {
  color: rgb(153 27 27);
}

html[data-theme="dark"] .rmx .pa-confirm-card--error .pa-confirm-title {
  color: rgb(252 165 165);
}

.rmx .pa-confirm-card--error .pa-confirm-icon {
  color: rgb(220 38 38);
}

.rmx .pa-confirm-error {
  padding: 8px 14px;
  font: 400 11.5px/1.45 var(--font-sans);
  color: rgb(153 27 27);
  border-bottom: 1px solid rgb(239 68 68 / 0.18);
}

html[data-theme="dark"] .rmx .pa-confirm-error {
  color: rgb(252 165 165);
}

/* in the error state, the primary button reads "Retry" — give it a rose tint */
.rmx .pa-confirm-card--error .pa-confirm-btn--ok {
  background: rgb(220 38 38);
  border-color: rgb(185 28 28);
}

.rmx .pa-confirm-card--error .pa-confirm-btn--ok:hover {
  background: rgb(185 28 28);
}

/* ── declined-action marker (thread resolution row) ─────────────── */
.rmx .pa-declined-marker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--ink-200);
  border-left: 2px solid var(--ink-400);
  border-radius: var(--radius-md);
  background: var(--ink-50);
  font: 500 11.5px/1.3 var(--font-sans);
  color: var(--ink-500);
}

.rmx .pa-declined-marker strong {
  color: var(--ink-700);
  font-weight: 600;
}

.rmx .pa-declined-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--ink-400);
}

html[data-theme="dark"] .rmx .pa-declined-marker {
  background: var(--ink-100);
  border-color: var(--ink-200);
}

/* ── composer wrapper (contains chips + composer row) ───────────── */
.rmx .pa-composer-wrap {
  border-top: 1px solid var(--ink-200);
  background: var(--ink-0);
  display: flex;
  flex-direction: column;
}

/* override: composer no longer owns the border-top (wrapper does) */
.rmx .pa-composer {
  border-top: none;
  padding-top: 8px;
}

/* ── attach button (paperclip label) ────────────────────────────── */
.rmx .pa-attach-input {
  /* visually hidden but accessible — live_file_input needs to remain in DOM */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

.rmx .pa-attach-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-500);
  border: 1px solid var(--ink-200);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.rmx .pa-attach-btn:hover {
  background: var(--ink-100);
  color: var(--sov-600);
  border-color: var(--sov-300);
}

.rmx .pa-attach-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

/* ── pending attachment chips row ───────────────────────────────── */
.rmx .pa-attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 20px 4px;
}

.rmx .pa-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 4px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  background: var(--ink-50);
  font: 400 11.5px/1 var(--font-sans);
  color: var(--ink-700);
  max-width: 200px;
}

.rmx .pa-attach-preview {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.rmx .pa-attach-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.rmx .pa-attach-remove {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--ink-400);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 100ms, color 100ms;
}

.rmx .pa-attach-remove:hover {
  background: var(--rose-200);
  color: var(--rose-700);
}

/* ── upload error text ──────────────────────────────────────────── */
.rmx .pa-attach-error {
  padding: 0 20px 2px;
  font: 400 11px/1.4 var(--font-sans);
  color: var(--rose-600);
}

.rmx .pa-attach-error--global {
  padding-top: 4px;
}

/* ── optimistic user-message attachment chips ───────────────────── */
.rmx .pa-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.rmx .pa-msg-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 3px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.30);
  border-radius: var(--radius-sm);
  font: 400 11px/1 var(--font-sans);
  color: rgba(255,255,255,.90);
  max-width: 180px;
}

.rmx .pa-msg-attach-thumb {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.rmx .pa-msg-attach-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* dark mode adjustments for chip row */
html[data-theme="dark"] .rmx .pa-attach-chip {
  background: var(--ink-100);
  border-color: var(--ink-300);
}

/* ── dark mode overrides ────────────────────────────────────────── */
html[data-theme="dark"] .rmx .pa-bubble--agent {
  background: var(--ink-100);
  border-color: var(--ink-200);
}
html[data-theme="dark"] .rmx .pa-rail-panel {
  background: var(--ink-50);
}
html[data-theme="dark"] .rmx .pa-thinking {
  background: var(--ink-100);
  border-color: var(--ink-200);
}
html[data-theme="dark"] .rmx .pa-composer {
  background: var(--ink-0);
}
html[data-theme="dark"] .rmx .pa-input {
  background: var(--ink-100);
  color: var(--ink-900);
  border-color: var(--ink-300);
}
html[data-theme="dark"] .rmx .pa-dock {
  background: var(--ink-50);
}
html[data-theme="dark"] .rmx .pa-dock-tabs {
  background: var(--ink-0);
}