/* Blueprint design system — ported from training-manual-generator (Figma: Video Processing
   App). The umbrella front door adopts its tokens, glassy nav rail, panels, buttons, chips
   and pipeline stepper so the six services read as one product. Light theme only. */

:root {
  /* color/blue */
  --blue-000: #f5f5fe;
  --blue-100: #e9eafc;
  --blue-200: #d7d9fa;
  --blue-300: #aab0f4;
  --blue-400: #818aee;
  --blue-500: #5965e9;
  --blue-700: #1a28c1;
  /* color/dark blue */
  --dark-blue-000: #f2f5f9;
  --dark-blue-100: #ccd6e8;
  --dark-blue-200: #99add1;
  --dark-blue-300: #6785bb;
  --dark-blue-400: #4166a9;
  --dark-blue-500: #25509d;
  --dark-blue-600: #00338d;
  --dark-blue-700: #01286f;
  --dark-blue-800: #011f56;
  /* color/neutral */
  --neutral-100: #f1f1f3;
  --neutral-200: #e3e3e8;
  --neutral-300: #d5d5dc;
  --neutral-400: #c7c7d1;
  --neutral-500: #b8b8c4;
  --neutral-600: #9090a2;
  --neutral-700: #454554;
  --neutral-900: #000000;
  --ink-darkest: #2f2f39;
  /* semantic */
  --action: #1e49e2;
  --action-lightest: #e9eafc;
  --error: #e6256b;
  --red-000: #fff6fa;
  --red-100: #ffcedf;
  --red-300: #fb8eb5;
  --red-700: #cf0e54;
  --red-800: #b60243;
  --green-000: #e6f1ee;
  --green-200: #b1dccf;
  --green-900: #0a7253;
  --surface: #ffffff;
  --outline: var(--neutral-300);
  /* corners */
  --corner-xs: 4px;
  --corner-sm: 8px;
  --corner-md: 12px;
  --corner-lg: 16px;
  --corner-full: 1000px;
  /* elevation */
  --shadow-card: 0 14px 32px rgba(1, 40, 111, 0.15);
  --shadow-soft: 0 6px 18px rgba(1, 40, 111, 0.08);
  /* layout */
  --rail-w: 60px;
  --rail-gap: 20px;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--neutral-900);
  background:
    url('/bg-blob.svg') no-repeat -22% -30% / 168% auto,
    linear-gradient(180deg, var(--dark-blue-000) 0%, var(--dark-blue-100) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
a {
  color: var(--blue-700);
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--corner-xs);
}

/* ── app shell + nav rail ─────────────────────────────────── */
.shell {
  min-height: 100vh;
}
.main {
  padding: 24px 40px 40px calc(var(--rail-gap) + var(--rail-w) + 20px);
}

.nav {
  position: fixed;
  left: var(--rail-gap);
  top: 24px;
  bottom: 24px;
  width: var(--rail-w);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 24px;
  z-index: 20;
}
.nav-logo {
  background: var(--dark-blue-600);
  border: 0;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: var(--shadow-soft);
}
.nav-octo {
  font-size: 22px;
  line-height: 1;
}
.nav-kpmg {
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.nav-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  flex: 1;
}
.nav-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--neutral-700);
  width: 36px;
  height: 36px;
  border-radius: var(--corner-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nav-btn:hover {
  background: rgba(215, 217, 250, 0.55);
  color: var(--dark-blue-600);
}
/* Instant hover tooltip to the right of the rail — reads the button's aria-label. */
.nav-btn::after {
  content: attr(aria-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  white-space: nowrap;
  background: var(--neutral-900, #1a1a2e);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 60;
}
.nav-btn::before {
  content: '';
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--neutral-900, #1a1a2e);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 60;
}
.nav-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.nav-btn:hover::before {
  opacity: 1;
}
.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dark-blue-600);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}

/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.brand h1 {
  margin: 0;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  color: var(--dark-blue-700);
}
.brand .sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--neutral-700);
}
.system-status {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 60%;
  justify-content: flex-end;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: var(--corner-full);
  border: 1px solid var(--outline);
  background: rgba(255, 255, 255, 0.75);
  color: var(--neutral-700);
  white-space: nowrap;
}
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neutral-500);
}
.pill.up .dot {
  background: var(--green-900);
}
.pill.up.sample .dot {
  background: var(--blue-500);
}
.pill.down {
  opacity: 0.6;
}

/* ── grid of regions ─────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 980px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.panel {
  background: var(--surface);
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-soft);
}
.region {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  max-height: calc(100vh - 160px);
  overflow: hidden;
  scroll-margin-top: 24px;
}
.region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--neutral-200);
}
.region-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--dark-blue-700);
}
.region-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
}

/* region offline state — truthful, not a placeholder */
.region.down {
  opacity: 0.75;
}
.region.down .region-body::before {
  content: attr(data-offline);
  display: block;
  color: var(--neutral-600);
  font-size: 13px;
  padding: 10px 0;
}

/* ── badges (sample vs live vs mode) ─────────────────────── */
.badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--corner-xs);
  border: 1px solid var(--neutral-300);
  color: var(--neutral-700);
  background: var(--neutral-100);
}
.badge.live {
  color: var(--green-900);
  background: var(--green-000);
  border-color: var(--green-200);
}
.badge.sample {
  color: var(--dark-blue-600);
  background: var(--dark-blue-100);
  border-color: var(--dark-blue-200);
}
.badge.warn {
  color: var(--dark-blue-600);
  background: var(--blue-100);
  border-color: var(--blue-200);
}
.badge:empty {
  display: none;
}

/* ── YOUR DAY · the brief (push-model home) ──────────────────── */
.brief {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1100px;
}
.brief-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px) {
  .brief-2col {
    grid-template-columns: 1fr;
  }
}
.bcard {
  background: var(--surface);
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.bcard-wide {
  border-top: 3px solid var(--action);
}
.bcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--neutral-200);
}
.bcard-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-blue-700);
}
.bcard-ic {
  font-size: 16px;
}
.bcard-body {
  padding: 16px 18px;
}
.bcard-sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--neutral-700);
  line-height: 1.5;
}
.gate-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dark-blue-600);
  background: var(--blue-100);
  border-radius: var(--corner-full);
  padding: 2px 8px;
}

/* standup draft */
.su-block {
  margin-bottom: 14px;
}
.su-block:last-child {
  margin-bottom: 0;
}
.su-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dark-blue-500);
  margin-bottom: 7px;
}
.su-line {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink-darkest);
  padding: 4px 0;
  line-height: 1.45;
}
.su-line .su-bullet {
  color: var(--action);
  flex: 0 0 auto;
}
.su-src {
  font-size: 11px;
  color: var(--neutral-600);
}
.su-actions {
  display: flex;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--neutral-200);
  align-items: center;
  flex-wrap: wrap;
}

/* in-flight rows */
.if-row {
  display: flex;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--neutral-200);
}
.if-row:last-child {
  border-bottom: 0;
}
.if-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 5px;
  background: var(--neutral-400);
}
.if-dot.st-accepted {
  background: var(--green-900);
}
.if-dot.st-needs_review {
  background: var(--action);
}
.if-main {
  flex: 1;
  min-width: 0;
}
.if-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-darkest);
}
.if-meta {
  font-size: 11.5px;
  color: var(--neutral-600);
  margin-top: 3px;
}
.if-change {
  font-size: 11.5px;
  color: var(--dark-blue-600);
  margin-top: 5px;
  background: var(--blue-000);
  border: 1px solid var(--blue-100);
  border-radius: var(--corner-sm);
  padding: 5px 9px;
}
.if-change em {
  font-style: normal;
  font-weight: 700;
}

/* approvals reuse .card; ensure spacing when inside brief */
#brief-approvals .card {
  margin-bottom: 10px;
}
#brief-approvals .card:last-child {
  margin-bottom: 0;
}

/* last-meeting capture */
.mtg-hd {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dark-blue-700);
}
.mtg-when {
  font-size: 11.5px;
  color: var(--neutral-600);
  margin: 2px 0 12px;
}
.mtg-lane {
  font-size: 12.5px;
  color: var(--ink-darkest);
  padding: 6px 0;
  display: flex;
  gap: 8px;
}
.mtg-lane .mtg-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: var(--corner-xs);
  padding: 2px 7px;
  height: fit-content;
  background: var(--neutral-100);
  color: var(--neutral-700);
}

/* inject + ask input rows */
.bcard textarea,
.bcard input[type='text'] {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--ink-darkest);
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--corner-md);
  padding: 9px 12px;
  resize: vertical;
}
.bcard textarea:focus,
.bcard input[type='text']:focus {
  border-color: var(--action);
  outline: none;
}
.inject-row,
.ask-row {
  display: flex;
  gap: 9px;
  margin-top: 9px;
}
.inject-row input {
  flex: 1;
}
.ask-row input {
  flex: 1;
}
.inject-log {
  margin-top: 10px;
}
.inject-log .il-row {
  font-size: 12px;
  color: var(--neutral-700);
  padding: 5px 0;
  border-top: 1px solid var(--neutral-200);
}
.inject-log .il-row b {
  color: var(--dark-blue-600);
}
.ask-answer {
  margin-top: 12px;
}
.ask-answer .aa-reply {
  font-size: 13px;
  color: var(--ink-darkest);
  line-height: 1.5;
  background: var(--blue-000);
  border: 1px solid var(--blue-100);
  border-radius: var(--corner-md);
  padding: 11px 13px;
}
.ask-answer .aa-srcs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ask-answer .aa-src {
  font-size: 11px;
  color: var(--dark-blue-600);
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-full);
  padding: 3px 10px;
}
.bempty {
  font-size: 12.5px;
  color: var(--neutral-600);
  line-height: 1.5;
  padding: 6px 0;
}

/* ── OVERVIEW · the landing page (Blueprint hero) ────────────── */
.landing {
  max-width: 1180px;
  margin: 0 auto;
}
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  padding: 34px 0 26px;
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-art {
    display: none;
  }
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--corner-full);
  background: rgba(0, 51, 141, 0.07);
  color: var(--dark-blue-600);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hk-octo {
  font-size: 16px;
  text-transform: none;
}
.hero-title {
  margin: 0;
  font-size: 52px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--dark-blue-700);
}
.hero-sub {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--neutral-700);
}
.hero-sub b {
  color: var(--dark-blue-600);
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}
.hero-cta.center {
  justify-content: center;
  margin-top: 22px;
}
.btn-gradient {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  padding: 13px 30px;
  border-radius: var(--corner-full);
  background: linear-gradient(95deg, var(--blue-500) 0%, var(--action) 55%, var(--blue-700) 100%);
  box-shadow: 0 10px 24px rgba(30, 73, 226, 0.32);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-gradient:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(30, 73, 226, 0.4);
}
.btn-quiet {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-blue-600);
}
.btn-quiet:hover {
  color: var(--action);
}
.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-art svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  filter: drop-shadow(0 24px 44px rgba(1, 40, 111, 0.18));
}

/* sections */
.lp-section {
  margin-top: 42px;
  text-align: center;
}
.pill-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark-blue-600);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--blue-200);
  border-radius: var(--corner-full);
  padding: 8px 22px;
  box-shadow: var(--shadow-soft);
}
/* Landing wayfinding — concise "where to go" for a leadership audience. */
.lp-wayfinding {
  margin-top: 34px;
  text-align: center;
}
.wf-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 1040px) {
  .wf-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wf-links { grid-template-columns: 1fr; }
}
.wf-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 16px 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--blue-200);
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.wf-link:hover {
  transform: translateY(-2px);
  border-color: var(--blue-500);
  box-shadow: var(--shadow-card);
}
.wf-link b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dark-blue-700);
}
.wf-link span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--neutral-600);
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 26px;
}
@media (max-width: 860px) {
  .feature-row {
    grid-template-columns: 1fr;
  }
}
.feature-card {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
  text-align: left;
}
.feature-ic {
  display: block;
  width: 34px;
  height: 4px;
  border-radius: var(--corner-full);
}
.ic-a {
  background: var(--dark-blue-600);
}
.ic-b {
  background: var(--blue-500);
}
.ic-c {
  background: var(--blue-700);
}
.feature-card h3 {
  margin: 16px 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--dark-blue-700);
}
.feature-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--neutral-700);
}
.lp-getstarted {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-card);
  padding: 34px 28px 38px;
  margin-bottom: 20px;
}
.lp-h2 {
  margin: 18px auto 0;
  max-width: 720px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--dark-blue-700);
}
.lp-lead {
  margin: 14px auto 0;
  max-width: 640px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--neutral-700);
}

/* ── system overview ("what's actually running") — landing page reference for
   "what is X doing" questions. Same card language as .feature-card, plus a live
   status pill sourced straight from /api/health. */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
  text-align: left;
}
@media (max-width: 980px) {
  .sys-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sys-grid { grid-template-columns: 1fr; }
}
.sys-card {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
.sys-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sys-ic { font-size: 17px; line-height: 1; }
.sys-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--dark-blue-700); flex: 1; }
.sys-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--corner-full); border: 1px solid var(--outline);
  background: rgba(255, 255, 255, 0.8); color: var(--neutral-700); white-space: nowrap;
}
.sys-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-500); }
.sys-pill.up .dot { background: var(--green-900); }
.sys-pill.sample .dot { background: var(--blue-500); }
.sys-pill.down { opacity: 0.65; }
.sys-about { margin: 12px 0 8px; font-size: 13px; line-height: 1.55; color: var(--neutral-700); }
.sys-mode { margin: 0; font-size: 11px; color: var(--neutral-500); font-family: var(--font-mono, monospace); }

/* ── chat ────────────────────────────────────────────────── */
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
}
.msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: var(--corner-md);
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.msg.user {
  align-self: flex-end;
  background: var(--action);
  color: #fff;
  border-bottom-right-radius: var(--corner-xs);
}
.msg.bot {
  align-self: flex-start;
  background: var(--blue-000);
  border: 1px solid var(--blue-100);
  color: var(--ink-darkest);
  border-bottom-left-radius: var(--corner-xs);
}
.msg.sys {
  align-self: center;
  background: transparent;
  color: var(--neutral-600);
  font-size: 12px;
}
.sources {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}
.src-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--corner-xs);
  background: var(--surface);
  border: 1px solid var(--outline);
  color: var(--neutral-700);
}
.src-chip b {
  color: var(--dark-blue-600);
  font-weight: 600;
}
.chat-input {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--neutral-200);
  position: sticky;
  bottom: 0;
  background: var(--surface);
}
.chat-input input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--corner-full);
  padding: 10px 16px;
  color: var(--neutral-900);
  font-size: 13.5px;
  font-family: inherit;
}
.chat-input input:focus {
  outline: none;
  border-color: var(--action);
}

/* ── buttons ─────────────────────────────────────────────── */
.btn-primary {
  background: var(--action);
  color: #fff;
  border: 0;
  border-radius: var(--corner-full);
  height: 40px;
  padding: 10px 24px;
  font-size: 14px;
  line-height: 20px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:hover {
  background: var(--blue-700);
}
.btn-primary:disabled {
  background: var(--neutral-200);
  color: var(--neutral-600);
  cursor: default;
}
/* generic button fallback (used by proposal ghost/dismiss) */
button {
  font-family: inherit;
  cursor: pointer;
}
button.ghost {
  background: var(--surface);
  border: 1px solid var(--outline);
  color: var(--neutral-700);
  border-radius: var(--corner-full);
  padding: 8px 16px;
  font-size: 13px;
}
button.ghost:hover {
  background: var(--action-lightest);
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── lists (meetings / decisions) ────────────────────────── */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--neutral-200);
}
.row:last-child {
  border-bottom: none;
}
.row .meta {
  min-width: 0;
}
.row .title {
  font-size: 13.5px;
  color: var(--ink-darkest);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .when {
  font-size: 11.5px;
  color: var(--neutral-600);
}
.empty {
  color: var(--neutral-700);
  font-size: 13px;
  padding: 24px 8px;
  text-align: center;
}

/* ── cards (proposals) ───────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--corner-md);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-darkest);
}
.card .cite {
  font-size: 11.5px;
  color: var(--neutral-600);
  margin: 8px 0 12px;
  border-left: 2px solid var(--blue-200);
  padding-left: 8px;
}
.card .actions {
  display: flex;
  gap: 10px;
}

/* ── attend toggle ───────────────────────────────────────── */
.toggle {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--corner-full);
  border: 1px solid var(--blue-700);
  background: transparent;
  color: var(--blue-700);
  cursor: pointer;
  white-space: nowrap;
}
.toggle:hover {
  background: var(--action-lightest);
}
.toggle.on {
  background: var(--dark-blue-100);
  border-color: var(--dark-blue-200);
  color: var(--dark-blue-800);
}

/* ── status chip (Blueprint) — ready for the Phase 2 job feed ─ */
.chip-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: var(--corner-xs);
  border: 1px solid transparent;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}
.chip-status.done {
  background: var(--green-000);
  border-color: var(--green-200);
  color: var(--green-900);
}
.chip-status.running,
.chip-status.queued {
  background: var(--dark-blue-100);
  border-color: var(--dark-blue-200);
  color: var(--dark-blue-800);
}
.chip-status.failed {
  background: var(--red-100);
  border-color: var(--red-300);
  color: var(--red-800);
}
.chip-status.cancelled {
  background: var(--neutral-200);
  border-color: var(--neutral-400);
  color: var(--neutral-700);
}

/* ── pipeline stepper (Blueprint) — ready for the Phase 2 job feed ─ */
.stepper {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 12px 0 0;
  padding: 12px 0;
  width: 100%;
}
.step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  min-width: 0;
}
.step-line {
  position: absolute;
  top: 15px;
  right: 50%;
  width: 100%;
  transform: translateX(-16px);
  height: 2px;
  border-radius: 2px;
  background: var(--neutral-200);
}
.step.complete .step-line {
  background: var(--dark-blue-200);
}
.step-circle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--neutral-200);
  background: var(--surface);
  font-size: 14px;
  font-weight: 700;
  color: var(--neutral-500);
}
.step.complete .step-circle {
  border: 0;
  background: var(--dark-blue-200);
  color: #fff;
}
.step.error .step-circle {
  border-color: var(--red-300);
  color: var(--red-800);
}
.step.active .step-circle {
  border-color: var(--dark-blue-100);
  color: var(--dark-blue-500);
}
.step.active .step-circle::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid transparent;
  border-top-color: var(--dark-blue-500);
  border-radius: var(--corner-full);
  animation: step-spin 1.1s linear infinite;
}
.step.active .step-line {
  background: var(--dark-blue-200);
}
.step.active .step-name {
  color: var(--dark-blue-500);
}
@keyframes step-spin {
  to {
    transform: rotate(360deg);
  }
}
.step-name {
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  text-align: center;
  color: var(--neutral-600);
}
.step.complete .step-name {
  color: var(--dark-blue-500);
}
.step.error .step-name {
  color: var(--red-800);
}
.stepper.settled .step-name {
  color: var(--neutral-700);
}

/* ── views ───────────────────────────────────────────────── */
.view[hidden] {
  display: none;
}

/* ── calendar: toolbar ───────────────────────────────────── */
.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-arrow {
  width: 32px;
  height: 32px;
  border-radius: var(--corner-full);
  border: 1px solid var(--outline);
  background: var(--surface);
  color: var(--dark-blue-600);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.cal-arrow:hover {
  background: var(--action-lightest);
}
.cal-range {
  margin: 0 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--dark-blue-700);
}
.cal-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.seg {
  display: inline-flex;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-full);
  padding: 2px;
}
.seg-btn {
  border: 0;
  background: transparent;
  color: var(--neutral-700);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--corner-full);
  cursor: pointer;
}
.seg-btn.active {
  background: var(--surface);
  color: var(--dark-blue-600);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

/* ── calendar: week grid ─────────────────────────────────── */
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.cal-col {
  background: var(--surface);
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-md);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cal-col.today {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 1px var(--blue-300) inset;
}
.cal-colhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--neutral-200);
  background: var(--dark-blue-000);
}
.cal-col.today .cal-colhead {
  background: var(--blue-100);
}
.cal-colhead .dow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--neutral-600);
  text-transform: uppercase;
}
.cal-colhead .dnum {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-blue-700);
}
.cal-collist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  overflow-y: auto;
}
.cal-none {
  color: var(--neutral-400);
  text-align: center;
  font-size: 12px;
  padding: 8px 0;
}

/* ── calendar: event block ───────────────────────────────── */
.evt {
  border: 1px solid var(--blue-200);
  border-left: 3px solid var(--blue-500);
  background: var(--blue-000);
  border-radius: var(--corner-sm);
  padding: 6px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  transition: box-shadow 0.12s ease;
}
.evt:hover {
  box-shadow: var(--shadow-soft);
}
.evt-time {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--dark-blue-500);
}
.evt-title {
  font-size: 12.5px;
  color: var(--ink-darkest);
  line-height: 1.3;
}
.evt.compact .evt-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evt-marks {
  position: absolute;
  top: 5px;
  right: 6px;
  display: flex;
  gap: 3px;
  font-size: 11px;
}
.evt-tier {
  color: var(--green-900);
  font-weight: 700;
}
/* attending: teammate is set to show up */
.evt.attending {
  border-left-color: var(--dark-blue-500);
}
/* past: dimmed; upcoming/live keep full ink */
.evt-past {
  opacity: 0.62;
  background: var(--neutral-100);
  border-left-color: var(--neutral-400);
}
.evt-live {
  border-left-color: var(--green-900);
  background: var(--green-000);
}

/* ── one-click lifecycle action on the card (connect → capture) ─────────────── */
.evt-act {
  margin-top: 4px;
  align-self: flex-start;
  border: 1px solid var(--blue-300);
  background: var(--blue-500);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}
.evt-act:hover { filter: brightness(1.06); transform: translateY(-1px); }
.evt-act.connect.live {
  background: var(--green-900);
  border-color: var(--green-900);
  animation: evt-pulse 1.8s ease-in-out infinite;
}
.evt-act.captured {
  background: transparent;
  color: var(--dark-blue-500);
  border-color: var(--blue-200);
}
/* an armed, connectable card gets a subtly stronger rail so it reads as "ready" */
.evt.connectable { border-left-color: var(--blue-500); }
@keyframes evt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 122, 87, 0.42); }
  50% { box-shadow: 0 0 0 4px rgba(16, 122, 87, 0); }
}

/* ── input-lane "next up" one-click connect ────────────────────────────────── */
.mini-row.connectable { align-items: center; }
.mini-connect {
  margin-left: auto;
  border: 1px solid var(--blue-300);
  background: var(--blue-500);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.mini-connect.ghost { background: transparent; color: var(--dark-blue-500); border-color: var(--blue-200); }
.mini-connect:hover { filter: brightness(1.06); }

/* ── meeting picker: section heads + connect rows ──────────────────────────── */
.mp-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 10px 2px 4px;
}
.mp-item.connect { border-left: 3px solid var(--blue-500); }
.mp-item.connect.live { border-left-color: var(--green-900); }
.mp-go {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-600, var(--blue-500));
}
.mp-item.connect.live .mp-go { color: var(--green-900); }

/* ── calendar: day view ──────────────────────────────────── */
.cal-day {
  background: var(--surface);
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-md);
  overflow: hidden;
  max-width: 720px;
}
.cal-dayhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--neutral-200);
  background: var(--dark-blue-000);
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-blue-700);
}
.cal-dayhead.today {
  background: var(--blue-100);
}
.cal-dayhead .muted {
  font-size: 13px;
  font-weight: 400;
  color: var(--neutral-600);
}
.cal-daylist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
}
.cal-daylist .evt {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.cal-daylist .evt-title {
  font-size: 14px;
}

/* ── calendar: month grid ────────────────────────────────── */
.cal-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-monthdow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--neutral-600);
  text-transform: uppercase;
  text-align: center;
  padding: 4px 0;
}
.cal-cell {
  background: var(--surface);
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-sm);
  min-height: 96px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-cell.out {
  background: var(--neutral-100);
  opacity: 0.6;
}
.cal-cell.today {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 1px var(--blue-300) inset;
}
.cal-cellnum {
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-700);
}
.cal-cell.today .cal-cellnum {
  color: var(--blue-700);
}
.mchip {
  font-size: 10.5px;
  padding: 2px 5px;
  border-radius: var(--corner-xs);
  background: var(--blue-100);
  border-left: 2px solid var(--blue-500);
  color: var(--dark-blue-700);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mchip.attending {
  border-left-color: var(--dark-blue-500);
}
.mchip.evt-past {
  background: var(--neutral-100);
  border-left-color: var(--neutral-400);
  color: var(--neutral-600);
}
.mmore {
  font-size: 10px;
  color: var(--neutral-600);
}

/* ── modals (ported Blueprint) ───────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(1, 31, 86, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-overlay[hidden] {
  display: none;
}
.modal {
  width: 560px;
  max-width: 100%;
  max-height: 90vh;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--corner-md);
  box-shadow: var(--shadow-card);
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-content h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--dark-blue-700);
}
.modal-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.btn-outline {
  background: var(--surface);
  border: 1px solid var(--blue-700);
  color: var(--blue-700);
  border-radius: var(--corner-full);
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline:hover {
  background: var(--action-lightest);
}
.btn-text {
  background: none;
  border: 0;
  color: var(--blue-700);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--corner-sm);
  cursor: pointer;
}
.btn-text:hover {
  background: var(--action-lightest);
}
.btn-ghost-danger {
  background: none;
  border: 0;
  color: var(--error);
  border-radius: var(--corner-full);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  margin-right: auto;
}
.btn-ghost-danger:hover {
  background: var(--red-000);
}

/* ── add-meeting form ────────────────────────────────────── */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
}
.modal-form label .opt {
  font-weight: 400;
  color: var(--neutral-600);
}
.modal-form input[type='text'],
.modal-form input[type='url'],
.modal-form input[type='date'],
.modal-form input[type='time'] {
  border: 1px solid var(--outline);
  border-radius: var(--corner-sm);
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--neutral-900);
}
.modal-form input:focus {
  outline: none;
  border-color: var(--action);
}
.form-row {
  display: flex;
  gap: 12px;
}
.form-row label {
  flex: 1;
}
.checkline {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  font-weight: 400 !important;
  color: var(--ink-darkest) !important;
}

/* ── meeting detail ──────────────────────────────────────── */
.detail-when {
  margin: 0;
  font-size: 13.5px;
  color: var(--neutral-700);
}
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--corner-full);
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-700);
}
.tag.added {
  background: var(--blue-100);
  border-color: var(--blue-200);
  color: var(--dark-blue-600);
}
.detail-attend {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.detail-outcome {
  margin-top: 8px;
  border-top: 1px solid var(--neutral-200);
  padding-top: 14px;
}
.outcome-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-blue-700);
}
.outcome-lanes {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.lane {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 8px;
  border-radius: var(--corner-sm);
  border: 1px solid transparent;
}
.lane-actions {
  background: var(--blue-100);
  border-color: var(--blue-200);
  color: var(--dark-blue-600);
}
.lane-decisions {
  background: var(--green-000);
  border-color: var(--green-200);
  color: var(--green-900);
}
.lane-knowledge {
  background: #f3edfb;
  border-color: #e0d3f4;
  color: #5a3aa0;
}
.outcome-soon {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--neutral-600);
  font-style: italic;
}

/* ── processed-meeting outcome ─────────────────────────────────────────────── */
.outcome-body { margin-top: 6px; }
.mtg-transcript {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--neutral-300);
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--neutral-900);
  resize: vertical;
  min-height: 120px;
}
.mtg-transcript:focus {
  outline: none;
  border-color: var(--dark-blue-600);
  box-shadow: 0 0 0 3px rgba(215, 217, 250, 0.5);
}
.mtg-hint {
  font-size: 12px;
  color: var(--wave-red, #c0392b);
  min-height: 16px;
  margin-bottom: 4px;
}
.outcome-result { margin-top: 4px; }
.outcome-running {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--neutral-700);
}
.outcome-running .spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--neutral-300);
  border-top-color: var(--dark-blue-600);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mo-analyzed {
  font-size: 12px;
  color: var(--neutral-600);
  margin-bottom: 10px;
}
.mo-block { margin-top: 12px; }
.mo-h {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dark-blue-700);
  margin-bottom: 6px;
}
.mo-list { margin: 0; padding-left: 18px; }
.mo-list li { font-size: 13px; color: var(--neutral-800); margin: 3px 0; }
.mo-action {
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-sm);
  padding: 10px 12px;
  margin: 8px 0;
  background: var(--neutral-000, #fff);
}
.mo-action-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.mo-task { font-size: 13px; font-weight: 600; color: var(--dark-blue-700); }
.mo-pri {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  background: var(--neutral-100);
  color: var(--neutral-700);
  white-space: nowrap;
}
.mo-pri.pri-high { background: #fdecea; color: #b3261e; }
.mo-pri.pri-medium { background: var(--blue-100); color: var(--dark-blue-600); }
.mo-pri.pri-low { background: var(--neutral-100); color: var(--neutral-600); }
.mo-action-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--neutral-600);
  margin-top: 4px;
}
.mo-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mo-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.mo-badge.new { background: var(--green-000); border-color: var(--green-200); color: var(--green-900); }
.mo-badge.evolve { background: #fef6e7; border-color: #f6d68a; color: #8a5a00; }
.mo-badge.dup { background: #fdecea; border-color: #f5c2bd; color: #b3261e; }
.mo-badge.clarify { background: var(--blue-100); border-color: var(--blue-200); color: var(--dark-blue-600); }
.mo-badge.inbox { background: var(--neutral-100); border-color: var(--neutral-200); color: var(--neutral-700); }
.mo-dupes { margin-top: 8px; border-left: 2px solid var(--neutral-200); padding-left: 10px; }
.mo-dupe { font-size: 12px; color: var(--neutral-600); margin: 2px 0; }
.mo-see { margin-top: 14px; padding-left: 0; }

/* progress analysis (read-only "latest work") */
.mo-progress .mo-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btn-ghost {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-000, #fff);
  color: var(--dark-blue-600);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.btn-ghost:hover { background: var(--neutral-100); }
.btn-ghost:disabled { opacity: 0.6; cursor: default; }
.mo-progress-wait { font-size: 12px; color: var(--neutral-600); font-style: italic; }
.mo-progress-err { font-size: 12px; color: #b3261e; }
.mo-progress-narr {
  font-size: 13px;
  color: var(--neutral-800);
  line-height: 1.5;
  border-left: 2px solid var(--blue-200);
  padding-left: 10px;
  margin-bottom: 8px;
}
.mo-progress-meta { font-size: 11px; color: var(--neutral-500); margin-bottom: 8px; }
.mo-progress-item {
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-sm);
  padding: 8px 10px;
  margin: 6px 0;
  background: var(--neutral-000, #fff);
}
.mo-progress-task { font-size: 12.5px; font-weight: 600; color: var(--dark-blue-700); }
.mo-progress-signal { font-size: 12px; color: var(--neutral-700); margin-top: 3px; }
.mo-progress-links { margin-top: 4px; }
.mo-progress-link { font-size: 11.5px; color: var(--dark-blue-600); text-decoration: none; }
.mo-progress-link:hover { text-decoration: underline; }

.mtg-tag.evolve { background: #fef6e7; color: #8a5a00; }
.mtg-tag.dup { background: #fdecea; color: #b3261e; }

@media (max-width: 980px) {
  .cal-week {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══ THREE-LAYER FLOW BOARD — Input → the brain → tools & actions ══════════════
   The Home surface. Each layer is a vertical stack of lane cards; the "blood flow"
   is traced in words by #flow-ticker with the brain medallion pulsing on each hop. */
.board {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr 1.05fr;
  gap: 20px;
  align-items: start;
  margin-top: 4px;
}
@media (max-width: 1100px) {
  .board { grid-template-columns: 1fr; }
}
.layer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.layer-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-blue-500);
  padding-left: 4px;
}

/* lane card — the in-board panel. Relax the tall standalone .region defaults. */
.lane {
  background: var(--surface);
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.board .region { min-height: 0; max-height: none; }
.lane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-200);
}
.lane-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-blue-700);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lane-ic { font-size: 16px; line-height: 1; }
.lane-body { padding: 14px 16px; }
.gate-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--action);
  background: var(--action-lightest);
  border-radius: var(--corner-xs);
  padding: 2px 6px;
}
.board .chat-log { max-height: 200px; overflow-y: auto; }
.chat-filed { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.link-inline {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--dark-blue-600);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.link-inline:hover { color: var(--dark-blue-700); }
.lane-cta { align-self: flex-start; margin: 0 16px 14px; }
.lane-note {
  margin: 4px 16px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--neutral-600);
}

/* documents input */
#doc-text {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--neutral-300);
  border-radius: var(--corner-sm);
  padding: 8px 10px;
  font: inherit;
}
#doc-text:focus { outline: none; border-color: var(--action); }
.doc-controls { display: flex; gap: 8px; margin-top: 8px; }
.doc-controls input {
  flex: 1;
  border: 1px solid var(--neutral-300);
  border-radius: var(--corner-sm);
  padding: 6px 10px;
  font: inherit;
}
.doc-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: var(--corner-sm);
  background: var(--neutral-100);
}
.doc-name { font-weight: 600; color: var(--dark-blue-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-stat { color: var(--neutral-600); flex: 0 0 auto; }
.doc-filed { background: var(--green-000); }
.doc-filed .doc-stat { color: var(--green-900); }
.doc-failed { background: var(--red-000); }
.doc-failed .doc-stat { color: var(--red-700); }

/* the brain */
.brain-orch {
  background: linear-gradient(160deg, var(--dark-blue-600), var(--dark-blue-800));
  color: #fff;
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 18px;
  text-align: center;
}
.brain-orch.down { filter: grayscale(0.6); opacity: 0.8; }
.brain-orch h3 { margin: 8px 0 2px; font-size: 15px; }
.brain-sub { margin: 0; font-size: 12px; color: var(--blue-200); }
.brain-medallion {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: var(--corner-full);
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.brain-medallion.pulse { animation: brainpulse 0.9s ease-out; }
@keyframes brainpulse {
  0% { box-shadow: 0 0 0 0 rgba(129, 138, 238, 0.7); }
  100% { box-shadow: 0 0 0 22px rgba(129, 138, 238, 0); }
}

/* memory tiers — normalized store made legible */
.mem-tier { border-left: 3px solid var(--neutral-300); padding-left: 10px; margin-bottom: 12px; }
.mem-tier.tier-episodic { border-color: var(--blue-400); }
.mem-tier.tier-work_product { border-color: var(--green-900); }
.mem-tier.tier-reference { border-color: var(--dark-blue-300); }
.mem-tier.tier-convention { border-color: #5a3aa0; }
.mem-tier-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.mem-tier-head b { font-size: 12px; color: var(--dark-blue-700); }
.mem-hint { font-size: 11px; color: var(--neutral-600); }
.mem-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.mem-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--neutral-400); }
.mem-dot.st-accepted { background: var(--green-900); }
.mem-dot.st-needs_review { background: var(--action); }
.mem-dot.st-rejected { background: var(--error); }
.mem-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-status { font-size: 10px; color: var(--neutral-600); text-transform: uppercase; letter-spacing: 0.03em; }

/* tools & actions */
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool-card {
  background: var(--surface);
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-md);
  box-shadow: var(--shadow-soft);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tool-card .tool-ic { font-size: 18px; }
.tool-card b { font-size: 13px; color: var(--dark-blue-700); }
.tool-card i { font-size: 11px; color: var(--neutral-600); font-style: normal; }
.tool-card.hit { animation: toolhit 1s ease-out; border-color: var(--action); }
@keyframes toolhit {
  0% { background: var(--action-lightest); }
  100% { background: var(--surface); }
}

/* meetings mini-lane */
.mini-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.mini-ic { font-size: 14px; }
.mini-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-note { font-size: 11px; color: var(--neutral-600); margin-top: 6px; }
.mini-empty { font-size: 12px; color: var(--neutral-600); }

/* the legible blood-flow trace */
.flow-ticker {
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  border-radius: var(--corner-md);
  box-shadow: var(--shadow-soft);
  padding: 10px 16px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flow-empty { font-size: 12px; color: var(--neutral-600); }
.flow-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; animation: flowin 0.4s ease; }
@keyframes flowin {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.flow-step {
  background: var(--blue-000);
  border: 1px solid var(--blue-200);
  border-radius: var(--corner-full);
  padding: 2px 10px;
  color: var(--dark-blue-700);
}
.flow-arrow { color: var(--neutral-600); }

/* ── HOW IT FLOWS view ─────────────────────────────────────────────────────── */
.flow-wrap {
  display: grid;
  gap: 22px;
  padding: 4px 4px 40px;
  max-width: 980px;
}
.card-lg {
  background: var(--surface);
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
}
/* Overseer chat */
.oversee-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--dark-blue-700);
}
.oversee-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--neutral-700);
  max-width: 640px;
}
.oversee-form {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
}
.oversee-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 14.5px;
  border: 1px solid var(--blue-200);
  border-radius: var(--corner-full);
  background: var(--blue-000);
  color: var(--dark-blue-700);
}
.oversee-input:focus {
  outline: none;
  border-color: var(--action);
  background: #fff;
}
.oversee-log {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.oversee-log:empty { margin-top: 0; }
.ovr-turn {
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-md);
  padding: 12px 14px;
  background: var(--blue-000);
}
.ovr-you {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark-blue-600);
  margin-bottom: 6px;
}
.ovr-you::before { content: "you  ·  "; color: var(--neutral-600); font-weight: 600; }
.ovr-bot {
  font-size: 14px;
  line-height: 1.55;
  color: var(--neutral-700);
  white-space: pre-wrap;
}
.ovr-prop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--corner-md);
  background: var(--green-000);
  border: 1px solid var(--green-200);
}
.ovr-prop-tag {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--green-900);
}
.ovr-prop-sum { font-size: 13px; color: var(--neutral-700); }
.ovr-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ovr-src {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: var(--corner-full);
  background: var(--blue-100);
  color: var(--dark-blue-700);
  border: 1px solid var(--blue-200);
}

/* The pipeline explainer */
.flow-explain-head { margin-bottom: 4px; }
.flow-h2 { margin: 8px 0 0; font-size: 24px; }
.flow-lead {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--neutral-700);
  max-width: 680px;
}
.flow-triggers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 4px;
}
.ftrig {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-md);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.ftrig:hover { border-color: var(--blue-200); transform: translateY(-1px); }
.ftrig.active {
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(30, 73, 226, 0.12);
}
.ftrig-glyph { font-size: 20px; color: var(--dark-blue-600); }
.ftrig-label { font-size: 14.5px; font-weight: 700; color: var(--dark-blue-700); }
.ftrig-kind {
  font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--neutral-600);
}
/* Pipeline stages */
.flow-pipeline {
  display: grid;
  gap: 0;
  margin-top: 18px;
}
.fstage {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 0 0 26px 0;
}
.fstage:not(:last-child) .fstage-n::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34px;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% - 30px);
  background: var(--blue-200);
}
.fstage-n {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--dark-blue-600);
  transition: transform 0.15s, box-shadow 0.15s;
}
.fstage.lit .fstage-n { box-shadow: 0 0 0 5px rgba(30, 73, 226, 0.14); }
.fstage.lit-end .fstage-n { background: var(--green-900); box-shadow: 0 0 0 5px rgba(10, 114, 83, 0.16); }
.fstage-main {
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-md);
  background: var(--surface);
  padding: 14px 16px;
}
.fstage.lit .fstage-main { border-color: var(--action); }
.fstage[data-stage="retain"] .fstage-main {
  background: var(--blue-000);
  border-color: var(--blue-200);
}
.fstage-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--dark-blue-700);
  margin-bottom: 6px;
}
.fstage-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.fkind {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--dark-blue-600);
  background: var(--blue-100);
  padding: 2px 8px;
  border-radius: 6px;
}
.fstage-sub { margin: 0; font-size: 13px; line-height: 1.55; color: var(--neutral-700); }
.fstage-lead { margin: 0 0 10px; font-size: 14px; line-height: 1.55; font-weight: 600; color: var(--dark-blue-700); }
.fstage-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--neutral-600); }
.fstage-loop { color: var(--dark-blue-600); font-weight: 600; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: var(--corner-full);
  border: 1px solid var(--neutral-200);
  background: #fff;
}
.fchip-mark { font-weight: 800; }
.fchip.yes { color: var(--green-900); border-color: var(--green-200); background: var(--green-000); }
.fchip.no { color: var(--neutral-600); }
.fchip-note { color: var(--neutral-600); }
.fpath { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fpath-step {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 7px;
  background: var(--blue-000);
  border: 1px solid var(--blue-200);
  color: var(--dark-blue-700);
}
.fpath-step.out { background: var(--dark-blue-600); color: #fff; border-color: var(--dark-blue-600); }
.fpath-arr { color: var(--neutral-600); }
.fgate { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.fgate-check {
  border: 1px solid var(--blue-200);
  border-radius: var(--corner-md);
  padding: 10px 12px;
  background: var(--blue-000);
}
.fgate-h { font-size: 13px; font-weight: 800; color: var(--dark-blue-700); margin-bottom: 3px; }
.fgate-d { font-size: 12px; line-height: 1.5; color: var(--neutral-700); }
.ftiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ftier {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 7px;
  background: var(--blue-100);
  color: var(--dark-blue-700);
}
.ftools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ftool {
  border: 1px solid var(--neutral-200);
  border-radius: var(--corner-md);
  padding: 10px 12px;
}
.ftool-t { font-size: 13px; font-weight: 700; color: var(--dark-blue-700); }
.ftool-d { font-size: 12px; color: var(--neutral-600); margin-top: 2px; }
@media (max-width: 720px) {
  .flow-triggers { grid-template-columns: repeat(2, 1fr); }
  .fgate, .ftools { grid-template-columns: 1fr; }
}

/* ── Overseer: synthesized answer + real actions ─────────────────────────── */
.ovr-mode {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dark-blue-700);
  background: var(--blue-100);
  border: 1px solid var(--blue-200);
  border-radius: var(--corner-full);
  padding: 2px 8px;
  margin-bottom: 6px;
}
.ovr-answer { font-size: 14px; line-height: 1.55; color: var(--neutral-700); white-space: pre-wrap; }
.ovr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ovr-act {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--corner-full);
  background: var(--surface);
  color: var(--dark-blue-700);
  border: 1px solid var(--blue-200);
  cursor: pointer;
}
.ovr-act:hover:not(:disabled) { background: var(--blue-000); }
.ovr-act:disabled { opacity: 0.55; cursor: default; }
.ovr-act-out { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ovr-act-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--neutral-700);
  padding: 7px 10px;
  border-radius: var(--corner-md);
  border: 1px solid var(--neutral-200);
}
.ovr-act-row.good { background: var(--green-000); border-color: var(--green-200); }
.ovr-act-row.warn { background: #fff8ec; border-color: #f2d9a0; }
.ovr-act-row.bad { background: #fdecec; border-color: #f2c0c0; }
.ovr-act-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--green-900);
}
.ovr-act-row.warn .ovr-act-badge { color: #9a6a12; }
.ovr-act-row.bad .ovr-act-badge { color: var(--error); }

/* ── Memory: the human gate, inline ──────────────────────────────────────── */
.mem-item { flex-wrap: wrap; }
.mem-gate { display: inline-flex; gap: 6px; margin-left: auto; align-items: center; }
.mem-gate button {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--corner-full);
  cursor: pointer;
  border: 1px solid var(--neutral-200);
  background: var(--surface);
}
.mem-gate-ok { color: var(--green-900); border-color: var(--green-200) !important; }
.mem-gate-ok:hover:not(:disabled) { background: var(--green-000); }
.mem-gate-no { color: var(--error); }
.mem-gate-no:hover:not(:disabled) { background: #fdecec; }
.mem-gate button:disabled { opacity: 0.5; cursor: default; }
.mem-gate-done { font-size: 11px; font-weight: 700; color: var(--green-900); }
.mem-gate-err { font-size: 11px; color: var(--error); }
.mem-dot.st-rejected { background: var(--error); }

/* ── Skills Forge ────────────────────────────────────────────────────────── */
.forge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.forge-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.forge-skill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 9px 11px;
  border-radius: var(--corner-md);
  border: 1px solid var(--neutral-200);
  background: var(--surface);
  cursor: pointer;
}
.forge-skill:hover { border-color: var(--blue-200); background: var(--blue-000); }
.forge-skill.sel { border-color: var(--dark-blue-600); background: var(--blue-100); }
.forge-skill-name { font-size: 13px; font-weight: 700; color: var(--dark-blue-700); }
.forge-skill-produces { font-size: 11px; color: var(--neutral-600); }
.forge-out { margin-top: 14px; }
.forge-seed {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--corner-md);
  border: 1px solid var(--neutral-200);
  resize: vertical;
}
.forge-seed:focus { outline: none; border-color: var(--dark-blue-600); }
.forge-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.forge-run-label { font-size: 11px; color: var(--neutral-600); }
.forge-artifact {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--corner-md);
  background: var(--blue-000);
  border: 1px solid var(--blue-200);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--neutral-700);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 340px;
}
.forge-artifact-actions { margin-top: 10px; }
@media (max-width: 720px) {
  .forge-catalog { grid-template-columns: 1fr 1fr; }
}

/* ── Board · read-only kanban mirror inside the front door ──────────────────── */
.board-view { display: flex; flex-direction: column; gap: 14px; }
.board-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.board-count { font-weight: 700; color: var(--dark-blue-700); font-size: 14px; }
.board-legend { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.klegend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--neutral-700); }
.korigin { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--neutral-500); flex: none; }
.korigin.teammate { background: var(--action); }
.korigin.ado { background: var(--dark-blue-600); }
.korigin.board { background: var(--neutral-500); }

.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.kcol { background: var(--neutral-100); border: 1px solid var(--outline); border-radius: var(--corner-lg); padding: 10px; min-height: 120px; }
.kcol-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; color: var(--dark-blue-700); padding: 2px 4px 10px; }
.kcol-n { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--corner-full); min-width: 22px; text-align: center; padding: 1px 7px; font-size: 12px; color: var(--neutral-700); }
.kcol-body { display: flex; flex-direction: column; gap: 8px; }
.kempty { color: var(--neutral-500); font-size: 13px; text-align: center; padding: 10px 0; }

.kticket { background: var(--surface); border: 1px solid var(--outline); border-left: 3px solid var(--neutral-500); border-radius: var(--corner-md); padding: 10px 11px; box-shadow: var(--shadow-soft); }
.kticket.origin-teammate { border-left-color: var(--action); }
.kticket.origin-ado { border-left-color: var(--dark-blue-600); }
.kticket-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.kticket-id { font-size: 11px; font-weight: 700; color: var(--neutral-600); letter-spacing: .02em; }
.kprio { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: var(--corner-full); background: var(--neutral-100); color: var(--neutral-600); }
.kprio.high { background: #fdeede; color: #a85a0a; }
.kprio.critical { background: var(--red-000); color: var(--red-700); }
.kprio.low { background: var(--neutral-100); color: var(--neutral-500); }
.kticket-title { font-size: 13.5px; font-weight: 600; color: var(--ink-darkest); line-height: 1.35; }
.kticket-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ktag { font-size: 10.5px; background: var(--neutral-100); color: var(--neutral-700); border-radius: var(--corner-full); padding: 2px 8px; }
.ktag.epic { background: var(--action-lightest); color: var(--action); font-weight: 600; }
.ktag.pts { background: var(--green-000); color: var(--green-900); font-weight: 600; }

@media (max-width: 900px) { .kanban { grid-template-columns: repeat(2, 1fr); } }

/* clickable cards */
.kticket { cursor: pointer; transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease; }
.kticket:hover { box-shadow: var(--shadow-card); border-color: var(--neutral-400); transform: translateY(-1px); }
.kticket:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* ── Ticket detail drawer ────────────────────────────────────────────────────── */
.kdrawer-back { position: fixed; inset: 0; background: rgba(20, 22, 34, 0); z-index: 60; display: flex; justify-content: flex-end; transition: background .18s ease; }
.kdrawer-back.open { background: rgba(20, 22, 34, .38); }
.kdrawer-back[hidden] { display: none; }
.kdrawer { width: min(520px, 94vw); max-width: 94vw; height: 100%; background: var(--surface); box-shadow: var(--shadow-card); border-left: 1px solid var(--outline); padding: 18px 22px 40px; overflow-y: auto; transform: translateX(24px); opacity: .6; transition: transform .18s ease, opacity .18s ease; }
.kdrawer-back.open .kdrawer { transform: translateX(0); opacity: 1; }

.kdrawer-head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; }
.kdrawer-head .korigin { width: 11px; height: 11px; border-radius: 3px; }
.kdrawer-id { font-size: 12px; font-weight: 700; color: var(--neutral-600); letter-spacing: .02em; }
.kdrawer-adoid { font-size: 11px; font-weight: 700; color: var(--dark-blue-600); background: var(--action-lightest); border-radius: var(--corner-full); padding: 2px 9px; }
.kdrawer-close { margin-left: auto; border: 1px solid var(--outline); background: var(--surface); color: var(--neutral-600); width: 30px; height: 30px; border-radius: var(--corner-sm); cursor: pointer; font-size: 14px; line-height: 1; }
.kdrawer-close:hover { background: var(--neutral-100); color: var(--ink-darkest); }
.kdrawer-title { font-size: 19px; font-weight: 700; color: var(--ink-darkest); line-height: 1.3; margin: 2px 0 12px; }

.kdrawer-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.kchip { font-size: 11.5px; background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--outline); border-radius: var(--corner-full); padding: 2px 9px; }
.kchip.status-to_do { background: var(--neutral-100); color: var(--neutral-700); }
.kchip.status-in_progress { background: var(--action-lightest); color: var(--action); border-color: transparent; }
.kchip.status-testing { background: #fdeede; color: #a85a0a; border-color: transparent; }
.kchip.status-done { background: var(--green-000); color: var(--green-900); border-color: transparent; }

/* ── Source drawer: PROVENANCE (meeting transcript / synced email) ─────────────── */
.src-hd-ic { font-size: 15px; }
.src-sub { font-size: 12px; color: var(--neutral-600); margin: -4px 0 12px; }
.src-reason { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-darkest); background: var(--blue-000); border: 1px solid var(--blue-100); border-radius: var(--corner-md); padding: 10px 12px; margin-bottom: 12px; }
.src-reason-ic { flex: none; }
.src-quote { margin-bottom: 14px; }
.src-quote-lead { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--neutral-500); margin-bottom: 4px; }
.src-quote blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--blue-300); background: var(--blue-000); font-size: 13.5px; font-style: italic; color: var(--ink-darkest); line-height: 1.5; }
.src-transcript { border-top: 1px solid var(--neutral-200); padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.src-seg { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: var(--corner-sm); font-size: 13px; line-height: 1.5; }
.src-seg .seg-ts { flex: none; font-size: 10.5px; color: var(--neutral-500); font-variant-numeric: tabular-nums; min-width: 52px; }
.src-seg .seg-who { flex: none; font-weight: 700; color: var(--blue-700); }
.src-seg .seg-txt { color: var(--ink-darkest); }
.src-seg.hit { background: #fff6d6; box-shadow: inset 3px 0 0 #e6a817; }
.src-seg.hit .seg-txt { font-weight: 600; }
.src-empty { font-size: 13px; color: var(--neutral-600); line-height: 1.5; padding: 8px 0; }
.src-email-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; color: var(--ink-darkest); word-break: break-word; }
.src-atts { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--neutral-200); font-size: 12.5px; color: var(--neutral-700); }
.src-atts-lead { font-weight: 600; }

/* "Why this?" provenance button on a meeting's suggested-ticket cards */
.mo-why { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; border: 1px solid var(--blue-200); background: var(--blue-000); color: var(--blue-700); border-radius: var(--corner-full); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.mo-why:hover { border-color: var(--blue-300); background: var(--surface); }
.mo-why-ic { font-size: 12px; }

/* Email source chips under a grounded answer — click to open the message it grounded on */
.ir-email-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.esrc-lead { font-size: 11.5px; color: var(--neutral-500); font-weight: 600; }
.esrc-chip { display: inline-flex; align-items: center; max-width: 280px; border: 1px solid var(--neutral-200); background: var(--surface); border-radius: var(--corner-full); overflow: hidden; }
.esrc-chip:hover { border-color: var(--blue-300); background: var(--blue-000); }
.esrc-open { display: inline-flex; align-items: center; gap: 5px; max-width: 232px; padding: 4px 6px 4px 10px; border: 0; background: transparent; color: var(--ink-darkest); font: inherit; font-size: 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esrc-chip:hover .esrc-open { color: var(--blue-900); }
.esrc-ic { flex: none; font-size: 11px; }
.esrc-mute { flex: none; padding: 4px 8px 4px 5px; border: 0; background: transparent; color: var(--neutral-400); font: inherit; font-size: 11px; line-height: 1; cursor: pointer; }
.esrc-mute:hover { color: var(--red-600, #c0392b); }

.kdrawer-adolink { display: inline-block; font-size: 13px; font-weight: 600; color: var(--action); text-decoration: none; margin-bottom: 16px; }
.kdrawer-adolink:hover { text-decoration: underline; }

.kdrawer-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--neutral-600); margin: 16px 0 8px; }
.kdrawer-desc { font-size: 13.5px; line-height: 1.55; color: var(--ink-darkest); white-space: pre-wrap; word-break: break-word; }
.kdrawer-loading { color: var(--neutral-500); font-size: 13px; padding: 20px 0; }

.kdrawer-comments { display: flex; flex-direction: column; gap: 10px; }
.kcomment { border: 1px solid var(--outline); border-radius: var(--corner-md); padding: 9px 11px; background: var(--neutral-100); }
.kcomment-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.kcomment-author { font-size: 12.5px; font-weight: 700; color: var(--dark-blue-700); }
.kcomment-when { font-size: 11px; color: var(--neutral-500); margin-left: auto; }
.kcomment-text { font-size: 13px; line-height: 1.5; color: var(--ink-darkest); white-space: pre-wrap; word-break: break-word; }
.kdrawer-foot { margin-top: 20px; font-size: 11px; color: var(--neutral-500); }

/* ── Connected-work graph (drawer) — the real ADO parent/child/sibling web ── */
.kgraph-slot { margin: 18px 0 4px; }
.kgraph-loading { font-size: 12px; color: var(--neutral-500); padding: 6px 0; }
.kgraph { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 4px; }
.kgraph-spine { text-align: center; color: var(--neutral-400); font-size: 13px; line-height: 1; margin: 1px 0; user-select: none; }
.kgrow-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-600); margin: 12px 0 5px; }
.kgrow-count { background: var(--neutral-200); color: var(--neutral-700); border-radius: var(--corner-full); padding: 0 7px; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.kgnode-list { display: flex; flex-direction: column; gap: 6px; }

.kgnode { position: relative; border: 1px solid var(--outline); border-left: 3px solid var(--neutral-400); border-radius: var(--corner-md); background: var(--surface); padding: 8px 11px; transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease; }
.kgnode.hop { cursor: pointer; }
.kgnode.hop:hover { box-shadow: var(--shadow-card); border-color: var(--neutral-400); transform: translateY(-1px); }
.kgnode.hop:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.kgnode.center { border-left-color: var(--action); background: var(--dark-blue-000); box-shadow: var(--shadow-soft); }
.kgnode.origin-teammate { border-left-color: var(--green-900); }
.kgnode.origin-ado { border-left-color: var(--dark-blue-500); }
.kgnode.origin-board { border-left-color: var(--neutral-400); }
.kgnode-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.kgnode-type { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--dark-blue-600); background: var(--dark-blue-100); border-radius: var(--corner-xs); padding: 1px 6px; }
.kgnode-id { font-size: 11px; font-weight: 700; color: var(--neutral-600); font-variant-numeric: tabular-nums; }
.kgnode.center .kgnode-id { color: var(--action); }
.kgnode-title { font-size: 13px; line-height: 1.4; color: var(--ink-darkest); }
.kgnode.center .kgnode-title { font-weight: 600; }
.kgnode-extlink { font-size: 12px; color: var(--action); text-decoration: none; }
.kgnode-extlink:hover { text-decoration: underline; }

/* ── Connected knowledge (drawer) — real spec/doc content linked to the item ── */
.kknow-slot { margin: 4px 0; }
.kknow-loading { font-size: 12px; color: var(--neutral-500); padding: 6px 0; }
.kknow-sub { font-size: 12px; color: var(--neutral-600); margin: -2px 0 8px; }
.kknow-list { display: flex; flex-direction: column; gap: 8px; }
.kknow { border: 1px solid var(--outline); border-left: 3px solid var(--dark-blue-500); border-radius: var(--corner-md); background: var(--dark-blue-000); padding: 9px 12px; }
.kknow-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.kknow-title { font-size: 13px; font-weight: 700; color: var(--dark-blue-700); line-height: 1.3; }
.kknow-src { font-size: 10.5px; color: var(--neutral-500); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-left: auto; }
.kknow-excerpt { font-size: 12.5px; line-height: 1.5; color: var(--ink-darkest); }
.kknow-why { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.kknow-why-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-500); }
.kknow-term { font-size: 11px; color: var(--dark-blue-600); background: var(--dark-blue-100); border-radius: var(--corner-xs); padding: 1px 7px; }

/* ── INTAKE: the streaming intake brain (Claude-style thread) ───────────────── */
.intake-wrap { position: relative; display: flex; flex-direction: column; height: calc(100vh - 150px); max-width: 860px; margin: 0 auto; width: 100%; }
.intake-thread { position: relative; flex: 1; overflow-y: auto; padding: 8px 4px 20px; display: flex; flex-direction: column; gap: 18px; }

/* Drag-and-drop linking: a full-thread hint overlay that only shows while dragging a
   file over the chat, plus the chip row above the composer listing what's linked. */
.intake-dropzone { position: absolute; inset: 6px; z-index: 5; display: none; place-items: center;
  border: 2px dashed var(--blue-300); border-radius: var(--corner-lg);
  background: color-mix(in srgb, var(--blue-000) 82%, transparent); backdrop-filter: blur(1px); pointer-events: none; }
.intake-thread.drop-active .intake-dropzone { display: grid; }
.intake-dropzone .idz-inner { text-align: center; color: var(--blue-700); }
.intake-dropzone .idz-ic { font-size: 34px; margin-bottom: 8px; }
.intake-dropzone .idz-text { font-size: 14px; font-weight: 600; max-width: 320px; line-height: 1.5; }

.intake-drops { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 8px; }
.intake-drops[hidden] { display: none; }
.idr-lead { font-size: 12px; color: var(--neutral-600); margin-right: 2px; }
/* At-rest affordance: the always-visible "you can drag files here" hint. */
.idr-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--neutral-600);
  border: 1px dashed var(--outline); border-radius: var(--corner-full); padding: 4px 12px; background: var(--neutral-000, transparent); }
.idr-hint .idr-ic { font-size: 12.5px; opacity: .8; }
.idr-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-darkest);
  background: var(--blue-000); border: 1px solid var(--blue-200); border-radius: var(--corner-full); padding: 4px 6px 4px 10px; }
.idr-chip .idr-ic { font-size: 12.5px; }
.idr-chip .idr-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idr-chip .idr-x { border: none; background: none; cursor: pointer; color: var(--neutral-600); font-size: 15px; line-height: 1;
  padding: 0 2px; border-radius: 50%; }
.idr-chip .idr-x:hover { color: var(--red-700, #b42318); background: var(--blue-100); }

/* The 📚 context library — a drag-from menu of emails / meetings / transcripts / files,
   floated above the composer. Sections with nothing yet show a placeholder line. */
.ctx-menu { position: absolute; left: 0; right: 0; bottom: 78px; z-index: 40; max-height: 52vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--outline); border-radius: var(--corner-lg);
  box-shadow: 0 16px 44px rgba(1, 40, 111, 0.18); padding: 14px 16px; animation: bp-in 150ms ease-out; }
.ctx-menu[hidden] { display: none; }
.ctx-head { margin-bottom: 10px; }
.ctx-head .ctx-title { display: block; font-size: 14px; font-weight: 700; color: var(--ink-darkest); }
.ctx-head .ctx-sub { display: block; font-size: 12px; color: var(--neutral-600); margin-top: 2px; }
.ctx-loading, .ctx-empty { font-size: 12.5px; color: var(--neutral-600); padding: 8px 2px; }
.ctx-sec { padding: 8px 0; border-top: 1px solid var(--neutral-100); }
.ctx-sec:first-of-type { border-top: none; }
.ctx-sec-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.ctx-sec-ic { font-size: 13px; }
.ctx-sec-title { font-size: 12.5px; font-weight: 600; color: var(--ink-darkest); }
.ctx-sec-count { font-size: 11px; color: var(--neutral-600); background: var(--neutral-100); border-radius: var(--corner-full); padding: 1px 7px; }
.ctx-sec-empty { font-size: 12px; color: var(--neutral-500); font-style: italic; padding: 2px 2px 4px 20px; line-height: 1.5; }
.ctx-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--corner-md); cursor: grab;
  border: 1px solid transparent; }
.ctx-item:hover { background: var(--blue-000); border-color: var(--blue-200); }
.ctx-item:active { cursor: grabbing; }
.ctx-item-ic { font-size: 14px; flex: none; }
.ctx-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ctx-item-title { font-size: 13px; color: var(--ink-darkest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-item-sub { font-size: 11.5px; color: var(--neutral-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-item-badge { font-size: 10.5px; color: var(--green-900); background: var(--green-000); border-radius: var(--corner-full); padding: 1px 8px; flex: none; }
.ctx-item-prep { flex: none; font-size: 11px; color: var(--blue-700); background: var(--blue-000); border: 1px solid var(--blue-200);
  border-radius: var(--corner-full); padding: 2px 9px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.ctx-item:hover .ctx-item-prep { opacity: 1; }
.ctx-item-prep:hover { background: var(--blue-100); border-color: var(--blue-300); }
.intake-attach[aria-expanded="true"] { background: var(--blue-100); border-radius: var(--corner-sm); }

/* Prep-focus chip: the selected email the whole chat is grounding on. */
.intake-focus { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; padding: 5px 10px;
  background: var(--blue-000); border: 1px solid var(--blue-200); border-radius: var(--corner-full); font-size: 12px; }
.intake-focus[hidden] { display: none; }
.intake-focus .if-ic { flex: none; }
.intake-focus .if-label { color: var(--neutral-600); flex: none; }
.intake-focus .if-title { color: var(--ink-darkest); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.intake-focus .if-x { margin-left: auto; flex: none; border: none; background: transparent; color: var(--neutral-600);
  cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: var(--corner-sm); }
.intake-focus .if-x:hover { background: var(--blue-100); color: var(--ink-darkest); }

.intake-hello { text-align: center; margin: auto; padding: 24px; max-width: 560px; }
.intake-hello .ih-glow { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 30px;
  background: radial-gradient(circle at 50% 40%, var(--blue-200), var(--blue-100)); box-shadow: 0 10px 30px rgba(89, 101, 233, .3); }
.intake-hello h2 { font-size: 22px; font-weight: 700; color: var(--ink-darkest); margin: 0 0 8px; }
.intake-hello p { font-size: 14px; line-height: 1.6; color: var(--neutral-700); margin: 0 0 18px; }
.ih-examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ih-ex { font-size: 12.5px; color: var(--blue-700); background: var(--blue-000); border: 1px solid var(--blue-200); border-radius: var(--corner-full);
  padding: 6px 14px; cursor: pointer; transition: background .15s, border-color .15s; }
.ih-ex:hover { background: var(--blue-100); border-color: var(--blue-300); }

.intake-msg { display: flex; gap: 12px; }
.intake-msg.user { justify-content: flex-end; }
.im-bubble { background: var(--blue-500); color: #fff; padding: 10px 15px; border-radius: 16px 16px 4px 16px; max-width: 74%; font-size: 14px; line-height: 1.5; box-shadow: var(--shadow-soft); }
.im-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px;
  background: var(--blue-100); border: 1px solid var(--blue-200); }
.im-body { flex: 1; min-width: 0; }

/* reasoning stepper — vertical line + dots */
.intake-steps { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px; }
/* Reasoning is transient — collapse it away once the answer lands. */
.intake-steps.collapsing { transition: height .38s ease, opacity .34s ease; margin: 0; pointer-events: none; }
/* Answer prose types in; the scannable parts fade up right behind it. */
.ir-typing::after { content: '▍'; margin-left: 1px; color: var(--action); animation: ir-caret .8s step-end infinite; }
@keyframes ir-caret { 50% { opacity: 0; } }
.ir-fadein { animation: ir-fadeup .32s ease both; }
@keyframes ir-fadeup { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ir-fadein { animation: none; } .ir-typing::after { display: none; } }
.ist { display: flex; align-items: flex-start; gap: 11px; position: relative; padding: 3px 0; }
.ist::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--neutral-200); }
.ist:first-child::before { top: 12px; }
.ist:last-child::before { bottom: calc(100% - 12px); }
.ist-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 2px; z-index: 1; background: #fff;
  border: 2px solid var(--neutral-400); box-sizing: border-box; }
.ist[data-status="running"] .ist-dot { border-color: var(--blue-500); box-shadow: 0 0 0 0 rgba(89, 101, 233, .5); animation: ist-pulse 1.3s infinite; }
.ist[data-status="done"] .ist-dot { border-color: var(--blue-500); background: var(--blue-500); }
.ist-dot.ghost { border-style: dashed; border-color: var(--neutral-300); background: #fff; animation: none; box-shadow: none; }
@keyframes ist-pulse { 0% { box-shadow: 0 0 0 0 rgba(89, 101, 233, .45); } 70% { box-shadow: 0 0 0 6px rgba(89, 101, 233, 0); } 100% { box-shadow: 0 0 0 0 rgba(89, 101, 233, 0); } }
.ist-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ist-label { font-size: 13.5px; font-weight: 600; color: var(--ink-darkest); }
.ist[data-status="running"] .ist-label { color: var(--blue-700); }
.ist-detail { font-size: 12.5px; color: var(--neutral-600); }
.ist.cand { padding-top: 2px; }
.ist-cands { display: flex; flex-wrap: wrap; gap: 5px; }
.cand-chip { font-size: 11px; color: var(--neutral-700); background: var(--neutral-100); border: 1px solid var(--neutral-200);
  border-radius: var(--corner-sm); padding: 2px 8px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand-chip b { color: var(--dark-blue-600); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }

/* result card — clarify or propose */
.ir-card { margin-top: 12px; border: 1px solid var(--outline); border-radius: var(--corner-lg); background: var(--surface); padding: 16px; box-shadow: var(--shadow-soft); }
.ir-card.clarify { border-left: 4px solid var(--blue-500); }
.ir-card.propose { border-left: 4px solid var(--green-900); }
.ir-card.done { border-color: var(--green-200); background: var(--green-000); }
.ir-card.dismissed { opacity: .6; }
.ir-note { font-size: 14px; line-height: 1.55; color: var(--ink-darkest); margin: 0 0 10px; }

/* Answer / briefing card — a question got a read of the board, not a ticket gate. */
.ir-card.answer { border-left: 4px solid var(--action, #6d5efc); }
/* Flat answer — a conversational reply reads as plain prose, not a bordered card.
   Strips the box chrome so it feels like ChatGPT/Claude, not a form. */
.ir-card.flat {
  border: none; border-left: none; background: none; box-shadow: none;
  padding: 0; margin-top: 10px;
}
/* Flowing markdown answer body. */
.ir-prose { font-size: 14.5px; line-height: 1.62; color: var(--ink-darkest); }
.ir-prose p { margin: 0 0 10px; }
.ir-prose p:last-child { margin-bottom: 0; }
.ir-prose ul { margin: 8px 0 10px; padding-left: 20px; }
.ir-prose li { margin: 3px 0; line-height: 1.55; }
.ir-prose strong { font-weight: 700; }
.ir-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--action-lightest, #eef); padding: 1px 5px; border-radius: 5px; }
.ir-prose a { color: var(--action, #1e49e2); text-decoration: none; }
.ir-prose a:hover { text-decoration: underline; }
/* Subtle grounded-sources line — small refs, not a chip wall. */
.ir-sources { margin-top: 10px; font-size: 12px; color: var(--neutral-600, #667); }
.ir-sources .src-lead { font-weight: 600; }
.ir-sources .src-ref { color: var(--action, #1e49e2); text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ir-sources .src-ref:hover { text-decoration: underline; }
/* Quiet, lead-less follow-up chips under a flowing answer. */
.ir-suggs.quiet { margin-top: 12px; gap: 7px; }
/* The headline read of the situation — the first thing the eye lands on. */
.ir-meet { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.ir-meet-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #5a3ec8; background: #efeaff; border: 1px solid #d9cffb; border-radius: 999px; padding: 3px 10px; }
.ir-meet-link { font-size: 12px; font-weight: 600; color: #5a3ec8; text-decoration: none; }
.ir-meet-link:hover { text-decoration: underline; }
.ir-meet-join { font-size: 12px; font-weight: 700; color: #fff; background: #5a3ec8; border: 1px solid #4b32ad; border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.ir-meet-join:hover { background: #4b32ad; }
.ir-meet-join:active { transform: translateY(1px); }

/* Live-in-meeting control panel (real ACS guest join) */
.ir-card.live-meet { border-color: #d9cffb; background: linear-gradient(180deg, #faf8ff, #fff); }
.lm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.lm-dot { color: #22c55e; font-size: 11px; animation: lm-pulse 1.4s ease-in-out infinite; }
.lm-dot.off { color: var(--neutral-500, #9aa); animation: none; }
@keyframes lm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.lm-subj { font-size: 14px; font-weight: 700; color: var(--ink-darkest); }
.lm-hint { font-size: 12.5px; line-height: 1.5; color: var(--neutral-600, #667); margin: 4px 0 8px; }
.lm-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.lm-out { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ir-head { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ink-darkest); margin: 0 0 8px; }
.ir-answer { font-size: 14.5px; line-height: 1.6; color: var(--ink-darkest); margin: 0; }
/* Scannable substance — one grounded point per line, not a paragraph. */
.ir-bullets { margin: 10px 0 0; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ir-bullets li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--neutral-800, #2a2f45); }
.ir-bullets li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--action, #6d5efc); }
/* Interactive follow-ups — the teammate offers, the user steers. */
.ir-sugg-lead { font-size: 12px; font-weight: 700; color: var(--neutral-600); margin: 14px 0 8px; }
.ir-suggs { display: flex; flex-wrap: wrap; gap: 8px; }
.sugg-chip {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--action, #6d5efc); background: rgba(109, 94, 252, 0.07);
  border: 1px solid rgba(109, 94, 252, 0.28); border-radius: 999px; padding: 6px 13px;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.sugg-chip:hover { background: rgba(109, 94, 252, 0.14); border-color: var(--action, #6d5efc); }
.sugg-chip:active { transform: translateY(1px); }
.ir-cites { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ir-cites .irc-lead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--neutral-600); }
.cite-chip {
  display: inline-flex; align-items: baseline; gap: 5px; max-width: 320px;
  font-size: 12px; text-decoration: none; color: var(--blue-700);
  background: var(--blue-000); border: 1px solid var(--blue-200);
  border-radius: 999px; padding: 4px 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cite-chip:hover { border-color: var(--blue-400); background: #fff; }
.cite-chip b { font-weight: 700; }
.ir-answer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--outline); }
.ir-answer-foot .iaf-hint { font-size: 12px; color: var(--neutral-600); font-style: italic; }
.btn-quiet.sm { font-size: 12.5px; padding: 6px 14px; }
.ir-q { font-size: 14.5px; font-weight: 600; color: var(--dark-blue-700); margin: 0 0 12px; }
.ir-cands { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ir-cand { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; background: var(--dark-blue-000);
  border: 1px solid var(--neutral-200); border-radius: var(--corner-sm); padding: 8px 11px; }
.irc-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; color: var(--dark-blue-600); }
.irc-title { font-weight: 600; color: var(--ink-darkest); }
.irc-why { color: var(--neutral-600); font-size: 12px; flex-basis: 100%; }
.irc-link { margin-left: auto; font-size: 11.5px; color: var(--blue-700); text-decoration: none; white-space: nowrap; }
.irc-link:hover { text-decoration: underline; }
.ir-options { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13px; font-weight: 500; color: var(--dark-blue-700); background: var(--blue-000); border: 1px solid var(--blue-300);
  border-radius: var(--corner-full); padding: 7px 16px; cursor: pointer; transition: background .15s, transform .1s; }
.chip:hover { background: var(--blue-100); }
.chip:active { transform: scale(.97); }

/* drafted ticket */
.ticket-draft { border: 1px solid var(--neutral-200); border-radius: var(--corner-md); background: var(--dark-blue-000); padding: 13px 15px; margin-bottom: 12px; }
.td-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.td-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--neutral-600); }
.td-prio { font-size: 10.5px; font-weight: 700; text-transform: capitalize; border-radius: var(--corner-xs); padding: 1px 8px; margin-left: auto; }
.td-prio.low { color: var(--neutral-700); background: var(--neutral-200); }
.td-prio.medium { color: var(--dark-blue-600); background: var(--dark-blue-100); }
.td-prio.high, .td-prio.critical { color: var(--red-800); background: var(--red-100); }
.td-title { font-size: 15.5px; font-weight: 700; color: var(--ink-darkest); line-height: 1.35; margin: 0 0 6px; }
/* Ownership flag on the COLLAPSED ticket-draft card — visible even if "Edit" is never
   opened, since "Create ticket" can be clicked straight from this view. */
.td-owner {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--warn-700, #8a6d00);
  background: var(--warn-100, #fff3cd); border: 1px solid var(--warn-300, #ffe08a);
  border-radius: var(--corner-xs); padding: 1px 8px; margin: 0 0 6px;
}
.td-body { font-size: 13.5px; line-height: 1.55; color: var(--neutral-700); margin: 0 0 9px; }
.td-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.td-tag { font-size: 11px; color: var(--blue-700); background: var(--blue-100); border-radius: var(--corner-xs); padding: 1px 8px; }
.td-dupwarn { font-size: 12px; color: var(--neutral-700); margin-bottom: 12px; line-height: 1.5; }
.td-dupwarn b { color: var(--red-800); }
/* Pending-queue overlap — softer than a board dup (amber, not red): it's not filed yet. */
.td-inboxwarn { font-size: 12px; color: var(--neutral-700); margin-bottom: 12px; line-height: 1.6;
  background: var(--amber-000, #fff8ec); border: 1px solid var(--amber-200, #f5d9a3); border-radius: var(--corner-sm); padding: 8px 11px; }
.td-inboxwarn > b { color: var(--amber-900, #92600a); }
.td-inboxwarn.near > b { color: var(--red-800); }
.td-inboxwarn .iw-ref { color: var(--neutral-600); }
.td-inboxwarn .iw-ref b { color: var(--neutral-900); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ib-reinforced { font-size: 12px; color: var(--amber-900, #92600a); background: var(--amber-000, #fff8ec);
  border: 1px solid var(--amber-200, #f5d9a3); border-radius: var(--corner-sm); padding: 5px 10px; margin: 4px 0 8px; }
.ir-actions { display: flex; align-items: center; gap: 10px; }
.ir-status { font-size: 12.5px; color: var(--neutral-600); }
.ir-status b { color: var(--green-900); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.intake-err { font-size: 13px; color: var(--red-800); background: var(--red-000); border: 1px solid var(--red-100); border-radius: var(--corner-sm); padding: 9px 12px; margin-top: 8px; }

/* ── Draft-ticket editor: Edit/Park/Create/Dismiss — real dropdowns, not free text ── */
.tg-edit-btn { margin-left: auto; }
.tg-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--outline); }
.tg-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--neutral-600); }
.tg-wide { width: 100%; }
.tg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
.tg-in, .tg-ta, .tg-sel { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--outline); border-radius: var(--corner-sm); background: var(--surface); color: var(--ink-darkest); }
.tg-ta { resize: vertical; min-height: 48px; }
.tg-est { width: 100%; }
.ml-edit-row { display: flex; justify-content: flex-end; margin-top: 4px; }
/* Live, honest preview of what "Create" will actually parent the ticket to — including
   the silent pinned-scope fallback and the genuine orphan case, previously invisible. */
.tg-hint { font-size: 11.5px; color: var(--neutral-600); margin-top: -2px; }
.tg-hint.warn { color: var(--red-800); font-weight: 600; }
/* Parked: visually distinct from both .ir-card.done (created, green) and .dismissed
   (opacity-faded) — still here, just deferred, so it shouldn't look finished or rejected. */
.ir-card.parked { border-color: var(--amber-200, #f5d9a3); background: var(--amber-000, #fff8ec); }

/* composer */
.intake-input { display: flex; gap: 10px; align-items: flex-end; padding: 12px; border: 1px solid var(--outline); border-radius: var(--corner-lg);
  background: var(--surface); box-shadow: var(--shadow-card); margin-top: 6px; }
.intake-input textarea { flex: 1; border: none; outline: none; resize: none; font: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ink-darkest);
  background: transparent; max-height: 160px; }
.intake-input .btn-gradient { flex: none; align-self: stretch; }
.intake-attach { flex: none; align-self: stretch; width: 40px; border: 1px solid var(--outline); background: var(--surface);
  border-radius: var(--corner-md); font-size: 17px; cursor: pointer; color: var(--neutral-700); transition: background .12s, border-color .12s; }
.intake-attach:hover { background: var(--blue-000); border-color: var(--blue-200); }
/* 🐙 pressed = bot panel is open (acts as an open/close toggle). */
.intake-attach.on { background: var(--action-lightest); border-color: var(--action); color: var(--action); }
/* Filed-document lines in the thread — a small status the upload reports back through. */
.doc-file { font-size: 13px; line-height: 1.5; color: var(--neutral-700); background: var(--neutral-050, #f6f7f9);
  border: 1px solid var(--outline); border-radius: var(--corner-sm); padding: 8px 11px; }
.doc-file.ok { color: var(--green-900); background: var(--green-000, #f0faf3); border-color: var(--green-100, #cdead6); }
.doc-file.err { color: var(--red-800); background: var(--red-000); border-color: var(--red-100); }

/* ── INBOUND: requests reflected in from connected apps (Blueprint, …) ── */
.intake-inbox { border: 1px solid var(--blue-200); border-radius: var(--corner-lg); background: linear-gradient(180deg, var(--blue-000), var(--surface));
  box-shadow: var(--shadow-soft); padding: 12px 14px 14px; margin-bottom: 14px; max-height: 42vh; overflow-y: auto; }
.ib-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ib-title { font-size: 13px; font-weight: 700; color: var(--dark-blue-700); }
.ib-sub { font-size: 11.5px; color: var(--neutral-600); }
.ib-list { display: flex; flex-direction: column; gap: 12px; }
.ib-item { border: 1px solid var(--outline); border-radius: var(--corner-md); background: var(--surface); padding: 12px 14px; box-shadow: var(--shadow-card); transition: opacity 0.2s ease, transform 0.2s ease; }
.ib-item.removing { opacity: 0; transform: translateX(12px); }
.ib-prov { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ib-src { font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(90deg, var(--blue-500), var(--dark-blue-600));
  border-radius: var(--corner-sm); padding: 2px 9px; letter-spacing: .01em; }
.ib-tool { font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dark-blue-600); background: var(--dark-blue-000);
  border: 1px solid var(--neutral-200); border-radius: var(--corner-sm); padding: 1px 7px; }
.ib-meta { font-size: 11px; color: var(--neutral-600); }
.ib-req { font-size: 14.5px; font-weight: 700; color: var(--ink-darkest); margin: 2px 0 8px; line-height: 1.4; }
.ib-item .intake-steps { margin: 0 0 4px; }
.ib-item .ir-card { margin-top: 10px; }

/* ── SCOPE BAR: the "home epic" lens, pinned above every view ─────────────── */
.scopebar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--blue-200);
  border-radius: var(--corner-md);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
}
.scopebar .sb-icon { font-size: 15px; line-height: 1; }
.scopebar .sb-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-600);
}
.scopebar .sb-select {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-700);
  background: var(--blue-000);
  border: 1px solid var(--blue-300);
  border-radius: var(--corner-sm);
  padding: 5px 10px;
  cursor: pointer;
  max-width: 320px;
}
.scopebar .sb-select:hover { border-color: var(--blue-500); }
.scopebar .sb-select:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 1px; }
.scopebar .sb-note { font-size: 12px; color: var(--neutral-600); }
/* Ownership flag: the pinned item belongs to a teammate, not the signed-in user —
   the sync pulls the whole team's subtree now, so this needs to stand out, not blend
   in with the neutral .sb-note. */
.scopebar .sb-owner {
  font-size: 12px; font-weight: 700; color: var(--warn-700, #8a6d00);
  background: var(--warn-100, #fff3cd); border: 1px solid var(--warn-300, #ffe08a);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
/* When a real epic is pinned (not "All work"), the bar reads as active. */
.scopebar.pinned { border-color: var(--blue-400); background: rgba(233, 234, 252, 0.72); }
.scopebar.pinned .sb-note { color: var(--blue-700); font-weight: 600; }
@media (max-width: 640px) {
  .scopebar .sb-note { display: none; }
}

/* Axis switch — a compact segmented control (Epic · Area · Sprint). */
.sb-axes { display: inline-flex; gap: 2px; padding: 2px; background: var(--neutral-100); border: 1px solid var(--blue-200); border-radius: 999px; }
.sb-axis {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 4px 11px; border: 0; border-radius: 999px; color: var(--neutral-600); background: transparent;
  transition: color .12s ease, background .12s ease;
}
.sb-axis:hover { color: var(--blue-700); }
.sb-axis.active { color: #fff; background: var(--blue-600); box-shadow: var(--shadow-card); }
/* The drill select reads as a nested step. */
.scopebar .sb-child { color: var(--neutral-700); }
.scopebar .sb-child::before { content: "›"; }
.scopebar .sb-select:disabled { opacity: .5; cursor: not-allowed; }

/* Settings gear pushed to the far right. */
.sb-gear {
  margin-left: auto; font-size: 15px; line-height: 1; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--neutral-600);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.sb-gear:hover { background: var(--blue-000); color: var(--blue-700); border-color: var(--blue-200); }
.scopebar.board-off { border-color: var(--warn-400, #e0a800); background: rgba(255, 248, 230, 0.7); }
.scopebar.board-off .sb-note { color: var(--warn-700, #8a6d00); font-weight: 600; }

/* Board-settings popover. */
.sb-panel {
  position: absolute; top: calc(100% + 8px); right: 8px; z-index: 40;
  width: 260px; padding: 14px; background: #fff;
  border: 1px solid var(--blue-200); border-radius: var(--corner-md); box-shadow: var(--shadow-pop, 0 12px 32px rgba(20, 24, 74, 0.18));
}
.sbp-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--neutral-500); margin-bottom: 10px; }
.sbp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sbp-label { font-size: 13px; font-weight: 600; color: var(--ink-darkest); }
.sbp-select { font: inherit; font-size: 13px; font-weight: 600; color: var(--blue-700); background: var(--blue-000); border: 1px solid var(--blue-300); border-radius: 8px; padding: 5px 8px; flex: 1; max-width: 150px; }
.sbp-hint { font-size: 11.5px; color: var(--neutral-600); margin: 4px 0 0; line-height: 1.4; }
/* Toggle switch. */
.sbp-switch { position: relative; width: 40px; height: 22px; border-radius: 999px; border: 0; cursor: pointer; background: var(--neutral-300); transition: background .15s ease; padding: 0; }
.sbp-switch .sbp-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.sbp-switch.on { background: var(--blue-600); }
.sbp-switch.on .sbp-knob { transform: translateX(18px); }

/* ── Overseer capability bar: per-ability switches for the chat ─────────────── */
.cap-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 20px 0; margin: 0;
}
.cap-bar .cap-lead {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--neutral-600); margin-right: 2px;
}
.cap-switch {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
  border: 1px solid var(--outline); border-radius: 999px;
  background: var(--surface); padding: 5px 12px 5px 7px;
  transition: border-color .12s, background .12s;
}
.cap-switch:hover { border-color: var(--blue-400); background: var(--blue-000); }
.cap-switch .cap-knob {
  position: relative; width: 32px; height: 18px; border-radius: 999px; flex: 0 0 auto;
  background: var(--neutral-300); transition: background .15s ease;
}
.cap-switch .cap-knob::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.cap-switch .cap-txt { font-size: 12.5px; font-weight: 600; color: var(--neutral-700); }
.cap-switch.on { border-color: var(--blue-300); background: var(--blue-000); }
.cap-switch.on .cap-knob { background: var(--blue-600); }
.cap-switch.on .cap-knob::after { transform: translateX(14px); }
.cap-switch.on .cap-txt { color: var(--dark-blue-700); }
@media (max-width: 720px) {
  .scopebar .sb-child { display: none; }
}

/* ── the continuous meeting thread ─────────────────────────────────────────── */
/* In-thread meeting picker (a bot turn that lists processable meetings). */
.mp-lead { margin: 0 0 10px; font-size: 14px; color: var(--ink-darkest); }
.mp-list { display: flex; flex-direction: column; gap: 8px; }
.mp-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--outline); border-radius: var(--corner-md, 12px);
  background: var(--surface); padding: 11px 14px; transition: border-color .12s, background .12s;
}
.mp-item:hover { border-color: var(--blue-400); background: var(--blue-000); }
.mp-item .mp-subj { font-size: 14px; font-weight: 700; color: var(--dark-blue-700); }
.mp-item .mp-when { font-size: 12px; color: var(--neutral-600); white-space: nowrap; }
.mp-empty { font-size: 13px; color: var(--neutral-600); font-style: italic; }

/* The captured meeting rendered as a turn in the conversation. */
.ir-card.meeting-layer { border-left: 4px solid var(--action, #6d5efc); }
.ml-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ml-head .ml-ic { font-size: 16px; }
.ml-head .ml-subj { font-size: 14px; color: var(--dark-blue-700); }
.ml-head .ml-by {
  margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--blue-700); background: var(--blue-000);
  border: 1px solid var(--blue-200); border-radius: 999px; padding: 2px 9px;
}
.ml-cont { margin: 12px 0 0; font-size: 12.5px; color: var(--neutral-700); font-style: italic; }
.ml-gate { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.btn-gradient.sm { font-size: 12.5px; padding: 6px 16px; }

/* The banner above the composer noting the thread now carries meeting context. */
.intake-carrying {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 12.5px; font-weight: 600; color: var(--blue-700);
  background: rgba(233, 234, 252, 0.72); border: 1px solid var(--blue-300);
  border-radius: var(--corner-full, 999px); padding: 7px 14px;
}
.intake-carrying .ic-ic { font-size: 14px; }
.intake-carrying .ic-txt { line-height: 1.3; }

/* ── Overseer conversations: one thread for chat + meeting follow-ups ───────── */
.linkish { background: none; border: none; padding: 0; font: inherit; color: var(--blue-700); text-decoration: underline; cursor: pointer; }
.linkish:hover { color: var(--blue-900); }
/* ── LEFT CHAT RAIL (Overseer) ────────────────────────────────────────────────
   A persistent, scrollable side pane of your chats. Fresh-by-default drops you on a
   NEW empty thread each session; older ones — including threads a Teams bot left
   insights in — wait here, one click away, with a 🔴 dot while a capture is live. */
#view-intake:not([hidden]) { display: flex; align-items: stretch; gap: 0; }
.conv-rail {
  flex: 0 0 236px; width: 236px; display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--neutral-200); background: var(--blue-000);
  padding: 4px 12px 12px; margin-right: 20px;
}
.intake-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cr-head { display: flex; }
.cr-new {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border: 1px solid var(--blue-200); border-radius: var(--corner-md);
  background: var(--surface); color: var(--blue-700); font: inherit; font-weight: 700;
  font-size: 13.5px; cursor: pointer;
}
.cr-new:hover { border-color: var(--blue-300); box-shadow: 0 2px 8px rgba(26, 36, 80, 0.08); }
.cr-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--neutral-200); }
.conv-list { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; min-height: 0; margin: 0; }
.conv-item {
  display: flex; align-items: center; gap: 2px; width: 100%;
  border: 1px solid transparent; border-radius: var(--corner-sm); position: relative;
}
.conv-item:hover { background: var(--surface); border-color: var(--blue-100); }
.conv-item.active { background: var(--surface); border-color: var(--blue-200); }
.conv-item.archived { opacity: 0.7; }
.conv-item.live { border-color: color-mix(in srgb, #e5484d 40%, transparent); }
.conv-item-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px; border: none; background: transparent; cursor: pointer; font: inherit; text-align: left;
}
.conv-item-ic { font-size: 14px; flex: none; position: relative; }
.conv-item-live {
  position: absolute; right: -3px; top: -2px; width: 7px; height: 7px; border-radius: 50%;
  background: #e5484d; box-shadow: 0 0 0 2px var(--blue-000); animation: irc-pulse 1.6s ease-in-out infinite;
}
.conv-item-body { flex: 1; min-width: 0; }
.conv-item-title { display: block; font-size: 13px; font-weight: 600; color: var(--ink-darkest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item-meta { display: block; font-size: 11px; color: var(--neutral-600); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item-x {
  flex: none; border: none; background: transparent; color: var(--neutral-500); cursor: pointer;
  font-size: 11px; padding: 4px 6px; border-radius: var(--corner-sm); opacity: 0;
}
.conv-item:hover .conv-item-x, .conv-item.active .conv-item-x { opacity: 1; }
.conv-item-x:hover { background: var(--neutral-100); color: var(--ink-darkest); }
.conv-empty { font-size: 12.5px; color: var(--neutral-600); padding: 12px 8px; text-align: center; line-height: 1.4; }
/* Search box: filter the rail across ALL chats (incl. archived). Esc clears from within. */
.cr-search { position: relative; display: flex; }
.cr-search-input {
  flex: 1; min-width: 0; padding: 7px 10px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--neutral-200); border-radius: var(--corner-sm);
  background: var(--surface); color: var(--ink-darkest);
}
.cr-search-input::placeholder { color: var(--neutral-500); }
.cr-search-input:focus { outline: none; border-color: var(--blue-300); box-shadow: 0 0 0 2px var(--blue-100); }
/* Row actions (rename / archive / delete) — hidden until hover, like the old single ✕. */
.conv-item-actions { flex: none; display: flex; align-items: center; gap: 0; padding-right: 2px; }
.conv-item-act {
  flex: none; border: none; background: transparent; color: var(--neutral-500); cursor: pointer;
  font-size: 11px; line-height: 1; padding: 5px 5px; border-radius: var(--corner-sm); opacity: 0;
}
.conv-item:hover .conv-item-act, .conv-item.active .conv-item-act { opacity: 1; }
.conv-item-act:hover { background: var(--neutral-100); color: var(--ink-darkest); }
.conv-item-act.danger:hover { background: color-mix(in srgb, #e5484d 14%, transparent); color: #c62a2f; }
.conv-item-rename {
  flex: 1; width: 100%; margin: 3px; padding: 7px 8px; font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--blue-300); border-radius: var(--corner-sm); background: var(--surface); color: var(--ink-darkest);
}
.conv-item-rename:focus { outline: none; box-shadow: 0 0 0 2px var(--blue-100); }

/* ── FOLDED REASONING ─────────────────────────────────────────────────────────
   The live step trace was visually loud; once the answer lands it collapses into one
   subtle "🧠 Thought for a moment ⌄" line. Click to expand the full trace on demand. */
.ir-reasoning { margin: 0 0 8px; }
.ir-reasoning-sum {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 12px; color: var(--neutral-600); padding: 3px 8px; border-radius: 999px;
  background: var(--neutral-050, var(--blue-000)); user-select: none; width: fit-content;
}
.ir-reasoning-sum::-webkit-details-marker { display: none; }
.ir-reasoning-sum:hover { color: var(--ink-darkest); background: var(--blue-000); }
.ir-reasoning-ic { font-size: 12px; opacity: 0.8; }
.ir-reasoning-caret { font-size: 11px; transition: transform 160ms ease; }
.ir-reasoning[open] .ir-reasoning-caret { transform: rotate(180deg); }
.ir-reasoning-body {
  margin: 8px 0 2px; padding: 8px 10px; border-left: 2px solid var(--neutral-200);
  display: flex; flex-direction: column; gap: 4px;
}

/* ── RECONNECT BAR: this chat has a live Teams capture running elsewhere ───────── */
.intake-reconnect {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 860px; margin: 0 auto 8px; width: 100%; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, #e5484d 30%, var(--outline)); border-radius: var(--corner-md);
  background: color-mix(in srgb, #e5484d 6%, var(--surface));
}
.irc-ic { font-size: 11px; animation: irc-pulse 1.6s ease-in-out infinite; }
.irc-txt { flex: 1; min-width: 140px; font-size: 12.5px; color: var(--ink-darkest); }
.irc-btn { font-weight: 700; }
@keyframes irc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.detail-overseer { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--blue-200); border-radius: var(--corner-md); background: var(--blue-000); display: flex; flex-direction: column; gap: 10px; }
.detail-overseer .outcome-soon { margin: 0; }

/* ── TEAMS BOT SIDE PANEL ─────────────────────────────────────────────────── */
/* A fixed right rail: configure → send → progress/status → live transcript → stop.
   Overlays without covering the composer, so the Overseer stays usable while it runs. */
.bot-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--neutral-300);
  box-shadow: -14px 0 40px rgba(1, 40, 111, 0.16); z-index: 60;
  display: flex; flex-direction: column; padding: 16px 16px 18px;
  animation: bp-in 180ms ease-out;
}
/* The panel's own `hidden` attribute must win over `display: flex` above — without
   this the attribute selector loses to the class rule and the panel can't be closed. */
.bot-panel[hidden] { display: none !important; }
@keyframes bp-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.bp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bp-title { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.bp-ic { font-size: 17px; }
.bp-x { border: none; background: transparent; font-size: 15px; color: var(--neutral-600); cursor: pointer; padding: 4px 7px; border-radius: var(--corner-sm); }
.bp-x:hover { background: var(--neutral-100); color: var(--ink-darkest); }
.bp-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.bp-lbl { font-size: 12px; font-weight: 600; color: var(--neutral-700); }
.bp-field input, .bp-field select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--neutral-300);
  border-radius: var(--corner-sm); background: #fff; color: var(--ink-darkest); width: 100%;
}
.bp-field input:focus, .bp-field select:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-lightest); }
.bp-send { width: 100%; margin-top: 2px; }
.bp-note { font-size: 12px; color: var(--neutral-600); line-height: 1.5; margin: 10px 0 0; }
.bp-note.err { color: var(--red-700); }

/* [hidden] must win over the display rules below, or config+live show at once. */
.bot-panel [hidden] { display: none !important; }
.bp-live { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bp-run { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bp-dot { color: var(--green-900); font-size: 11px; animation: bp-pulse 1.4s ease-in-out infinite; }
.bp-dot.off { color: var(--neutral-500); animation: none; }
@keyframes bp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.bp-runsubj { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-open { font-size: 12px; color: var(--action); text-decoration: none; white-space: nowrap; }
.bp-open:hover { text-decoration: underline; }

.bp-steps { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 8px; }
.bp-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.bp-sdot { width: 11px; height: 11px; border-radius: 50%; background: var(--neutral-300); border: 2px solid var(--neutral-300); transition: all 160ms; }
.bp-step.done .bp-sdot { background: var(--green-900); border-color: var(--green-900); }
.bp-step.active .bp-sdot { background: var(--action); border-color: var(--action); box-shadow: 0 0 0 4px var(--action-lightest); }
.bp-slabel { font-size: 10.5px; color: var(--neutral-600); text-align: center; }
.bp-step.active .bp-slabel { color: var(--action); font-weight: 600; }
.bp-step.done .bp-slabel { color: var(--green-900); }
.bp-bar { height: 6px; background: var(--neutral-200); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.bp-bar-fill { height: 100%; width: 10%; background: linear-gradient(90deg, var(--action), #6a8bff); border-radius: 999px; transition: width 400ms ease; }
.bp-status { font-size: 12.5px; color: var(--neutral-700); line-height: 1.5; min-height: 34px; margin-bottom: 10px; }

.bp-tx-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--neutral-600); margin-bottom: 6px; }
.bp-tx-count { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--action); }
.bp-transcript { flex: 1; min-height: 90px; overflow-y: auto; border: 1px solid var(--neutral-200); border-radius: var(--corner-sm); background: var(--neutral-050, #fafafb); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.bp-tx-empty { font-size: 12px; color: var(--neutral-600); line-height: 1.5; margin: 0; }
.bp-tx-line { font-size: 12.5px; line-height: 1.5; margin: 0; color: var(--ink-darkest); padding-bottom: 5px; border-bottom: 1px solid var(--neutral-100); }
.bp-tx-line:last-child { border-bottom: none; }

.bp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bp-actions .btn-primary, .bp-actions .btn-quiet { flex: 1 1 auto; }
.bp-hint { font-size: 11.5px; color: var(--neutral-600); line-height: 1.5; margin: 10px 0 0; }

/* "The meeting looks over" nudge — surfaced when the bot is left alone in the call. */
.bp-endnudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px;
  padding: 9px 11px; border: 1px solid var(--amber-300, #f2c94c); border-radius: var(--corner-sm);
  background: var(--amber-050, #fff8e6); }
.bp-endnudge-txt { flex: 1 1 100%; font-size: 12.5px; font-weight: 600; color: var(--ink-darkest); }
.bp-endnudge .btn-primary, .bp-endnudge .btn-quiet { flex: 1; }

/* Parked captures — kept in the panel, one click to bring into the chat. */
.bp-parked { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bp-park-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 1px solid var(--neutral-200); border-radius: var(--corner-sm); background: var(--neutral-050, #fafafb); }
.bp-park-lbl { flex: 1; font-size: 12px; font-weight: 600; color: var(--ink-darkest); }

/* In-chat pipeline checklist: a failed phase reads red, not silently "done". */
.ist[data-status="error"] .ist-dot { border-color: var(--red-500, #e5484d); background: var(--red-500, #e5484d); }
.ist[data-status="error"] .ist-label { color: var(--red-600, #ce2c31); }

body.bot-panel-open .app-main { padding-right: 0; }

/* Live-join entry in the meeting picker. */
.mp-live { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--blue-200); border-radius: var(--corner-md); background: var(--blue-000); cursor: pointer; }
.mp-live:hover { border-color: var(--action); background: var(--action-lightest); }
.mp-live-ic { font-size: 18px; flex: none; }
.mp-live-sub { display: block; font-size: 11.5px; color: var(--neutral-600); margin-top: 2px; }

@media (max-width: 720px) { .bot-panel { width: 100%; max-width: 100%; } }

/* ── magic-link login gate ─────────────────────────────────────────────────── */
/* Full-screen overlay shown until a verified session token is held. body.auth-gated
   hides the app behind it so nothing renders (or calls upstreams) pre-auth. */
body.auth-gated { overflow: hidden; }
.auth-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, var(--action-lightest), #f4f6fb 60%);
}
.auth-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--corner-lg);
  box-shadow: var(--shadow-card);
  padding: 36px 32px 28px;
  text-align: center;
}
.auth-logo { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.auth-title { margin: 0 0 6px; font-size: 22px; color: var(--ink-darkest); }
.auth-sub { margin: 0 0 22px; color: var(--neutral-600, #5a5a68); font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-email {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font-size: 15px;
  border: 1px solid var(--outline); border-radius: var(--corner-sm);
}
.auth-email:focus { outline: 2px solid var(--action); border-color: var(--action); }
.auth-btn {
  padding: 12px 14px; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--action); border: 0;
  border-radius: var(--corner-sm); cursor: pointer;
}
.auth-btn:disabled { opacity: 0.6; cursor: default; }
.auth-note { margin: 16px 0 0; font-size: 13px; }
.auth-note.ok { color: var(--green-900); }
.auth-note.err { color: var(--error); }
.auth-foot { margin: 20px 0 0; font-size: 11px; color: var(--neutral-500, #8a8a97); }