/* ============================================================
   Credentialing Agents — Demo Stylesheet
   Brand tokens per brand-guidev1: ivory canvas, white paper
   cards, hairline borders, DM Sans + JetBrains Mono, navy
   accent, semantic status colors only.
   ============================================================ */

:root {
  --canvas: #F8F8F6;
  --canvas-2: #EEF0F3;
  --paper: #FFFFFF;
  --paper-2: #FAFBFC;
  --ink: #0F1A2E;
  --ink-2: #4D576D;
  --ink-3: #8791A3;
  --navy: #1A437D;
  --navy-2: #224B83;
  --green: #059669;
  --amber: #D97706;
  --rose: #E11D48;
  --hairline: #E6E8EC;
  --hairline-2: #EDEFF2;
  --green-bg: #ECFDF5;
  --amber-bg: #FFFBEB;
  --rose-bg: #FFF1F2;
  --navy-bg: #EFF4FB;
  --radius-card: 1.125rem;
  --radius-panel: 2rem;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --shadow-pop: 0 12px 32px rgba(15, 26, 46, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

a { color: var(--navy-2); text-decoration: none; }

button { font-family: inherit; font-size: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* ---------- Top navigation ---------- */

.topnav {
  background: var(--ink);
  color: #fff;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1.75rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topnav .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1rem;
  color: #fff;
  white-space: nowrap;
}

.topnav .brand svg { width: 26px; height: 26px; color: #fff; flex: none; }

.topnav .brand .dim { color: rgba(255, 255, 255, 0.45); font-weight: 700; }

.topnav nav { display: flex; gap: 0.35rem; flex: 1; }

.topnav nav a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}

.topnav nav a:hover { color: #fff; }

.topnav nav a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.0);
}

.topnav nav a svg { width: 15px; height: 15px; }

.topnav .nav-right { display: flex; align-items: center; gap: 0.9rem; }

.jump {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;
  border-radius: 0.6rem;
  padding: 0.34rem 0.7rem;
  min-width: 150px;
  white-space: nowrap;
}

.jump svg { width: 14px; height: 14px; flex: none; }

.jump kbd {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  padding: 0 0.3rem;
  margin-left: auto;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--navy-2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  flex: none;
}

.menu-btn { color: rgba(255,255,255,0.7); display: flex; align-items: center; }
.menu-btn:hover { color: #fff; }
.menu-btn svg { width: 20px; height: 20px; }

/* dropdown for reset */
.nav-menu { position: relative; }
.nav-menu .dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-pop);
  min-width: 210px;
  padding: 0.4rem;
  display: none;
  z-index: 60;
}
.nav-menu .dropdown.open { display: block; }
.nav-menu .dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.nav-menu .dropdown button:hover { background: var(--canvas); color: var(--ink); }

/* ---------- Layout ---------- */

.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 2.5rem 5rem;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
}

.page-head h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.page-head .sub { color: var(--ink-3); font-size: 0.9rem; margin-top: 0.35rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.btn svg { width: 15px; height: 15px; }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--navy); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--ink); }

.btn-ghost {
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink-2);
}
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }

.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8125rem; }

.btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }

/* ---------- Stat cards ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}

.stat {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.stat:hover { border-color: var(--ink-3); }

.stat .num {
  font-family: var(--font-mono);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat .lbl {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.3rem;
}

.stat.zero .num { color: var(--ink-3); }
.stat.active-filter { border-color: var(--amber); background: var(--amber-bg); }
.stat.active-filter .num { color: var(--amber); }

/* ---------- Search + filters ---------- */

.toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }

.search {
  flex: 1;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.62rem 1.15rem;
}

.search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }

.search input {
  border: none;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: transparent;
}

.search input::placeholder { color: var(--ink-3); }

.view-toggle {
  margin-left: auto;
  display: flex;
  background: var(--canvas-2);
  border-radius: 999px;
  padding: 0.22rem;
}

.view-toggle button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-3);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}

.view-toggle button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(15,26,46,0.08); }
.view-toggle svg { width: 14px; height: 14px; }

.filters { display: flex; gap: 0.6rem; margin-bottom: 1.4rem; flex-wrap: wrap; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.8438rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.5rem 1rem;
}

.filter-chip:hover { border-color: var(--ink-3); }
.filter-chip svg { width: 13px; height: 13px; color: var(--ink-3); }
.filter-chip select {
  border: none; background: transparent; font-family: inherit; font-size: inherit;
  color: var(--ink); font-weight: 600; outline: none; cursor: pointer;
}

/* ---------- Operations table (list view) ---------- */

.ops-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

table.ops { width: 100%; border-collapse: collapse; }

table.ops th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
}

table.ops td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hairline-2);
  vertical-align: middle;
}

table.ops tr:last-child td { border-bottom: none; }

table.ops tbody tr { cursor: pointer; transition: background 0.12s; }
table.ops tbody tr:hover { background: var(--paper-2); }
table.ops tbody tr.paused-row { background: #FFFDF4; box-shadow: inset 3px 0 0 var(--amber); }

.clin-cell { display: flex; align-items: center; gap: 0.85rem; }

.clin-avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--canvas-2); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.9375rem; flex: none;
}

.clin-cell .nm { font-weight: 600; font-size: 0.9375rem; }
.clin-cell .fac { color: var(--ink-2); font-size: 0.8125rem; }
.clin-cell .loc { color: var(--ink-3); font-size: 0.75rem; }

/* pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  white-space: nowrap;
}

.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.pill-green { background: var(--green-bg); color: var(--green); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-rose  { background: var(--rose-bg);  color: var(--rose); }
.pill-gray  { background: var(--canvas-2); color: var(--ink-2); }
.pill-navy  { background: var(--navy-bg);  color: var(--navy); }

.pill-stack { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }

/* timeline cell */
.timeline { min-width: 170px; }
.timeline .t-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; }
.timeline .t-health { font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; }
.timeline .t-health .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.timeline .t-pct { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }
.timeline .t-dates { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-3); margin-top: 0.3rem; }
.timeline .t-end { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-3); margin-top: 0.15rem; }

.track {
  height: 4px;
  border-radius: 999px;
  background: var(--canvas-2);
  overflow: hidden;
}

.track .fill {
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.track .fill.amber { background: var(--amber); }
.track .fill.rose  { background: var(--rose); }
.track .fill.navy  { background: var(--navy); }

.health-ontrack { color: var(--green); }
.health-behind  { color: var(--rose); }
.health-atrisk  { color: var(--amber); }

/* progress cell */
.prog { min-width: 140px; }
.prog .p-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; }
.prog .p-lbl { font-size: 0.8125rem; color: var(--ink-2); }
.prog .p-lbl.big { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.prog .p-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }

/* category chips */
.cats { display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: 300px; }

.cat {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--canvas-2);
  border-radius: 6px;
  padding: 0.16rem 0.5rem;
}

.cat.done { background: var(--green-bg); color: var(--green); }
.cat.warn { background: var(--amber-bg); color: var(--amber); }

.chev { color: var(--ink-3); }
.chev svg { width: 16px; height: 16px; }

/* ---------- Grid view ---------- */

table.gridview th { text-align: center; }
table.gridview th:first-child { text-align: left; }
table.gridview td.gdot { text-align: center; }

.gdot .dot9 {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--amber);
}
.gdot .dot9.none { width: 4px; height: 4px; background: var(--hairline); }
.gdot .glyph { color: var(--green); display: inline-flex; }
.gdot .glyph svg { width: 13px; height: 13px; }

.gd-days { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--rose); }
.gd-days.ok { color: var(--ink-3); }
.gd-pct { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-2); text-align: right; }

/* ---------- Operation detail ---------- */

.op-layout { display: flex; align-items: flex-start; gap: 1.5rem; }

.op-main { flex: 1; min-width: 0; }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.backlink:hover { color: var(--ink); }
.backlink svg { width: 15px; height: 15px; }

.op-hero {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.6rem;
}

.op-hero .hero-top { display: flex; align-items: flex-start; gap: 1.1rem; }

.op-hero .clin-avatar { width: 52px; height: 52px; font-size: 1.2rem; }

.op-hero h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }

.op-hero .meta { display: flex; align-items: center; gap: 0.9rem; color: var(--ink-2); font-size: 0.9rem; margin-top: 0.25rem; flex-wrap: wrap; }
.op-hero .meta .sep { color: var(--hairline); }
.op-hero .meta svg { width: 14px; height: 14px; color: var(--ink-3); vertical-align: -2px; }

.op-hero .team { color: var(--ink-3); font-size: 0.8438rem; margin-top: 0.55rem; display: flex; align-items: center; gap: 0.5rem; }

.op-hero .hero-status { margin-left: auto; }

.hero-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline-2);
}

.hero-bar .hb-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.45rem; }
.hero-bar .hb-lbl { font-size: 0.8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-bar .hb-lbl .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.hero-bar .hb-val { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }
.hero-bar .hb-sub { display: flex; gap: 1.4rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-3); margin-top: 0.45rem; }
.hero-bar .track { height: 5px; }

/* requirements */
.req-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1rem;
}

.req-head h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; }

.req-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  background: var(--canvas-2);
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
}

.req-tabs { margin-left: auto; display: flex; gap: 0.45rem; }

.req-tab {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.req-tab .n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }
.req-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.req-tab.on .n { color: rgba(255,255,255,0.6); }

.req-section {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.1rem;
}

.req-section .sec-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}

.req-section .sec-idx {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
}

.req-section .sec-head h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }

.req-section .sec-rule { flex: 1; height: 1px; background: var(--hairline-2); }

.req-section .sec-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }

.req-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0.5rem;
  border-radius: 0.6rem;
  transition: background 0.12s;
}

.req-item:hover { background: var(--paper-2); }

.req-check {
  width: 20px; height: 20px;
  border: 1.5px solid #CDD2DB;
  border-radius: 999px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.15s;
  background: var(--paper);
}

.req-check svg { width: 11px; height: 11px; }

.req-item.complete .req-check { background: var(--green); border-color: var(--green); color: #fff; }
.req-item.attention .req-check { border-color: var(--rose); color: var(--rose); }
.req-item.attention .req-check svg { width: 10px; height: 10px; }

.req-item .req-name { font-size: 0.9375rem; font-weight: 500; min-width: 0; }
.req-item.complete .req-name { color: var(--ink-2); }

.req-item .req-dots { display: inline-flex; gap: 3px; margin-left: 0.35rem; }
.req-item .req-dots i { width: 4px; height: 4px; border-radius: 999px; background: #CDD2DB; }
.req-item .req-dots i.on { background: var(--green); }
.req-item .req-dots i.warn { background: var(--rose); }

.req-item .req-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: 0;
  flex-wrap: nowrap;
}

.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  max-width: 190px;
}

.doc-chip:hover { border-color: var(--navy); color: var(--navy); }
.doc-chip svg { width: 12px; height: 12px; flex: none; }
.doc-chip .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-chip.rejected {
  position: relative;
  color: var(--rose);
  border-color: rgba(225, 29, 72, 0.34);
  background: var(--rose-bg);
}
.doc-chip.rejected:hover { border-color: var(--rose); color: var(--rose); }
.doc-chip .doc-status {
  flex: none;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.doc-chip[data-tooltip]::before,
.doc-chip[data-tooltip]::after {
  position: absolute;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 120;
}
.doc-chip[data-tooltip]::before {
  content: "";
  bottom: calc(100% + 4px);
  border: 7px solid transparent;
  border-top-color: var(--rose);
  transform: translateY(3px);
}
.doc-chip[data-tooltip]::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 17px);
  width: 265px;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
  font-size: 0.75rem;
  font-weight: 650;
  color: #fff;
  background: var(--rose);
  border-radius: 0.7rem;
  padding: 0.72rem 0.85rem;
  box-shadow: 0 16px 34px rgba(225, 29, 72, 0.28);
  transform: translateY(5px);
}
.doc-chip[data-tooltip]:hover::before,
.doc-chip[data-tooltip]:focus-visible::before,
.doc-chip[data-tooltip]:hover::after,
.doc-chip[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.expiry-note {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.22rem 0.48rem;
  font-size: 0.7188rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}
.expiry-note .expiry-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}
.expiry-note .expiry-copy { opacity: 0.76; }
.expiry-note .expiry-date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 650;
}
.expiry-note.red {
  color: var(--rose);
  background: var(--rose-bg);
  border-color: rgba(225, 29, 72, 0.14);
}
.expiry-note.orange {
  color: var(--amber);
  background: var(--amber-bg);
  border-color: rgba(217, 119, 6, 0.16);
}

.icon-btn {
  width: 30px; height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  transition: background 0.12s, color 0.12s;
}

.icon-btn:hover { background: var(--canvas-2); color: var(--ink); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---------- Agent panel ---------- */

.agent-panel {
  width: 380px;
  flex: none;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}

.agent-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--hairline);
  flex: none;
}

.agent-head .agent-avatar {
  width: 30px; height: 30px;
  border-radius: 0.55rem;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8125rem;
}

.agent-head .t { font-weight: 600; font-size: 0.875rem; }

.agent-head .st {
  margin-left: auto;
  font-size: 0.6563rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.agent-head .st .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green); }
.agent-head .st.thinking .dot { background: var(--amber); animation: pulse 1.2s infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.agent-feed { padding: 1rem 1.1rem; overflow-y: auto; flex: 1; }

.feed-time {
  font-family: var(--font-mono);
  font-size: 0.6563rem;
  color: var(--ink-3);
  margin: 0.9rem 0 0.5rem;
}

.feed-line {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  font-size: 0.7813rem;
  color: var(--ink-2);
  padding: 0.28rem 0;
}

.feed-line .ic { flex: none; width: 15px; text-align: center; }
.feed-line .k { font-weight: 600; color: var(--ink); }
.feed-line.wake .k { color: var(--amber); }
.feed-line.check .k { color: var(--navy); }

.feed-bubble {
  background: var(--canvas-2);
  border-radius: 0.9rem;
  padding: 0.8rem 0.95rem;
  font-size: 0.8438rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0.45rem 0;
}

.feed-bubble .tag {
  display: block;
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}

.feed-bubble.exec .tag { color: var(--navy); }

.agent-ask {
  border-top: 1px solid var(--hairline);
  padding: 0.8rem 1rem;
  flex: none;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.agent-ask input {
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.8438rem;
  outline: none;
  color: var(--ink);
  background: var(--paper);
}

.agent-ask input:focus { border-color: var(--navy); }

.agent-ask .send {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.agent-ask .send svg { width: 14px; height: 14px; }

.agent-foot {
  border-top: 1px solid var(--hairline);
  padding: 0.55rem 1.1rem;
  display: flex;
  gap: 1.1rem;
  font-size: 0.7188rem;
  color: var(--ink-3);
  flex: none;
}

/* suggestion chips */
.suggest { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0 1.1rem 0.8rem; flex: none; }

.suggest button {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
}
.suggest button:hover { border-color: var(--navy); color: var(--navy); }

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 46, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 7vh 1.5rem 3rem;
  z-index: 100;
  overflow-y: auto;
}

.modal {
  background: var(--paper);
  border-radius: var(--radius-panel);
  width: 640px;
  max-width: 100%;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: modal-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.modal-head { padding: 1.6rem 2rem 0; display: flex; align-items: flex-start; }
.modal-head h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; }
.modal-head .sub { color: var(--ink-3); font-size: 0.875rem; margin-top: 0.25rem; }
.modal-head .close { margin-left: auto; color: var(--ink-3); }
.modal-head .close:hover { color: var(--ink); }

.modal-body { padding: 1.5rem 2rem 2rem; }

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.45rem;
}

.field input[type="text"], .field input[type="date"], .field select {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 0.7rem;
  padding: 0.65rem 0.9rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  outline: none;
  background: var(--paper);
}

.field input:focus, .field select:focus { border-color: var(--navy); }

.field .hint { font-size: 0.7813rem; color: var(--ink-3); margin-top: 0.35rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.clin-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }

.clin-pick button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
}

.clin-pick button .clin-avatar { width: 24px; height: 24px; font-size: 0.6875rem; }
.clin-pick button.on { border-color: var(--navy); color: var(--navy); background: var(--navy-bg); }
.clin-pick button .docs-badge { font-size: 0.625rem; color: var(--green); font-weight: 600; }

.tpl-preview {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
  padding: 1rem 1.2rem;
  margin-top: 0.4rem;
}

.tpl-preview .tp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.tpl-preview .tp-name { font-weight: 600; font-size: 0.9rem; }
.tpl-preview .tp-n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }
.tpl-preview .tp-rows { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.modal-foot {
  padding: 0 2rem 1.8rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
}

/* doc picker list */
.doc-pick { max-height: 340px; overflow-y: auto; margin: 0 -0.5rem; }

.doc-pick .dp-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.875rem;
  color: var(--ink);
}

.doc-pick .dp-row:hover { background: var(--canvas); }
.doc-pick .dp-row svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.doc-pick .dp-row .m { margin-left: auto; font-size: 0.6875rem; color: var(--green); font-weight: 600; }
.doc-pick .dp-row > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-pick .dp-exp,
.doc-pick .dp-status {
  flex: none;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  font-size: 0.6563rem;
  font-weight: 700;
  white-space: nowrap;
}
.doc-pick .dp-exp { color: var(--amber); background: var(--amber-bg); }
.doc-pick .dp-status.reject { color: var(--rose); background: var(--rose-bg); }
.doc-pick .empty { color: var(--ink-3); font-size: 0.875rem; padding: 1rem 0.75rem; }

/* ---------- Toast ---------- */

.toast-wrap {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.toast {
  background: var(--ink);
  color: #fff;
  font-size: 0.8438rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  box-shadow: var(--shadow-pop);
  animation: toast-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toast svg { width: 14px; height: 14px; color: #6EE7B7; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.toast.out { opacity: 0; transition: opacity 0.3s; }

/* ---------- Contacts ---------- */

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }

.contact-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.3rem 1.4rem;
  transition: border-color 0.15s;
}

.contact-card:hover { border-color: var(--ink-3); }

.contact-card .cc-top { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.contact-card .nm { font-weight: 600; font-size: 1rem; }
.contact-card .rl { color: var(--ink-3); font-size: 0.8125rem; }

.contact-card .cc-meta { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8438rem; color: var(--ink-2); }
.contact-card .cc-meta .mono { font-size: 0.7813rem; }

.contact-card .cc-foot { margin-top: 0.95rem; padding-top: 0.85rem; border-top: 1px solid var(--hairline-2); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.section-title {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 2rem 0 0.9rem;
}

.section-title:first-of-type { margin-top: 0; }

/* ---------- Inbox ---------- */

.inbox-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.25rem;
  align-items: flex-start;
}

.inbox-list {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.inbox-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hairline-2);
  transition: background 0.12s;
}

.inbox-row:last-child { border-bottom: none; }
.inbox-row:hover { background: var(--paper-2); }
.inbox-row.sel { background: var(--navy-bg); }

.inbox-row .ir-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.inbox-row .frm { font-weight: 600; font-size: 0.8438rem; }
.inbox-row .tm { margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-3); }
.inbox-row .unread-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--navy); flex: none; }
.inbox-row .sj { font-size: 0.8438rem; color: var(--ink); margin-bottom: 0.15rem; }
.inbox-row .pv { font-size: 0.7813rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inbox-read {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.75rem 2rem;
  min-height: 300px;
}

.inbox-read h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.inbox-read .rd-meta { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-3); font-size: 0.8125rem; margin-bottom: 1.25rem; }
.inbox-read .rd-body { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.65; max-width: 62ch; }
.inbox-read .rd-actions { margin-top: 1.5rem; display: flex; gap: 0.6rem; }

/* ---------- Library ---------- */

.lib-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.3rem 1.4rem;
}

.lib-card .lc-top { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; }
.lib-card h4 { font-size: 0.9688rem; font-weight: 600; }
.lib-card .lc-n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); margin-left: auto; }
.lib-card .lc-sub { color: var(--ink-3); font-size: 0.8125rem; margin-bottom: 0.85rem; }
.lib-card .tp-rows { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.file-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.2rem;
  font-size: 0.8438rem;
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline-2);
}

.file-row:last-child { border-bottom: none; }
.file-row svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.file-row a { color: var(--ink); font-weight: 500; }
.file-row a:hover { color: var(--navy); }
.file-row .ext {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: var(--canvas-2);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
}

/* ---------- Empty state ---------- */

.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ink-3);
}

.empty-state .big { font-size: 1.05rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.3rem; }

/* ---------- Build overlay (agent creating operation) ---------- */

.build-steps { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.5rem; }

.build-step {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.2rem;
  font-size: 0.875rem;
  color: var(--ink-3);
  opacity: 0.35;
  transition: opacity 0.3s;
}

.build-step.on { opacity: 1; color: var(--ink-2); }
.build-step.done { opacity: 1; color: var(--ink); }

.build-step .bs-ic {
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 0.6875rem;
  background: var(--paper);
}

.build-step.on .bs-ic { border-color: var(--amber); }
.build-step.on .bs-ic::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--amber);
  animation: pulse 1s infinite;
}

.build-step.done .bs-ic { border-color: var(--green); background: var(--green); color: #fff; }
.build-step.done .bs-ic svg { width: 10px; height: 10px; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .op-layout { flex-direction: column; }
  .agent-panel { width: 100%; position: static; max-height: 420px; order: 2; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .inbox-layout { grid-template-columns: 1fr; }
  .int-quick { align-items: flex-start; flex-direction: column; }
  .iq-meter { width: 100%; justify-content: space-between; }
}

@media (max-width: 720px) {
  .page { padding: 1.25rem 1rem 4rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero-bars { grid-template-columns: 1fr; gap: 1.2rem; }
  .topnav nav a span { display: none; }
  table.ops .hide-sm { display: none; }
  .int-head { flex-wrap: wrap; }
  .int-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .num-search { grid-template-columns: 1fr; }
  .api-grid { grid-template-columns: 1fr; }
}

/* fade-in for view transitions */
.view-enter { animation: view-in 0.25s ease; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   v2 additions: steps, blank-op flow, file viewer, unified
   inbox, integrations, catalog
   ============================================================ */

/* ---------- Kicker + two-tone headline (brand headline device) ---------- */

.kicker {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}

h1.two-tone { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1.04; }
h1.two-tone span { color: var(--ink-3); }

.ws-chip {
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  white-space: nowrap;
}

.ws-block { text-align: right; }
.ws-block .mono { font-size: 0.9rem; color: var(--ink); }

/* ---------- Requirement steps ---------- */

.req-block.open { background: var(--paper-2); border-radius: 0.8rem; margin: 0 -0.5rem; padding: 0 0.5rem; }

.req-item .req-name { cursor: pointer; }
.req-dots { cursor: pointer; padding: 0.3rem 0.2rem; }

.steps-wrap { padding: 0.2rem 0 0.9rem 2.6rem; }

.steps-head {
  font-size: 0.6563rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}

.step-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.5rem 0.42rem 0;
  border-radius: 0.5rem;
  font-size: 0.8438rem;
}

.step-row:hover { background: rgba(15, 26, 46, 0.025); }

.step-box { display: inline-flex; flex: none; }

.step-check {
  width: 17px; height: 17px;
  border: 1.5px solid #CDD2DB;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: var(--paper);
}

.step-check svg { width: 9px; height: 9px; }
.step-check.on { background: var(--green); border-color: var(--green); color: #fff; }
.step-check.lk { border-color: var(--hairline); color: var(--ink-3); background: var(--canvas-2); }
.step-check.lk svg { width: 8px; height: 8px; }
.step-check.fl { border-color: var(--rose); color: var(--rose); }

.step-row .step-name { color: var(--ink); font-weight: 500; }
.step-row.done .step-name { text-decoration: line-through; color: var(--ink-3); }
.step-row.locked .step-name { color: var(--ink-3); }
.step-row.flag .step-name { color: var(--ink); }

.step-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }

.step-wait {
  font-size: 0.7188rem;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.step-note {
  font-size: 0.7188rem;
  color: var(--rose);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.icon-btn.sm { width: 24px; height: 24px; }
.icon-btn.sm svg { width: 13px; height: 13px; }

.team-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--green); display: inline-block; }
.op-hero .team strong { color: var(--ink); font-weight: 600; }
.op-hero .team em { font-style: normal; color: var(--ink-3); }

/* section entrance */
.sec-in { animation: view-in 0.3s both; }

.req-skeleton {
  background: var(--paper);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-card);
  padding: 2.2rem;
  text-align: center;
  color: var(--ink-3);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.req-skeleton .spin {
  width: 14px; height: 14px;
  border: 2px solid var(--hairline);
  border-top-color: var(--navy);
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
}

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

/* ---------- Agent panel: intro + user bubbles + composer ---------- */

.agent-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.intro-mark {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.intro-mark svg { width: 28px; height: 28px; }
.intro-t { font-weight: 600; font-size: 0.9688rem; margin-bottom: 0.3rem; }
.intro-s { color: var(--ink-3); font-size: 0.8438rem; max-width: 26ch; }

.agent-head .agent-avatar svg { width: 16px; height: 16px; }

.feed-user {
  background: var(--navy);
  color: #fff;
  border-radius: 0.9rem;
  border-bottom-right-radius: 0.25rem;
  padding: 0.75rem 0.95rem;
  font-size: 0.8438rem;
  line-height: 1.5;
  margin: 0.45rem 0 0.45rem 1.6rem;
}

.composer-ic { color: var(--ink-3); display: inline-flex; }
.composer-ic svg { width: 15px; height: 15px; }

/* ---------- File viewer modal ---------- */

.file-backdrop { background: rgba(10, 14, 22, 0.78); padding: 4vh 2rem; align-items: center; }

.file-modal {
  background: var(--paper);
  border-radius: 1.25rem;
  width: 1060px;
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  animation: modal-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.fm-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  flex: none;
}

.fm-ic {
  width: 34px; height: 34px;
  border-radius: 0.6rem;
  background: var(--canvas-2);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fm-ic svg { width: 16px; height: 16px; }
.fm-name { font-weight: 600; font-size: 0.875rem; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-sub { font-size: 0.7188rem; color: var(--ink-3); }
.fm-count { margin-left: auto; font-size: 0.75rem; color: var(--ink-3); }

.fm-act {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.fm-act:hover { background: var(--canvas-2); color: var(--ink); }
.fm-act svg { width: 14px; height: 14px; }

.fm-body { display: flex; flex: 1; min-height: 0; position: relative; }

.fm-preview {
  flex: 1;
  background: #14181F;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  min-height: 420px;
}

.fm-preview img { max-width: 92%; max-height: 92%; object-fit: contain; border-radius: 4px; }
.fm-preview iframe { width: 100%; height: 100%; border: none; min-height: 560px; background: #fff; }

.fm-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.fm-nav svg { width: 18px; height: 18px; }
.fm-nav.prev { left: 14px; }
.fm-nav.next { right: 334px; }
.fm-nav[disabled] { opacity: 0.3; cursor: default; }

.fm-side {
  width: 320px;
  flex: none;
  border-left: 1px solid var(--hairline);
  padding: 1.4rem 1.5rem;
  overflow-y: auto;
}

.fm-alert {
  margin-top: 1rem;
  border-radius: 0.85rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid transparent;
}
.fm-alert strong {
  display: block;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}
.fm-alert span {
  display: block;
  font-size: 0.7813rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.fm-alert.red {
  background: var(--rose-bg);
  border-color: rgba(225, 29, 72, 0.22);
}
.fm-alert.red strong { color: var(--rose); }
.fm-alert.orange {
  background: var(--amber-bg);
  border-color: rgba(217, 119, 6, 0.24);
}
.fm-alert.orange strong { color: var(--amber); }

.fm-lbl {
  font-size: 0.6563rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}

.fm-title { font-weight: 600; font-size: 0.9688rem; line-height: 1.35; }
.fm-crit { font-size: 0.8438rem; color: var(--ink-2); line-height: 1.55; }

.fm-btn { width: 100%; justify-content: center; margin-bottom: 0.55rem; }
.fm-btn.rose { color: var(--rose); border-color: #FECDD3; }
.fm-btn.rose:hover { border-color: var(--rose); }

.fm-kbd { font-size: 0.6875rem; color: var(--ink-3); margin-top: 1rem; text-align: center; }

/* ---------- Preview outcome grid ---------- */

.po-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; }

.po-card {
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--paper);
  transition: border-color 0.15s;
}

.po-card:hover { border-color: var(--navy); }

.po-thumb {
  height: 110px;
  background: var(--canvas-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  overflow: hidden;
}

.po-thumb svg { width: 30px; height: 30px; }
.po-thumb img { width: 100%; height: 100%; object-fit: cover; }

.po-name { font-size: 0.7188rem; font-weight: 600; padding: 0.5rem 0.7rem 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-sub { font-size: 0.6563rem; color: var(--ink-3); padding: 0 0.7rem 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* export modal */
.ex-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }

.ex-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
}

.ex-card:hover { border-color: var(--navy); }
.ex-card svg { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.ex-t { font-weight: 600; font-size: 0.9rem; }
.ex-s { font-size: 0.7813rem; color: var(--ink-3); }

/* ---------- Mad-libs card ---------- */

.madlib-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  padding: 2.5rem 3rem;
  max-width: 720px;
  margin: 2.5rem auto 0;
  text-align: center;
}

.ml-title { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; }
.ml-sub { color: var(--ink-3); font-size: 0.9rem; margin-top: 0.3rem; margin-bottom: 1.8rem; }

.ml-body {
  text-align: left;
  font-size: 1.05rem;
  line-height: 2.4;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 1.6rem;
}

.ml-body input, .ml-body select {
  border: none;
  border-bottom: 1.5px solid var(--hairline);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy-2);
  padding: 0.1rem 0.3rem;
  outline: none;
  background: transparent;
  margin: 0 0.25rem;
}

.ml-body input:focus, .ml-body select:focus { border-bottom-color: var(--navy); }
.ml-body input::placeholder { color: var(--ink-3); font-weight: 400; }
.ml-body select { cursor: pointer; font-weight: 600; }

.ml-hint { color: var(--ink-3); font-size: 0.7813rem; margin-top: 0.8rem; }

/* ---------- Unified inbox ---------- */

.ib-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.ib-layout {
  display: grid;
  grid-template-columns: 390px 1fr;
  gap: 1.25rem;
  align-items: stretch;
  min-height: 68vh;
}

.conv-list {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem 0.4rem;
}

.cl-title {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cl-tools { display: flex; gap: 0.5rem; padding: 0.4rem 1.1rem 0.8rem; }

.search.sm { padding: 0.42rem 0.9rem; flex: 1; }
.search.sm input { font-size: 0.8125rem; }
.filter-chip.sm { padding: 0.38rem 0.8rem; font-size: 0.7813rem; }

.cl-rows { overflow-y: auto; flex: 1; }

.conv-row {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--hairline-2);
  transition: background 0.12s;
}

.conv-row:hover { background: var(--paper-2); }
.conv-row.sel { background: var(--navy-bg); }
.conv-row .clin-avatar { width: 38px; height: 38px; font-size: 0.8438rem; }

.cr-main { flex: 1; min-width: 0; }
.cr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.cr-top .nm { font-weight: 600; font-size: 0.875rem; }
.cr-top .tm { font-size: 0.6563rem; color: var(--ink-3); }
.cr-role { font-size: 0.7188rem; color: var(--ink-3); }
.cr-pv { font-size: 0.7813rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.15rem; display: flex; align-items: center; gap: 0.35rem; }
.cr-pv .unread-dot { flex: none; }

.thread {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.th-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--hairline);
  flex: none;
}

.th-head .clin-avatar { width: 42px; height: 42px; }
.th-nm { font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
.th-sub { font-size: 0.7188rem; color: var(--ink-3); margin-top: 0.15rem; }
.agent-on { margin-left: auto; cursor: pointer; }
.agent-on .caret { font-size: 0.6rem; }

.th-feed { flex: 1; overflow-y: auto; padding: 1.3rem 1.6rem; min-height: 300px; max-height: 58vh; }

.th-day {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.2rem 0 0.9rem;
}

.th-day span { flex: 1; height: 1px; background: var(--hairline-2); }
.th-day em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.6563rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.th-msg { margin-bottom: 1rem; max-width: 78%; }
.th-msg.out { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.th-msg.in { margin-right: auto; }

.email-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
  padding: 0.9rem 1.1rem;
  width: 100%;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.04);
}

.th-msg.out .email-card { background: var(--paper-2); }

.ec-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.4rem; }
.ec-head svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.ec-subj { font-weight: 600; font-size: 0.8438rem; }

.ec-body {
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ec-body.full { display: block; white-space: pre-line; -webkit-line-clamp: unset; }

.ec-view {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7188rem;
  font-weight: 600;
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 0.5rem;
  padding: 0.3rem 0.7rem;
  margin-top: 0.6rem;
}

.ec-view:hover { border-color: var(--navy); color: var(--navy); }
.ec-view svg { width: 12px; height: 12px; }

.th-bubble {
  border-radius: 1rem;
  padding: 0.7rem 1rem;
  font-size: 0.8438rem;
  line-height: 1.5;
  display: inline-block;
}

.th-bubble.in {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 0.3rem;
  color: var(--ink);
}

.th-bubble.out {
  background: var(--canvas-2);
  border-bottom-right-radius: 0.3rem;
  color: var(--ink);
}

.th-atts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.th-atts.r { justify-content: flex-end; }

.th-parsed {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7188rem;
  font-weight: 500;
  color: var(--green);
  margin-top: 0.45rem;
}

.th-parsed svg { width: 11px; height: 11px; flex: none; }

.th-meta {
  font-size: 0.6563rem;
  color: var(--ink-3);
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.th-meta.out { justify-content: flex-end; }

.agent-chip {
  font-size: 0.5938rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--green);
  background: var(--green-bg);
  border-radius: 4px;
  padding: 0.08rem 0.35rem;
}

.rec-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-3); display: inline-block; }

.th-composer { border-top: 1px solid var(--hairline); padding: 0.8rem 1.2rem 1rem; flex: none; }

.th-tabs { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }

.ch-tab {
  font-size: 0.7813rem;
  font-weight: 600;
  color: var(--ink-3);
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
  border: 1px solid transparent;
}

.ch-tab.on { background: var(--ink); color: #fff; }
.ch-tab:not(.on):hover { border-color: var(--hairline); color: var(--ink); }

.th-kbd { margin-left: auto; font-size: 0.6563rem; color: var(--ink-3); }

.th-input { display: flex; gap: 0.7rem; align-items: flex-end; }

.th-input textarea {
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  padding: 0.7rem 0.95rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  resize: none;
  outline: none;
  background: var(--paper);
}

.th-input textarea:focus { border-color: var(--navy); }

/* ---------- Integrations ---------- */

.cat-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--navy-bg);
  border: 1px solid #D8E3F2;
  border-radius: var(--radius-card);
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.4rem;
  color: var(--ink);
  transition: border-color 0.15s;
}

.cat-banner:hover { border-color: var(--navy); }
.cat-banner .chev { margin-left: auto; }
.cb-t { font-weight: 600; font-size: 0.9688rem; }
.cb-s { font-size: 0.8125rem; color: var(--ink-2); }

.int-quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.1rem;
}

.iq-t { font-weight: 650; font-size: 0.9688rem; }
.iq-s { color: var(--ink-2); font-size: 0.8438rem; margin-top: 0.18rem; max-width: 760px; }
.iq-meter { display: flex; align-items: center; gap: 0.7rem; flex: none; }

.int-ic {
  width: 42px; height: 42px;
  border-radius: 0.7rem;
  background: var(--canvas-2);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.int-ic svg { width: 19px; height: 19px; }

.int-section {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  margin-bottom: 1.1rem;
  overflow: hidden;
}

.int-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.int-title-wrap { flex: 1; min-width: 0; }
.int-title { font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.int-desc { color: var(--ink-3); font-size: 0.8438rem; margin-top: 0.2rem; }
.int-actions { display: flex; gap: 0.55rem; flex: none; align-items: center; }

.navy-txt { color: var(--navy); border-color: #D8E3F2; }
.navy-txt:hover { border-color: var(--navy); color: var(--navy); }
.rose-txt { color: var(--rose); }

.int-body { border-top: 1px solid var(--hairline-2); padding: 1rem 1.5rem 1.2rem; }
.int-body .fm-lbl { margin-bottom: 0.2rem; }

.acct-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline-2);
}

.acct-row:last-child { border-bottom: none; }
.acct-row.just-added {
  background: linear-gradient(90deg, var(--green-bg), transparent);
  border-radius: 0.8rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  animation: acct-added 0.7s ease;
}

@keyframes acct-added {
  from { transform: translateY(-3px); opacity: 0.35; }
  to { transform: none; opacity: 1; }
}

.acct-ic {
  width: 34px; height: 34px;
  border-radius: 0.6rem;
  background: var(--canvas-2);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 0.1rem;
}

.acct-ic svg { width: 15px; height: 15px; }

.acct-main { flex: 1; min-width: 0; }
.acct-top { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.acct-nm { font-weight: 600; font-size: 0.9rem; }
.acct-l1 { font-size: 0.7188rem; color: var(--ink-3); margin-top: 0.25rem; }
.acct-l2 { font-size: 0.7813rem; color: var(--ink-2); margin-top: 0.2rem; }
.acct-actions { display: flex; gap: 0.45rem; flex: none; }

.int-empty { text-align: center; padding: 1.6rem 1rem; }
.ie-t { font-weight: 600; color: var(--ink-2); margin-bottom: 0.3rem; }
.ie-s { font-size: 0.8125rem; color: var(--ink-3); margin: 0.5rem 0; }

/* provider picker */
.prov-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  margin-bottom: 0.6rem;
}

.prov-card:hover { border-color: var(--navy); }
.prov-card.default { background: var(--navy-bg); border-color: #D8E3F2; }

.prov-ic {
  width: 36px; height: 36px;
  border-radius: 0.65rem;
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.prov-ic.lt { background: var(--canvas-2); color: var(--ink-2); }
.prov-ic.sms { background: var(--rose-bg); color: var(--rose); }
.prov-ic svg { width: 16px; height: 16px; }
.prov-t { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
.prov-s { font-size: 0.7813rem; color: var(--ink-2); margin-top: 0.15rem; }

.num-search {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr auto;
  gap: 0.65rem;
  align-items: end;
  margin-bottom: 1rem;
}

.num-search label,
.api-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.num-search label span,
.api-form label span {
  font-size: 0.6563rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.num-search input,
.api-form input {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 0.55rem;
  padding: 0.58rem 0.7rem;
  color: var(--ink);
  outline: none;
  background: var(--paper);
}

.num-search input:focus,
.api-form input:focus { border-color: var(--navy); }

.num-list { display: flex; flex-direction: column; gap: 0.55rem; }
.num-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  padding: 0.78rem 0.85rem;
  background: var(--paper);
}

.num-row:hover { border-color: var(--navy); background: var(--paper-2); }
.num-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.num-main strong { font-family: var(--font-mono); font-size: 0.875rem; }
.num-main em { font-style: normal; color: var(--ink-2); font-size: 0.75rem; margin-top: 0.1rem; }
.num-main small { color: var(--green); font-size: 0.7188rem; margin-top: 0.16rem; }
.num-price { color: var(--amber); font-weight: 700; font-size: 0.7813rem; white-space: nowrap; }

.api-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.api-card {
  border: 1px solid var(--hairline);
  border-radius: 0.85rem;
  padding: 0.95rem;
  text-align: left;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.api-card:hover { border-color: var(--navy); background: var(--paper-2); }
.api-card strong { font-size: 0.9rem; }
.api-card em { font-style: normal; color: var(--ink-2); font-size: 0.75rem; line-height: 1.35; }
.api-form {
  display: grid;
  gap: 0.7rem;
  border-top: 1px solid var(--hairline-2);
  padding-top: 1rem;
}

.prov-sep {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1rem 0;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.prov-sep span { flex: 1; height: 1px; background: var(--hairline-2); }

/* ---------- Integration catalog ---------- */

.cat-layout { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; align-items: flex-start; }

.cat-side {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1rem;
  position: sticky;
  top: 76px;
}

.cs-lbl {
  font-size: 0.6563rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 1.1rem 0 0.4rem 0.4rem;
}

.cs-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  font-size: 0.8438rem;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: 0.55rem;
  padding: 0.45rem 0.65rem;
}

.cs-row:hover { background: var(--canvas); }
.cs-row.on { background: var(--navy-bg); color: var(--navy); font-weight: 600; }
.cs-row .n { margin-left: auto; font-size: 0.7188rem; color: var(--ink-3); }
.cs-row span:not(.n):not(.dot9) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cat-sec { margin-bottom: 1.8rem; }
.cat-sec-h { font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0.9rem; }

.cat-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.2rem;
  transition: border-color 0.15s;
}

.cat-card:hover { border-color: var(--ink-3); }

.cc2-top { display: flex; gap: 0.75rem; margin-bottom: 0.7rem; }

.cc2-avatar {
  width: 38px; height: 38px;
  border-radius: 0.65rem;
  background: var(--canvas-2);
  color: var(--ink-2);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.cc2-nm { font-weight: 600; font-size: 0.9375rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cc2-nm .pill { font-size: 0.625rem; padding: 0.14rem 0.55rem; }
.cc2-desc { font-size: 0.7813rem; color: var(--ink-2); margin-top: 0.15rem; }
.cc2-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }

.cc2-foot {
  display: flex;
  gap: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline-2);
}

.cc2-foot button { font-size: 0.7813rem; font-weight: 600; color: var(--navy-2); }
.cc2-foot button:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .ib-layout { grid-template-columns: 1fr; }
  .cat-layout { grid-template-columns: 1fr; }
  .cat-side { position: static; }
  .fm-side { display: none; }
  .fm-nav.next { right: 14px; }
}

/* ============================================================
   v3 additions: top-right mega menus + Library
   ============================================================ */

/* ---------- Dark mega menus ---------- */

.avatar-btn { display: inline-flex; align-items: center; gap: 0.3rem; }
.av-caret { color: rgba(255, 255, 255, 0.5); font-size: 0.65rem; }

.mega-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 300px;
  background: #161D2B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  box-shadow: 0 18px 50px rgba(10, 14, 22, 0.45);
  padding: 0.5rem;
  display: none;
  z-index: 80;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

.mega-menu.open { display: block; }
.mega-menu.user { width: 280px; }

.mm-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6563rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding: 0.7rem 0.75rem 0.35rem;
}

.mm-group.dim { border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 0.35rem; cursor: default; }
.mm-caret { font-size: 0.7rem; }

.mm-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  color: rgba(255, 255, 255, 0.85);
}

.mm-item:hover { background: rgba(255, 255, 255, 0.07); }

.mm-ic {
  width: 30px; height: 30px;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  flex: none;
}

.mm-ic svg { width: 14px; height: 14px; }

.mm-item > span:not(.mm-ic):not(.mm-caret):not(.ws-dot) { display: flex; flex-direction: column; min-width: 0; }
.mm-t { font-size: 0.8438rem; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 0.4rem; }
.mm-s { font-size: 0.7188rem; color: rgba(255, 255, 255, 0.5); }

.mm-new {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #14181F;
  background: var(--amber);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}

.mm-badge {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C7B4F5;
  border: 1px solid rgba(199, 180, 245, 0.4);
  border-radius: 4px;
  padding: 0.08rem 0.4rem;
}

.mm-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.35rem;
}

.mm-item.ws-row { border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; margin-bottom: 0.35rem; padding-bottom: 0.7rem; }
.ws-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); flex: none; }

.mm-item.signout .mm-t { color: #FDA4AF; }
.mm-item.signout .mm-ic { color: #FDA4AF; }

/* ---------- Library ---------- */

.lib-hero {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.8rem 2rem;
  margin-bottom: 1.4rem;
}

.lib-hero .int-ic { width: 46px; height: 46px; }
.lib-hero h1.two-tone { font-size: 1.7rem; margin: 0.1rem 0 0.5rem; }
.lh-s { color: var(--ink-2); font-size: 0.9rem; max-width: 70ch; }

.lib-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.lib-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.2rem; }

.feat-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.3rem 1.4rem;
  color: var(--ink);
  transition: border-color 0.15s;
}

.feat-card:hover { border-color: var(--ink-3); }

.fc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.6rem; }
.fc-t { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.25rem; }
.fc-s { color: var(--ink-2); font-size: 0.8438rem; line-height: 1.5; min-height: 2.6em; }

.fc-foot {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline-2);
}

.fc-num { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.fc-unit { font-size: 0.7813rem; color: var(--ink-3); }
.fc-foot .pill { margin-left: 0.3rem; }
.fc-open { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--navy-2); white-space: nowrap; }

.ready-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.6rem;
  color: var(--ink);
  transition: border-color 0.15s;
}

.ready-banner:hover { border-color: var(--amber); }
.rb-t { font-weight: 600; font-size: 0.9688rem; }
.rb-s { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-3); font-size: 0.8125rem; margin-top: 0.25rem; }
.ready-banner .fc-open { margin-left: auto; }

.file-row.lf { gap: 0.85rem; padding: 0.7rem 0.2rem; }
.lf-main { flex: 1; min-width: 0; }
.lf-sub { font-size: 0.7188rem; color: var(--ink-3); margin-top: 0.1rem; }

.rule-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--hairline-2);
  font-size: 0.9rem;
}

.rule-row:last-child { border-bottom: none; }
.rule-t { color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
  .lib-grid3, .lib-grid2 { grid-template-columns: 1fr; }
}

/* ---------- Agent feed: outbound comm rows (email / SMS sent) ---------- */

.feed-comm {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--navy);
  border-radius: 0.6rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.7813rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0.4rem 0;
}

.fcm-tag {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.5938rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.fcm-tag svg { width: 11px; height: 11px; }

/* ---------- Agent feed: live typing indicator ---------- */

.feed-typing {
  display: inline-flex;
  gap: 4px;
  background: var(--canvas-2);
  border-radius: 0.9rem;
  border-bottom-left-radius: 0.25rem;
  padding: 0.65rem 0.85rem;
  margin: 0.45rem 0;
}

.feed-typing i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ink-3);
  animation: typing-dot 1s infinite;
}

.feed-typing i:nth-child(2) { animation-delay: 0.15s; }
.feed-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}