/* ==========================================================================
   Product UI mockups, shared by the home page and the product page.

   Markup is generated from scripts/mocks.py by scripts/sync_mocks.py; both
   pages carry identical markup between MOCK markers, and qa_all.py fails if
   they drift. Styles and looping sequences live here.
   ========================================================================== */

/* --- Chat (Sell, Triage, Nexus): same type size both sides ---------------- */
.nicholii-mock_pane.is-chat { display: flex; flex-direction: column; gap: .5rem; }

.nm-chat { display: flex; flex-direction: column; gap: .5rem; }
.nm-turn { display: flex; flex-direction: column; gap: .25rem; max-width: 82%; }
.nm-turn.is-them { align-self: flex-start; align-items: flex-start; }
.nm-turn.is-us   { align-self: flex-end;   align-items: flex-end; }

.nm-time {
  font-family: var(--typography-font-label);
  font-size: 10px; letter-spacing: .06em;
  color: rgba(37, 37, 37, 0.68);
}

/* Alignment and bubble colour carry the speaker difference, never type size. */
.nm-bubble,
.nm-bubble p,
.nm-flag_title,
.nm-flag_body {
  font-size: 12px;
  line-height: 1.45;
}
.nm-bubble {
  padding: .5rem .7rem;
  border-radius: .75rem;
}
.nm-bubble p { margin: 0; }
.nm-bubble p + p { margin-top: .4rem; }

.nm-turn.is-them .nm-bubble {
  background-color: rgba(37, 37, 37, 0.06);
  border-bottom-left-radius: .25rem;
  color: var(--color-base-base-dark-100);
}
.nm-turn.is-us .nm-bubble {
  background-color: rgba(37, 37, 37, 0.13);
  border-bottom-right-radius: .25rem;
  color: var(--color-base-base-dark-100);
}

.nicholii-mock_btn.is-signal {
  background-color: var(--color-base-accent-primary);
  border-color: transparent;
  color: var(--color-base-base-dark-100);
}

/* --- Shared actions / flag / calendar ------------------------------------ */
.nm-divider { height: 1px; margin: .875rem 0; background-color: rgba(37, 37, 37, 0.09); }

.nm-flag {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-top: .25rem;
}
.nm-flag_icon {
  flex: none; width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: .5rem;
  border: 1px solid rgba(44, 58, 47, 0.35);
  color: var(--color-base-forest);
  background-color: rgba(249, 255, 170, 0.55);
}
.nm-flag_icon svg { width: 14px; height: 14px; }
.nm-flag_text { display: flex; flex-direction: column; gap: .2rem; }
.nm-flag_title { font-weight: 500; color: var(--color-base-base-dark-100); }
.nm-flag_body { color: rgba(37, 37, 37, 0.74); }

/* Triage: flag sits as its own white card in the chat, not inside the reply bubble. */
.nicholii-mock[data-nm="triage"] .nm-flag {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  margin: .15rem 0 0;
  padding: .75rem .85rem;
  border-radius: .65rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.nm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.nm-action {
  position: relative;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  border: none;
  background-color: rgba(37, 37, 37, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  color: var(--color-base-base-dark-100);
  white-space: nowrap;
}
.nm-action svg { width: 13px; height: 13px; flex: none; }
.nm-action.is-primary {
  background-color: var(--color-base-accent-primary);
  color: var(--color-base-base-dark-100);
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nm-cal {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-top: .35rem; padding: .85rem .9rem;
  border-radius: .625rem;
  background-color: rgba(37, 37, 37, 0.06);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.nm-cal_icon {
  flex: none; width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: .5rem;
  background-color: rgba(249, 255, 170, 0.55);
  color: var(--color-base-forest);
}
.nm-cal_icon svg { width: 15px; height: 15px; }
.nm-cal_text { display: flex; flex-direction: column; gap: .25rem; }
.nm-cal_title { font-size: .9375rem; font-weight: 500; color: var(--color-base-base-dark-100); }
.nm-cal_body { font-size: .8125rem; line-height: 1.45; color: rgba(37, 37, 37, 0.74); }

/* Triage: larger chat type, calendar sheet, booked end state */
.nicholii-mock[data-nm="triage"] {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.nicholii-mock[data-nm="triage"] .nicholii-mock_pane.is-triage {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.nicholii-mock[data-nm="triage"] .nm-turn {
  max-width: 96%;
}
.nicholii-mock[data-nm="triage"] .nm-bubble,
.nicholii-mock[data-nm="triage"] .nm-bubble p,
.nicholii-mock[data-nm="triage"] .nm-flag_title,
.nicholii-mock[data-nm="triage"] .nm-flag_body {
  font-size: 14.5px;
  line-height: 1.5;
}
.nicholii-mock[data-nm="triage"] .nm-bubble {
  padding: .7rem .9rem;
}
.nicholii-mock[data-nm="triage"] .nm-action {
  font-size: 13.5px;
  padding: .6rem .9rem;
}
.nicholii-mock[data-nm="triage"] .nm-action svg {
  width: 15px;
  height: 15px;
}
.nicholii-mock[data-nm="triage"] .nm-stage.is-booked {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}
.nicholii-mock[data-nm="triage"] .nm-stage.is-chat {
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.nicholii-mock[data-nm="triage"] .nm-stage.is-picker {
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: .5rem;
}
.nt-sheet {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  width: 100%;
  max-width: 16.5rem;
  padding: .75rem .8rem .7rem;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
  flex: none;
}
.nt-sheet_head {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.nt-sheet_who {
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-base-base-dark-100);
}
.nt-sheet_role {
  font-size: .6875rem;
  color: rgba(37, 37, 37, 0.68);
}
.nt-sheet_label {
  font-family: var(--typography-font-label);
  font-size: .5625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(37, 37, 37, 0.58);
}
.nt-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .25rem;
}
.nt-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .35rem .15rem;
  border-radius: .4rem;
  background: rgba(37, 37, 37, 0.05);
}
.nt-day.is-on {
  background: rgba(37, 37, 37, 0.14);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.nt-day_name {
  font-family: var(--typography-font-label);
  font-size: .5rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(37, 37, 37, 0.58);
}
.nt-day_num {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-base-base-dark-100);
}
.nt-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
}
.nt-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .35rem;
  border-radius: .4rem;
  background: rgba(37, 37, 37, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: .75rem;
  font-weight: 500;
  color: var(--color-base-base-dark-100);
}
.nt-slot.is-on {
  background: rgba(37, 37, 37, 0.14);
}
.nt-sheet_foot {
  display: flex;
  justify-content: flex-end;
  margin-top: .05rem;
}
.nt-confirm {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .9rem;
  border-radius: .45rem;
  background: var(--color-base-accent-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: .75rem;
  font-weight: 500;
  color: var(--color-base-base-dark-100);
}

@media screen and (max-width: 600px) {
  .nm-turn { max-width: 92%; }
  .nm-actions .nm-action { flex: 1 1 100%; justify-content: center; }
}


/* --- base mock styles ---------------------------------------------------- */
.nicholii-mock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  position: relative;
  padding: 14px;
  border-radius: 14px;
  background-color: #f7f7f5;
  color: #252525;
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
}
.nicholii-mock_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.nicholii-mock_brand {
  font-family: var(--typography-font-label);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(37, 37, 37, 0.7);
}
.nicholii-mock_btns { display: flex; align-items: center; gap: 8px; }
.nicholii-mock_btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background-color: rgba(37, 37, 37, 0.08);
  color: var(--color-base-base-dark-100);
}
.nicholii-mock_btn.is-signal {
  background-color: var(--color-base-accent-primary);
  color: var(--color-base-base-dark-100);
}
.nicholii-mock_pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  background-color: rgba(37, 37, 37, 0.05);
  position: relative;
}
.nicholii-mock_pane:last-child { flex: 1 1 auto; }
.nicholii-mock_pane.is-doc { background-color: #fff; color: var(--color-base-base-dark-100); box-shadow: inset 0 0 0 1px rgba(37, 37, 37, 0.08); position: relative; }
.nicholii-mock_pane.is-seq { min-height: 11.5rem; }
.nicholii-mock_label,
.nicholii-mock_key {
  font-family: var(--typography-font-label);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(37, 37, 37, 0.7);
}
.nicholii-mock_pane.is-doc .nicholii-mock_key { color: rgba(37, 37, 37, 0.72); }
.nicholii-mock_msg {
  padding: 10px 12px;
  border-radius: 10px;
  background-color: rgba(37, 37, 37, 0.07);
  max-width: 92%;
  font-size: 12px;
}
.nicholii-mock_tag {
  align-self: flex-end;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--typography-font-label);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background-color: var(--color-base-accent-primary);
  color: var(--color-base-base-dark-100);
}
.nicholii-mock_tag.is-quiet {
  align-self: auto;
  background-color: rgba(37, 37, 37, 0.09);
  color: rgba(37, 37, 37, 0.88);
}
.nicholii-mock_tag.is-medium {
  align-self: auto;
  background-color: #f5efb8;
  color: var(--color-base-base-dark-100);
  font-weight: 500;
}
.nicholii-mock_chips { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nicholii-mock_meta { font-size: 11px; color: rgba(37, 37, 37, 0.7); }
.nicholii-mock_status { font-size: 11px; color: rgba(37, 37, 37, 0.7); }
.nicholii-mock_pane.is-doc .nicholii-mock_status { color: rgba(37, 37, 37, 0.7); }
.nicholii-mock_val { font-weight: 500; font-size: 12px; }
.nicholii-mock_note { font-size: 11px; color: rgba(37, 37, 37, 0.7); }
.nicholii-mock_rows { display: flex; flex-direction: column; gap: 8px; }
.nicholii-mock_row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.nicholii-mock_row .nicholii-mock_val { text-align: right; }
.nicholii-mock_prompt {
  align-self: flex-start;
  font-weight: 500;
  color: var(--color-base-forest);
}
.nicholii-mock_dochead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nicholii-mock_doctext { margin: 0; font-size: 13px; line-height: 1.6; }

/* Review: end state shows redlined clause alone. */
.nicholii-mock[data-nm="review"] .nm-stage.is-doc {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.nicholii-mock[data-nm="review"] .nr-clause { position: relative; flex: 1 1 auto; }
.nicholii-mock[data-nm="review"] .nicholii-mock_doctext.is-clean { display: none; }
.nicholii-mock[data-nm="review"] .nicholii-mock_doctext.is-marked { display: block; }
.nicholii-mock[data-nm="review"] .nicholii-mock_doctext {
  font-size: 16px;
  line-height: 1.7;
}

.nicholii-redline.is-del { color: #a8564f; text-decoration: line-through; }
.nicholii-redline.is-ins { color: #2f6fd0; text-decoration: underline; text-underline-offset: .2em; }

.nicholii-mock_pane.is-review {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
}
.nr-opts {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .25rem;
  flex: 1 1 auto;
}
.nr-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem .9rem;
  border-radius: .625rem;
  border: none;
  background-color: rgba(37, 37, 37, 0.05);
}
.nr-opt.is-chosen {
  background-color: rgba(249, 255, 170, 0.42);
}
.nr-opt_dot {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: .15rem;
  border-radius: 50%;
  border: 1.5px solid rgba(37, 37, 37, 0.34);
  background: transparent;
}
.nr-opt.is-chosen .nr-opt_dot {
  border-color: var(--color-base-base-dark-100);
  background: radial-gradient(circle, var(--color-base-base-dark-100) 0 45%, transparent 46%);
}
.nr-opt_text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.nr-opt_title {
  position: relative;
  display: inline-block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-base-base-dark-100);
}
.nr-opt_note {
  font-size: .75rem;
  line-height: 1.4;
  color: rgba(37, 37, 37, 0.74);
}
.nr-opts.is-outputs .nr-opt {
  align-items: center;
  min-height: 3rem;
}
.nr-opts.is-outputs .nr-opt_dot {
  margin-top: 0;
}
.nicholii-mock_apply {
  position: relative;
  align-self: flex-end;
  margin-left: auto;
  margin-top: .35rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background-color: #c8e6c0;
  color: var(--color-base-base-dark-100);
  font-size: .8125rem;
  font-weight: 500;
}
.nicholii-mock[data-nm="review"] {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.nicholii-mock[data-nm="review"] .nicholii-mock_pane.is-review {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.nicholii-mock[data-nm="review"] .nm-stage.is-select,
.nicholii-mock[data-nm="review"] .nm-stage.is-outputs {
  flex-direction: column;
  gap: .55rem;
  flex: 1 1 auto;
  min-height: 0;
}
.nicholii-mock[data-nm="review"] .nm-stage.is-think {
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
.nicholii-mock[data-nm="review"] .nicholii-mock_prompt {
  font-size: .9375rem;
  margin-bottom: .15rem;
}
.nicholii-mock[data-nm="review"] .nicholii-mock_status {
  font-size: .8125rem;
}

/* Procure */
.nicholii-mock_pane.is-procure {
  min-height: 16rem;
  display: flex;
  flex-direction: column;
}
.nicholii-mock[data-nm="procure"] .nm-stage.is-opts {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
}
.np-opts {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .5rem;
  flex: 0 1 auto;
  width: 100%;
  height: 58%;
  max-height: 58%;
  min-height: 0;
}
.np-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 1 1 0;
  min-height: 0;
  padding: .7rem 1rem;
  border-radius: .625rem;
  background-color: rgba(37, 37, 37, 0.04);
}
.np-opt.is-chosen {
  background-color: rgba(249, 255, 170, 0.35);
  box-shadow: inset 0 0 0 1px rgba(44, 58, 47, 0.18);
}
.np-opt_dot {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(37, 37, 37, 0.34);
}
.np-opt.is-chosen .np-opt_dot {
  border-color: var(--color-base-base-dark-100);
  background: radial-gradient(circle, var(--color-base-base-dark-100) 0 45%, transparent 46%);
}
.np-opt_text { display: flex; flex-direction: column; gap: .25rem; }
.np-opt_title {
  position: relative;
  display: inline-block;
  font-size: 1.0625rem; font-weight: 500; color: var(--color-base-base-dark-100);
  line-height: 1.25;
}
.np-opt_note { font-size: .875rem; line-height: 1.35; color: rgba(37, 37, 37, 0.74); }
.np-drop {
  position: relative;
  margin-top: .65rem;
  padding: 1.25rem 1rem;
  border: 1.5px dashed rgba(37, 37, 37, 0.24);
  border-radius: .625rem;
  min-height: 7.5rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .35rem;
}
.np-drop.is-hot {
  border-color: var(--color-base-forest);
  background-color: rgba(249, 255, 170, 0.2);
}
.np-drop_label {
  font-family: var(--typography-font-label);
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(37, 37, 37, 0.74);
}
.np-drop_hint {
  font-size: .75rem;
  color: rgba(37, 37, 37, 0.58);
  margin-bottom: .35rem;
}
.np-drop_file { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; }
.np-drop_ext {
  font-family: var(--typography-font-label); font-size: .5625rem; letter-spacing: .06em;
  padding: .15rem .4rem; border-radius: .25rem;
  background-color: rgba(37, 37, 37, 0.09); color: var(--color-base-base-dark-100);
}
.nm-pdf {
  flex: none;
  width: 28px;
  height: 34px;
  display: block;
  object-fit: contain;
}
.nm-stage.is-think {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
.np-think {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .85rem;
  width: 100%;
  max-width: 22rem;
  padding: .5rem 0;
}
.np-think_sparkle {
  width: 64px;
  height: auto;
  display: block;
  color: var(--color-base-forest);
}
.np-think_copy {
  font-size: .9375rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-base-base-dark-100);
  max-width: 18rem;
}
.np-think_rows {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  width: 100%;
  margin-top: .35rem;
}
.np-think_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .8rem;
  border-radius: .5rem;
  background: #fff;
  border: 1px solid rgba(37, 37, 37, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  text-align: left;
  opacity: 0;
}
.np-think_key {
  font-size: .75rem;
  color: rgba(37, 37, 37, 0.62);
  flex: none;
}
.np-think_val {
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-base-base-dark-100);
}
.np-think_valwrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
  min-width: 0;
}
.np-think_pill {
  display: inline-flex;
  align-items: center;
  padding: .2rem .45rem;
  border-radius: 999px;
  background: var(--color-base-accent-primary);
  color: var(--color-base-base-dark-100);
  font-family: var(--typography-font-label);
  font-size: .5rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

/* Create */
.nicholii-mock_pane.is-create {
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.nicholii-mock[data-nm="create"] {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.nicholii-mock[data-nm="create"] > .nicholii-mock_bar {
  flex: none;
}
.nicholii-mock[data-nm="create"] .nicholii-mock_pane.is-create {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.nc-drop {
  position: relative;
  margin-top: .35rem;
  padding: 1.25rem 1.1rem;
  border: 1.5px dashed rgba(37, 37, 37, 0.24);
  border-radius: .625rem;
  min-height: 8.5rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: .45rem;
}
.nc-drop.is-hot {
  border-color: var(--color-base-forest);
  background-color: rgba(249, 255, 170, 0.2);
}
.nc-drop_label {
  font-family: var(--typography-font-label);
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(37, 37, 37, 0.74);
}
.nc-drop_hint {
  font-size: .75rem;
  color: rgba(37, 37, 37, 0.58);
  margin-bottom: .25rem;
}
.nc-files {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: .55rem;
  width: 100%;
}
.nc-file {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  flex: 0 1 11.5rem;
  min-width: 0;
  padding: .9rem .55rem;
  border-radius: .5rem;
  background-color: #fff;
  border: 1px solid rgba(37, 37, 37, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--color-base-base-dark-100);
}
.nc-file .nm-pdf,
.nc-file .nm-word,
.nc-drag .nm-word {
  width: 32px;
  height: 33px;
}
.nm-word {
  flex: none;
  width: 32px;
  height: 33px;
  display: block;
  object-fit: contain;
}
.nc-drag {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 42%;
  max-width: 11rem;
  padding: .75rem .5rem;
  border-radius: .5rem;
  background: #fff;
  border: 1px solid rgba(37, 37, 37, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--color-base-base-dark-100);
  opacity: 0;
  pointer-events: none;
  white-space: normal;
}
.nm-stage.is-build {
  min-height: 0;
  overflow: hidden;
}
.nicholii-mock[data-nm="create"] .nm-stage.is-build {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.nicholii-mock[data-nm="create"] .nm-stage.is-build > .nicholii-mock_status {
  flex: none;
  margin-top: .35rem;
  font-size: 10px;
}
.nc-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: .45rem;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  align-items: stretch;
}
.nc-form {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.nc-form_head {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 .1rem;
  flex: none;
}
.nc-form_tab {
  font-family: var(--typography-font-label);
  font-size: .5625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(37, 37, 37, 0.5);
}
.nc-form_tab.is-on {
  color: var(--color-base-base-dark-100);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--color-base-accent-primary);
  padding-bottom: .15rem;
}
.nc-form_card {
  background: #fff;
  border: 1px solid rgba(37, 37, 37, 0.1);
  border-radius: .45rem;
  padding: .5rem .55rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  flex: 0 0 auto;
}
.nc-form_card:first-of-type,
.nc-form_card:last-of-type {
  flex: 0 0 auto;
}
.nc-form_cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}
.nc-form_section {
  font-size: .75rem;
  font-weight: 500;
  color: var(--color-base-base-dark-100);
}
.nc-form_docid {
  font-family: var(--typography-font-label);
  font-size: .5rem;
  letter-spacing: .04em;
  padding: .15rem .35rem;
  border-radius: .25rem;
  background: rgba(37, 37, 37, 0.07);
  color: rgba(37, 37, 37, 0.7);
  white-space: nowrap;
}
.nc-field_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
}
.nc-field {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.nc-field_label {
  font-family: var(--typography-font-label);
  font-size: .5rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(37, 37, 37, 0.55);
}
.nc-field_val {
  display: block;
  padding: .35rem .45rem;
  border-radius: .3rem;
  border: 1px solid rgba(37, 37, 37, 0.12);
  background: #fafaf8;
  font-size: .6875rem;
  line-height: 1.3;
  color: var(--color-base-base-dark-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-field_val.is-soft {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nc-field_val.is-wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.nicholii-mock[data-nm="create"] .nc-field_val.is-soft {
  -webkit-line-clamp: 1;
}
.nicholii-mock[data-nm="create"] .nc-form_card:last-of-type {
  padding-bottom: .65rem;
}
.nc-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-radius: .45rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(37, 37, 37, 0.1);
}
.nc-preview_head {
  background: var(--color-base-lift-dark);
  color: var(--color-base-base-light-100);
  padding: .65rem .7rem .75rem;
  flex: none;
}
.nc-preview_topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .45rem;
}
.nc-preview_brand {
  font-family: var(--typography-font-label);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(247, 247, 245, 0.72);
}
.nc-preview_btns { display: flex; gap: .3rem; }
.nc-preview_btn {
  font-size: .5625rem;
  font-weight: 500;
  padding: .2rem .45rem;
  border-radius: .3rem;
  background: rgba(247, 247, 245, 0.12);
  border: 1px solid rgba(247, 247, 245, 0.28);
  color: var(--color-base-base-light-100);
}
.nc-preview_btn.is-sign {
  background: var(--color-base-accent-primary);
  border-color: transparent;
  color: var(--color-base-base-dark-100);
}
.nc-preview_title {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: .3rem;
  color: var(--color-base-base-light-100);
}
.nc-preview_meta {
  font-size: .5625rem;
  line-height: 1.35;
  color: rgba(247, 247, 245, 0.68);
}
.nc-preview_body {
  padding: .55rem .65rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.nc-preview_block {
  min-width: 0;
  flex: none;
}
.nc-preview_h {
  font-size: .75rem;
  font-weight: 500;
  margin-bottom: .25rem;
  color: var(--color-base-base-dark-100);
}
.nc-preview_grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .55rem;
  font-size: .6875rem;
  line-height: 1.4;
}
.nc-preview_grid span:nth-child(odd) { color: rgba(37, 37, 37, 0.55); }
.nc-preview_grid span:nth-child(even) {
  color: var(--color-base-base-dark-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-preview_terms {
  font-size: .6875rem;
  line-height: 1.45;
  color: rgba(37, 37, 37, 0.72);
  flex: none;
  margin-top: auto;
}
.nc-preview_link {
  color: var(--color-base-forest);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.nc-preview_fast {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-top: 0;
  padding: .5rem .55rem;
  border-radius: .35rem;
  border: 1px solid rgba(37, 37, 37, 0.12);
  background: rgba(37, 37, 37, 0.03);
  flex: none;
}
.nc-preview_fast_title {
  font-size: .6875rem;
  font-weight: 500;
  color: var(--color-base-base-dark-100);
}
.nc-preview_fast_body {
  font-size: .625rem;
  color: rgba(37, 37, 37, 0.68);
  line-height: 1.35;
}
.nc-preview_actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  flex: none;
  margin-top: .15rem;
}
.nc-preview_action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .5rem;
  border-radius: .35rem;
  font-size: .6875rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}
.nc-preview_action.is-sign {
  background: var(--color-base-accent-primary);
  color: var(--color-base-base-dark-100);
}
.nc-preview_action.is-amend {
  background: rgba(37, 37, 37, 0.08);
  color: var(--color-base-base-dark-100);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Narrow screens: denser implied UIs, Create is proposal-only. */
@media screen and (max-width: 767px) {
  .nicholii-mock {
    padding: 10px;
    gap: 8px;
    font-size: 12px;
    border-radius: 12px;
  }
  .nicholii-mock_pane {
    padding: 10px;
  }
  .nicholii-mock_pane.is-seq,
  .nicholii-mock_pane.is-procure,
  .nicholii-mock_pane.is-create {
    min-height: 0;
  }
  .nicholii-mock_btn {
    padding: 5px 10px;
    font-size: 11px;
  }
  .nicholii-mock_prompt {
    font-size: .8125rem;
    margin-bottom: .35rem;
  }
  .nicholii-mock_status {
    font-size: 10px;
  }

  .nm-chat { gap: .4rem; }
  .nm-bubble,
  .nm-bubble p,
  .nm-flag_title,
  .nm-flag_body {
    font-size: 11.5px;
    line-height: 1.4;
  }
  .nm-bubble { padding: .4rem .55rem; }
  .nm-bubble p + p { margin-top: .3rem; }
  .nm-action {
    font-size: 11px;
    padding: .4rem .55rem;
  }
  .nm-actions { gap: .4rem; margin-top: .35rem; }

  /* Sell / Triage: pull back the larger desktop chat type. */
  .nicholii-mock[data-nm="sell"] .nm-bubble,
  .nicholii-mock[data-nm="sell"] .nm-bubble p,
  .nicholii-mock[data-nm="triage"] .nm-bubble,
  .nicholii-mock[data-nm="triage"] .nm-bubble p,
  .nicholii-mock[data-nm="triage"] .nm-flag_title,
  .nicholii-mock[data-nm="triage"] .nm-flag_body {
    font-size: 12px;
    line-height: 1.4;
  }
  .nicholii-mock[data-nm="sell"] .nm-bubble,
  .nicholii-mock[data-nm="triage"] .nm-bubble {
    padding: .45rem .6rem;
  }
  .nicholii-mock[data-nm="sell"] .nm-action,
  .nicholii-mock[data-nm="triage"] .nm-action {
    font-size: 11.5px;
    padding: .4rem .6rem;
  }
  .nicholii-mock[data-nm="triage"] .nm-flag {
    padding: .55rem .65rem;
  }
  .nt-sheet {
    max-width: 14.5rem;
    padding: .6rem .65rem .55rem;
    gap: .45rem;
  }
  .nm-cal_title { font-size: .8125rem; }
  .nm-cal_body { font-size: .75rem; }

  /* Procure */
  .np-opts {
    height: auto;
    max-height: none;
    margin-top: .4rem;
    gap: .4rem;
  }
  .np-opt {
    flex: 0 0 auto;
    padding: .55rem .7rem;
    gap: .55rem;
  }
  .np-opt_title { font-size: .875rem; }
  .np-opt_note { font-size: .75rem; }
  .np-drop {
    min-height: 5.25rem;
    padding: .9rem .75rem;
  }
  .np-think_copy { font-size: .8125rem; }
  .np-think_sparkle { width: 48px; height: auto; }

  /* Review */
  .nr-opts { gap: .4rem; margin-top: .15rem; }
  .nr-opt { padding: .55rem .65rem; gap: .55rem; }
  .nr-opt_title { font-size: .8125rem; }
  .nr-opt_note { font-size: .7rem; line-height: 1.35; }
  .nicholii-mock[data-nm="review"] .nicholii-mock_prompt { font-size: .8125rem; }
  .nicholii-mock[data-nm="review"] .nicholii-mock_doctext {
    font-size: 13px;
    line-height: 1.55;
  }
  .nicholii-mock_apply {
    padding: .45rem .85rem;
    font-size: .75rem;
  }

  /* Create: proposal only */
  .nicholii-mock[data-nm="create"] .nc-form {
    display: none;
  }
  .nicholii-mock[data-nm="create"] .nc-studio {
    grid-template-columns: minmax(0, 1fr);
  }
  .nicholii-mock[data-nm="create"] .nc-preview {
    height: 100%;
    max-height: none;
  }
  .nc-preview_head { padding: .55rem .6rem .6rem; }
  .nc-preview_title { font-size: .875rem; }
  .nc-preview_meta { font-size: 10px; }
  .nc-preview_body {
    padding: .55rem .6rem .65rem;
    gap: .45rem;
    font-size: 11px;
  }
  .nc-preview_h { font-size: .5625rem; }
  .nc-preview_grid { font-size: 11px; gap: .2rem .55rem; }
  .nc-preview_terms { font-size: 10px; }
  .nc-preview_fast { padding: .45rem .55rem; }
  .nc-preview_fast_title { font-size: .625rem; }
  .nc-preview_fast_body { font-size: 10px; }
  .nc-preview_action {
    padding: .4rem .45rem;
    font-size: .625rem;
  }
  .nc-drop {
    min-height: 5.5rem;
    padding: 1rem .85rem;
  }

  /* Nexus */
  .nx-register { gap: .55rem; }
  .nx-register .nx-tr {
    padding: .45rem .5rem;
    font-size: .6875rem;
  }
  .nx-register .nx-th { font-size: .5rem; }
  .nx-register .nm-action {
    font-size: 12px;
    padding: .45rem .7rem;
  }
  .nx-chatcard {
    max-width: 100%;
    padding: .65rem .7rem;
    gap: .5rem;
  }
  .nx-chatcard .nm-bubble,
  .nx-chatcard .nm-bubble p {
    font-size: 12px;
  }
  .nx-file {
    padding: .4rem .55rem;
    font-size: .6875rem;
  }
  .nx-up-grid { min-height: 5.5rem; }

  /* Sell document */
  .ns-doc_title { font-size: .9375rem; }
  .ns-doc_total_val { font-size: 1rem; }
  .ns-doc_body { padding: .6rem .7rem .7rem; gap: .5rem; }
  .ns-doc_lead,
  .ns-doc_line { font-size: 11.5px; }
  .ns-doc_btn {
    padding: .4rem .65rem;
    font-size: 11px;
  }
}

/* Legacy create template stubs (unused in current build stage) */
.nc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
}
.nc-col {
  padding: .625rem;
  border-radius: .5rem;
  background-color: rgba(37, 37, 37, 0.04);
  display: flex; flex-direction: column; gap: .5rem;
}
.nc-col.is-template { background-color: #fff; box-shadow: inset 0 0 0 1px rgba(37, 37, 37, 0.08); }
.nc-template { display: flex; flex-direction: column; gap: .4rem; padding-top: .25rem; }
.nc-template_bar {
  display: block; height: .45rem; width: 42%; border-radius: 999px;
  background-color: var(--color-base-accent-primary);
}
.nc-template_line {
  display: block; height: .35rem; width: 100%; border-radius: 999px;
  background-color: rgba(37, 37, 37, 0.12);
}
.nc-template_line.is-short { width: 68%; }

/* Nexus upload chips + register table */
.nicholii-mock[data-nm="nexus"] {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.nicholii-mock[data-nm="nexus"] .nicholii-mock_pane.is-nexus {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.nicholii-mock[data-nm="nexus"] .nm-stage.is-up {
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.nx-up-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-content: center;
  justify-content: center;
  width: 100%;
  min-height: 7.5rem;
}
.nx-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .65rem;
  border-radius: .45rem;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: .75rem;
  font-weight: 500;
  color: var(--color-base-base-dark-100);
  max-width: 100%;
}
.nx-file_name {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  line-height: 1.25;
}
.nx-file_party {
  font-size: .625rem;
  font-weight: 400;
  color: rgba(37, 37, 37, 0.62);
}
.nx-file .nm-pdf {
  width: 22px;
  height: 27px;
  flex: none;
}
.nx-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  background: #fff;
  border-radius: .55rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.nx-tr {
  display: grid;
  grid-template-columns: 1.45fr 0.9fr 0.65fr;
  gap: .4rem;
  padding: .55rem .7rem;
  align-items: center;
  font-size: .75rem;
  border-top: 1px solid rgba(37, 37, 37, 0.08);
}
.nx-tr.is-head {
  border-top: none;
  background: rgba(37, 37, 37, 0.04);
  padding: .45rem .7rem;
}
.nx-th {
  font-family: var(--typography-font-label);
  font-size: .5625rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(37, 37, 37, 0.58);
  font-weight: 500;
}
.nx-td {
  color: var(--color-base-base-dark-100);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx-tr:not(.is-head) .nx-td:first-child {
  font-weight: 500;
}
.nx-register {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
  width: 100%;
  flex: 0 0 auto;
}
.nx-register .nm-actions {
  margin-top: 0;
  justify-content: flex-end;
}
.nx-register .nm-action {
  font-size: 13px;
  padding: .55rem .9rem;
}
.nx-register .nx-tr {
  padding: .7rem .75rem;
  font-size: .8125rem;
  gap: .4rem;
}
.nx-register .nx-th {
  font-size: .5625rem;
}
.nx-register .nx-tr.is-head {
  padding: .55rem .75rem;
}
.nx-chatcard {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: 100%;
  max-width: 22rem;
  padding: .85rem .9rem;
  border-radius: .65rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.nx-chatcard .nm-chat {
  gap: .45rem;
}
.nx-chatcard .nm-turn {
  max-width: 100%;
}
.nx-chatcard .nm-bubble,
.nx-chatcard .nm-bubble p {
  font-size: 13.5px;
  line-height: 1.45;
}
.nx-chatcard .nm-bubble {
  padding: .55rem .7rem;
}
.nx-chatcard .nm-action {
  font-size: 12.5px;
  padding: .5rem .7rem;
}
.nx-chatcard .nm-actions {
  margin-top: 0;
}

/* Staged panes: end state shows the last stage; playing swaps them. */
.nm-stage { display: none; }
.nicholii-mock[data-nm="sell"] .nm-stage.is-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: .5rem;
}
.nicholii-mock[data-nm="nexus"] .nm-stage.is-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
.nicholii-mock[data-nm="nexus"] .nm-stage.is-think {
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
.nicholii-mock[data-nm="create"] .nm-stage.is-build {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.nicholii-mock[data-nm="create"] .nc-studio {
  flex: 1 1 auto;
  min-height: 0;
}
.nicholii-mock[data-nm="procure"] .nm-stage.is-think {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
.nicholii-mock[data-nm="procure"] .nm-stage.is-think .np-think_row {
  opacity: 1;
}

/* Sell document (pared-back proposal UI, nicholii tokens) */
.ns-doc {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(37, 37, 37, 0.08);
  font-size: 12px;
  color: var(--color-base-base-dark-100);
}
.ns-doc_head {
  padding: .75rem .85rem .85rem;
  background: var(--color-base-lift-dark);
  color: var(--color-base-base-light-100);
}
.ns-doc_brand {
  display: block;
  font-family: var(--typography-font-label);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(247, 247, 245, 0.62);
  margin-bottom: .45rem;
}
.ns-doc_head_row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem;
}
.ns-doc_title { font-size: 1.05rem; font-weight: 500; line-height: 1.2; }
.ns-doc_meta { margin-top: .2rem; font-size: 11px; color: rgba(247, 247, 245, 0.68); }
.ns-doc_total { text-align: right; }
.ns-doc_total_label {
  display: block;
  font-family: var(--typography-font-label);
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(247, 247, 245, 0.62);
}
.ns-doc_total_val { font-size: 1.15rem; font-weight: 500; }
.ns-doc_body { padding: .75rem .85rem .85rem; display: flex; flex-direction: column; gap: .65rem; }
.ns-doc_lead { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(37, 37, 37, 0.82); }
.ns-doc_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.ns-doc_h {
  font-family: var(--typography-font-label);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-base-forest);
  margin-bottom: .35rem;
}
.ns-doc_pair,
.ns-doc_line {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: 11.5px;
  margin-top: .2rem;
}
.ns-doc_pair span:first-child,
.ns-doc_note {
  color: rgba(37, 37, 37, 0.62);
}
.ns-doc_pair span:last-child,
.ns-doc_line span:last-child { font-weight: 500; color: var(--color-base-base-dark-100); text-align: right; }
.ns-doc_line { font-size: 12.5px; margin-top: .3rem; }
.ns-doc_note { font-size: 10.5px; margin: .1rem 0 .35rem; line-height: 1.35; }
.ns-doc_totalbar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .55rem .65rem;
  border-radius: .4rem;
  background: rgba(37, 37, 37, 0.07);
  font-size: 12.5px; font-weight: 500;
}
.ns-doc_terms { font-size: 11px; color: rgba(37, 37, 37, 0.72); }
.ns-doc_link {
  color: var(--color-base-forest);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.ns-doc_actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin-top: .15rem;
}
.ns-doc_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem .75rem;
  border-radius: .45rem;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
}
.ns-doc_btn.is-sign {
  background: var(--color-base-accent-primary);
  color: var(--color-base-base-dark-100);
}
.ns-doc_btn.is-amend {
  background: rgba(37, 37, 37, 0.08);
  color: var(--color-base-base-dark-100);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Sell chat stage: grey pane fills the mock like other modules */
.nicholii-mock[data-nm="sell"] {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.nicholii-mock[data-nm="sell"] .nm-stage.is-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.nicholii-mock[data-nm="sell"] .nm-stage.is-chat .nicholii-mock_pane.is-chat {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 10px;
}

.nm-cursor {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50% 50% 50% 0;
  background: var(--color-base-base-dark-100);
  transform: rotate(-35deg) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.nm-drag {
  position: absolute;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .65rem; border-radius: .45rem;
  background: #fff; border: 1px solid rgba(37, 37, 37, 0.18);
  font-size: .8125rem; font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  opacity: 0; pointer-events: none; z-index: 4;
  white-space: nowrap;
}

/* ==========================================================================
   Looping sequences. End state is the default. .is-playing runs the cycle.
   ========================================================================== */

@keyframes nm-loop-in {
  0%, 4% { opacity: 0; transform: translateY(8px); }
  10%, 82% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes nm-loop-fade {
  0%, 6% { opacity: 0; }
  14%, 82% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes nm-cursor-click {
  0%, 100% { transform: rotate(-35deg) scale(0); opacity: 0; }
  12% { transform: rotate(-35deg) scale(1); opacity: 1; }
  18% { transform: rotate(-35deg) scale(.85); opacity: 1; }
  22%, 70% { transform: rotate(-35deg) scale(1); opacity: 1; }
  78% { transform: rotate(-35deg) scale(0); opacity: 0; }
}
@keyframes nm-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---- Sell: document → request amendments → chat (1.5s) → Sign now ---- */
  .nicholii-mock[data-nm="sell"] .nm-bubble,
  .nicholii-mock[data-nm="sell"] .nm-bubble p {
    font-size: 14px;
    line-height: 1.45;
  }
  .nicholii-mock[data-nm="sell"] .nm-bubble {
    padding: .6rem .8rem;
  }
  .nicholii-mock[data-nm="sell"] .nm-action {
    font-size: 13px;
    padding: .55rem .8rem;
  }
  .nicholii-mock[data-nm="sell"].is-playing {
    display: grid;
    align-items: stretch;
  }
  .nicholii-mock[data-nm="sell"].is-playing .nm-stage.is-doc {
    display: block;
    grid-area: 1 / 1;
    animation: nm-sell-doc 20s ease infinite;
  }
  .nicholii-mock[data-nm="sell"].is-playing .nm-stage.is-chat {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    height: 100%;
    min-height: 100%;
    animation: nm-sell-chatstage 20s ease infinite;
  }
  .nicholii-mock[data-nm="sell"].is-playing .nm-chat {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
  }
  .nicholii-mock[data-nm="sell"].is-playing .nm-s1,
  .nicholii-mock[data-nm="sell"].is-playing .nm-s2,
  .nicholii-mock[data-nm="sell"].is-playing .nm-s3,
  .nicholii-mock[data-nm="sell"].is-playing .nm-s4,
  .nicholii-mock[data-nm="sell"].is-playing .nm-s5 {
    /* 20s loop. Chat starts at 5s; messages every 1.5s thereafter. */
    animation-duration: 20s;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
  .nicholii-mock[data-nm="sell"].is-playing .nm-s1 { animation-name: nm-sell-1; }
  .nicholii-mock[data-nm="sell"].is-playing .nm-s2 { animation-name: nm-sell-2; }
  .nicholii-mock[data-nm="sell"].is-playing .nm-s3 { animation-name: nm-sell-3; }
  .nicholii-mock[data-nm="sell"].is-playing .nm-s4 { animation-name: nm-sell-4; }
  .nicholii-mock[data-nm="sell"].is-playing .nm-s5 { animation-name: nm-sell-5; }
  .nicholii-mock[data-nm="sell"].is-playing .ns-doc_btn.is-amend {
    position: relative;
    animation: nm-sell-amend-press 20s ease infinite;
  }
  .nicholii-mock[data-nm="sell"].is-playing .nm-cursor-doc {
    left: 55%;
    top: 60%;
    animation: nm-sell-cursor-doc 20s ease infinite;
  }
  .nicholii-mock[data-nm="sell"].is-playing .nm-action.is-primary.is-target {
    position: relative;
    animation: nm-sell-click 20s ease infinite;
  }
  .nicholii-mock[data-nm="sell"].is-playing .nm-cursor-chat {
    left: 42%;
    top: 55%;
    animation: nm-sell-cursor-chat 20s ease infinite;
  }

  @keyframes nm-sell-doc {
    0%, 22% { opacity: 1; visibility: visible; }
    26%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-sell-chatstage {
    0%, 24% { opacity: 0; visibility: hidden; }
    28%, 90% { opacity: 1; visibility: visible; }
    95%, 100% { opacity: 0; visibility: hidden; }
  }
  /* Chat messages: 5s / 6.5 / 8 / 9.5 / 11s into the 20s loop */
  @keyframes nm-sell-1 {
    0%, 25% { opacity: 0; transform: translateY(8px); max-height: 0; margin: 0; padding: 0; overflow: hidden; }
    27%, 90% { opacity: 1; transform: none; max-height: 8rem; margin: 0 0 .5rem; overflow: visible; }
    95%, 100% { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
  }
  @keyframes nm-sell-2 {
    0%, 32.5% { opacity: 0; transform: translateY(8px); max-height: 0; margin: 0; padding: 0; overflow: hidden; }
    34.5%, 90% { opacity: 1; transform: none; max-height: 12rem; margin: 0 0 .5rem; overflow: visible; }
    95%, 100% { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
  }
  @keyframes nm-sell-3 {
    0%, 40% { opacity: 0; transform: translateY(8px); max-height: 0; margin: 0; padding: 0; overflow: hidden; }
    42%, 90% { opacity: 1; transform: none; max-height: 5rem; margin: 0 0 .5rem; overflow: visible; }
    95%, 100% { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
  }
  @keyframes nm-sell-4 {
    0%, 47.5% { opacity: 0; transform: translateY(8px); max-height: 0; margin: 0; padding: 0; overflow: hidden; }
    49.5%, 90% { opacity: 1; transform: none; max-height: 7rem; margin: 0 0 .5rem; overflow: visible; }
    95%, 100% { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
  }
  @keyframes nm-sell-5 {
    0%, 55% { opacity: 0; transform: translateY(6px); max-height: 0; margin: 0; overflow: hidden; }
    57%, 90% { opacity: 1; transform: none; max-height: 4rem; margin: .15rem 0 0; overflow: visible; }
    95%, 100% { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
  }
  @keyframes nm-sell-cursor-doc {
    0%, 6% { opacity: 0; transform: rotate(-35deg) scale(0) translate(2.5rem, 1.75rem); }
    10% { opacity: 1; transform: rotate(-35deg) scale(1) translate(2.5rem, 1.75rem); }
    15% { opacity: 1; transform: rotate(-35deg) scale(1) translate(0, 0); }
    17% { opacity: 1; transform: rotate(-35deg) scale(.82) translate(0, 0); }
    19% { opacity: 1; transform: rotate(-35deg) scale(1) translate(0, 0); }
    22% { opacity: 0; transform: rotate(-35deg) scale(0) translate(0, 0); }
    100% { opacity: 0; transform: rotate(-35deg) scale(0) translate(0, 0); }
  }
  @keyframes nm-sell-amend-press {
    0%, 14% { background: rgba(37, 37, 37, 0.08); transform: scale(1); box-shadow: none; }
    16%, 20% {
      background: rgba(37, 37, 37, 0.14);
      transform: scale(.98);
      box-shadow: 0 0 0 3px rgba(37, 37, 37, .12);
    }
    23%, 100% { background: rgba(37, 37, 37, 0.08); transform: scale(1); box-shadow: none; }
  }
  @keyframes nm-sell-cursor-chat {
    0%, 60% { opacity: 0; transform: rotate(-35deg) scale(0) translate(2.75rem, 2.25rem); }
    63% { opacity: 1; transform: rotate(-35deg) scale(1) translate(2.75rem, 2.25rem); }
    67% { opacity: 1; transform: rotate(-35deg) scale(1) translate(0, 0); }
    69% { opacity: 1; transform: rotate(-35deg) scale(.82) translate(0, 0); }
    72% { opacity: 1; transform: rotate(-35deg) scale(1) translate(0, 0); }
    78% { opacity: 0; transform: rotate(-35deg) scale(0) translate(0, 0); }
    100% { opacity: 0; transform: rotate(-35deg) scale(0) translate(0, 0); }
  }
  @keyframes nm-sell-click {
    0%, 66% { transform: scale(1); box-shadow: none; }
    69%, 72% { transform: scale(.96); box-shadow: 0 0 0 3px rgba(249, 255, 170, .55); }
    75%, 100% { transform: scale(1); box-shadow: none; }
  }

  /* ---- Procure: options → upload → centred sparkle extract ---- */
  .nicholii-mock[data-nm="procure"].is-playing .nicholii-mock_pane.is-procure {
    display: grid;
    align-items: stretch;
  }
  .nicholii-mock[data-nm="procure"].is-playing .nm-stage.is-opts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-area: 1 / 1;
    animation: nm-procure-opts 10s ease infinite;
  }
  .nicholii-mock[data-nm="procure"].is-playing .nm-stage.is-upload {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    animation: nm-procure-upload 10s ease infinite;
  }
  .nicholii-mock[data-nm="procure"].is-playing .nm-stage.is-think {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    animation: nm-procure-think 10s ease infinite;
  }
  .nicholii-mock[data-nm="procure"].is-playing .np-opt.is-target {
    animation: nm-procure-chosen 10s ease infinite;
  }
  .nicholii-mock[data-nm="procure"].is-playing .np-opt.is-target .np-opt_dot {
    animation: nm-procure-dot 10s ease infinite;
  }
  .nicholii-mock[data-nm="procure"].is-playing .nm-file {
    animation: nm-procure-file 10s ease infinite;
  }
  .nicholii-mock[data-nm="procure"].is-playing .np-drop.is-target {
    animation: nm-procure-hot 10s ease infinite;
  }
  .nicholii-mock[data-nm="procure"].is-playing .np-think_sparkle {
    animation: nm-procure-sparkle 10s ease infinite;
  }
  .nicholii-mock[data-nm="procure"].is-playing .nm-p1 {
    animation: nm-procure-row 10s ease infinite;
  }
  .nicholii-mock[data-nm="procure"].is-playing .nm-p2 {
    animation: nm-procure-row 10s ease infinite;
    animation-delay: .35s;
  }
  .nicholii-mock[data-nm="procure"].is-playing .nm-p3 {
    animation: nm-procure-row 10s ease infinite;
    animation-delay: .7s;
  }
  /* Cursor tip on the "AI-assisted" label — not mid-card (options stretch tall). */
  .nicholii-mock[data-nm="procure"].is-playing .nm-cursor-opt {
    left: 0.55rem;
    top: 0.35rem;
    transform-origin: 18% 82%;
    animation: nm-procure-cursor 10s ease infinite;
  }
  /* Drag chip anchored on the drop zone — lands on centre, never pane %. */
  .nicholii-mock[data-nm="procure"].is-playing .np-drop .nm-drag {
    left: 50%;
    top: 55%;
    margin-left: 0;
    animation: nm-procure-drag 10s ease infinite;
  }

  @keyframes nm-procure-opts {
    0%, 30% { opacity: 1; visibility: visible; }
    34%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-procure-upload {
    0%, 32% { opacity: 0; visibility: hidden; }
    36%, 58% { opacity: 1; visibility: visible; }
    64%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-procure-think {
    0%, 60% { opacity: 0; visibility: hidden; }
    66%, 92% { opacity: 1; visibility: visible; }
    97%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-procure-chosen {
    0%, 14% { background-color: rgba(37, 37, 37, 0.04); box-shadow: none; transform: scale(1); }
    16%, 20% {
      background-color: rgba(249, 255, 170, 0.45);
      box-shadow: 0 0 0 3px rgba(249, 255, 170, 0.55);
      transform: scale(0.985);
    }
    22%, 30% {
      background-color: rgba(249, 255, 170, 0.35);
      box-shadow: inset 0 0 0 1px rgba(44, 58, 47, 0.18);
      transform: scale(1);
    }
    34%, 100% { background-color: rgba(37, 37, 37, 0.04); box-shadow: none; transform: scale(1); }
  }
  @keyframes nm-procure-dot {
    0%, 14% {
      border-color: rgba(37, 37, 37, 0.34);
      background: transparent;
    }
    16%, 30% {
      border-color: var(--color-base-base-dark-100);
      background: radial-gradient(circle, var(--color-base-base-dark-100) 0 45%, transparent 46%);
    }
    34%, 100% {
      border-color: rgba(37, 37, 37, 0.34);
      background: transparent;
    }
  }
  @keyframes nm-procure-file {
    0%, 46% { opacity: 0; transform: translateY(-10px); }
    54%, 58% { opacity: 1; transform: none; }
    64%, 100% { opacity: 0; }
  }
  @keyframes nm-procure-hot {
    0%, 44% { border-color: rgba(37, 37, 37, 0.24); background: transparent; }
    48%, 56% { border-color: var(--color-base-forest); background: rgba(249, 255, 170, 0.2); }
    62%, 100% { border-color: rgba(37, 37, 37, 0.24); background: transparent; }
  }
  @keyframes nm-procure-sparkle {
    0%, 60% { opacity: 0; transform: scale(.7); }
    66% { opacity: 1; transform: scale(1); }
    72%, 78% { opacity: 1; transform: scale(1.08); }
    84%, 92% { opacity: 1; transform: scale(1); }
    97%, 100% { opacity: 0; transform: scale(.9); }
  }
  @keyframes nm-procure-row {
    0%, 68% { opacity: 0; transform: translateY(10px); }
    76%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; }
  }
  @keyframes nm-procure-cursor {
    0%, 5% {
      opacity: 0;
      transform: rotate(-35deg) scale(0) translate(1.75rem, 1.25rem);
    }
    8% {
      opacity: 1;
      transform: rotate(-35deg) scale(1) translate(1.75rem, 1.25rem);
    }
    14% {
      opacity: 1;
      transform: rotate(-35deg) scale(1) translate(0, 0);
    }
    16% {
      opacity: 1;
      transform: rotate(-35deg) scale(.82) translate(0, 0);
    }
    19% {
      opacity: 1;
      transform: rotate(-35deg) scale(1) translate(0, 0);
    }
    26% {
      opacity: 0;
      transform: rotate(-35deg) scale(0) translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: rotate(-35deg) scale(0) translate(0, 0);
    }
  }
  @keyframes nm-procure-drag {
    0%, 40% {
      opacity: 0;
      transform: translate(-50%, -50%) translate(-3.5rem, -2.75rem);
    }
    44% {
      opacity: 1;
      transform: translate(-50%, -50%) translate(-3.5rem, -2.75rem);
    }
    52% {
      opacity: 1;
      transform: translate(-50%, -50%) translate(0, 0);
    }
    58% {
      opacity: 0;
      transform: translate(-50%, -50%) translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) translate(0, 0);
    }
  }

  /* ---- Create: drop PDFs → centred sparkle → split build ---- */
  .nicholii-mock[data-nm="create"].is-playing .nicholii-mock_pane.is-create {
    display: grid;
    align-items: stretch;
  }
  .nicholii-mock[data-nm="create"].is-playing .nm-stage.is-drop {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    grid-area: 1 / 1;
    animation: nm-create-drop 11s ease infinite;
  }
  .nicholii-mock[data-nm="create"].is-playing .nm-stage.is-think {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    animation: nm-create-think 11s ease infinite;
  }
  .nicholii-mock[data-nm="create"].is-playing .nm-stage.is-build {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    min-height: 0;
    animation: nm-create-build 11s ease infinite;
  }
  /* Empty drop, drag MSA in, then sparkle — no stationary landed file. */
  .nicholii-mock[data-nm="create"].is-playing .nm-cd1 {
    animation: nm-create-drag 11s ease infinite;
  }
  .nicholii-mock[data-nm="create"].is-playing .nc-files {
    display: none;
  }
  .nicholii-mock[data-nm="create"].is-playing .np-think_sparkle {
    animation: nm-create-sparkle 11s ease infinite;
  }

  @keyframes nm-create-drop {
    0%, 28% { opacity: 1; visibility: visible; }
    34%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-create-think {
    0%, 30% { opacity: 0; visibility: hidden; }
    36%, 62% { opacity: 1; visibility: visible; }
    68%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-create-build {
    0%, 64% { opacity: 0; visibility: hidden; }
    70%, 92% { opacity: 1; visibility: visible; }
    97%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-create-drag {
    0%, 3% {
      opacity: 0;
      left: 14%;
      top: 86%;
      transform: translate(-50%, -50%) rotate(10deg) scale(.9);
    }
    6% {
      opacity: 1;
      left: 14%;
      top: 86%;
      transform: translate(-50%, -50%) rotate(10deg) scale(.9);
    }
    20% {
      opacity: 1;
      left: 50%;
      top: 58%;
      transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    24% {
      opacity: 0;
      left: 50%;
      top: 54%;
      transform: translate(-50%, -50%) rotate(0deg) scale(.96);
    }
    100% {
      opacity: 0;
      left: 50%;
      top: 54%;
      transform: translate(-50%, -50%) scale(.96);
    }
  }
  @keyframes nm-create-sparkle {
    0%, 32% { opacity: 0; transform: scale(.7); }
    38% { opacity: 1; transform: scale(1); }
    44%, 52% { opacity: 1; transform: scale(1.08); }
    58%, 62% { opacity: 1; transform: scale(1); }
    68%, 100% { opacity: 0; transform: scale(.9); }
  }

  /* ---- Review: Preferred → Apply → sparkle → Mark-up → redlines ---- */
  .nicholii-mock[data-nm="review"].is-playing .nicholii-mock_pane.is-review {
    display: grid;
    align-items: stretch;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-stage.is-select {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    grid-area: 1 / 1;
    animation: nm-review-select 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-stage.is-think {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    grid-area: 1 / 1;
    animation: nm-review-think 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-stage.is-outputs {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    grid-area: 1 / 1;
    animation: nm-review-outputs 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-stage.is-doc {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    grid-area: 1 / 1;
    position: relative;
    animation: nm-review-doc 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-stage.is-select .nr-opt.is-target {
    animation: nm-review-chosen 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-stage.is-select .nr-opt.is-target .nr-opt_dot {
    animation: nm-review-dot 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-stage.is-outputs .nr-opt.is-target {
    animation: nm-review-out-chosen 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-stage.is-outputs .nr-opt.is-target .nr-opt_dot {
    animation: nm-review-out-dot 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nicholii-mock_apply {
    animation: nm-review-apply 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .np-think_sparkle {
    animation: nm-review-sparkle 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nicholii-mock_doctext.is-clean {
    display: block;
    animation: nm-review-clean 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nicholii-mock_doctext.is-marked {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    animation: nm-review-marked 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nicholii-mock_status {
    animation: nm-review-status 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-cursor-pref {
    left: calc(100% + 0.45rem);
    top: 50%;
    transform-origin: 18% 82%;
    animation: nm-review-cursor-pref 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-cursor-apply {
    left: 50%;
    top: 50%;
    transform-origin: 18% 82%;
    animation: nm-review-cursor-apply 14s ease infinite;
  }
  .nicholii-mock[data-nm="review"].is-playing .nm-cursor-out {
    left: calc(100% + 0.45rem);
    top: 50%;
    transform-origin: 18% 82%;
    animation: nm-review-cursor-out 14s ease infinite;
  }

  @keyframes nm-review-select {
    0%, 26% { opacity: 1; visibility: visible; }
    30%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-review-think {
    0%, 28% { opacity: 0; visibility: hidden; }
    32%, 44% { opacity: 1; visibility: visible; }
    48%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-review-outputs {
    0%, 46% { opacity: 0; visibility: hidden; }
    50%, 68% { opacity: 1; visibility: visible; }
    72%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-review-doc {
    0%, 70% { opacity: 0; visibility: hidden; }
    74%, 94% { opacity: 1; visibility: visible; }
    98%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-review-chosen {
    0%, 10% { background-color: rgba(37, 37, 37, 0.05); }
    13%, 16% {
      background-color: rgba(249, 255, 170, 0.55);
      transform: scale(0.985);
    }
    18%, 28% {
      background-color: rgba(249, 255, 170, 0.42);
      transform: scale(1);
    }
    32%, 100% { background-color: rgba(37, 37, 37, 0.05); transform: scale(1); }
  }
  @keyframes nm-review-dot {
    0%, 10% {
      border-color: rgba(37, 37, 37, 0.34);
      background: transparent;
    }
    13%, 28% {
      border-color: var(--color-base-base-dark-100);
      background: radial-gradient(circle, var(--color-base-base-dark-100) 0 45%, transparent 46%);
    }
    32%, 100% {
      border-color: rgba(37, 37, 37, 0.34);
      background: transparent;
    }
  }
  @keyframes nm-review-out-chosen {
    0%, 54% { background-color: rgba(37, 37, 37, 0.05); }
    57%, 60% {
      background-color: rgba(249, 255, 170, 0.55);
      transform: scale(0.985);
    }
    62%, 70% {
      background-color: rgba(249, 255, 170, 0.42);
      transform: scale(1);
    }
    74%, 100% { background-color: rgba(37, 37, 37, 0.05); transform: scale(1); }
  }
  @keyframes nm-review-out-dot {
    0%, 54% {
      border-color: rgba(37, 37, 37, 0.34);
      background: transparent;
    }
    57%, 70% {
      border-color: var(--color-base-base-dark-100);
      background: radial-gradient(circle, var(--color-base-base-dark-100) 0 45%, transparent 46%);
    }
    74%, 100% {
      border-color: rgba(37, 37, 37, 0.34);
      background: transparent;
    }
  }
  @keyframes nm-review-apply {
    0%, 18% { transform: scale(1); box-shadow: none; }
    21%, 24% { transform: scale(.96); box-shadow: 0 0 0 3px rgba(200, 230, 192, .6); }
    26%, 28% { transform: scale(1); box-shadow: none; }
    100% { transform: scale(1); box-shadow: none; }
  }
  @keyframes nm-review-sparkle {
    0%, 30% { opacity: 0; transform: scale(.7); }
    34% { opacity: 1; transform: scale(1); }
    38%, 42% { opacity: 1; transform: scale(1.08); }
    46% { opacity: 1; transform: scale(1); }
    50%, 100% { opacity: 0; transform: scale(.9); }
  }
  @keyframes nm-review-clean {
    0%, 76% { opacity: 1; visibility: visible; }
    82%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-review-marked {
    0%, 78% { opacity: 0; visibility: hidden; }
    84%, 94% { opacity: 1; visibility: visible; }
    98%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-review-status {
    0%, 84% { opacity: 0; }
    88%, 94% { opacity: 1; }
    98%, 100% { opacity: 0; }
  }
  @keyframes nm-review-cursor-pref {
    0% {
      opacity: 0;
      transform: translate(12px, -50%) rotate(-35deg) scale(0);
    }
    4% {
      opacity: 1;
      transform: translate(12px, -50%) rotate(-35deg) scale(1);
    }
    9% {
      opacity: 1;
      transform: translate(0, -50%) rotate(-35deg) scale(1);
    }
    11% { transform: translate(0, -50%) rotate(-35deg) scale(.82); }
    13% { transform: translate(0, -50%) rotate(-35deg) scale(1); }
    16% {
      opacity: 0;
      transform: translate(0, -50%) rotate(-35deg) scale(0);
    }
    100% { opacity: 0; }
  }
  @keyframes nm-review-cursor-apply {
    0%, 16% {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(-35deg) scale(0);
    }
    18% {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-35deg) scale(1);
    }
    21% { transform: translate(-50%, -50%) rotate(-35deg) scale(.82); }
    23% { transform: translate(-50%, -50%) rotate(-35deg) scale(1); }
    26% {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(-35deg) scale(0);
    }
    100% { opacity: 0; }
  }
  @keyframes nm-review-cursor-out {
    0%, 50% {
      opacity: 0;
      transform: translate(12px, -50%) rotate(-35deg) scale(0);
    }
    53% {
      opacity: 1;
      transform: translate(12px, -50%) rotate(-35deg) scale(1);
    }
    56% {
      opacity: 1;
      transform: translate(0, -50%) rotate(-35deg) scale(1);
    }
    58% { transform: translate(0, -50%) rotate(-35deg) scale(.82); }
    60% { transform: translate(0, -50%) rotate(-35deg) scale(1); }
    64% {
      opacity: 0;
      transform: translate(0, -50%) rotate(-35deg) scale(0);
    }
    100% { opacity: 0; }
  }

  /* ---- Nexus: PDF upload → extract → register + Ask Nexus → centred chat ---- */
  .nicholii-mock[data-nm="nexus"].is-playing .nicholii-mock_pane.is-nexus {
    display: grid;
    align-items: stretch;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-stage.is-up {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    grid-area: 1 / 1;
    animation: nm-nexus-up 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nx-up-grid {
    position: relative;
    width: 100%;
    min-height: 8rem;
    overflow: visible;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nx-file {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max-content;
    max-width: 11.5rem;
    margin: 0;
    opacity: 0;
    transform-origin: 50% 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-n1 {
    z-index: 3;
    animation: nm-nexus-drag1 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-n2 {
    z-index: 2;
    animation: nm-nexus-drag2 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-n3 {
    z-index: 1;
    animation: nm-nexus-drag3 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-stage.is-up .nicholii-mock_status {
    animation: nm-nexus-status 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-stage.is-think {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    animation: nm-nexus-think 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-stage.is-desk {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-area: 1 / 1;
    animation: nm-nexus-desk 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-stage.is-chat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-area: 1 / 1;
    animation: nm-nexus-chat 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-nq {
    animation: nm-nexus-q 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-na {
    animation: nm-nexus-a 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .np-think_sparkle {
    animation: nm-nexus-sparkle 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nx-tr:not(.is-head) {
    animation: nm-nexus-row 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nx-tr:not(.is-head):nth-child(2) { animation-delay: 0s; }
  .nicholii-mock[data-nm="nexus"].is-playing .nx-tr:not(.is-head):nth-child(3) { animation-delay: .15s; }
  .nicholii-mock[data-nm="nexus"].is-playing .nx-tr:not(.is-head):nth-child(4) { animation-delay: .3s; }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-action.is-primary.is-target {
    animation: nm-nexus-ask-hit 15s ease infinite;
  }
  .nicholii-mock[data-nm="nexus"].is-playing .nm-cursor-ask {
    left: 72%;
    top: 55%;
    transform-origin: 18% 82%;
    animation: nm-nexus-cursor-ask 15s ease infinite;
  }

  @keyframes nm-nexus-up {
    0%, 16% { opacity: 1; visibility: visible; }
    20%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-nexus-think {
    0%, 18% { opacity: 0; visibility: hidden; }
    22%, 34% { opacity: 1; visibility: visible; }
    38%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-nexus-desk {
    0%, 36% { opacity: 0; visibility: hidden; }
    40%, 58% { opacity: 1; visibility: visible; }
    62%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-nexus-chat {
    0%, 60% { opacity: 0; visibility: hidden; }
    64%, 94% { opacity: 1; visibility: visible; }
    98%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-nexus-q {
    0%, 66% { opacity: 0; transform: translateY(6px); }
    72%, 94% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; }
  }
  @keyframes nm-nexus-a {
    0%, 76% { opacity: 0; transform: translateY(6px); }
    82%, 94% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; }
  }
  @keyframes nm-nexus-cursor-ask {
    0%, 46% {
      opacity: 0;
      transform: translate(14px, -12px) rotate(-35deg) scale(0);
    }
    50% {
      opacity: 1;
      transform: translate(14px, -12px) rotate(-35deg) scale(1);
    }
    54% {
      opacity: 1;
      transform: translate(0, 0) rotate(-35deg) scale(1);
    }
    56% { transform: translate(0, 0) rotate(-35deg) scale(.82); }
    58% { transform: translate(0, 0) rotate(-35deg) scale(1); }
    61% {
      opacity: 0;
      transform: translate(0, 0) rotate(-35deg) scale(0);
    }
    100% { opacity: 0; }
  }
  @keyframes nm-nexus-ask-hit {
    0%, 54% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
    56%, 59% { transform: scale(.96); box-shadow: 0 0 0 3px rgba(249, 255, 170, .55); }
    61%, 100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
  }
  /* Bundle from bottom-left, then fan out across the card. */
  @keyframes nm-nexus-drag1 {
    0%, 2% {
      opacity: 0;
      left: 14%;
      top: 88%;
      transform: translate(-50%, -50%) rotate(-10deg) translate(0, 0) scale(.92);
    }
    5% {
      opacity: 1;
      left: 14%;
      top: 88%;
      transform: translate(-50%, -50%) rotate(-10deg) translate(0, 0) scale(.92);
    }
    12% {
      opacity: 1;
      left: 48%;
      top: 52%;
      transform: translate(-50%, -50%) rotate(-4deg) translate(0, 0) scale(1);
    }
    16%, 20% {
      opacity: 1;
      left: 18%;
      top: 48%;
      transform: translate(-50%, -50%) rotate(0deg) translate(0, 0) scale(1);
    }
    24%, 100% { opacity: 0; }
  }
  @keyframes nm-nexus-drag2 {
    0%, 2% {
      opacity: 0;
      left: 14%;
      top: 88%;
      transform: translate(-50%, -50%) rotate(-6deg) translate(5px, -4px) scale(.92);
    }
    5% {
      opacity: 1;
      left: 14%;
      top: 88%;
      transform: translate(-50%, -50%) rotate(-6deg) translate(5px, -4px) scale(.92);
    }
    12% {
      opacity: 1;
      left: 48%;
      top: 52%;
      transform: translate(-50%, -50%) rotate(-1deg) translate(5px, -4px) scale(1);
    }
    16%, 20% {
      opacity: 1;
      left: 50%;
      top: 48%;
      transform: translate(-50%, -50%) rotate(0deg) translate(0, 0) scale(1);
    }
    24%, 100% { opacity: 0; }
  }
  @keyframes nm-nexus-drag3 {
    0%, 2% {
      opacity: 0;
      left: 14%;
      top: 88%;
      transform: translate(-50%, -50%) rotate(-2deg) translate(10px, -8px) scale(.92);
    }
    5% {
      opacity: 1;
      left: 14%;
      top: 88%;
      transform: translate(-50%, -50%) rotate(-2deg) translate(10px, -8px) scale(.92);
    }
    12% {
      opacity: 1;
      left: 48%;
      top: 52%;
      transform: translate(-50%, -50%) rotate(2deg) translate(10px, -8px) scale(1);
    }
    16%, 20% {
      opacity: 1;
      left: 82%;
      top: 48%;
      transform: translate(-50%, -50%) rotate(0deg) translate(0, 0) scale(1);
    }
    24%, 100% { opacity: 0; }
  }
  @keyframes nm-nexus-status {
    0%, 12% { opacity: 0; }
    15%, 16% { opacity: 1; }
    20%, 100% { opacity: 0; }
  }
  @keyframes nm-nexus-sparkle {
    0%, 20% { opacity: 0; transform: scale(.7); }
    24% { opacity: 1; transform: scale(1); }
    28%, 32% { opacity: 1; transform: scale(1.08); }
    34% { opacity: 1; transform: scale(1); }
    38%, 100% { opacity: 0; transform: scale(.9); }
  }
  @keyframes nm-nexus-row {
    0%, 38% { opacity: 0; transform: translateY(6px); }
    44%, 58% { opacity: 1; transform: none; }
    62%, 100% { opacity: 0; }
  }

  /* ---- Triage: user msg → reply+buttons → Book → calendar → booked ---- */
  .nicholii-mock[data-nm="triage"].is-playing .nicholii-mock_pane.is-triage {
    display: grid;
    align-items: stretch;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-stage.is-chat {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    animation: nm-triage-chat 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-t1 {
    animation: nm-triage-user 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-t2 {
    animation: nm-triage-reply 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-t2b {
    animation: nm-triage-flag 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-t3 {
    animation: nm-triage-actions 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-stage.is-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-area: 1 / 1;
    z-index: 2;
    pointer-events: none;
    animation: nm-triage-picker 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-stage.is-booked {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    z-index: 1;
    animation: nm-triage-booked 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-action.is-primary.is-target {
    animation: nm-triage-book-hit 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nt-day.is-target {
    animation: nm-triage-day 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nt-slot.is-target {
    animation: nm-triage-slot 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nt-confirm {
    animation: nm-triage-confirm-hit 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-cursor-book {
    left: 72%;
    top: 55%;
    transform-origin: 18% 82%;
    animation: nm-triage-cursor-book 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-cursor-slot {
    left: 78%;
    top: 55%;
    transform-origin: 18% 82%;
    animation: nm-triage-cursor-slot 14s ease infinite;
  }
  .nicholii-mock[data-nm="triage"].is-playing .nm-cursor-confirm {
    left: 62%;
    top: 55%;
    transform-origin: 18% 82%;
    animation: nm-triage-cursor-confirm 14s ease infinite;
  }

  @keyframes nm-triage-chat {
    0%, 32% { opacity: 1; visibility: visible; }
    36%, 74% { opacity: 0.28; visibility: visible; filter: saturate(0.7); }
    78%, 100% { opacity: 0; visibility: hidden; filter: none; }
  }
  @keyframes nm-triage-user {
    0%, 2% { opacity: 0; transform: translateY(8px); }
    6%, 74% { opacity: 1; transform: none; }
    78%, 100% { opacity: 0; }
  }
  @keyframes nm-triage-reply {
    0%, 8% { opacity: 0; transform: translateY(8px); }
    12%, 74% { opacity: 1; transform: none; }
    78%, 100% { opacity: 0; }
  }
  @keyframes nm-triage-flag {
    0%, 14% { opacity: 0; transform: translateY(8px); }
    18%, 74% { opacity: 1; transform: none; }
    78%, 100% { opacity: 0; }
  }
  @keyframes nm-triage-actions {
    0%, 18% { opacity: 0; transform: translateY(8px); }
    22%, 74% { opacity: 1; transform: none; }
    78%, 100% { opacity: 0; }
  }
  @keyframes nm-triage-picker {
    0%, 34% { opacity: 0; visibility: hidden; }
    38%, 74% { opacity: 1; visibility: visible; }
    78%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-triage-booked {
    0%, 76% { opacity: 0; visibility: hidden; }
    80%, 94% { opacity: 1; visibility: visible; }
    98%, 100% { opacity: 0; visibility: hidden; }
  }
  @keyframes nm-triage-cursor-book {
    0%, 14% {
      opacity: 0;
      transform: translate(14px, -12px) rotate(-35deg) scale(0);
    }
    18% {
      opacity: 1;
      transform: translate(14px, -12px) rotate(-35deg) scale(1);
    }
    22% {
      opacity: 1;
      transform: translate(0, 0) rotate(-35deg) scale(1);
    }
    24% { transform: translate(0, 0) rotate(-35deg) scale(.82); }
    26% { transform: translate(0, 0) rotate(-35deg) scale(1); }
    30% {
      opacity: 0;
      transform: translate(0, 0) rotate(-35deg) scale(0);
    }
    100% { opacity: 0; }
  }
  @keyframes nm-triage-book-hit {
    0%, 22% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
    24%, 27% { transform: scale(.96); box-shadow: 0 0 0 3px rgba(249, 255, 170, .55); }
    29%, 100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
  }
  @keyframes nm-triage-day {
    0%, 42% { background: rgba(37, 37, 37, 0.05); box-shadow: none; }
    46%, 74% { background: rgba(37, 37, 37, 0.14); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
    78%, 100% { background: rgba(37, 37, 37, 0.05); box-shadow: none; }
  }
  @keyframes nm-triage-slot {
    0%, 52% { background: rgba(37, 37, 37, 0.06); }
    56%, 60% { background: rgba(37, 37, 37, 0.2); transform: scale(.97); }
    62%, 74% { background: rgba(37, 37, 37, 0.14); transform: scale(1); }
    78%, 100% { background: rgba(37, 37, 37, 0.06); transform: scale(1); }
  }
  @keyframes nm-triage-cursor-slot {
    0%, 48% {
      opacity: 0;
      transform: translate(12px, -10px) rotate(-35deg) scale(0);
    }
    52% {
      opacity: 1;
      transform: translate(12px, -10px) rotate(-35deg) scale(1);
    }
    56% {
      opacity: 1;
      transform: translate(0, 0) rotate(-35deg) scale(1);
    }
    58% { transform: translate(0, 0) rotate(-35deg) scale(.82); }
    60% { transform: translate(0, 0) rotate(-35deg) scale(1); }
    64% {
      opacity: 0;
      transform: translate(0, 0) rotate(-35deg) scale(0);
    }
    100% { opacity: 0; }
  }
  @keyframes nm-triage-cursor-confirm {
    0%, 64% {
      opacity: 0;
      transform: translate(10px, -8px) rotate(-35deg) scale(0);
    }
    68% {
      opacity: 1;
      transform: translate(10px, -8px) rotate(-35deg) scale(1);
    }
    71% {
      opacity: 1;
      transform: translate(0, 0) rotate(-35deg) scale(1);
    }
    73% { transform: translate(0, 0) rotate(-35deg) scale(.82); }
    75% { transform: translate(0, 0) rotate(-35deg) scale(1); }
    78% {
      opacity: 0;
      transform: translate(0, 0) rotate(-35deg) scale(0);
    }
    100% { opacity: 0; }
  }
  @keyframes nm-triage-confirm-hit {
    0%, 71% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
    73%, 76% { transform: scale(.96); box-shadow: 0 0 0 3px rgba(249, 255, 170, .55); }
    78%, 100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
  }

}