/* ══════════════════════════════════════════════════════════════════════════
   THE DEAL DESK
   A separate room from the dialer, and it should feel like one: the console
   next door is a control panel — cyan, dense, machine-first. This is a desk
   where money is closed. Warm graphite, a steady blue for the chrome, and
   green kept strictly for money — nothing on this page is yellow.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ground */
  --plane: #0f1214;
  --surface-1: #15191d;
  --surface-2: #1a1f24;
  --surface-3: #22282e;
  --hairline: #262d34;
  --hairline-strong: #333b44;

  /* ink */
  --text-primary: #e9edf1;
  --text-secondary: #9aa5af;
  --text-muted: #66707b;

  /* the two voices of the desk: blue is the chrome, green is only money */
  --accent: #6b8afd;
  --accent-deep: #4a6af0;
  --accent-soft: rgba(107, 138, 253, .13);
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, .12);

  --danger: #e5686d;
  --danger-soft: rgba(229, 104, 109, .12);
  --info: #7aa7d9;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar-w: 216px;
  --radius: 14px;
  --shadow: 0 10px 32px rgba(0, 0, 0, .35);


}

:root[data-theme="light"] {
  --plane: #f2f4f7;
  --surface-1: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef1f5;
  --hairline: #e7eaf0;
  --hairline-strong: #d6dbe4;

  --text-primary: #14181f;
  --text-secondary: #57606c;
  --text-muted: #9099a5;

  --accent: #2f6bff;
  --accent-deep: #2456d8;
  --accent-soft: #ecf2ff;
  --good: #12a150;
  --good-soft: #e9f7ee;

  --danger: #d92d20;
  --danger-soft: #feeceb;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .06);
}

/* ── base ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* `hidden` must win over component display rules (e.g. .quick-fab{display:grid}),
   or a "hidden" element stays on screen. */
[hidden] { display: none !important; }
html { height: 100%; }
body {
  min-height: 100%;
  background: var(--plane);
  color: var(--text-primary);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
::selection { background: var(--accent-soft); }

h1, h2, .display { font-weight: 700; letter-spacing: -.015em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── frame ─────────────────────────────────────────────────────────────── */
.frame { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--surface-1);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  padding: 18px 12px 14px;
  z-index: 10;
}

.wordmark { padding: 4px 10px 18px; }
.wordmark .house { font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-muted); font-family: var(--mono); }
.wordmark .desk {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px;
  color: var(--text-primary);
}
.wordmark .desk b { color: var(--accent); font-weight: 600; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px; border: 0; background: none;
  color: var(--text-secondary); cursor: pointer; text-align: left; width: 100%;
  font-size: 13.5px; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item .ico { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-item .badge {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  background: var(--surface-3); color: var(--text-secondary);
  border-radius: 20px; padding: 1px 8px; min-width: 24px; text-align: center;
}
.nav-item.active .badge { background: var(--accent); color: #fff; }
.nav-item .badge.hot { background: var(--accent); color: #fff; font-weight: 700; }
.nav-item .badge:empty { display: none; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px;
  border-top: 1px solid var(--hairline); }
.switch-system {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 9px; color: var(--text-muted); font-size: 12.5px;
}
.switch-system:hover { background: var(--surface-2); color: var(--text-secondary); }

/* ── main column ───────────────────────────────────────────────────────── */
.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px; border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--plane) 86%, transparent);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 8;
}
.topbar h1 { font-size: 21px; }
.topbar .sub { color: var(--text-muted); font-size: 12.5px; margin-top: 1px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.userchip { display: flex; align-items: center; gap: 9px; padding: 5px 6px 5px 12px;
  border-radius: 24px; border: 1px solid var(--hairline); background: var(--surface-1); }
.userchip .who { font-size: 12.5px; color: var(--text-secondary); }
.userchip .dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
}

.icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--hairline); background: var(--surface-1);
  color: var(--text-secondary); cursor: pointer; transition: color .12s, border-color .12s;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--hairline-strong); }
.icon-btn .ico { width: 16px; height: 16px; }

.content { padding: 24px 26px 60px; }

/* ── shared atoms ──────────────────────────────────────────────────────── */
.ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 9px; cursor: pointer; font-weight: 600;
  border: 1px solid var(--hairline-strong); background: var(--surface-2);
  color: var(--text-primary); font-size: 13px;
  transition: transform .08s, background .12s, border-color .12s;
}
.btn:hover { border-color: var(--text-muted); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-quiet { border-color: transparent; background: none; color: var(--text-secondary); }
.btn-quiet:hover { color: var(--text-primary); border-color: transparent; background: var(--surface-2); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: none; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .ico { width: 15px; height: 15px; }

.input, select.input, textarea.input {
  width: 100%; padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--hairline-strong); background: var(--surface-1);
  color: var(--text-primary); font: inherit; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--text-muted); }
label { display: block; font-size: 12px; color: var(--text-secondary); }
label > .input { margin-top: 5px; }
.field-stack { display: flex; flex-direction: column; gap: 13px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.card {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-pad { padding: 18px 20px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
  background: var(--surface-3); color: var(--text-secondary); white-space: nowrap;
}

.empty { color: var(--text-muted); text-align: center; padding: 44px 20px; font-size: 13.5px; }
.empty .display { font-size: 17px; color: var(--text-secondary); margin-bottom: 6px; }

/* stage chips — one hue each, consistent everywhere */
.stage-chip { font-size: 11px; font-weight: 600; padding: 2.5px 10px; border-radius: 20px; white-space: nowrap; }
.stage-new         { background: var(--surface-3); color: var(--text-secondary); }
.stage-contacted   { background: rgba(122, 167, 217, .14); color: var(--info); }
.stage-negotiating { background: var(--accent-soft); color: var(--accent); }
.stage-app_sent    { background: rgba(122, 167, 217, .2); color: var(--info); }
.stage-docs        { background: rgba(139, 124, 247, .15); color: #8b7cf7; }
.stage-won         { background: var(--good-soft); color: var(--good); }
.stage-lost        { background: var(--danger-soft); color: var(--danger); }
.stage-future      { background: var(--surface-3); color: var(--text-muted); }

/* ── overview ──────────────────────────────────────────────────────────── */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi {
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 18px 20px 16px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent); opacity: .0; transition: opacity .2s;
}
.kpi.watch::before { background: var(--danger); opacity: 1; }
.kpi .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); font-family: var(--mono); }
.kpi .value {
  font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  margin-top: 8px; font-variant-numeric: tabular-nums;
}
.kpi .value small { font-size: 16px; color: var(--text-muted); font-family: var(--sans); }
.kpi .hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.kpi.good .value { color: var(--good); }
.kpi.watch .value { color: var(--danger); }

.overview-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 14px; }

.funnel { padding: 18px 20px; }
.funnel h2 { font-size: 16px; margin-bottom: 14px; }
.funnel-row { display: grid; grid-template-columns: 130px 1fr 46px; align-items: center;
  gap: 12px; padding: 6px 0; }
.funnel-row .name { font-size: 12.5px; color: var(--text-secondary); }
.funnel-row .rail { height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.funnel-row .rail i { display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent)); min-width: 2px;
  transition: width .5s cubic-bezier(.2, .7, .3, 1); }
.funnel-row.terminal .rail i { background: var(--surface-3); }
.funnel-row.terminal.won .rail i { background: var(--good); }
.funnel-row.terminal.lost .rail i { background: var(--danger); opacity: .7; }
.funnel-row .n { font-family: var(--mono); font-size: 12.5px; text-align: right;
  color: var(--text-primary); font-variant-numeric: tabular-nums; }

.pulse { padding: 18px 20px; }
.pulse h2 { font-size: 16px; margin-bottom: 12px; }
.pulse-item { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid var(--hairline); cursor: pointer; }
.pulse-item:first-of-type { border-top: 0; }
.pulse-item .who-dot { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
  background: var(--surface-3); color: var(--text-secondary); }
.pulse-item .what { min-width: 0; }
.pulse-item .head { font-size: 12.5px; color: var(--text-secondary); }
.pulse-item .head b { color: var(--text-primary); font-weight: 600; }
.pulse-item .body { font-size: 12.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.pulse-item .when { margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  color: var(--text-muted); flex: 0 0 auto; }
.pulse-item:hover .head b { color: var(--accent); }

/* ── pipeline board ────────────────────────────────────────────────────── */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 18px;
  align-items: flex-start; min-height: 60vh; }
.column { flex: 0 0 264px; background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; max-height: 76vh; }
.column-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px;
  border-bottom: 1px solid var(--hairline); }
.column-head .name { font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-secondary); }
.column-head .n { margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--text-muted); }
.column-head .swatch { width: 8px; height: 8px; border-radius: 3px; }
.column-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; flex: 1; min-height: 60px; }
.column.drop-open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.deal-card {
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 11px 13px; cursor: grab;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.deal-card:hover { border-color: var(--hairline-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
.deal-card.dragging { opacity: .45; cursor: grabbing; }
.deal-card .who { font-weight: 600; font-size: 13.5px; }
.deal-card .co { font-size: 12px; color: var(--text-secondary); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-card .meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.deal-card .meta .m { font-family: var(--mono); font-size: 10.5px; color: var(--text-muted); }
.deal-card .meta .owner-dot { margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
  background: var(--surface-3); color: var(--text-secondary); }

/* ── deals table ───────────────────────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; min-width: 220px; }
.toolbar select.input { width: auto; }

.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface-1); box-shadow: var(--shadow); }
table.deals { width: 100%; border-collapse: collapse; font-size: 13px; }
table.deals th { text-align: left; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; padding: 11px 14px; font-family: var(--mono);
  border-bottom: 1px solid var(--hairline); white-space: nowrap; }
table.deals td { padding: 11px 14px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
table.deals tr:last-child td { border-bottom: 0; }
table.deals tbody tr { cursor: pointer; transition: background .1s; }
table.deals tbody tr:hover { background: var(--surface-2); }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
td .co-sub { display: block; font-size: 11.5px; color: var(--text-muted); }

.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.pager .where { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); }

/* ── threads (comments) ────────────────────────────────────────────────── */
.threads { display: grid; grid-template-columns: 340px 1fr; gap: 0;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface-1); box-shadow: var(--shadow); overflow: hidden; height: calc(100vh - 175px); min-height: 480px; }
.thread-list { border-right: 1px solid var(--hairline); overflow-y: auto; }
.thread-item { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px;
  border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background .1s; }
.thread-item:hover { background: var(--surface-2); }
.thread-item.open { background: var(--accent-soft); }
.thread-item .row1 { display: flex; align-items: center; gap: 8px; }
.thread-item .who { font-weight: 600; font-size: 13.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.thread-item .when { margin-left: auto; font-family: var(--mono); font-size: 10px;
  color: var(--text-muted); flex: 0 0 auto; }
.thread-item .peek { font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item .peek b { color: var(--text-secondary); font-weight: 600; }
.thread-item .unread-dot { width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto; }

.thread-pane { display: flex; flex-direction: column; min-width: 0; }
.thread-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-bottom: 1px solid var(--hairline); }
.thread-head .title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.thread-head .sub { font-size: 12px; color: var(--text-muted); }
.thread-scroll { flex: 1; overflow-y: auto; padding: 20px; display: flex;
  flex-direction: column; gap: 12px; }

.bubble { max-width: 72%; align-self: flex-start; }
.bubble.mine { align-self: flex-end; }
.bubble .meta { font-size: 10.5px; color: var(--text-muted); font-family: var(--mono);
  margin: 0 4px 3px; display: flex; gap: 8px; }
.bubble.mine .meta { justify-content: flex-end; }
.bubble .say {
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 14px 14px 14px 4px; padding: 9px 14px; font-size: 13.5px;
  white-space: pre-wrap; word-break: break-word;
}
.bubble.mine .say { background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 14px 14px 4px 14px; }
.bubble.stage-move { align-self: center; max-width: none; }
.bubble.stage-move .say { background: none; border: 0; padding: 2px 8px;
  font-size: 11px; color: var(--text-muted); font-family: var(--mono); }

.composer { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--hairline); }
.composer textarea { resize: none; min-height: 42px; max-height: 130px; }

/* ── team & agents ─────────────────────────────────────────────────────── */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.person { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.person .top { display: flex; align-items: center; gap: 12px; }
.person .dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; background: var(--accent-soft); color: var(--accent); }
.person.off .dot { background: var(--surface-3); color: var(--text-muted); }
.person .name { font-weight: 600; font-size: 14.5px; }
.person .mail { font-size: 12px; color: var(--text-muted); }
.person .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  border-top: 1px solid var(--hairline); padding-top: 12px; }
.person .stat .v { font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.person .stat .k { font-size: 10.5px; color: var(--text-muted); letter-spacing: .08em;
  text-transform: uppercase; font-family: var(--mono); }
.person .foot { display: flex; gap: 8px; }

/* ── the agent's tools: a grid of clickable cards, one icon per kind ─────── */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tool-card {
  display: flex; align-items: center; gap: 11px; text-align: left;
  padding: 12px 13px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--surface-1);
  transition: border-color .12s, transform .12s, box-shadow .12s;
  position: relative;
}
.tool-card:hover { border-color: var(--hairline-strong); transform: translateY(-1px);
  box-shadow: var(--shadow); }
.tool-card.off { opacity: .5; }
.tool-ico { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; }
.tool-ico .ico { width: 17px; height: 17px; }
.tool-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tool-body b { font-size: 13px; font-weight: 600; text-transform: capitalize;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-body i { font-style: normal; font-size: 11.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-dot { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); }
.tool-dot.on { background: var(--good); }

/* ── faces ───────────────────────────────────────────────────────────────── */
.face { border-radius: 50%; object-fit: cover; display: grid; place-items: center; flex: 0 0 auto; }
.face-blank { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.face-edit {
  position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--hairline-strong);
  color: var(--text-secondary);
}
.face-edit:hover { color: var(--accent); border-color: var(--accent); }
.profile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ── the recording, with notes pinned to its seconds ─────────────────────── */
.voice { display: flex; flex-direction: column; gap: 8px; }
.voice-row { display: flex; align-items: center; gap: 12px; }
.voice-track {
  position: relative; flex: 1; height: 26px; border-radius: 8px;
  background: var(--surface-3); cursor: crosshair; touch-action: none; overflow: hidden;
}
.voice-progress {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  pointer-events: none;
}
.voice-select {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--good) 30%, transparent);
  border-left: 2px solid var(--good); border-right: 2px solid var(--good);
  pointer-events: none;
}
.voice-pin {
  position: absolute; top: 0; bottom: 0; min-width: 5px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border-left: 1.5px solid var(--accent);
}
.voice-pin:hover { background: color-mix(in srgb, var(--accent) 65%, transparent); }
.voice-picker { display: flex; align-items: center; gap: 8px; }
.voice-note {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 10px;
  border-radius: 9px; background: var(--surface-2);
}

.lead-call {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; cursor: pointer; border: 1px solid transparent;
}
.lead-call:hover { background: var(--surface-2); border-color: var(--hairline); }
.lead-call-panel { padding: 10px 12px 16px; border-bottom: 1px solid var(--hairline); }

/* ── mail ────────────────────────────────────────────────────────────────── */
.mail-unread { border-left: 3px solid var(--accent); }
.mail-unread b { color: var(--accent); }

/* ── the tool field builder ──────────────────────────────────────────────── */
.param-row { display: flex; align-items: center; gap: 6px; }
.param-req { display: flex; align-items: center; gap: 4px; font-size: 10.5px;
  color: var(--text-muted); flex: 0 0 auto; }
.param-req input { width: auto; }

/* ── charts ──────────────────────────────────────────────────────────────── */
.chart-card h2 { font-size: 15px; margin-bottom: 10px; }
.chart-legend { display: flex; gap: 14px; font-size: 11px; color: var(--text-muted);
  margin-bottom: 8px; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 5px; }
.agent-card { cursor: pointer; text-align: left; }
.agent-card:hover { border-color: var(--accent); }

/* ── knowledge rows ──────────────────────────────────────────────────────── */
.kn-list { display: flex; flex-direction: column; gap: 8px; }
.kn-row {
  display: flex; align-items: baseline; gap: 12px; text-align: left; cursor: pointer;
  padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--surface-1);
  transition: border-color .12s, box-shadow .12s;
}
.kn-row:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow); }
.kn-row b { font-size: 13.5px; font-weight: 600; flex: 0 0 auto; max-width: 34%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-row i { font-style: normal; font-size: 12.5px; color: var(--text-muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.agent-note {
  border: 1px dashed var(--hairline-strong); border-radius: var(--radius);
  padding: 14px 18px; color: var(--text-muted); font-size: 12.5px; margin-bottom: 16px;
}
.agent-note b { color: var(--accent); }

/* ── modal, toast, loader ──────────────────────────────────────────────── */
.modal-veil { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(8, 10, 12, .6); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .16s; }
.modal-veil.on { opacity: 1; pointer-events: auto; }
.modal { width: min(560px, calc(100vw - 40px)); max-height: 86vh; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--hairline-strong);
  border-radius: 16px; box-shadow: var(--shadow);
  transform: translateY(10px) scale(.985); transition: transform .16s; }
.modal-veil.on .modal { transform: none; }
.modal-head { display: flex; align-items: baseline; gap: 10px; padding: 18px 22px 0; }
.modal-head h2 { font-size: 18px; }
.modal-head .sub { font-size: 12px; color: var(--text-muted); }
.modal-head .x { margin-left: auto; }
.modal-body { padding: 16px 22px 22px; }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--surface-2); border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 16px;
  font-size: 13px; box-shadow: var(--shadow); animation: toast-in .18s ease; max-width: 380px; }
.toast.err { border-left-color: var(--danger); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* the family loader — the same drop, in this room's colour */
.page-loader { position: fixed; top: 0; right: 0; bottom: 0; left: var(--sidebar-w);
  z-index: 20; display: grid; place-items: center;
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.page-loader.on { opacity: 1; pointer-events: auto; }
.loader-inner { display: flex; flex-direction: column; align-items: center;
  transform: translateY(6px) scale(.96); opacity: .5;
  transition: transform .26s cubic-bezier(.2, .7, .3, 1), opacity .26s; }
.page-loader.on .loader-inner { transform: none; opacity: 1; }
.loader-mark { width: 104px; height: 104px; overflow: visible; display: block; }
.loader-orbit { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .35;
  stroke-dasharray: 3 12; stroke-linecap: round; transform-origin: 60px 60px;
  animation: orbit 7s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.loader-drop { fill: color-mix(in srgb, var(--accent) 8%, transparent);
  stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 35%, transparent)); }
.loader-liquid { fill: var(--accent); opacity: .85; }
.loader-lift { animation: lift 2.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes lift { from { transform: translateY(74px); } to { transform: translateY(-6px); } }
.loader-brand { margin-top: 20px; font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text-primary); line-height: 1; }
.loader-brand b { color: var(--accent); font-weight: 700; }
.loader-note { margin-top: 7px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.loader-track { margin-top: 16px; width: 132px; height: 2px; border-radius: 2px;
  background: var(--surface-3); overflow: hidden; }
.loader-track i { display: block; width: 40%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: rail 1.4s ease-in-out infinite; }
@keyframes rail { from { transform: translateX(-140%); } to { transform: translateX(340%); } }

/* pages */
.page { display: none; }
.page.active { display: block; animation: page-in .2s ease; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } }

/* focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 64px; }
  .sidebar { padding: 14px 8px; }
  .wordmark .house, .wordmark .desk, .nav-item span, .nav-item .badge,
  .switch-system span { display: none; }
  .nav-item, .switch-system { justify-content: center; }
  .threads { grid-template-columns: 1fr; height: auto; }
  .thread-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--hairline); }
}

/* ── live ────────────────────────────────────────────────────────────────── */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good);
  display: inline-block; flex: 0 0 auto; animation: live-pulse 1.6s ease-in-out infinite; }
.live-dot.ring { background: var(--accent); }
@keyframes live-pulse { 50% { opacity: .35; } }
.live-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.live-row:hover { background: var(--surface-2); border-color: var(--hairline); }
.live-row b { font-size: 13px; flex: 0 0 auto; }

/* ── the import doors ────────────────────────────────────────────────────── */
.import-opt { display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--surface-1);
  transition: border-color .12s, transform .12s, box-shadow .12s; }
.import-opt:hover:not(.off) { border-color: var(--accent); transform: translateY(-1px);
  box-shadow: var(--shadow); }
.import-opt.off { opacity: .55; cursor: default; }
.import-opt .tool-body b { font-size: 13.5px; text-transform: none; }
.import-land { animation: land .3s ease; }
@keyframes land { from { opacity: 0; transform: translateY(6px); } }

/* Lead page tabs: Details · Messages · VEON Application · History */
.lead-tabs{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--hairline)}
.lead-tab{background:none;border:0;border-bottom:2px solid transparent;padding:10px 18px;
  font-size:13.5px;font-weight:600;color:var(--text-muted);cursor:pointer;margin-bottom:-1px;transition:color .12s}
.lead-tab:hover{color:var(--text-primary)}
.lead-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.lead-panel{display:none}
.lead-panel.on{display:block}

/* ── Mail list (email-client rows) ─────────────────────────────────────── */
.mail-list{display:flex;flex-direction:column;gap:6px}
.mail-row{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  background:var(--surface-1);border:1px solid var(--hairline);border-radius:12px;
  padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s}
.mail-row:hover{border-color:var(--accent);background:var(--surface-2)}
.mail-row.unread{border-left:3px solid var(--accent)}
.mail-av{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:14px;background:var(--surface-2);color:var(--text-secondary)}
.mail-av.in{background:var(--accent-soft);color:var(--accent)}
.mail-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mail-top{display:flex;align-items:center;gap:8px}
.mail-top b{font-size:13.5px;color:var(--text-primary)}
.mail-top time{margin-left:auto;font-size:11px;color:var(--text-muted);flex:0 0 auto}
.mail-sub{font-size:13px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-prev{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-tag{font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--surface-2);
  color:var(--text-muted);flex:0 0 auto;text-transform:uppercase;letter-spacing:.03em}
.mail-tag.in{background:var(--accent-soft);color:var(--accent)}
.mail-tag.good{background:var(--good-soft);color:var(--good)}
.mail-tag.bad{background:var(--danger-soft);color:var(--danger)}

/* ── Mail thread (conversation in the modal) ───────────────────────────── */
.mail-thread{display:flex;flex-direction:column;gap:14px;max-height:56vh;overflow-y:auto;padding:2px 2px 6px}
.mt-msg{display:flex;gap:10px;align-items:flex-start}
.mt-msg.out{flex-direction:row-reverse}
.mt-avatar{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:13px;background:var(--surface-2);color:var(--text-secondary)}
.mt-avatar.me{background:var(--accent);color:#fff}
.mt-bubble{max-width:78%;background:var(--surface-2);border:1px solid var(--hairline);border-radius:14px;padding:10px 14px}
.mt-msg.out .mt-bubble{background:color-mix(in srgb,var(--accent) 10%,var(--surface-1));
  border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.mt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.mt-head b{font-size:12.5px;color:var(--text-primary)}
.mt-addr{font-size:11px;color:var(--text-muted)}
.mt-head time{margin-left:auto;font-size:10.5px;color:var(--text-muted)}
.mt-body{white-space:pre-wrap;font-size:13.5px;color:var(--text-secondary);line-height:1.55}
.mt-files{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mt-file{font-size:11.5px;text-decoration:none;color:var(--accent);background:var(--surface-1);
  border:1px solid var(--hairline);border-radius:8px;padding:4px 8px}
.mt-pill{font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--surface-1);color:var(--text-muted)}
.mt-pill.good{background:var(--good-soft);color:var(--good)}
.mt-pill.bad{background:var(--danger-soft);color:var(--danger)}
.mail-reply-bar{display:flex;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline)}

/* ── Pager (mail + knowledge) ──────────────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.pager-info{font-size:12.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ── Dashboard header (status left · metrics · START right) ─────────────── */
.floor-head{display:flex;align-items:center;gap:24px;padding:18px 22px;margin-bottom:16px}
.floor-status{display:flex;align-items:center;gap:12px}
.floor-dot{width:11px;height:11px;border-radius:50%;background:var(--text-muted);flex:0 0 auto}
.floor-dot.on{background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 22%,transparent);animation:floorpulse 1.6s ease-in-out infinite}
@keyframes floorpulse{0%,100%{opacity:1}50%{opacity:.45}}
.floor-state{font-weight:700;font-size:16px;color:var(--text-primary)}
.floor-why{font-size:12.5px;color:var(--text-muted)}
.floor-metrics{display:flex;gap:30px;margin-left:6px}
.floor-metrics > div{display:flex;flex-direction:column;gap:1px}
.floor-metrics b{font-size:22px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.floor-metrics span{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.floor-btn{margin-left:auto;padding:13px 36px;font-size:14px;font-weight:700;letter-spacing:.03em;border-radius:10px}
@media (max-width:820px){.floor-head{flex-wrap:wrap;gap:16px}.floor-btn{margin-left:0;width:100%;justify-content:center}}

/* dashboard KPI tiles — a touch of lift so it doesn't read bare */
.kpi{transition:box-shadow .15s,transform .1s}
.kpi:hover{box-shadow:0 6px 20px rgba(20,30,50,.07);transform:translateY(-1px)}
@media (max-width:1100px){.kpi-row{grid-template-columns:repeat(3,1fr)!important}}

/* ── Lead history timeline (istoriya) ──────────────────────────────────── */
.tl{position:relative;padding:2px 0}
.tl-item{display:flex;gap:14px;padding:4px 6px 20px;position:relative;border-radius:8px}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:11px;top:18px;bottom:0;width:2px;background:var(--hairline)}
.tl-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;margin-top:3px;z-index:1;box-shadow:0 0 0 3px var(--surface-1)}
.tl-body{min-width:0;flex:1}
.tl-title{font-size:13.5px;color:var(--text-primary);line-height:1.45}
.tl-meta{font-size:11.5px;color:var(--text-muted);margin-top:2px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.tl-kind{font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:10px}
.tl-rec{font-size:10.5px;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 8px;margin-left:6px}
.tl-item.click{cursor:pointer;transition:background .12s}
.tl-item.click:hover{background:var(--surface-2)}

/* ── Details tab: form + calls side by side ────────────────────────────── */
.lead-details-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:14px;align-items:start}
@media (max-width:900px){.lead-details-grid{grid-template-columns:1fr}}

/* ── Call modal: transcript (collapsed, pulsing) + comment ─────────────── */
.cp-transcript{border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.cp-tsum{display:flex;align-items:center;gap:8px;cursor:pointer;padding:11px 14px;font-size:12.5px;
  color:var(--text-secondary);font-weight:600;list-style:none;user-select:none;background:var(--surface-2)}
.cp-tsum::-webkit-details-marker{display:none}
.cp-caret{width:15px;height:15px;transition:transform .18s;color:var(--text-muted)}
.cp-transcript[open] .cp-caret{transform:rotate(90deg)}
.cp-open-hint{margin-left:auto;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 9px;animation:cpBlink 1.5s ease-in-out infinite}
.cp-transcript[open] .cp-open-hint{display:none}
@keyframes cpBlink{0%,100%{opacity:1}50%{opacity:.35}}
.cp-lines{max-height:38vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.cp-comment{margin-top:4px}
.cp-comment-head{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.cp-comment-head .ico{width:14px;height:14px}
.cp-comment-row{display:flex;gap:8px}
.cp-comment-row .input{flex:1}
#cp-notes > *{animation:cpFade .35s ease}
@keyframes cpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Call comments: green bubbles, avatars, icons ──────────────────────── */
.cp-notes{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.cp-note{display:flex;gap:10px;align-items:flex-start;
  background:color-mix(in srgb,var(--good) 8%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--good) 22%,transparent);border-radius:12px;padding:10px 13px}
.cp-note.pinned{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 25%,transparent);cursor:pointer}
.cp-note-av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-weight:700;font-size:13px;background:var(--good);color:#fff}
.cp-note.pinned .cp-note-av{background:var(--accent)}
.cp-note-body{min-width:0;flex:1}
.cp-note-top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.cp-note-top b{font-size:12.5px;color:var(--text-primary)}
.cp-note-top time{margin-left:auto;font-size:10.5px;color:var(--text-muted)}
.cp-note-stamp{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;color:var(--accent);font-family:var(--mono)}
.cp-note-stamp svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.cp-note-text{font-size:13.5px;color:var(--text-secondary);line-height:1.5;white-space:pre-wrap}
.cp-nonote{font-size:12px;color:var(--text-muted);padding:8px 2px;margin-top:10px}

/* slower transcript reveal */
.cp-transcript[open] .cp-lines{animation:cpReveal .5s ease}
@keyframes cpReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── Modern voice player ───────────────────────────────────────────────── */
.voice{background:var(--surface-2);border:1px solid var(--hairline);border-radius:14px;
  padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.voice-row{display:flex;align-items:center;gap:13px}
#cp-play{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;border:0;
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:transform .1s,box-shadow .12s;
  box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 35%,transparent)}
#cp-play:hover{transform:scale(1.07)}
#cp-play .ico{width:18px;height:18px;fill:currentColor;stroke:none}
.voice-track{position:relative;flex:1;height:9px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);cursor:pointer;overflow:hidden}
.voice-progress{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:999px;width:0}
.voice-picker{display:flex;align-items:center;gap:8px;padding-top:2px}
.voice-picker .input{flex:1}

/* ── Waveform (canvas + Web Audio) ─────────────────────────────────────── */
.wave{position:relative;flex:1;min-width:0;height:46px;cursor:crosshair;touch-action:none;
  user-select:none;border-radius:8px;overflow:hidden}
.wave canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wave-load{position:absolute;inset:0;display:flex;align-items:center;
  font-size:11px;color:var(--text-muted);padding:0 6px;pointer-events:none}
.wave-regions{position:absolute;inset:0;pointer-events:none}
.wave-pin{position:absolute;top:0;bottom:0;min-width:2px;pointer-events:auto;cursor:pointer;
  background:color-mix(in srgb,var(--ok,#2f9e6f) 26%,transparent);
  border-left:2px solid var(--ok,#2f9e6f);border-radius:2px}
.wave-pin:hover{background:color-mix(in srgb,var(--ok,#2f9e6f) 40%,transparent)}
.wave-select{position:absolute;top:0;bottom:0;pointer-events:none;
  background:color-mix(in srgb,var(--accent) 20%,transparent);
  border-left:2px solid var(--accent);border-right:2px solid var(--accent)}
.wave-cursor{position:absolute;top:0;bottom:0;width:2px;left:0;pointer-events:none;
  background:var(--accent);box-shadow:0 0 6px color-mix(in srgb,var(--accent) 60%,transparent)}
.voice-hint{font-size:11px;color:var(--text-muted);margin-top:2px}

/* ── "Where we left off" — the AI conclusion card on the lead page ─────────── */
.conclusion-card {
  margin-bottom: 14px; padding: 15px 18px; border-radius: 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 9%, var(--surface-1)), var(--surface-1) 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--hairline));
}
.cc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.cc-ico { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
.cc-title { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.cc-meta { margin-left: auto; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cc-summary { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-primary); white-space: pre-wrap; }
.cc-summary.cc-empty { color: var(--text-muted); font-style: italic; }
.cc-callback {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.cc-callback svg { width: 14px; height: 14px; flex: 0 0 auto; }
.cc-callback b { font-weight: 700; }

/* ── inbound / outbound direction badge on call rows ──────────────────────── */
.dir-badge { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; vertical-align: middle; margin-right: 6px; }
.dir-badge svg { width: 13px; height: 13px; }
.dir-badge.in { color: var(--good);
  background: var(--good-soft); border-radius: 5px; padding: 1px 5px 1px 3px; }
.dir-badge.out { color: var(--text-muted); }
.dir-badge.out svg { width: 12px; height: 12px; }

/* ── Quick-add: floating +, add-deal form, the confirming checkmark ─────────── */
.quick-fab {
  position: fixed; right: 28px; bottom: 28px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 6px rgba(0,0,0,.35);
  transition: transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .14s;
  animation: fabIn .35s cubic-bezier(.2,.9,.3,1.3);
}
.quick-fab:hover { transform: scale(1.08) rotate(90deg); }
.quick-fab:active { transform: scale(.96); }
.quick-fab svg { width: 26px; height: 26px; }
@keyframes fabIn { from { opacity: 0; transform: scale(.4) translateY(12px); } to { opacity: 1; transform: none; } }

.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.qa-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.qa-grid .qa-wide { grid-column: 1 / -1; }

.add-ok {
  position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center;
  pointer-events: none; transition: opacity .35s; background: rgba(0,0,0,.14);
}
.add-ok-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 34px; border-radius: 18px;
  background: var(--surface-1); box-shadow: var(--shadow);
  animation: okPop .3s cubic-bezier(.2,.9,.3,1.3);
}
.add-ok-card span { font-size: 14px; font-weight: 650; color: var(--text-primary); }
.add-ok-check { width: 62px; height: 62px; }
.add-ok-check circle { fill: none; stroke: var(--good); stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151; animation: okCircle .45s ease-out forwards; }
.add-ok-check path { fill: none; stroke: var(--good); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48; animation: okTick .3s .4s ease-out forwards; }
@keyframes okCircle { to { stroke-dashoffset: 0; } }
@keyframes okTick { to { stroke-dashoffset: 0; } }
@keyframes okPop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .quick-fab, .add-ok-card, .add-ok-check circle, .add-ok-check path { animation: none; }
  .add-ok-check circle, .add-ok-check path { stroke-dashoffset: 0; }
}

/* ── Call-now voice picker ─────────────────────────────────────────────── */
.call-pick { display: flex; flex-direction: column; gap: 10px; }
.call-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-primary); transition: border-color .15s, background .15s, transform .08s;
}
.call-opt:hover { border-color: var(--accent); background: var(--surface-3); }
.call-opt:active { transform: scale(.99); }
.call-opt:disabled { opacity: .55; cursor: default; }
.call-opt.reco { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.call-opt-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
}
.call-opt-ico .ico { width: 20px; height: 20px; }
.call-opt-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.call-opt-txt b { font-size: 14px; font-weight: 650; }
.call-opt-txt small { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.call-opt-reco {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); padding: 3px 8px; border-radius: 999px;
}
.call-opt-go { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; margin-left: auto; }
.call-opt.reco .call-opt-go { margin-left: 8px; }
.call-opt.dialing .call-opt-ico { animation: dialPulse 1s ease-in-out infinite; }
@keyframes dialPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .call-opt.dialing .call-opt-ico { animation: none; } }

/* ── comments: the desk's own record of what was said ─────────────────────
   Rows read as a list, not as cards — a comment is a line in a conversation,
   and giving each one a border and a shadow makes fifty of them unreadable. */
.seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--hairline);
       border-radius: 10px; background: var(--surface-1); }
.seg-btn { padding: 5px 14px; font-size: 12.5px; font-weight: 600; border: 0;
           border-radius: 7px; background: none; color: var(--text-secondary);
           cursor: pointer; transition: background .12s, color .12s; }
.seg-btn:hover { color: var(--text-primary); }
.seg-btn.on { background: var(--accent-soft); color: var(--accent); }

.cm-list { display: flex; flex-direction: column; gap: 6px; }
.cm-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
          padding: 11px 14px; border: 1px solid var(--hairline); border-radius: 12px;
          background: var(--surface-1); cursor: pointer;
          transition: border-color .12s, background .12s; }
.cm-row:hover { border-color: var(--accent); background: var(--surface-2); }
.cm-row.unread { border-left: 3px solid var(--accent); }
.cm-row.unread .cm-top b { color: var(--accent); }
.cm-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid;
         place-items: center; font-size: 11.5px; font-weight: 700;
         background: var(--surface-2); color: var(--text-secondary); }
.cm-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cm-top { display: flex; align-items: center; gap: 8px; }
.cm-top b { font-size: 13.5px; color: var(--text-primary); }
.cm-top time { margin-left: auto; font-size: 11px; color: var(--text-muted); flex: 0 0 auto; }
.cm-co { font-size: 12px; color: var(--text-muted); overflow: hidden;
         text-overflow: ellipsis; white-space: nowrap; }
.cm-count { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
            background: var(--surface-2); color: var(--text-muted); }
.cm-prev { font-size: 12.5px; color: var(--text-muted); overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.cm-prev b { color: var(--text-secondary); font-weight: 600; }

/* the opened thread */
.cm-thread { display: flex; flex-direction: column; gap: 12px;
             max-height: 56vh; overflow-y: auto; padding: 2px 2px 6px; }
.cm-item { padding: 10px 13px; border-radius: 10px; background: var(--surface-2); }
/* A note pinned to a recording is a different kind of remark: the rail says so
   without spending a second colour on it. */
.cm-item.on-call { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.cm-item.sys { background: none; border: 1px dashed var(--hairline); }
.cm-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cm-item-head b { font-size: 12.5px; color: var(--text-primary); }
.cm-item-head time { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.cm-item-body { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);
                white-space: pre-wrap; word-break: break-word; }
.cm-pin { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer;
          font-size: 10.5px; font-weight: 700; font-family: var(--mono);
          padding: 2px 8px; border-radius: 999px;
          background: var(--accent); color: #fff; }
.cm-pin .ico { width: 9px; height: 9px; fill: currentColor; stroke: none; }
.cm-pin:hover { filter: brightness(1.08); }
.cm-none { padding: 26px 4px; text-align: center; font-size: 13px; color: var(--text-muted); }
.cm-bar { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px;
          border-top: 1px solid var(--hairline); }
.cm-bar .grow { flex: 1; }

/* ── Handled, opened up ───────────────────────────────────────────────────
   The tile is now a control, so it has to look like one before it is clicked. */
.kpi-btn { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kpi-btn:hover .kpi-more { opacity: 1; }
.kpi-more { font-size: 9.5px; letter-spacing: .06em; color: var(--accent);
            opacity: .5; transition: opacity .12s; }

.tb-heads { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
            background: var(--hairline); border: 1px solid var(--hairline);
            border-radius: 12px; overflow: hidden; }
.tb-head { background: var(--surface-1); padding: 13px 14px;
           display: flex; flex-direction: column; gap: 3px; }
.tb-head b { font-size: 21px; font-family: var(--mono); color: var(--text-primary);
             font-variant-numeric: tabular-nums; line-height: 1.1; }
.tb-head span { font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
                color: var(--text-muted); }
.tb-head.tb-warn b { color: var(--danger); }

.tb-chart { margin-top: 20px; display: flex; flex-direction: column; gap: 2px; }
.tb-title { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
            color: var(--text-muted); margin-bottom: 9px; }
.tb-row { display: grid; grid-template-columns: 60px 1fr 40px 40px;
          align-items: center; gap: 12px; }
.tb-label { font-size: 11.5px; font-family: var(--mono); color: var(--text-secondary); }
.tb-track { height: 20px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
/* rounded only at the data end, anchored flat on the baseline it grows from */
.tb-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 3px; }
.tb-n { font-family: var(--mono); font-size: 13px; text-align: right;
        color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tb-share { font-size: 11.5px; text-align: right; color: var(--text-muted);
            font-variant-numeric: tabular-nums; }
.tb-nil { opacity: .45; }
.tb-nil .tb-track i { display: none; }
.tb-note { margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }

/* Failure reasons are ranked, not ordered, so every bar wears the same ink —
   colour must never encode a row's position in a ranking. Their labels are
   sentences, so the label column is wider than the talk-band chart's. */
.tb-reasons .tb-row { grid-template-columns: 178px 1fr 44px 40px; }
.tb-reasons .tb-label { font-family: var(--sans); font-size: 12.5px;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-track i.bad { background: color-mix(in srgb, var(--danger) 62%, var(--surface-2)); }

.tb-act { display: flex; align-items: center; gap: 14px; margin-top: 18px;
          padding-top: 16px; border-top: 1px solid var(--hairline); }
.tb-act-say { flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.tb-act-note { font-size: 12px; color: var(--text-muted); }

/* ── Spend, opened up ─────────────────────────────────────────────────────
   Two series, validated for colour-vision separation against both surfaces:
   the palette has only one neutral hue, and good/danger are reserved for
   status, so Twilio gets an amber picked to clear the CVD threshold. */
:root { --series-vapi: #6b8afd; --series-twilio: #c98429; --series-elevenlabs: #c084fc; }
:root[data-theme="light"] { --series-vapi: #2f6bff; --series-twilio: #d97706; --series-elevenlabs: #9333ea; }

.sp-bar { display: flex; align-items: center; gap: 14px; margin: 20px 0 14px; }
.sp-legend { margin-left: auto; display: flex; gap: 14px; font-size: 12px;
             color: var(--text-secondary); }
.sp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sp-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sp-key.vp { background: var(--series-vapi); }
.sp-key.el { background: var(--series-elevenlabs); }
.sp-key.tw { background: var(--series-twilio); }

.sp-plot { display: flex; gap: 10px; }
.sp-yaxis { display: flex; flex-direction: column; justify-content: space-between;
            height: 190px; font-family: var(--mono); font-size: 10px;
            color: var(--text-muted); text-align: right; flex: 0 0 auto;
            font-variant-numeric: tabular-nums; }
.sp-cols { flex: 1; display: flex; align-items: flex-end; gap: 3px;
           height: 190px; overflow-x: auto; padding-bottom: 16px;
           border-bottom: 1px solid var(--hairline); position: relative; }
.sp-col { flex: 1 1 0; min-width: 9px; height: 100%; display: flex;
          flex-direction: column; justify-content: flex-end; position: relative; }
/* the stack grows off the axis; a 2px gap keeps the two charges legible as two */
.sp-stack { display: flex; flex-direction: column; justify-content: flex-end;
            gap: 2px; height: 100%; }
.sp-seg { display: block; width: 100%; border-radius: 2px; }
.sp-seg.vp { background: var(--series-vapi); }
.sp-seg.el { background: var(--series-elevenlabs); }
.sp-seg.tw { background: var(--series-twilio); border-radius: 3px 3px 2px 2px; }

/* Start-of-run agent picker */
.agent-pick { display: grid; gap: 10px; }
.agent-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  padding: 13px 15px; cursor: pointer; color: inherit;
  transition: border-color .12s, background .12s, transform .06s; }
.agent-card:hover { border-color: var(--accent); background: var(--surface-2); }
.agent-card:active { transform: scale(.995); }
.agent-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.agent-card[disabled] { opacity: .5; pointer-events: none; }
.agent-av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid;
  place-items: center; font-weight: 700; font-size: 17px; color: #fff; background: var(--series-vapi); }
.agent-av.elevenlabs { background: var(--series-elevenlabs); }
.agent-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agent-meta b { font-size: 14.5px; color: var(--text-primary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.agent-sub { font-size: 11.5px; color: var(--text-muted); letter-spacing: .02em; }
.agent-go { width: 22px; height: 22px; margin-left: auto; flex: 0 0 auto; fill: var(--text-muted); }
.agent-card:hover .agent-go { fill: var(--accent); }

/* AI-agent / real-agent pipeline toggle */
.pipe-tabs { margin: 0 0 14px; }
.pipe-tabs .seg { display: inline-flex; }

/* Settings page tabs (Users · Agents · Knowledge under one page) */
.settings-tabs { margin: 0 0 16px; }
.settings-tabs .seg { display: inline-flex; }
.tab-n { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700;
  font-family: var(--mono); }

/* Self-healing boot: shown while the desk is restarting, hidden once it answers */
.boot-reconnect { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--surface-1); color: var(--text-secondary); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 18px; font-size: 12.5px; letter-spacing: .01em;
  box-shadow: 0 6px 22px rgba(0,0,0,.16); opacity: 0; pointer-events: none;
  transition: opacity .25s; z-index: 9999; }
.boot-reconnect.on { opacity: 1; }
.sp-col:hover .sp-seg { filter: brightness(1.12); }
.sp-x { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
        font-family: var(--mono); font-size: 9.5px; color: var(--text-muted);
        white-space: nowrap; }

/* A send waiting on the server is not a failure yet — it reads as neither. */
.mail-tag.warn { background: color-mix(in srgb, var(--series-twilio) 16%, transparent);
                 color: var(--series-twilio); }
.mt-pill.warn { background: color-mix(in srgb, var(--series-twilio) 16%, transparent);
                color: var(--series-twilio); }

/* Two conclusions, not one: the closer's call and the follow-up's are separate
   accounts, so they get separate blocks rather than one overwriting the other.
   The rail is the only thing that distinguishes them — role is spelt out. */
/* The conversation track: one numbered entry per call, oldest at the top, joined
   by a rail so the relationship reads as a sequence rather than a pile of notes. */
.cc-track { list-style: none; margin: 2px 0 0; padding: 0; position: relative; }
.cc-track::before {
  content: ""; position: absolute; left: 9px; top: 14px; bottom: 12px;
  width: 1px; background: var(--hairline);
}
.cc-block { position: relative; padding: 9px 0 3px 30px; }
.cc-block + .cc-block { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 11px; }
.cc-n {
  position: absolute; left: 0; top: 9px; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
  background: var(--surface-1); border: 1px solid var(--hairline-strong);
}
.cc-block + .cc-block .cc-n { top: 11px; }
.cc-block.cc-followup .cc-n,
.cc-block.cc-inbound .cc-n {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.cc-block-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.cc-block-head b { font-size: 12px; color: var(--text-primary); }
.cc-agent { font-size: 11px; color: var(--text-muted); font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.cc-block-head time { margin-left: auto; font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cc-block[data-cc-call] { cursor: pointer; }
.cc-block[data-cc-call]:hover .cc-summary { color: var(--text-primary); }
.cc-block.cc-followup .cc-block-head b { color: var(--accent); }

/* A message left on his machine: on the record, but visibly not a conversation. */
.cc-block.cc-vm .cc-block-head b { color: var(--text-muted); font-weight: 600; }
.cc-block.cc-vm .cc-summary,
.cc-block.cc-brief .cc-summary {
  color: var(--text-secondary); font-size: 12.5px;
  /* Five unanswered calls write five near-identical paragraphs, and on a lead we
     have rung a dozen times they bury the two conversations that matter. Two
     lines is enough to see it was a message and what it was about; the call row
     below opens the whole thing. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.cc-block.cc-vm .cc-n {
  background: transparent; border-style: dashed; border-color: var(--hairline);
  color: var(--text-muted);
}
.cc-block.cc-vm .cc-n svg { width: 12px; height: 12px; }

/* He answered, and it was over before anything was said. On the record and worth
   a closer's eye, but it is not a conversation and is not numbered as one. */
.cc-block.cc-brief .cc-block-head b { color: var(--text-secondary); font-weight: 600; }
.cc-block.cc-brief .cc-n { background: var(--surface-3); color: var(--text-secondary); }
.cc-block.cc-brief .cc-n svg { width: 12px; height: 12px; }

/* What the call left behind, under its own summary — the four fields the next
   caller is actually going to use. */
.cc-facets { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 7px; }
.cc-facets span { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary);
  max-width: 100%; }
.cc-facets i {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted); margin-right: 6px;
}

/* How well we know him, and the few things that will change how the next call
   opens. Blue is chrome, red is a problem in the way, grey is context — green
   stays reserved for money everywhere on this desk. */
.cc-rapport {
  margin-left: auto; flex: 0 0 auto; font-size: 11px; padding: 3px 9px;
  border-radius: 999px; color: var(--text-secondary);
  background: var(--surface-3); border: 1px solid var(--hairline);
}
.cc-rapport.cc-r3, .cc-rapport.cc-r4 {
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent); font-weight: 600;
}
.cc-signals { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 11px; }
.cc-sig {
  display: inline-flex; align-items: baseline; gap: 7px; max-width: 100%;
  padding: 4px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.4;
  background: var(--surface-3); border: 1px solid var(--hairline);
  color: var(--text-secondary);
}
.cc-sig i {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); flex: 0 0 auto;
}
.cc-sig-bad {
  background: var(--danger-soft); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.cc-sig-bad i { color: inherit; opacity: .85; }
.cc-sig-open {
  background: var(--accent-soft); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.cc-sig-open i { color: inherit; opacity: .85; }

/* ── an attached document: look at it, or take it ─────────────────────────── */
.doc-row { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.doc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 320px;
            padding: 4px 10px; border-radius: 999px; cursor: pointer;
            border: 1px solid var(--hairline); background: var(--surface-2);
            color: var(--good); font: inherit; font-size: 12px;
            transition: border-color .12s, background .12s; }
.doc-chip:hover { border-color: var(--good); background: var(--good-soft); }
.doc-chip .ico { width: 13px; height: 13px; flex: 0 0 auto; }
.doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-get { display: inline-grid; place-items: center; width: 26px; height: 26px;
           border-radius: 8px; color: var(--text-muted);
           transition: background .12s, color .12s; }
.doc-get:hover { background: var(--surface-3); color: var(--text-primary); }
.doc-get .ico { width: 14px; height: 14px; }

/* the viewer itself: over everything, fading rather than snapping */
.doc-viewer { position: fixed; inset: 0; z-index: 9500; display: flex;
              flex-direction: column; padding: 14px 14px 22px;
              background: color-mix(in srgb, #05070a 82%, transparent);
              backdrop-filter: blur(3px);
              opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.doc-viewer.on { opacity: 1; visibility: visible; }
.dv-bar { display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
          padding: 4px 4px 12px; color: #e9edf1; }
.dv-name { font-size: 13px; font-family: var(--mono); opacity: .85;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
          padding: 6px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18);
          background: rgba(255,255,255,.08); color: #e9edf1; cursor: pointer;
          font: inherit; font-size: 12.5px; transition: background .12s; }
.dv-btn:hover { background: rgba(255,255,255,.16); }
.dv-x { margin-left: 0; padding: 6px 9px; }
.dv-btn .ico { width: 14px; height: 14px; }
/* flex, not grid: a grid track sizes to its content, so a 4608px-tall licence
   simply overflowed the viewport instead of fitting inside it. */
.dv-stage { flex: 1; min-height: 0; min-width: 0; display: flex;
            align-items: center; justify-content: center; overflow: hidden; }
/* the document rises the last few pixels as it fades — enough to feel opened */
.dv-stage img, .dv-stage iframe {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); background: #fff;
  transform: translateY(8px) scale(.995); transition: transform .22s ease; }
.doc-viewer.on .dv-stage img, .doc-viewer.on .dv-stage iframe { transform: none; }
.dv-stage iframe { width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .doc-viewer, .dv-stage img, .dv-stage iframe { transition: none; }
}

/* ── the two applications a carrier can hold ──────────────────────────────
   Product first: which form went out changes what the carrier was asked for,
   so it is named before the status, not inferred from the link. */
.app-block { border: 1px solid var(--hairline); border-radius: 12px;
             padding: 12px 13px; margin-bottom: 10px; background: var(--surface-1); }
.app-block:last-of-type { margin-bottom: 4px; }
.app-head { display: flex; align-items: center; gap: 8px; }
.app-kind { font-size: 11px; font-weight: 700; letter-spacing: .04em;
            padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.app-make-row { display: flex; gap: 8px; margin-top: 8px; }

/* Revealing an SSN is a deliberate act, and a logged one — the control looks
   like a control, and the revealed number reads as a number, not as chrome. */
.ssn-eye { display: inline-grid; place-items: center; width: 22px; height: 22px;
           border: 0; border-radius: 6px; cursor: pointer; padding: 0;
           background: var(--surface-3); color: var(--text-muted);
           transition: color .12s, background .12s; }
.ssn-eye:hover { color: var(--text-primary); background: var(--hairline); }
.ssn-eye:disabled { opacity: .5; cursor: default; }
.ssn-eye .ico { width: 13px; height: 13px; }
.ssn-val { font-family: var(--mono); font-size: 12px; }
.ssn-val.ssn-open { color: var(--text-primary); }

/* A drawn signature is evidence — shown at a size you can actually read, on
   white because that is the paper it was signed on, whatever the theme is. */
.sig-img { max-width: 220px; max-height: 84px; border: 1px solid var(--hairline);
           border-radius: 6px; background: #fff; padding: 3px; cursor: pointer;
           transition: border-color .12s; }
.sig-img:hover { border-color: var(--accent); }

/* ── page access: what a person is allowed to open ───────────────────────────
   The owner ticks pages on the person's card. The sidebar is drawn from the
   same grant, but the lock itself is on the API — this is only how it is set. */
.grant { margin-top: 10px; border-top: 1px solid var(--hairline); padding-top: 9px; }
.grant > summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  font-size: 11.5px; color: var(--text-secondary); padding: 3px 0;
}
.grant > summary::-webkit-details-marker { display: none; }
.grant > summary .ico { width: 13px; height: 13px; color: var(--accent); flex: 0 0 auto; }
.grant > summary b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.grant > summary::after {
  content: "▸"; margin-left: auto; color: var(--text-muted); font-size: 10px;
  transition: transform .15s ease;
}
.grant[open] > summary::after { transform: rotate(90deg); }
.grant-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 2px 10px; margin: 8px 0 9px;
}
.grant-list label {
  display: flex; align-items: center; gap: 7px; font-size: 12px;
  color: var(--text-secondary); cursor: pointer; padding: 3px 0;
}
.grant-list input { accent-color: var(--accent); cursor: pointer; }
.grant-list label:hover { color: var(--text-primary); }
.grant-foot { display: flex; gap: 6px; align-items: center; }
.grant-foot .btn-primary { margin-left: auto; }
.grant-admin {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  border-top: 1px solid var(--hairline); padding-top: 11px;
  font-size: 11.5px; color: var(--text-muted);
}
.grant-admin .ico { width: 13px; height: 13px; color: var(--accent); flex: 0 0 auto; }

/* ── "What he told us" — his own operation, on the lead page ─────────────────
   Not a card per fact: one panel, a quiet grid inside it, so nine facts read as
   one thing a closer can take in at a glance rather than nine competing boxes. */
.facts-card { padding: 15px 18px; margin-bottom: 14px; }
.fc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.fc-ico { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.fc-title { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.fc-count {
  margin-left: auto; font-size: 10.5px; color: var(--text-muted);
  font-family: var(--mono); letter-spacing: .03em;
}
.fc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  gap: 2px 20px;
}
.fc-item {
  display: flex; gap: 11px; align-items: flex-start; padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
/* The first item in each column sits under the heading, so its rule is noise. */
.fc-grid > .fc-item:nth-child(-n + 2) { border-top: 0; padding-top: 2px; }
@media (max-width: 720px) {
  .fc-grid { grid-template-columns: 1fr; }
  .fc-grid > .fc-item:nth-child(2) { border-top: 1px solid var(--hairline); padding-top: 9px; }
}
.fc-mark {
  width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; color: var(--text-muted);
}
.fc-item[data-fact-call] { cursor: pointer; }
.fc-item[data-fact-call]:hover .fc-mark { color: var(--accent); }
.fc-item[data-fact-call]:hover .fc-v { color: var(--accent); }
.fc-body { min-width: 0; }
.fc-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 2px;
}
.fc-v {
  font-size: 14.5px; line-height: 1.35; color: var(--text-primary); font-weight: 600;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.fc-src { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
/* A pain point arrives as prose. Two lines is the fact; the rest is the story,
   and the story is already on the call the item links to. */
.fc-v { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ── spend chart: the hover layer ───────────────────────────────────────────
   Replaces the browser's own `title` box, which appeared after a pause, could
   not be styled and hung off the right edge of the card. */
.sp-plot { position: relative; }
.sp-col { cursor: default; transition: opacity .12s ease; }
.sp-col.dim { opacity: .38; }
.sp-col.on .sp-seg { filter: brightness(1.12); }
.sp-tip {
  position: absolute; z-index: 5;
  min-width: 148px; padding: 9px 11px; border-radius: 10px;
  background: var(--surface-1); border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow); pointer-events: none;
}
.tip-day {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); font-family: var(--mono);
}
.tip-total {
  font-size: 19px; font-weight: 700; line-height: 1.25; margin: 1px 0 6px;
  font-variant-numeric: tabular-nums;
}
.tip-split { display: grid; gap: 3px; padding-top: 6px; border-top: 1px solid var(--hairline); }
.tip-split span {
  display: flex; align-items: center; gap: 7px; font-size: 11.5px;
  color: var(--text-secondary);
}
.tip-split b {
  margin-left: auto; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.tip-calls {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline);
  font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}

/* ── how far he got on the form ──────────────────────────────────────────────
   Drawn only for an application that was opened and never sent. The bar is the
   fact; the field chips are the detail a closer rings him back about. */
.app-prog {
  margin: 10px 0 4px; padding: 11px 13px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--hairline);
}
.ap-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ap-title { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.ap-count {
  margin-left: auto; font-size: 10.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ap-bar {
  height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden;
}
.ap-bar span {
  display: block; height: 100%; border-radius: 999px; background: var(--accent);
  transition: width .3s ease;
}
.ap-stop { font-size: 11.5px; color: var(--text-secondary); margin-top: 8px; }
.ap-stop b { color: var(--accent); }
.ap-fields { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.ap-f {
  font-size: 10.5px; padding: 2px 7px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

/* ── who finished the form ──────────────────────────────────────────────
   One row per carrier behind the "Application filled" tile: the man on the
   left, when it landed on the right. Rows are buttons — the whole row opens
   his lead, because the next thing anybody wants after seeing the name is
   the card behind it. */
.filled-list { display: flex; flex-direction: column; gap: 1px; background: var(--hairline);
               border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.filled-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
              width: 100%; padding: 11px 14px; background: var(--surface-1); border: 0;
              font: inherit; color: inherit; text-align: left; cursor: pointer; }
.filled-row:hover { background: var(--surface-2); }
.filled-name { font-weight: 600; font-size: 13.5px; }
.filled-sub  { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.filled-meta { text-align: right; font-size: 12px; white-space: nowrap;
               font-variant-numeric: tabular-nums; }

/* ── the folded middle of a long history ────────────────────────────────
   One quiet line standing in for the fortnight of unanswered calls between
   how it started and where it stands. It opens on a real height animation —
   grid-template-rows from 0fr to 1fr, which the browser can interpolate, so
   there is no measuring in JavaScript and no jump when the content changes. */
.cc-fold { list-style: none; margin: 2px 0 2px 34px; padding: 0; }

.cc-fold-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 12px; border: 1px dashed var(--hairline); border-radius: 9px;
  background: transparent; cursor: pointer; font: inherit; color: var(--text-muted);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.cc-fold-btn:hover { background: var(--surface-2); border-color: var(--text-muted);
                     color: var(--text-primary); }
.cc-fold-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-fold-btn b { font-size: 12.5px; font-weight: 600; }
.cc-fold-when { margin-left: auto; font-size: 11.5px; opacity: .8;
                font-variant-numeric: tabular-nums; }

.cc-fold-chev { width: 14px; height: 14px; flex: none;
                transition: transform .34s cubic-bezier(.4, 0, .2, 1); }
.cc-fold.on .cc-fold-chev { transform: rotate(90deg); }
.cc-fold.on .cc-fold-btn { border-style: solid; color: var(--text-primary); }

.cc-fold-body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .36s cubic-bezier(.4, 0, .2, 1),
              opacity .26s ease, margin-top .36s cubic-bezier(.4, 0, .2, 1);
}
.cc-fold-body > * { overflow: hidden; min-height: 0; }
.cc-fold.on .cc-fold-body { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }

/* the tucked entries sit on the same rail as the open ones, just un-indented
   once, because the fold itself already carries the indent */
.cc-track-inner { margin: 0; padding: 0; list-style: none; }
.cc-track-inner .cc-block { margin-left: -34px; }

@media (prefers-reduced-motion: reduce) {
  .cc-fold-body, .cc-fold-chev { transition: none; }
}

/* ── the Clicked tab ────────────────────────────────────────────────────
   Three columns that answer three questions in one glance: who he is, how far
   he got, and when. The progress bar is the point — a man at nine of fourteen
   is a different call from a man who opened the page and left. */
.click-head { font-size: 12.5px; color: var(--text-muted); margin: 0 2px 10px;
              font-variant-numeric: tabular-nums; }
.click-head b { color: var(--text-primary); font-weight: 600; }

.click-list { display: flex; flex-direction: column; gap: 1px;
              background: var(--hairline); border: 1px solid var(--hairline);
              border-radius: 12px; overflow: hidden; }

.click-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
             align-items: center; gap: 18px; width: 100%; padding: 12px 15px;
             background: var(--surface-1); border: 0; border-left: 3px solid transparent;
             font: inherit; color: inherit; text-align: left; cursor: pointer;
             transition: background .15s ease; }
.click-row:hover { background: var(--surface-2); }
.click-row.is-part { border-left-color: var(--accent); }
.click-row.is-done { border-left-color: var(--good); }

.click-who { display: flex; flex-direction: column; min-width: 0; }
.click-who b { font-weight: 600; font-size: 13.5px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.click-sub { color: var(--text-muted); font-size: 11.5px; margin-top: 2px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.click-prog { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.click-state { font-size: 12px; font-weight: 600; }
.click-state.done { color: var(--good); }
.click-state.part { color: var(--accent); }
.click-state.look { color: var(--text-muted); font-weight: 500; }

.click-bar { display: block; height: 4px; border-radius: 3px;
             background: var(--hairline); overflow: hidden; }
.click-bar > i { display: block; height: 100%; border-radius: 3px;
                 background: var(--accent); }
.click-row.is-done .click-bar > i { background: var(--good); }

.click-meta { text-align: right; font-size: 12px; white-space: nowrap;
              font-variant-numeric: tabular-nums; display: flex;
              flex-direction: column; align-items: flex-end; }

@media (max-width: 760px) {
  .click-row { grid-template-columns: 1fr; gap: 8px; }
  .click-meta { text-align: left; align-items: flex-start; }
}

/* ── standing in somebody else's account ────────────────────────────────
   Amber, which nothing else on this desk uses, and pinned to the top of the
   window rather than to a page — so it cannot be scrolled away from and there
   is no screen on which the owner forgets whose account he is in. The body
   gets padded by the same height so nothing hides underneath it. */
#view-as-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; font-size: 12.5px; line-height: 1.4;
  color: #4a3208; background: #fde68a;
  border-bottom: 1px solid #d9a91f;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .10);
}
#view-as-bar svg { width: 16px; height: 16px; flex: none; }
#view-as-bar b { font-weight: 700; }
#view-as-bar span { min-width: 0; }
#view-as-bar button {
  margin-left: auto; flex: none; cursor: pointer; font: inherit; font-weight: 600;
  padding: 5px 13px; border-radius: 8px;
  color: #fff; background: #92400e; border: 1px solid #7c3508;
}
#view-as-bar button:hover { background: #7c3508; }
body.as-someone { padding-top: 38px; }
body.as-someone .sidebar { top: 38px; }

@media (max-width: 720px) {
  #view-as-bar { flex-wrap: wrap; }
  #view-as-bar button { margin-left: 0; }
  body.as-someone { padding-top: 66px; }
}

/* ── hand-off (Deal Closer) board ─────────────────────────────────────────── */
.handoff-why {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 3px 6px;
  margin: 5px 0 2px;
  line-height: 1.3;
}
.handoff-why.big {
  font-size: 12.5px;
  padding: 8px 10px;
  margin: 4px 0 12px;
}
.handoff-detail { display: flex; flex-direction: column; gap: 4px; }
.hf-row { display: flex; flex-wrap: wrap; gap: 6px; }
.hf {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 10px;
  text-decoration: none;
}
a.hf:hover { color: var(--accent); border-color: var(--accent); }
.hf-app { font-size: 12.5px; color: var(--text-secondary); margin: 2px 0 4px; }
.hstage-pick { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.hstage-btn {
  flex: 1;
  min-width: 84px;
  padding: 8px 10px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-1);
  color: var(--text-secondary);
  border-radius: 8px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.12s;
}
.hstage-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.hstage-btn.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.hsec {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 16px 0 8px;
}
.hcalls { display: flex; flex-direction: column; gap: 10px; }
.hcall {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-1);
}
.hcall-top { display: flex; align-items: center; gap: 8px; }
.hcall-sum {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.4;
}
.hcall-tx { margin-top: 8px; }
.hcall-tx > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
}
.hcall-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.hthread { display: flex; flex-direction: column; gap: 8px; }
.hnote {
  font-size: 12.5px;
  border-left: 2px solid var(--hairline-strong);
  padding-left: 10px;
  color: var(--text-secondary);
}
.hnote b { color: var(--text-primary); }
.hnote time { color: var(--text-muted); font-size: 11px; margin-left: 6px; }
.hnote-add { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.hnote-add textarea {
  flex: 1;
  resize: vertical;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-1);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12.5px;
}

/* ── hand-off custom recording player ─────────────────────────────────────── */
.hplayer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 7px 12px 7px 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.hplay {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  transition: transform 0.1s;
}
.hplay:hover { transform: scale(1.06); }
.hplay svg { width: 15px; height: 15px; fill: currentColor; }
.hseek {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--hairline-strong);
  position: relative;
}
.hseek-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
}
.htime {
  font-size: 11.5px;
  color: var(--text-secondary);
  min-width: 34px;
  text-align: right;
}
.hdl {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  border-radius: 7px;
}
.hdl:hover { color: var(--accent); background: var(--surface-1); }
.hdl svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}