/* ============================================================
   Agent Ibex Command Inbox — omnichannel deal desk.
   Extends design-system.css. Three columns: threads / convo /
   deal panel. Dense but scannable; every channel keeps its own
   authentic shape inside the flat chrome.
   ============================================================ */

.app-body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }


.inbox {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr) 360px;
  gap: 14px;
  padding: 14px 18px 16px;
}
.col { min-height: 0; min-width: 0; display: flex; flex-direction: column; }

/* slim ink scrollbars */
.thread-list::-webkit-scrollbar, .msg-scroll::-webkit-scrollbar, .deal-col::-webkit-scrollbar { width: 10px; }
.thread-list::-webkit-scrollbar-thumb, .msg-scroll::-webkit-scrollbar-thumb, .deal-col::-webkit-scrollbar-thumb {
  background: var(--ink); border: 3px solid var(--cream); border-radius: 0;
}
.thread-list::-webkit-scrollbar-track, .msg-scroll::-webkit-scrollbar-track, .deal-col::-webkit-scrollbar-track {
  background: transparent;
}

/* ==================== LEFT · threads ==================== */
.inbox-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 2px 4px 10px; }
.inbox-title { font-size: 1.7rem; margin: 0; }
.inbox-sub { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.onair {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  background: var(--ink); color: var(--sun);
  padding: 6px 10px; border-radius: 6px; box-shadow: var(--shadow-xs);
}
.onair-dot { width: 8px; height: 8px; background: var(--grass-light); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.chan-strip {
  display: flex; gap: 6px;
  background: var(--paper); border: var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 8px; margin-bottom: 12px;
}
.chan-pip {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 2px 6px; background: var(--cream-2);
  border: var(--border-thin); border-radius: 7px; position: relative;
}
.chan-pip svg { width: 18px; height: 18px; display: block; }
.chan-pip .cp-lbl { font-family: var(--font-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.chan-pip .cp-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; background: var(--grass); border: 1px solid var(--ink); }

.filter-row { display: flex; gap: 6px; margin-bottom: 10px; }
.fpill {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: var(--border-thin); border-radius: 999px; background: var(--paper);
  padding: 5px 12px; cursor: pointer; color: var(--ink-soft);
}
.fpill:hover { color: var(--ink); transform: translate(-1px,-1px); box-shadow: var(--shadow-xs); }
.fpill.active { background: var(--sun); color: var(--ink); box-shadow: var(--shadow-xs); }

.thread-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 10px 2px; }
.thread {
  text-align: left; cursor: pointer; font-family: var(--font-body);
  border: var(--border-thin); background: var(--paper); border-radius: var(--radius-sm);
  padding: 10px 11px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto;
  gap: 10px; box-shadow: var(--shadow-xs); position: relative; width: 100%;
  transition: transform 0.07s steps(2), box-shadow 0.07s steps(2);
}
.thread:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-sm); }
.thread.active { border: var(--border); background: #fff8e8; box-shadow: var(--shadow-sm); transform: translate(-1px,-1px); }
.thread.active::before {
  content: ""; position: absolute; left: -3px; top: 10px; bottom: 10px; width: 6px;
  background: var(--terracotta); border: 2px solid var(--ink); border-radius: 3px;
}
.av {
  width: 38px; height: 38px; border: var(--border-thin); border-radius: 8px;
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: 0.78rem; box-shadow: var(--shadow-xs); flex-shrink: 0;
  image-rendering: pixelated; overflow: hidden;
}
.t-main { min-width: 0; }
.t-top { display: flex; align-items: baseline; gap: 6px; }
.t-name { font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-deal { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-top: 2px; }
.t-deal i { width: 7px; height: 7px; display: inline-block; border: 1px solid var(--ink); }
.t-snip {
  font-size: 0.72rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.t-snip .snip-from { font-weight: 700; color: var(--ink); }
.t-chans { display: flex; gap: 3px; margin-top: 6px; align-items: center; }
.t-chans svg { width: 13px; height: 13px; display: block; opacity: 0.9; }
.t-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.t-time { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
.t-unread {
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--terracotta); color: #fff; border: 2px solid var(--ink);
  border-radius: 5px; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  display: grid; place-items: center; box-shadow: 1px 1px 0 rgba(47,39,29,.9);
}
.t-lastchan { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.55rem; color: var(--ink-faint); text-transform: uppercase; font-weight: 700; }

/* ==================== CENTER · conversation ==================== */
.convo-head {
  border: var(--border); background: var(--paper); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 10px 14px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.ch-name { font-family: var(--font-display); font-size: 1.02rem; text-transform: uppercase; line-height: 1; }
.ch-role { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: 3px; }
.ch-deal-link { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; color: var(--water-deep); text-decoration: none; border-bottom: 2px solid var(--water-light); }
.ch-deal-link:hover { background: var(--water-light); color: var(--ink); }
.ch-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ch-chanrow { display: flex; gap: 5px; }
.ch-chanrow .mini-chan {
  width: 26px; height: 26px; border: var(--border-thin); border-radius: 6px;
  display: grid; place-items: center; background: var(--cream-2);
}
.ch-chanrow .mini-chan svg { width: 15px; height: 15px; }
.ch-pref { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }

.msg-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; padding: 4px 8px 8px 2px; min-height: 0; }
/* scroll children never compress — every card renders full height and the column scrolls.
   (.intromade's overflow:hidden zeroes its automatic min-height, so without this the
   flex shrink factor slices the warm-intro quote + signature) */
.msg-scroll > * { flex-shrink: 0; }

.daydiv { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.daydiv::before, .daydiv::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px); opacity: 0.3; }
.daydiv span { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

.msg { display: flex; gap: 9px; max-width: 76%; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; flex-direction: row-reverse; }
.msg .av { width: 32px; height: 32px; font-size: 0.66rem; margin-top: 2px; }
.msg-body { min-width: 0; }

.bub {
  border: var(--border-thin); border-radius: 15px; padding: 8px 13px;
  background: var(--paper); font-size: 0.82rem; line-height: 1.45;
  box-shadow: var(--shadow-xs); position: relative; overflow-wrap: break-word;
}
.msg.in .bub { border-bottom-left-radius: 5px; }
.msg.out .bub { border-bottom-right-radius: 5px; }

/* channel tints — each channel keeps its native flavor */
.bub.ch-sms { background: #e8f2d8; }
.bub.ch-whatsapp { background: #dcebcf; }
.bub.ch-chat { background: #e4eefb; }
.msg.out .bub.ch-sms { background: #cfe4ae; }
.msg.out .bub.ch-whatsapp { background: #c2dea6; }
.msg.out .bub.ch-chat { background: #c4dbf7; }
.msg.out .bub { background: var(--cream-2); }

.who-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 0.54rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px;
  padding: 2px 7px; border: 2px solid var(--ink); border-radius: 4px;
}
.who-ibex { background: var(--water); color: #fff; }
.who-you { background: var(--timber); color: #fff; }
.who-them { background: var(--paper); color: var(--ink-soft); }

.mmeta {
  display: flex; gap: 6px; align-items: center; margin-top: 5px;
  font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint);
}
.msg.out .mmeta { justify-content: flex-end; }
.mmeta svg { width: 12px; height: 12px; display: block; }
.mmeta .ticks { color: var(--water-deep); letter-spacing: -0.1em; font-size: 0.7rem; line-height: 0.5; }

/* ---- email: full card, not a bubble ---- */
.msg.email { max-width: 88%; }
.mail {
  width: 100%; border: var(--border); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow-xs); overflow: hidden;
}
.mail-head {
  display: flex; align-items: center; gap: 8px;
  background: var(--cream-2); border-bottom: var(--border-thin);
  padding: 6px 12px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft);
}
.mail-head svg { width: 15px; height: 15px; flex-shrink: 0; }
.mail-head .mh-addr { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-faint); font-size: 0.6rem; }
.mail-subj { font-weight: 700; font-size: 0.88rem; padding: 9px 14px 0; }
.mail-body { padding: 6px 14px 12px; font-size: 0.82rem; line-height: 1.5; }
.mail-body .mb-stats { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mail-body .mb-stat {
  border: var(--border-thin); border-radius: 6px; background: var(--cream-2);
  padding: 5px 10px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
}
.mail-body .mb-stat b { display: block; font-size: 0.78rem; }
.mail-sign { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-faint); padding: 0 14px 10px; }

/* ---- call card: dark transcript slab ---- */
.msg.callm { max-width: 88%; }
.callcard {
  width: 100%; border: var(--border); border-radius: var(--radius-sm);
  background: var(--ink); color: var(--cream); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cc-head { display: flex; align-items: center; gap: 10px; padding: 9px 13px; }
.cc-head svg { width: 17px; height: 17px; flex-shrink: 0; }
.cc-title { font-family: var(--font-display); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream); }
.cc-dur { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; color: var(--sun); }
.cc-tag {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  background: var(--sun); padding: 3px 8px; border-radius: 4px;
}
.wave { display: flex; align-items: flex-end; gap: 3px; padding: 0 13px 8px; height: 26px; }
.wave i { width: 5px; background: var(--water-light); display: block; }
.wave i:nth-child(3n) { background: var(--terracotta-light); }
.wave i:nth-child(4n) { background: var(--grass-light); }
.cc-trans { border-top: 2px solid rgba(251,246,234,0.22); padding: 9px 13px 11px; display: flex; flex-direction: column; gap: 5px; }
.tl { display: flex; gap: 9px; font-family: var(--font-mono); font-size: 0.64rem; line-height: 1.45; }
.tl .who { flex: 0 0 80px; font-weight: 700; text-transform: uppercase; font-size: 0.54rem; letter-spacing: 0.05em; padding-top: 1px; }
.tl .who.w-them { color: var(--water-light); }
.tl .who.w-ibex { color: var(--sun); }
.tl .who.w-you { color: var(--terracotta-light); }
.tl .what { color: rgba(251,246,234,0.88); }

/* ---- system + intro cards ---- */
.sysline {
  align-self: center; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: var(--cream); border-radius: 999px;
  padding: 5px 14px; box-shadow: var(--shadow-xs);
}
.sysline.gold { background: var(--sun); color: var(--ink); border: var(--border-thin); }

.intromade {
  align-self: stretch; border: var(--border); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow); overflow: hidden; margin: 4px 0;
}
.im-banner {
  display: flex; align-items: center; gap: 9px;
  background: var(--grass-light); border-bottom: var(--border);
  padding: 8px 14px; font-family: var(--font-display); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.im-banner .im-check { width: 20px; height: 20px; background: var(--leaf); color: #fff; border: 2px solid var(--ink); border-radius: 5px; display: grid; place-items: center; font-size: 0.7rem; }
.im-banner .im-time { margin-left: auto; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; color: var(--ink-soft); }
.im-body { padding: 12px 16px; }
.im-pair { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.im-pair .im-x { font-family: var(--font-display); font-size: 0.9rem; color: var(--terracotta); }
.im-pair .im-nm { font-size: 0.74rem; font-weight: 700; }
.im-pair .im-rl { font-family: var(--font-mono); font-size: 0.54rem; color: var(--ink-faint); text-transform: uppercase; }
.im-quote {
  border-left: 5px solid var(--water); background: var(--sky);
  border-radius: 0 8px 8px 0; padding: 9px 13px; font-size: 0.78rem; line-height: 1.5;
}
.im-quote .imq-sig { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; color: var(--water-deep); text-transform: uppercase; }

/* ---- desk note: Agent Ibex whispers to you ---- */
.desknote {
  align-self: flex-end; max-width: 72%; display: flex; gap: 9px;
  background: #fbeeC9; border: var(--border-thin); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs); padding: 9px 12px;
}
.desknote .dn-av {
  width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 6px;
  flex-shrink: 0; background: var(--sky);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 0.7rem; color: var(--ink);
}
.desknote .dn-tag { font-family: var(--font-mono); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.12em; color: var(--terracotta); text-transform: uppercase; display: block; margin-bottom: 2px; }
.desknote .dn-text { font-size: 0.75rem; line-height: 1.4; }

/* typing indicator */
.msg.typing-row .bub { padding: 11px 14px; display: inline-flex; gap: 5px; }
.tdot { width: 8px; height: 8px; background: var(--ink); animation: tdot 0.9s steps(3) infinite; }
.tdot:nth-child(2) { animation-delay: 0.15s; }
.tdot:nth-child(3) { animation-delay: 0.3s; }
@keyframes tdot { 50% { transform: translateY(-4px); background: var(--terracotta); } }

/* ==================== composer ==================== */
.composer {
  border: var(--border); background: var(--paper); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 10px 12px; margin-top: 12px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ctabs { display: flex; gap: 5px; flex-wrap: wrap; }
.ctab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  border: var(--border-thin); border-radius: 7px; background: var(--cream-2);
  padding: 5px 10px; cursor: pointer; color: var(--ink-soft);
}
.ctab svg { width: 14px; height: 14px; }
.ctab:hover { color: var(--ink); transform: translate(-1px,-1px); box-shadow: var(--shadow-xs); }
.ctab.active { background: var(--sun); color: var(--ink); box-shadow: var(--shadow-xs); }
.ctab .ct-nope { font-size: 0.5rem; color: var(--terracotta); }

.subjrow { display: flex; gap: 8px; align-items: center; }
.subjrow[hidden] { display: none; }
.subj-lbl { font-size: 0.56rem; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.1em; }
.csubj {
  flex: 1; border: var(--border-thin); border-radius: 6px; background: var(--cream);
  font-family: var(--font-mono); font-size: 0.72rem; padding: 6px 10px; color: var(--ink);
}
.csubj:focus { outline: none; background: #fff; box-shadow: var(--shadow-xs); }

.crow { display: flex; gap: 9px; align-items: stretch; }
.ctext {
  flex: 1; border: var(--border-thin); border-radius: 8px; background: var(--cream);
  font-family: var(--font-body); font-size: 0.84rem; padding: 9px 12px; color: var(--ink);
  resize: none; line-height: 1.4;
}
.ctext:focus { outline: none; background: #fff; box-shadow: var(--shadow-xs); }
.csend { align-self: stretch; padding: 0 20px; font-size: 0.8rem; }
.chint { font-size: 0.56rem; color: var(--ink-faint); letter-spacing: 0.04em; }

/* ==================== RIGHT · deal panel ==================== */
.deal-col { overflow-y: auto; gap: 12px; padding: 2px 4px 10px 2px; }
.dcard {
  border: var(--border); background: var(--paper); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 14px; flex-shrink: 0;
}
.dcard.dim { background: var(--cream-2); }
.dh {
  font-family: var(--font-display); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
}
.dh .px-dot { width: 10px; height: 10px; }
.dh .dh-right { margin-left: auto; font-family: var(--font-mono); font-size: 0.54rem; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.08em; }

.deal-hero { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.deal-ph { width: 74px; height: 60px; flex-shrink: 0; border: var(--border-thin); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-xs); }
.deal-ph .art-ph::before { inset: 4px; }
.deal-biz { font-family: var(--font-display); font-size: 0.86rem; text-transform: uppercase; line-height: 1.1; }
.deal-sub { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

/* the opt-in state machine */
.fsm { display: flex; align-items: flex-start; margin: 12px 0 4px; }
.fsm-node { flex: 0 0 auto; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fsm-box {
  width: 38px; height: 38px; border: var(--border-thin); border-radius: 9px;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 0.95rem;
  background: var(--paper); color: var(--ink-faint); box-shadow: var(--shadow-xs);
}
.fsm-node.done .fsm-box { background: var(--grass-light); color: var(--ink); }
.fsm-node.pend .fsm-box { background: var(--sun); color: var(--ink); animation: blink 1.2s steps(2) infinite; }
.fsm-node .fsm-lbl { font-family: var(--font-mono); font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); text-align: center; line-height: 1.25; }
.fsm-node.done .fsm-lbl { color: var(--ink); }
.fsm-node.pend .fsm-lbl { color: var(--terracotta-dark); }
.fsm-link { flex: 1 1 0; min-width: 12px; height: 4px; background: var(--ink); margin-top: 17px; position: relative; }
.fsm-link::after {
  content: ""; position: absolute; right: -2px; top: -4px;
  width: 0; height: 0;
  border-left: 9px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.fsm-link.todo { background: repeating-linear-gradient(90deg, var(--ink-faint) 0 5px, transparent 5px 9px); }
.fsm-link.todo::after { border-left-color: var(--ink-faint); }
.fsm-cap { font-size: 0.7rem; color: var(--ink-soft); line-height: 1.45; margin-top: 8px; }
.fsm-cap b { color: var(--ink); }

.dactions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* warm intro excerpt */
.warmintro {
  margin-top: 10px; border: var(--border-thin); border-radius: 8px;
  background: var(--sky); padding: 9px 12px; font-size: 0.7rem; line-height: 1.45;
}
.warmintro .wi-tag { font-family: var(--font-mono); font-size: 0.52rem; font-weight: 700; color: var(--water-deep); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 4px; }

/* qualification card */
.qrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px dashed rgba(47,39,29,0.28); font-size: 0.72rem; }
.qrow:last-child { border-bottom: 0; }
.qrow .k { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); flex-shrink: 0; }
.qrow .v { font-weight: 600; text-align: right; }
.qchip { margin-top: 9px; display: flex; gap: 7px; flex-wrap: wrap; }

/* suggestion chips */
.sugg { display: flex; flex-direction: column; gap: 6px; }
.sugg button {
  text-align: left; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  border: var(--border-thin); border-radius: 8px; background: var(--cream);
  padding: 7px 11px; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; gap: 8px; width: 100%;
  transition: transform 0.07s steps(2), box-shadow 0.07s steps(2);
}
.sugg button::before { content: "+"; font-family: var(--font-display); color: var(--terracotta); font-size: 0.8rem; flex-shrink: 0; }
.sugg button:hover { background: var(--sun); transform: translate(-1px,-1px); box-shadow: var(--shadow-xs); }
.sugg button:active { transform: translate(2px,2px); box-shadow: none; }

/* activity mini-card */
.mwork { display: flex; flex-direction: column; gap: 7px; }
.mw-row { display: flex; gap: 8px; align-items: center; font-size: 0.68rem; color: var(--ink-soft); }
.mw-row .mw-ico { width: 22px; height: 22px; border: var(--border-thin); border-radius: 6px; background: var(--cream-2); display: grid; place-items: center; flex-shrink: 0; }
.mw-row .mw-ico svg { width: 12px; height: 12px; }
.mw-row b { color: var(--ink); }

/* empty state */
.deal-empty { text-align: center; padding: 18px 10px; }
.deal-empty .de-t { font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; margin-bottom: 6px; }

/* ==================== live intro flow ==================== */
/* nudge button waits while the other side answers */
.btn[disabled] { opacity: 0.55; cursor: wait; transform: none; box-shadow: var(--shadow-xs); }

/* pending node flips to done — stepped, tactile, on-model */
@keyframes fsmflip {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.22) rotate(-6deg); }
  65% { transform: scale(0.9) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
.fsm-node.fsm-flip .fsm-box { animation: fsmflip 0.5s steps(5); }
/* the "Intro made" node pops bigger with a sun ring */
@keyframes fsmpop {
  0% { transform: scale(1); box-shadow: var(--shadow-xs); }
  40% { transform: scale(1.3); box-shadow: 0 0 0 7px var(--sun); }
  70% { transform: scale(0.92); box-shadow: 0 0 0 3px var(--sun); }
  100% { transform: scale(1); box-shadow: var(--shadow-xs); }
}
.fsm-node.fsm-pop .fsm-box { animation: fsmpop 0.65s steps(6); }
.fsm-node.fsm-flip .fsm-lbl, .fsm-node.fsm-pop .fsm-lbl { color: var(--ink); }

/* connector sweeps solid left→right as the next node lands */
.fsm-link.fill::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background: var(--ink); transform: scaleX(0); transform-origin: left center;
  animation: fsmfill 0.45s steps(6) forwards;
}
.fsm-link.fill::after { border-left-color: var(--ink); }
@keyframes fsmfill { to { transform: scaleX(1); } }

/* new thread entries drop in — the payoff card drops hardest */
@keyframes msgdrop {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
.msg-scroll > .drop { animation: msgdrop 0.32s steps(4) both; }
@keyframes introdrop {
  0% { opacity: 0; transform: translateY(-20px) scale(0.96); }
  55% { opacity: 1; transform: translateY(3px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
.msg-scroll > .intromade.drop { animation: introdrop 0.55s steps(6) both; }

@media (max-width: 1280px) {
  .inbox { grid-template-columns: 260px minmax(0,1fr) 300px; }
}