/* Sluicebox Data Collection — Hi-Fi
   Built on Sluicebox Design System tokens. */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
@import url("./assets/sluicebox/colors_and_type.css");

* { box-sizing: border-box; }
html, body, #root {
  margin: 0; padding: 0; min-height: 100vh;
  background: var(--bg-soft);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}
img { display: block; }
button { font-family: inherit; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, textarea, select { font-family: inherit; }

/* =================================================================== */
/* Layout                                                              */
/* =================================================================== */
.app {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur-base) var(--ease-standard);
}
.app.collapsed {
  grid-template-columns: 68px 1fr;
}
.canvas {
  padding: 32px 40px 80px;
  max-width: 1280px;
  width: 100%;
}

/* =================================================================== */
/* Sidebar                                                              */
/* =================================================================== */
.side {
  background: var(--sb-dark-amethyst);
  color: var(--sb-pale-blue);
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.side.collapsed { padding: 56px 8px 24px; gap: 16px; }
.side.collapsed .brand { display: none; }
.side.collapsed .brand-sub,
.side.collapsed .nav-label,
.side.collapsed .nav-item span:not(.nav-num),
.side.collapsed .side-foot { display: none; }
.side.collapsed .nav-item { justify-content: center; padding: 8px 0; }
.side.collapsed .nav-item .nav-num { width: 24px; height: 24px; font-size: 12px; }

.side-toggle {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border-on-dark);
  background: rgba(255,255,255,.06);
  color: var(--sb-pale-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  z-index: 10;
  transition: background var(--dur-fast);
}
.side-toggle:hover { background: var(--sb-ultra-violet); color: white; }
.side.collapsed .side-toggle { right: 50%; transform: translateX(50%); top: 14px; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--border-on-dark);
}
.brand img.brand-logo {
  height: 24px;
  width: auto;
}
.brand-sub {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: .7;
  margin-top: 4px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--sb-pale-blue);
  opacity: .55;
  margin: 0 8px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--sb-pale-blue);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  width: 100%;
  cursor: pointer;
}
.nav-item:hover { background: rgba(220,237,255,.08); }
.nav-item.active {
  background: var(--sb-ultra-violet);
  color: white;
}
.nav-item .nav-num {
  font-size: 10.5px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(220,237,255,.12);
  color: var(--sb-pale-blue);
  flex-shrink: 0;
}
.nav-item.active .nav-num { background: rgba(255,255,255,.22); color: white; }
.nav-item.done .nav-num { background: var(--sb-ultra-violet); color: white; }

.side-account {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--sb-pale-blue);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.side-account:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.side-account-logo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #CC0000;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.side-account-logo svg { display: block; width: 28px; height: 28px; border-radius: 6px; }
.side-account-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 1px; }
.side-account-name { font-size: 12.5px; font-weight: 600; color: white; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-account-role { font-size: 10.5px; color: var(--sb-pale-blue); opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-account-chev { flex: 0 0 auto; font-size: 14px; opacity: 0.5; color: var(--sb-pale-blue); }
.side.collapsed .side-account { padding: 6px; justify-content: center; }
.side.collapsed .side-account-text,
.side.collapsed .side-account-chev { display: none; }

.side-logout {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--sb-pale-blue);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.side-logout:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.side-logout-icon { flex: 0 0 auto; font-size: 15px; opacity: 0.8; }
.side-logout-text { font-size: 12.5px; font-weight: 600; color: white; }
.side.collapsed .side-logout { padding: 6px; justify-content: center; }
.side.collapsed .side-logout-text { display: none; }

.side-foot {
  font-size: 11px;
  color: var(--sb-pale-blue);
  opacity: .5;
  padding: 0 8px;
  line-height: 1.5;
}

/* =================================================================== */
/* Screen head                                                          */
/* =================================================================== */
.screen-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-1);
}
.screen-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--sb-ultra-violet);
  margin-bottom: 8px;
}
.screen-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 8px;
  color: var(--fg-1);
  text-wrap: balance;
}
.screen-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  max-width: 720px;
}
.screen-tag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  padding-top: 8px;
}

/* =================================================================== */
/* Cards                                                                */
/* =================================================================== */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.card.dashed {
  border-style: dashed;
  background: var(--bg-soft);
}
.card.spotlight {
  background: linear-gradient(135deg, color-mix(in oklab, var(--sb-periwinkle) 35%, white) 0%, white 60%);
  border: 1px solid color-mix(in oklab, var(--sb-ultra-violet) 18%, transparent);
}
.card.amethyst {
  background: var(--sb-dark-amethyst);
  color: var(--sb-pale-blue);
  border: none;
}
.card.amethyst .eyebrow { color: var(--sb-pale-blue); opacity: .7; }
.card.amethyst h2, .card.amethyst h3 { color: white; }

/* Layout helpers */
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 16px; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cols-side { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.cols-wide { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }

/* =================================================================== */
/* Type                                                                 */
/* =================================================================== */
.eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.eyebrow.acc { color: var(--sb-ultra-violet); }
h2.h, .h-display {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--fg-1);
}
h3.h2, .h-2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  margin: 0;
  color: var(--fg-1);
}
.text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
.meta {
  font-size: 12px;
  color: var(--fg-3);
}
.mono, code {
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.hl {
  background: color-mix(in oklab, var(--sb-periwinkle) 45%, transparent);
  color: var(--sb-ultra-violet);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: var(--weight-medium);
}

hr.divider {
  border: none;
  border-top: 1px solid var(--border-1);
  margin: 16px 0;
}

/* =================================================================== */
/* Buttons                                                              */
/* =================================================================== */
.btn {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--bg);
  color: var(--fg-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn.primary {
  background: var(--sb-ultra-violet);
  color: white;
  border-color: var(--sb-ultra-violet);
}
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary:active { background: var(--accent-press); transform: scale(.98); }

.btn.amethyst {
  background: var(--sb-dark-amethyst);
  color: white;
  border-color: var(--sb-dark-amethyst);
}
.btn.warm {
  background: var(--sb-orange);
  color: white;
  border-color: var(--sb-orange);
}
.btn.warm:hover { background: color-mix(in oklab, var(--sb-orange) 88%, black); }

.btn.ghost {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--fg-1);
}
.btn.ghost:hover { border-color: var(--sb-ultra-violet); color: var(--sb-ultra-violet); }

.btn.quiet {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-2);
  padding: 6px 10px;
}
.btn.quiet:hover { background: var(--bg-soft); color: var(--fg-1); }

.btn.sm { padding: 6px 12px; font-size: 12.5px; }
.btn.lg { padding: 14px 22px; font-size: 15px; }

.btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

/* =================================================================== */
/* Chips & badges                                                       */
/* =================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  background: var(--bg-soft);
  color: var(--fg-2);
  border: 1px solid var(--border-1);
  white-space: nowrap;
}
.chip.acc {
  background: color-mix(in oklab, var(--sb-ultra-violet) 12%, white);
  color: var(--sb-ultra-violet);
  border-color: color-mix(in oklab, var(--sb-ultra-violet) 22%, transparent);
}
.chip.req {
  background: color-mix(in oklab, var(--sb-fuchsia) 12%, white);
  color: var(--sb-fuchsia);
  border-color: color-mix(in oklab, var(--sb-fuchsia) 22%, transparent);
}
.chip.ok {
  background: color-mix(in oklab, var(--success) 14%, white);
  color: color-mix(in oklab, var(--success) 80%, black);
  border-color: color-mix(in oklab, var(--success) 22%, transparent);
}
.chip.warn {
  background: color-mix(in oklab, var(--sb-orange) 14%, white);
  color: color-mix(in oklab, var(--sb-orange) 80%, black);
  border-color: color-mix(in oklab, var(--sb-orange) 24%, transparent);
}
.chip.muted { background: var(--bg-soft); color: var(--fg-3); }
.chip.mono { font-family: var(--font-mono); font-size: 11.5px; padding: 3px 8px; }
.chip.lg { font-size: 12.5px; padding: 5px 12px; }
.chip.dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  display: inline-block;
}

/* =================================================================== */
/* Wizard stepper                                                       */
/* =================================================================== */
.stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: white;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 6px;
  margin-bottom: 28px;
}
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-standard);
}
.step:hover { background: var(--bg-soft); }
.step .num {
  width: 24px; height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--fg-3);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}
.step.done .num { background: var(--sb-ultra-violet); color: white; }
.step.active { background: color-mix(in oklab, var(--sb-ultra-violet) 8%, white); }
.step.active .num { background: var(--sb-ultra-violet); color: white; }
.step .lbl-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--fg-1);
  display: block;
}
.step .lbl-meta {
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  display: block;
  margin-top: 1px;
}

/* Wizard footer */
.wizard-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-1);
}
.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: white;
  border: 1px solid var(--border-2);
  border-bottom-width: 2px;
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--fg-2);
}

/* =================================================================== */
/* Inputs                                                               */
/* =================================================================== */
.field {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: white;
  color: var(--fg-1);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.field:focus {
  outline: none;
  border-color: var(--sb-ultra-violet);
  box-shadow: var(--shadow-glow);
}
.field.lg {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-medium);
  padding: 14px 16px;
}
.field.area {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.check .box {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  font-size: 11px;
  color: white;
  font-weight: bold;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.check.checked .box, .check .box:has(:checked) {
  background: var(--sb-ultra-violet);
  border-color: var(--sb-ultra-violet);
}

/* =================================================================== */
/* Tables                                                               */
/* =================================================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-soft);
}
.table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: color-mix(in oklab, var(--sb-periwinkle) 18%, white); }
.row-action { width: 40px; text-align: right; }
.row-arrow { color: var(--fg-3); }

/* =================================================================== */
/* Email composer                                                       */
/* =================================================================== */
.email {
  background: white;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  box-shadow: var(--shadow-2);
}
.email .from {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.7;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-1);
}

/* Editable email headers */
.email-headers { padding-bottom: 10px; margin-bottom: 14px; }
.hdr-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-1);
}
.hdr-row:last-child { border-bottom: none; }
.hdr-row label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.hdr-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
  padding: 6px 8px;
  border-radius: 4px;
  transition: background var(--dur-fast);
}
.hdr-input:hover { background: var(--bg-soft); }
.hdr-input:focus { background: rgba(106, 56, 220, 0.08); }
.hdr-subject {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--sb-ultra-violet);
}

/* Editable email body */
.email-body {
  outline: none;
  border-radius: 6px;
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background var(--dur-fast);
}
.email-body:hover { background: rgba(106, 56, 220, 0.03); }
.email-body:focus { background: rgba(106, 56, 220, 0.05); box-shadow: inset 0 0 0 1px var(--border-2); }
.email-edit-hint {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-1);
  text-align: center;
}

/* Pill-input (multi-value email field) */
.pill-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: white;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.pill-input:focus-within {
  border-color: var(--sb-ultra-violet);
  box-shadow: 0 0 0 3px rgba(106, 56, 220, 0.12);
}
/* When a pill-input lives inside an email header row, drop the box chrome */
.hdr-row .pill-input {
  border: none;
  background: transparent;
  padding: 2px;
}
.hdr-row .pill-input:focus-within {
  background: rgba(106, 56, 220, 0.05);
  box-shadow: none;
}
/* Non-editable Cc display (pill list, no input) */
.hdr-pill-display {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px;
}
.email-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(106, 56, 220, 0.08);
  color: var(--sb-ultra-violet);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(106, 56, 220, 0.2);
}
.email-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--sb-ultra-violet);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  opacity: 0.6;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.email-pill-x:hover { opacity: 1; background: rgba(106, 56, 220, 0.15); }
.pill-input-field {
  flex: 1;
  min-width: 140px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
  padding: 4px 6px;
}
.pill-input-field::placeholder { color: var(--fg-3); font-style: italic; }
.email h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  margin: 0 0 12px;
}
.email p { font-size: 14px; line-height: 1.6; color: var(--fg-1); margin: 0 0 12px; }
.email ol, .email ul {
  margin: 8px 0 12px;
  padding-left: 22px;
}
.email li { font-size: 14px; line-height: 1.7; }
.email strong { font-weight: var(--weight-semibold); }
.email .attach-block {
  border: 1px dashed var(--border-2);
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 12px 0;
}

/* =================================================================== */
/* Notes / callouts                                                     */
/* =================================================================== */
.note {
  background: color-mix(in oklab, var(--sb-periwinkle) 30%, white);
  border-left: 3px solid var(--sb-ultra-violet);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-1);
}
.note strong { color: var(--fg-1); }
.note.warm {
  background: color-mix(in oklab, var(--sb-coral) 50%, white);
  border-left-color: var(--sb-orange);
}

/* =================================================================== */
/* Status banner                                                        */
/* =================================================================== */
.state-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--sb-dark-amethyst);
  color: white;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.state-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--sb-pale-blue);
}
.state-dot.live {
  background: #6EE7B7;
  box-shadow: 0 0 0 4px rgba(110,231,183,.25);
  animation: pulse 1.6s var(--ease-standard) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(110,231,183,.25); }
  50% { box-shadow: 0 0 0 8px rgba(110,231,183,.05); }
}

/* =================================================================== */
/* Big metric numbers                                                   */
/* =================================================================== */
.metric-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 8px 0 12px;
}
.metric-num.warm { color: var(--sb-orange); }
.metric-num.acc { color: var(--sb-ultra-violet); }

/* =================================================================== */
/* Progress bar + legend                                                */
/* =================================================================== */
.progress-bar {
  height: 8px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}
.progress-bar > i {
  display: block;
  height: 100%;
}
.progress-bar > i.ok { background: var(--success); }
.progress-bar > i.pending { background: var(--sb-ultra-violet); }
.progress-bar > i.flag { background: var(--sb-orange); }
.progress-bar > i.miss { background: var(--border-2); }

.legend { display: flex; gap: 18px; font-size: 12px; color: var(--fg-2); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend > span > i {
  width: 8px; height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.legend .ok > i { background: var(--success); }
.legend .pending > i { background: var(--sb-ultra-violet); }
.legend .flag > i { background: var(--sb-orange); }
.legend .miss > i { background: var(--border-2); }

/* =================================================================== */
/* Activity feed                                                         */
/* =================================================================== */
.feed-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-1);
  font-size: 13px;
  color: var(--fg-1);
}
.feed-item:last-child { border-bottom: none; }
.feed-item .when { font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.feed-item .icon-tile {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--sb-ultra-violet) 12%, white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.feed-item .icon-tile.warm { background: color-mix(in oklab, var(--sb-orange) 14%, white); }
.feed-item .icon-tile.ok { background: color-mix(in oklab, var(--success) 14%, white); }

/* =================================================================== */
/* Schema field row (Notion-list)                                       */
/* =================================================================== */
.field-row {
  background: white;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 18px 1.4fr 110px 1.6fr 80px;
  gap: 16px;
  align-items: center;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field-row:hover { border-color: var(--border-2); }
.field-row.expanded {
  display: block;
  padding: 24px;
  border-color: var(--sb-ultra-violet);
  box-shadow: var(--shadow-glow);
}
.field-row .grip {
  color: var(--fg-3);
  cursor: grab;
  font-size: 13px;
}
.field-row .label-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  color: var(--fg-1);
}

/* Required toggle (Notion-list rows) */
.req-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-standard);
}
.req-toggle:hover { background: var(--bg-soft); }
.req-toggle .req-track {
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--border-2);
  transition: background var(--dur-fast) var(--ease-standard);
  flex-shrink: 0;
}
.req-toggle .req-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 1px 2px rgba(23,0,59,.15);
  transition: left var(--dur-fast) var(--ease-standard);
}
.req-toggle[data-on="true"] .req-track { background: var(--sb-ultra-violet); }
.req-toggle[data-on="true"] .req-knob { left: 14px; }
.req-toggle .req-label {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  color: var(--fg-2);
}
.req-toggle[data-on="true"] .req-label { color: var(--sb-ultra-violet); }

/* =================================================================== */
/* Thread message                                                       */
/* =================================================================== */
.msg {
  background: white;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-top: 16px;
}
.msg.in {
  background: color-mix(in oklab, var(--sb-periwinkle) 18%, white);
  margin-right: 0;
  margin-left: 0;
}
.msg.out {
  background: white;
}
.msg .who {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 6px;
}
.msg .subject {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  margin: 4px 0 12px;
  color: var(--fg-1);
}
.msg .body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-1);
}
.msg .extracted {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-2);
}
.msg.draft {
  border: 2px solid var(--sb-ultra-violet);
  background: color-mix(in oklab, var(--sb-ultra-violet) 4%, white);
}

/* =================================================================== */
/* Audit cell highlights                                                */
/* =================================================================== */
.audit-cell {
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast);
}
.audit-cell:hover { background: color-mix(in oklab, var(--sb-periwinkle) 30%, white); }
.audit-cell.picked {
  background: color-mix(in oklab, var(--sb-ultra-violet) 12%, white);
  outline: 2px solid var(--sb-ultra-violet);
  outline-offset: -2px;
}
.audit-cell .cell-val {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 14px;
}

/* =================================================================== */
/* Brandmark in cards                                                   */
/* =================================================================== */
.icon-tile-lg {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--sb-ultra-violet) 10%, white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.icon-tile-lg img { width: 28px; height: 28px; }

/* =================================================================== */
/* Hero / overview                                                      */
/* =================================================================== */
.hero-card {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: 48px;
  background-image: var(--grad-amethyst);
  background-size: cover;
  background-position: center;
  color: white;
  overflow: hidden;
  margin-bottom: 28px;
}
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(105deg,
      rgba(23, 0, 59, .82) 0%,
      rgba(48, 12, 110, .55) 45%,
      rgba(23, 0, 59, .35) 100%),
    url('./assets/Semiconductor_1.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card .eyebrow { color: var(--sb-pale-blue); opacity: .9; }
.hero-card h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin: 12px 0 16px;
  max-width: 720px;
  text-wrap: balance;
}
.hero-card p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 560px; margin: 0 0 24px; }

/* =================================================================== */
/* Path cards                                                           */
/* =================================================================== */
.path-card {
  background: white;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  cursor: pointer;
}
.path-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--sb-ultra-violet);
}
.path-card .num {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--sb-ultra-violet);
  margin-bottom: 12px;
}

/* =================================================================== */
/* Template card                                                        */
/* =================================================================== */
.template-card {
  background: white;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 24px;
  cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-base);
  position: relative;
}
.template-card:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.template-card.picked {
  border-color: var(--sb-ultra-violet);
  background: color-mix(in oklab, var(--sb-ultra-violet) 4%, white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sb-ultra-violet) 18%, transparent);
}
.template-card .picked-badge {
  position: absolute;
  top: 16px; right: 16px;
}
.template-card .tpl-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-1);
}

/* =================================================================== */
/* Misc utility                                                         */
/* =================================================================== */
.spacer { height: 24px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.flex-grow { flex: 1; }
.text-center { text-align: center; }
.between { justify-content: space-between; }

/* Tweaks panel overrides if needed */

/* =================================================================== */
/* Agent screen (chat + live panels)                                    */
/* All classes are agent-prefixed to avoid colliding with the rest of   */
/* the Hi-Fi stylesheet. Mounted inside .canvas.canvas-agent.           */
/* =================================================================== */
.canvas.canvas-agent {
  padding: 0;
  max-width: none;
  height: 100vh;
  overflow: hidden;
  /* Containment: keep all scroll inside this region so the .side
     sidebar stays sticky and the page itself never scrolls. */
  min-height: 0;
}
.agent-shell {
  display: grid;
  /* min track size is 0 — without this, the 420px floor forces the grid
     wider than its parent on narrow viewports and the right column gets
     clipped by .canvas-agent's overflow:hidden. Columns now compress
     gracefully; inner content uses overflow-wrap to stay readable. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  height: 100vh;
  min-height: 0;
  background: var(--bg-soft);
}
.agent-chat-col {
  display: flex;
  flex-direction: column;
  min-width: 0;      /* allow grid child to shrink below content min-size */
  min-height: 0;     /* let inner .agent-msgs flex scroll, not page */
  border-right: 1px solid var(--border-1);
  background: white;
  overflow: hidden;  /* contain inner scrolls */
}
.agent-panels-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 24px 96px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;      /* same: don't let intrinsic content widen the column */
  min-height: 0;
}

.agent-chat-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 5;
}
.agent-chat-head h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-0);
}
.agent-chat-head .agent-sub {
  margin-left: auto;
  font-size: 12px;
  color: var(--fg-2);
}
.agent-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #2bbb7a;
}
.agent-dot.busy { background: #f1aa12; animation: agent-pulse 1.2s infinite; }
@keyframes agent-pulse { 50% { opacity: .35; } }

.agent-msgs {
  flex: 1;
  min-height: 0;     /* allow flex child to actually shrink + scroll */
  overflow-y: auto;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agent-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  white-space: pre-wrap;
  line-height: 1.5;
}
.agent-msg.user {
  align-self: flex-end;
  background: var(--sb-ultra-violet);
  color: white;
  border-bottom-right-radius: 4px;
}
.agent-msg.assistant {
  align-self: flex-start;
  background: var(--bg-1);
  color: var(--fg-0);
  border: 1px solid var(--border-1);
  border-bottom-left-radius: 4px;
}
.agent-msg-tool {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--border-1);
  color: var(--fg-2);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  max-width: 100%;
}
.agent-msg-tool {
  /* Switch to a regular UI font for human-readable labels — monospace was
     fine for raw JSON but reads as noise for friendly text. */
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: help; /* hover shows the raw tool call via title attr */
}
.agent-msg-tool .tname { color: var(--sb-amethyst); font-weight: 600; }
.agent-msg-tool .tdetail { color: var(--fg-1); }
/* Legacy (kept in case any old log entries still use this class). */
.agent-msg-tool .targs { color: var(--fg-2); white-space: pre-wrap; word-break: break-all; }

.agent-choices {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}
.agent-choices-q {
  font-size: 13px;
  color: var(--fg-2);
  font-style: italic;
}
.agent-choices-row { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-choice-btn {
  background: white;
  color: var(--sb-ultra-violet);
  border: 1.5px solid var(--sb-ultra-violet);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.agent-choice-btn:hover:not(:disabled) {
  background: var(--sb-ultra-violet);
  color: white;
}
.agent-choice-btn.picked {
  background: var(--sb-ultra-violet);
  color: white;
  opacity: 1;
}
.agent-choice-btn:disabled:not(.picked) { opacity: .35; cursor: not-allowed; }

/* Inline upload widget — rendered when the agent calls request_document_upload. */
.agent-upload {
  align-self: flex-start;
  background: white;
  border: 1.5px dashed var(--sb-pale-amethyst);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}
.agent-upload.uploading {
  border-style: solid;
  border-color: var(--sb-amethyst);
}
.agent-upload.done {
  border-style: solid;
  border-color: #2bbb7a;
  background: #e7f6ee;
}
.agent-upload.error {
  border-style: solid;
  border-color: #c44;
  background: #fff0f0;
}
.agent-upload-prompt {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-0);
}
.agent-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--sb-ultra-violet);
  color: white;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease;
}
.agent-upload-btn:hover { background: var(--sb-amethyst); }
.agent-upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  font-weight: 700;
}
.agent-upload-status {
  font-size: 12.5px;
  color: var(--fg-1);
  font-style: italic;
}
.agent-upload-status.done { color: #186e44; font-style: normal; font-weight: 600; }
.agent-upload-status.err  { color: #9b1d1d; font-style: normal; }
.agent-upload-hint {
  font-size: 11px;
  color: var(--fg-2);
}

/* In-chat "agent is thinking" indicator — a clean spinning ring +
   small italic label. Replaces the older three-dot bubble. */
.agent-thinking {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding: 4px 2px;
}
.agent-thinking-spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--sb-pale-amethyst);
  border-top-color: var(--sb-ultra-violet);
  animation: agent-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes agent-spin {
  to { transform: rotate(360deg); }
}
.agent-thinking-label {
  font-size: 12.5px;
  color: var(--fg-2);
  font-style: italic;
}
/* Back-compat — old markup uses .agent-thinking-bubble + three dots.
   Hide the bubble shell so only the new spinner renders. */
.agent-thinking-bubble { display: none; }
.agent-thinking-dot { display: none; }

.agent-composer {
  border-top: 1px solid var(--border-1);
  padding: 12px 16px 16px;
  background: white;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  position: relative;
  transition: background 200ms ease, border-top-color 200ms ease;
}
.agent-composer.busy {
  background: var(--bg-1);
  border-top-color: var(--sb-pale-amethyst);
}
.agent-composer.busy textarea {
  background: var(--bg-1);
  cursor: not-allowed;
}
.agent-composer.busy::before {
  /* Thin pulsing band at the very top of the composer — silent visual
     reinforcement that the input is locked while the agent works. */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sb-amethyst) 50%,
    transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: agent-composer-shimmer 1.4s infinite linear;
}
@keyframes agent-composer-shimmer {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}
.agent-composer textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 200px;
  padding: 10px 12px;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  background: white;
  font-family: inherit;
}
.agent-composer textarea:focus { border-color: var(--sb-amethyst); }
.agent-composer button {
  background: var(--sb-ultra-violet);
  color: white;
  border: 0;
  padding: 0 16px;
  height: 40px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
}
.agent-composer button:hover:not(:disabled) { background: var(--sb-amethyst); }
.agent-composer button:disabled { opacity: .5; cursor: not-allowed; }

/* Side panels */
.agent-panel {
  background: white;
  border: 1px solid var(--border-1);
  border-radius: 14px;
  overflow: hidden;
  /* min-width:0 lets the panel actually compress to its column width
     when the column is narrow. Without it, intrinsic content min-size
     can push panels wider than the column and clip on the right. */
  min-width: 0;
  /* CRITICAL: never let flex shrink the panel below its natural height.
     `.agent-panels-col` is a flex column with `overflow-y: auto`. With
     default `flex-shrink: 1`, when the panels collectively exceed the
     column's height, flex squeezes each panel down — and because each
     panel-body has `max-height: 360px; overflow-y: auto` (so its
     min-content is ~0), the body can collapse far below 360px. The
     result: body content gets clipped by the panel's `overflow:hidden`,
     no per-panel scrollbar appears (the box is just shorter than its
     content was supposed to be), and the column-level scrollbar never
     kicks in either (flex shrinks instead of overflowing). Forcing
     `flex-shrink: 0` here makes panels keep their natural size, the
     column overflows vertically, and the column-level scroll works. */
  flex-shrink: 0;
  transition: border-color 180ms ease, background 180ms ease;
}
.agent-panel header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease;
}
.agent-panel header:hover { background: #efeefa; }
.agent-panel.collapsed header { border-bottom: 0; }
.agent-panel header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;        /* allow title to shrink instead of pushing meta off */
  flex: 1 1 auto;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-0);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.agent-section-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.agent-caret {
  color: var(--fg-2);
  font-size: 11px;
  width: 12px;
  text-align: right;
}
.agent-done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #2bbb7a;
  color: white;
  font-size: 11px;
  line-height: 1;
}
/* Numbered step badge — shows 1..5 next to each panel title in the
   right rail. Flips to green ✓ when the step is complete. */
.agent-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--bg-1);
  color: var(--fg-2);
  border: 1.5px solid var(--border-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin-right: 8px;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.agent-step-badge.done {
  background: #2bbb7a;
  color: white;
  border-color: #2bbb7a;
  font-weight: 600;
}
/* Done state — green border + tinted header */
.agent-panel.done {
  border-color: #2bbb7a;
}
.agent-panel.done header {
  background: #e7f6ee;
  border-bottom-color: #c8e6d4;
}
.agent-panel.done header:hover { background: #def0e3; }
.agent-panel.done.collapsed header { border-bottom: 0; }

.agent-panel-body {
  padding: 14px 16px;
  /* Per-panel scroll so a long fields/recipients list doesn't push the
     other panels off the screen. The whole .agent-panels-col already
     has overflow-y: auto on the outside, but giving each panel its own
     cap keeps the user oriented (header always visible, scroll within
     the section). */
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  /* Long unbreakable tokens (URLs, IDs, emails) must wrap rather than
     stretch the panel past the column. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.agent-panel-body.empty {
  color: var(--fg-2);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 22px 16px;
}
.agent-pill {
  font-size: 11px;
  background: var(--sb-pale-amethyst);
  color: var(--sb-amethyst);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  /* Pills carry short labels like "3/5" or "active" — they must render
     on one line regardless of the wrap rules inherited from their
     container (`.mock-panel-body` and `.agent-panel-body` both set
     `overflow-wrap: break-word` for long value safety). */
  white-space: nowrap;
  flex-shrink: 0;
}

.agent-kv {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  row-gap: 6px;
  column-gap: 12px;
  font-size: 13px;
}
.agent-kv .k { color: var(--fg-2); }
.agent-kv .v { color: var(--fg-0); min-width: 0; overflow-wrap: break-word; }
.agent-brief {
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.55;
  border-left: 2px solid var(--sb-pale-amethyst);
  padding-left: 10px;
  margin-top: 10px;
  white-space: pre-wrap;
}

.agent-fld {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-1);
}
.agent-fld:last-child { border-bottom: 0; }
.agent-fld-label { font-weight: 600; color: var(--fg-0); font-size: 13px; min-width: 0; overflow-wrap: break-word; }
.agent-fld-desc { color: var(--fg-2); font-size: 12px; margin-top: 2px; min-width: 0; overflow-wrap: break-word; }
.agent-fld-meta { font-size: 11px; color: var(--fg-2); display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.agent-req {
  background: var(--sb-pale-amethyst);
  color: var(--sb-amethyst);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

.agent-rcpt {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-1);
  min-width: 0;
}
.agent-rcpt:last-child { border-bottom: 0; }
.agent-rcpt-name { font-weight: 600; font-size: 13px; color: var(--fg-0); overflow-wrap: break-word; }
.agent-rcpt-email {
  font-size: 12px;
  color: var(--fg-2);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  overflow-wrap: break-word;
}

/* Edit affordances on side panels — pencil button in the header,
   per-row delete button, inline add-row form. */
.agent-edit-btn {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--fg-2);
  font-family: inherit;
  font-weight: 500;
  transition: all 100ms ease;
}
.agent-edit-btn:hover {
  background: var(--bg-1);
  color: var(--sb-ultra-violet);
  border-color: var(--border-2);
}
.agent-row-del {
  background: transparent;
  border: 1px solid var(--border-2);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--fg-2);
  font-family: inherit;
  margin-left: 6px;
  transition: all 100ms ease;
}
.agent-row-del:hover {
  background: #fdecec;
  color: #9b1d1d;
  border-color: #d8a0a0;
}
.agent-row-del:disabled {
  opacity: 0.5;
  cursor: wait;
}
.agent-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-2);
}
.agent-add-row input,
.agent-add-row select {
  padding: 6px 10px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  background: white;
  min-width: 0;
}
.agent-add-row input:focus,
.agent-add-row select:focus {
  border-color: var(--sb-ultra-violet);
}

.agent-email {
  background: white;
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 12px 14px;
}
.agent-email-subject { font-weight: 600; color: var(--fg-0); font-size: 14px; margin-bottom: 6px; }
.agent-email-meta {
  font-size: 11px;
  color: var(--fg-2);
  margin-bottom: 10px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.agent-email-body {
  white-space: pre-wrap;
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.55;
  border-top: 1px dashed var(--border-1);
  padding-top: 10px;
}

/* Status chips inside the agent screen — small, neutral, color by status. */
.agent-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--bg-1);
  color: var(--fg-2);
}
.agent-status.draft { background: var(--bg-1); color: var(--fg-2); }
.agent-status.active { background: #d6efe2; color: #186e44; }
.agent-status.completed { background: #d6efe2; color: #186e44; }
.agent-status.queued { background: var(--bg-1); color: var(--fg-2); }
.agent-status.first_sent { background: #fff4d6; color: #7a5602; }
.agent-status.followup_sent { background: #fde4d4; color: #903b06; }
.agent-status.escalated { background: #fcd6d6; color: #9b1d1d; }
.agent-status.awaiting_approval { background: #efe9ff; color: #4d2cb8; }
.agent-status.paused { background: var(--bg-1); color: var(--fg-2); font-style: italic; }

/* Pill-style filter chips. Used on the collections list (status filter)
   and on the collection-view tile filter bar. Active = solid ultra-violet. */
.filter-chip {
  padding: 7px 14px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid #d4d2e3;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-0);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
  /* Chip labels are short ("All", "Download", "Completed") — never let
     them break letter-by-letter under the inherited overflow-wrap:
     anywhere rule on .mock-panel-body / .agent-panel-body. */
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-chip:hover {
  border-color: var(--sb-amethyst);
  color: var(--sb-amethyst);
}
.filter-chip.active {
  background: var(--sb-ultra-violet);
  color: white;
  border-color: var(--sb-ultra-violet);
  font-weight: 600;
}
.filter-chip.active:hover {
  background: var(--sb-amethyst);
  border-color: var(--sb-amethyst);
}
.filter-chip.active span {
  /* Count badge inside an active chip: lighten so it reads against the
     solid violet background. */
  background: rgba(255, 255, 255, .22) !important;
  color: white;
}

/* "+ New collection" — primary action button, matches the new-btn style
   used in the collections-list toolbar. */
.new-btn {
  margin-left: auto;
  background: var(--sb-ultra-violet);
  color: white;
  padding: 9px 16px;
  border-radius: 10px;
  border: 0;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease;
}
/* No color change on hover / active / focus — purple stays purple.
   Earlier iterations flashed white in Safari on click; the cleanest
   fix is to lock all interaction states to the same paint. */
.new-btn:hover,
.new-btn:active,
.new-btn:focus,
.new-btn:focus-visible {
  background: var(--sb-ultra-violet);
  color: white;
  outline: none;
  box-shadow: none;
}

/* Flat list-style container for Inbox + Sent rows — one outer card, rows
   share borders so the surface feels like a real list, not a stack of
   isolated tiles. */
.list-card {
  background: white;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  overflow: hidden;
}
.list-row:last-child { border-bottom: 0 !important; }
.list-row:hover { background: var(--bg-soft) !important; }

/* =================================================================== */
/* Operate flow — Collections list + Collection (tiles+chat) +         */
/* Recipient (chat+values) screens. Ported from Mock-Operate.html.     */
/* All classes are mock- or tile-prefixed to keep the surface scoped.  */
/* =================================================================== */

/* Collections-list table */
.mock-table {
  background: white;
  border: 1px solid var(--border-1);
  border-radius: 14px;
  overflow: hidden;
}
.mock-row {
  display: grid;
  grid-template-columns: 1.4fr 100px 1.2fr 140px 100px;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-1);
  cursor: pointer;
  transition: background 100ms ease;
}
.mock-row:last-child { border-bottom: 0; }
.mock-row:hover { background: var(--bg-1); }
.mock-row.head {
  background: var(--bg-1); cursor: default; padding: 10px 18px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--fg-2); font-weight: 600;
}
.mock-row.head:hover { background: var(--bg-1); }
.mock-row .name { font-weight: 600; color: var(--fg-0); font-size: 14px; }
.mock-row .meta { font-size: 12px; color: var(--fg-2); margin-top: 2px; }
.mock-row .progress {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--fg-1);
}
.mock-row .progress .bar {
  flex: 1; height: 6px; border-radius: 999px;
  background: var(--bg-1); overflow: hidden; max-width: 140px;
}
.mock-row .progress .bar > span { display: block; height: 100%; background: var(--sb-amethyst); }
.mock-row .activity { color: var(--fg-2); font-size: 12.5px; }
.mock-row .arrow { color: var(--fg-2); text-align: right; }

/* Collection view shell */
.mock-coll-head {
  padding: 18px 28px 14px;
  background: white;
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.back-btn {
  background: transparent;
  border: 1px solid var(--border-1);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--fg-1);
  cursor: pointer;
  font-family: inherit;
}
.back-btn:hover { background: var(--bg-1); }
.mock-coll-head .title {
  font-family: var(--font-head); font-weight: 600; font-size: 18px;
  color: var(--fg-0);
}
.mock-coll-head .subtitle { color: var(--fg-2); font-size: 13px; }
.mock-coll-head .kpis {
  margin-left: auto;
  display: flex; align-items: center; gap: 18px;
}
.mock-coll-head .kpi { display: flex; flex-direction: column; align-items: flex-end; }
.mock-coll-head .kpi .v {
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  color: var(--fg-0); line-height: 1.1;
}
.mock-coll-head .kpi .l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-2);
}
.mock-coll-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 0;
}
/* Flex column: toolbar (top, fixed) | scrolling tile area (flex 1) |
   brief (bottom, fixed). Lets long supplier lists scroll while the
   brief stays anchored at the bottom of the screen. */
.mock-coll-tiles {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mock-coll-tiles-top {
  padding: 22px 28px 0;
  flex-shrink: 0;
}
.mock-coll-tiles-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Top padding gives the tile-hover lift + the .needs-approval 3px
     box-shadow ring room to breathe — without it the outline gets
     clipped by the scroll container's overflow. */
  padding: 8px 28px 24px;
}
.mock-coll-tiles-brief {
  flex-shrink: 0;
  padding: 14px 28px 18px;
  border-top: 1px solid var(--border-1);
  background: white;
}
.mock-coll-tiles-brief > div {
  /* The BriefCard has its own card styling. Strip its bottom margin
     since the wrapper provides the spacing. */
  margin-bottom: 0 !important;
}
.mock-coll-tiles .filter-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.tile {
  background: white;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 100ms ease, transform 100ms ease;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.tile:hover {
  border-color: var(--sb-amethyst);
  transform: translateY(-1px);
}
.tile .name { font-weight: 600; font-size: 14px; color: var(--fg-0); }
.tile .email {
  font-size: 11.5px; color: var(--fg-2);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.tile .meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-size: 12px; color: var(--fg-2);
}
.tile .fill-bar {
  height: 4px; flex: 1; max-width: 80px;
  background: var(--bg-1); border-radius: 999px; overflow: hidden;
}
.tile .fill-bar > span { display: block; height: 100%; background: var(--sb-amethyst); }
.tile.escalated { border-color: #e2b6b6; }
.tile.completed { border-color: #2bbb7a; }
.tile.needs-approval {
  border-color: var(--sb-ultra-violet);
  box-shadow: 0 0 0 3px rgba(82, 47, 224, 0.08);
}
.approval-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sb-ultra-violet);
  color: white;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(82, 47, 224, 0.35);
  white-space: nowrap;
}
.approval-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #ffd24d;
  box-shadow: 0 0 0 2px rgba(255, 210, 77, 0.35);
  animation: tile-pulse 1.6s ease-in-out infinite;
}
@keyframes tile-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.approval-reason {
  font-size: 11.5px;
  color: var(--sb-ultra-violet);
  margin-top: 2px;
  font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}
.approval-reason::before {
  content: "→";
  font-weight: 700;
}

/* Collection chat right column */
.mock-coll-chat {
  display: flex; flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--border-1);
  background: white;
}
.mock-coll-chat .head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1);
}
.mock-coll-chat .head h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-0);
}
.mock-coll-chat .head .sub {
  font-size: 11px; color: var(--fg-2); margin-top: 4px;
}
.mock-coll-chat .msgs {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}

/* =========================================================================
   PageHeader — canonical header chrome reused by every workspace screen.
   Three rows (crumb + subtitle + toolbar) so the visual rhythm stays the
   same as you drill in. The last crumb is rendered as the title (big +
   bold); earlier crumbs render as small grey clickable links.
   ========================================================================= */
.page-header {
  padding: 18px 28px 0;
  background: white;
  border-bottom: 1px solid var(--border-1);
  display: flex; flex-direction: column; gap: 10px;
}
.page-header .crumb-row {
  display: flex; align-items: flex-end; gap: 16px;
}
.page-header .crumb-chain {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px;
  font-family: var(--font-head);
}
.page-header .crumb-link {
  color: var(--sb-ultra-violet);
  cursor: pointer;
  font-weight: 500;
  font-size: 13.5px;
  text-decoration: underline;
  text-decoration-color: rgba(82, 47, 224, 0.4);
  text-underline-offset: 3px;
  transition: color 100ms ease, text-decoration-color 100ms ease;
}
.page-header .crumb-link:hover {
  color: var(--sb-amethyst);
  text-decoration-color: var(--sb-amethyst);
}
.page-header .crumb-sep {
  color: var(--fg-3);
  font-weight: 400;
  font-size: 13.5px;
  user-select: none;
}
.page-header .crumb-current {
  color: var(--fg-0);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  /* Bumps to the next line if needed so long titles don't overflow */
  flex-basis: 100%;
}
/* Once you're at depth >= 2, the breadcrumb chain reads "parent › parent ›"
   on one line and the current title on the next. At depth 1 the title is
   the only thing in the row. Both shapes share the same vertical position. */
.page-header .crumb-chain:has(> :nth-child(2)) .crumb-current {
  margin-top: 2px;
}
.page-header .crumb-meta {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 18px;
  align-self: flex-end;
}
.page-header-subtitle {
  color: var(--fg-2);
  font-size: 13px;
  margin-top: -4px;
}
.page-header-toolbar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 0;
}

/* Workspace tabs — sit inside .page-header-toolbar. Underline-tab style
   distinguishes them from filter-chips (filters narrow within a tab). */
.workspace-tabs {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.workspace-tabs .tab {
  padding: 10px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color 100ms ease, border-color 100ms ease;
}
.workspace-tabs .tab:hover { color: var(--fg-0); }
.workspace-tabs .tab.active {
  color: var(--sb-ultra-violet);
  border-bottom-color: var(--sb-ultra-violet);
  font-weight: 600;
}
.workspace-tabs .tab .count {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-1);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-1);
}
.workspace-tabs .tab.active .count {
  background: var(--sb-ultra-violet);
  color: white;
}

/* Outer workspace shell. Two rows: header (auto) + body (1fr). */
.workspace {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  min-height: 0;
  background: var(--bg-soft);
}
.workspace-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 0;
}
.workspace-body.chat-collapsed {
  grid-template-columns: 1fr 44px;
}
.workspace-chat-toggle.collapsed {
  border: none;
  border-left: 1px solid var(--border-1);
  background: var(--bg-1);
  color: var(--fg-1);
  font-size: 18px;
  cursor: pointer;
  padding: 12px 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.workspace-chat-toggle.collapsed:hover {
  background: var(--sb-pale-amethyst);
}
.workspace-content {
  padding: 22px 28px 32px;
  overflow-y: auto;
  min-height: 0;
}
.workspace-chat {
  display: flex; flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--border-1);
  background: white;
}
.workspace-chat .head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1);
}
.workspace-chat .head h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-0);
}
.workspace-chat .head .sub {
  font-size: 11px; color: var(--fg-2); margin-top: 4px;
}
.workspace-chat .msgs {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}

/* KPI pills used in the per-campaign meta slot. Keep the same visual
   rhythm whether they sit in the meta slot or stand alone. */
.page-header .kpis {
  display: flex; align-items: center; gap: 18px;
}
.page-header .kpi { display: flex; flex-direction: column; align-items: flex-end; }
.page-header .kpi .v {
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  color: var(--fg-0); line-height: 1.1;
}
.page-header .kpi .l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-2);
}

/* Recipient view */
.mock-rcp-head {
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; gap: 12px;
}
.mock-rcp-head .crumbs { font-size: 12px; color: var(--fg-2); }
.mock-rcp-head .crumbs a { color: var(--fg-1); cursor: pointer; }
.mock-rcp-head .who {
  font-family: var(--font-head); font-weight: 600; font-size: 16px;
  color: var(--fg-0);
}
.mock-rcp-head .em {
  font-size: 12px; color: var(--fg-2);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.mock-rcp-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  min-height: 0;
}
.mock-rcp-chat-col {
  display: flex; flex-direction: column;
  min-height: 0; background: white;
  border-right: 1px solid var(--border-1);
}
.mock-rcp-events {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.mock-rcp-side {
  padding: 18px 18px 96px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
  min-height: 0;
}

/* Operate-flow event styles */
.mock-event-milestone {
  align-self: center; text-align: center;
  font-size: 12px; color: var(--fg-2);
  padding: 8px 14px;
  background: var(--bg-1);
  border-radius: 999px;
}
.mock-event-tool {
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px dashed var(--border-1);
  border-radius: 8px;
  font-size: 12px; color: var(--fg-2);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.mock-event-tool .tname { color: var(--sb-amethyst); font-weight: 600; }
.mock-event-tool .tdetail { color: var(--fg-1); }
/* Three lanes by role:
   - Agent-side (outbound, drafts): light grey, sits on the left.
   - Supplier-side (inbound, bounces): warm sand color, sits on the left
     too but distinguished by tint so you can scan who's talking.
   - User-in-app messages (typed in our chat): solid violet on the right.
   Drafts sit visibly somewhere between agent and approval-pending state
   — purple-tinted to mark "needs your action". */
.mock-event-inbound, .mock-event-outbound, .mock-event-bounce, .mock-event-draft {
  align-self: flex-start;
  border-radius: 12px;
  padding: 14px 16px;
  max-width: 88%;
  position: relative;
}
.mock-event-outbound, .mock-event-draft {
  /* Agent-side: cool grey */
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.mock-event-inbound, .mock-event-bounce {
  /* Supplier-side: warm sand */
  background: #fdf6e8;
  border: 1px solid #ead7a8;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.mock-event-bounce { background: #fff0f0; border-color: #e2b6b6; }
.mock-event-draft {
  /* Pending-approval: amethyst tint so the user notices it's awaiting them */
  background: #f6f3ff;
  border-color: var(--sb-pale-amethyst);
  border-left: 3px solid var(--sb-ultra-violet);
}
/* While editing, the 100%-width inputs have no intrinsic width, so the
   flex-start card would collapse to min-content. Stretch it to the
   normal max-width instead. */
.mock-event-draft.editing { align-self: stretch; }

/* Lane label — small chip at the top-left of each event so you can
   tell at a glance who's speaking (agent / supplier / draft). */
.mock-event-lane {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
}
.mock-event-lane.agent {
  background: white;
  color: var(--sb-amethyst);
  border: 1px solid var(--sb-pale-amethyst);
}
.mock-event-lane.supplier {
  background: white;
  color: #8a6f1c;
  border: 1px solid #e6d693;
}
.mock-event-lane.bounce {
  background: white;
  color: #9b1d1d;
  border: 1px solid #e2b6b6;
}
.mock-event-lane.draft {
  background: var(--sb-ultra-violet);
  color: white;
}
.mock-event-lane .dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: currentColor;
}
.mock-event-inbound .ts, .mock-event-outbound .ts, .mock-event-bounce .ts, .mock-event-draft .ts {
  font-size: 11px; color: var(--fg-3); letter-spacing: .04em;
  margin-bottom: 4px;
}
.mock-event-outbound .ts, .mock-event-draft .ts { text-align: left; }
.mock-event-inbound .from, .mock-event-outbound .from, .mock-event-bounce .from, .mock-event-draft .from {
  font-size: 11.5px; color: var(--fg-2);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  margin-bottom: 8px;
  display: flex; gap: 10px; align-items: baseline;
  flex-wrap: wrap;
}
.mock-event-outbound .from { justify-content: flex-start; }
.mock-event-inbound .from .who, .mock-event-outbound .from .who, .mock-event-bounce .from .who, .mock-event-draft .from .who {
  color: var(--fg-0); font-weight: 600; font-family: var(--font-body);
  font-size: 13px;
}
.mock-event-inbound .body-text, .mock-event-outbound .body-text, .mock-event-bounce .body-text, .mock-event-draft .body-text {
  font-size: 13.5px; line-height: 1.55;
  color: var(--fg-1); white-space: pre-wrap;
}
.mock-event-bounce .body-text { color: #6f1f1f; }
.mock-draft-actions {
  display: flex; gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-1);
}
.mock-draft-actions button {
  padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--sb-ultra-violet);
  background: white; color: var(--sb-ultra-violet);
  font-weight: 600; font-size: 12.5px;
  cursor: pointer; font-family: inherit;
}
.mock-draft-actions button.primary {
  background: var(--sb-ultra-violet); color: white;
}
.mock-draft-actions button:hover {
  background: var(--sb-amethyst); border-color: var(--sb-amethyst); color: white;
}
/* Draft subject row with the inline edit (pencil) affordance.
   The pencil button reuses .agent-edit-btn (same as the campaign brief). */
.mock-draft-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.mock-draft-head .agent-edit-btn { flex: none; }
/* Inline edit form for a pending draft */
.mock-draft-edit {
  display: flex; flex-direction: column; gap: 8px;
}
.mock-draft-subject-input, .mock-draft-body-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border-1); background: white;
  color: var(--fg-0); font-family: inherit;
}
.mock-draft-subject-input { font-weight: 600; font-size: 13.5px; }
.mock-draft-body-input { font-size: 13.5px; line-height: 1.55; resize: vertical; }
.mock-draft-subject-input:focus, .mock-draft-body-input:focus {
  outline: none; border-color: var(--sb-ultra-violet);
}
.mock-event-user {
  align-self: flex-end;
  background: var(--sb-ultra-violet); color: white;
  padding: 10px 14px; border-radius: 12px;
  border-bottom-right-radius: 4px;
  font-size: 13.5px; max-width: 80%;
}
.mock-event-agent {
  align-self: flex-start;
  background: var(--bg-1); border: 1px solid var(--border-1);
  padding: 10px 14px; border-radius: 12px;
  border-bottom-left-radius: 4px;
  font-size: 13.5px; color: var(--fg-0);
}

/* Side-panel cards reused on both Collection and Recipient screens */
.mock-panel {
  background: white; border: 1px solid var(--border-1);
  border-radius: 14px; overflow: hidden;
  /* Same trap as .agent-panel: this lives in .mock-rcp-side, a flex
     column with overflow-y: auto. Default flex-shrink: 1 lets the
     column squeeze panels below their natural height instead of
     overflowing, which clips body content via the panel's own
     overflow:hidden and never engages the column scrollbar. */
  flex-shrink: 0;
  min-width: 0;
}
.mock-panel header {
  padding: 11px 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.mock-panel header h3 {
  margin: 0;
  font-family: var(--font-head); font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-0);
  min-width: 0;
  overflow-wrap: break-word;
}
.mock-panel-body {
  padding: 14px; font-size: 13px; color: var(--fg-1);
  overflow-wrap: break-word;
  word-break: break-word;
}
.field-line {
  /* Vertical stack: label on top (muted, regular weight), value below
     (bolder). The old side-by-side grid worked when both fit on one
     row but collapsed catastrophically once either side ran long —
     `minmax(0, auto)` on the value column let it grow to natural
     width and squeeze the label column to near-zero, which combined
     with overflow-wrap to render labels letter-by-letter ("Rare Earth
     Elements Present" → R / a / r / e / ...). The stack avoids all
     of that without losing density. */
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-1);
  font-size: 13px;
}
.field-line > * { min-width: 0; }
.field-line:last-child { border-bottom: 0; }
/* `break-word` (not `anywhere`) so multi-word text wraps on spaces
   first, only falling back to mid-token breaks for genuinely unbreakable
   strings like URLs / IDs / long emails. `anywhere` was too aggressive
   and caused per-character wrapping when the column was tight. */
.field-line .l { color: var(--fg-2); font-weight: 500; overflow-wrap: break-word; margin-bottom: 3px; }
.field-line .v { color: var(--fg-0); font-weight: 600; overflow-wrap: break-word; }
.field-line .v.missing { color: var(--fg-3); font-weight: 500; font-style: italic; }
.field-line .conf { font-size: 11px; color: var(--fg-2); margin-left: 6px; }

/* Campaign picker (dropdown in the chat header) */
.agent-picker {
  position: relative;
  margin-left: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.agent-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  color: var(--fg-0);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.agent-picker-btn:hover { background: white; border-color: var(--sb-pale-amethyst); }
.agent-picker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
.agent-picker-caret { color: var(--fg-2); font-size: 11px; margin-left: 4px; }
.agent-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: min(420px, calc(100vw - 60px));
  max-height: 70vh;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 14, 60, .12), 0 4px 12px rgba(20, 14, 60, .06);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agent-picker-item {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  transition: background 100ms ease;
}
.agent-picker-item:hover:not(:disabled) { background: var(--bg-1); }
.agent-picker-item.current {
  background: var(--sb-pale-amethyst);
  cursor: default;
}
.agent-picker-item:disabled { cursor: not-allowed; }
.agent-picker-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.agent-picker-item-name {
  font-weight: 600;
  color: var(--fg-0);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.agent-picker-item-sub {
  font-size: 11px;
  color: var(--fg-2);
}
.agent-picker-new {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--sb-ultra-violet);
  font-weight: 600;
  font-size: 13px;
  border: 1px dashed var(--sb-pale-amethyst);
}
.agent-picker-new .plus { font-size: 16px; line-height: 1; }
.agent-picker-sep {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-2);
  padding: 8px 10px 4px;
}
.agent-picker-empty {
  padding: 14px;
  text-align: center;
  color: var(--fg-2);
  font-style: italic;
  font-size: 13px;
}