/* next-step.css — the "Next step" card (next-step.js): beside a
 * conversation it is one more card in the sidebar, drawn like the Deals card
 * (deal-panel.css) on the conversation redesign's own tokens; on a customer
 * page it sits above the customer file. Light first; the lime button carries
 * black text. */
.crm-ns {
  --ns-ink: #1d1b1c;
  --ns-muted: #55606c;
  --ns-line: #e8ebe4;
  --ns-soft: #f6f8f2;
  --ns-lime: #d4fb08;
  --ns-crit: #b42318;
  --ns-high: #b54708;

  margin: 10px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--cv-line, var(--ns-line));
  border-radius: var(--cv-radius, 12px);
  background: var(--cv-card, #ffffff);
  box-shadow: none;
  color: var(--ns-ink);
  font-size: 13px;
  line-height: 1.55;
}
:root.dark .crm-ns, .dark .crm-ns, [data-theme="dark"] .crm-ns {
  --ns-ink: #e8eaed;
  --ns-muted: #98a1ad;
  --ns-line: #2c3138;
  --ns-soft: #22262c;
  --ns-crit: #fca5a5;
  --ns-high: #fdba74;
  background: var(--cv-card, #1b1e23);
}
.crm-ns * { box-sizing: border-box; }
.crm-ns :where(button) { font: inherit; }

.crm-ns__h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ns-muted); }
.crm-ns__h .fi { font-size: 13px; }
.crm-ns__facts { margin-top: 4px; font-size: 12px; color: var(--ns-muted); }
.crm-ns__none { margin-top: 8px; color: var(--ns-muted); }

.crm-ns__step { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cv-line, var(--ns-line)); }
.crm-ns__step.is-first { border-top: 0; padding-top: 2px; }
.crm-ns__title { display: block; font-size: 13.5px; font-weight: 700; }
.crm-ns__step.is-p1 .crm-ns__title { color: var(--ns-crit); }
.crm-ns__why { margin-top: 2px; color: var(--ns-muted); }
.crm-ns__draft {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--ns-soft);
  white-space: pre-wrap; font-size: 12.5px;
}

.crm-ns__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.crm-ns__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--cv-line, var(--ns-line)); background: transparent; color: var(--ns-ink); font-size: 12.5px; font-weight: 600;
}
.crm-ns__btn:hover { background: var(--ns-soft); }
.crm-ns__btn.is-primary { background: var(--ns-lime); border-color: var(--ns-lime); color: #000000; }
.crm-ns__btn:disabled { opacity: .6; cursor: default; }
.crm-ns__btn .fi { font-size: 13px; }

.crm-ns__task { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--cv-line, var(--ns-line)); color: var(--ns-muted); font-size: 12.5px; }
.crm-ns__task .fi { margin-top: 3px; }
.crm-ns__err { margin-top: 6px; color: var(--ns-crit); font-size: 12.5px; }

/* On the customer page it leads the file. */
.crm-ns:has(+ [data-crm-file]) { margin: 0 0 14px; }