:root,
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #1a1a18;
  --muted: #5c5c56;
  --hairline: #e8e6df;
  --bg: #f7f6f2;
  --panel: #fff;
  --surface-2: #f0efe9;
  --accent: #1e4d3a;
  --accent-soft: rgba(30, 77, 58, 0.1);
  --warn: #9a4b1a;
  --danger: #8b2635;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --shadow: 0 1px 3px rgba(26, 26, 24, 0.06);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --thread-in: #eef5f0;
  --thread-out: #f3f2ec;
  --thread-system: #f5f4ef;
  --chip-reply-bg: #e8f4ec;
  --chip-reply-fg: var(--accent);
  --chip-send-bg: #eef3fa;
  --chip-send-fg: #3a5a8a;
  --chip-hook-bg: #faf3e8;
  --chip-hook-fg: var(--warn);
  --chip-due-bg: #fdecea;
  --chip-due-fg: var(--danger);
  --chip-stale-bg: #f0f0ec;
  --chip-stale-fg: var(--muted);
  --ev-bg: #f3eee2;
  --ev-click-bg: #d4ecdc;
  --ev-reply-bg: #d4e0a0;
  --ev-meet-bg: #cee5d9;
  --focus-ring: #c8ddd2;
  --drop-bg: #eef4f0;
  --compose-bg: #f7f9f6;
  --compose-input-bg: #fffefa;
  --compose-active-ring: #e8f0ea;
  --primary-on: #fff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #b4b2aa;
  --muted: #787670;
  --hairline: #33332f;
  --bg: #1a1a18;
  --panel: #22221f;
  --surface-2: #2c2c28;
  --accent: #6fa886;
  --accent-soft: rgba(111, 168, 134, 0.14);
  --warn: #c4925a;
  --danger: #c4707a;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  --thread-in: #1e2a24;
  --thread-out: #242420;
  --thread-system: #20201d;
  --chip-reply-bg: rgba(111, 168, 134, 0.14);
  --chip-reply-fg: #8fb89a;
  --chip-send-bg: rgba(120, 150, 190, 0.14);
  --chip-send-fg: #8aa0c0;
  --chip-hook-bg: rgba(196, 146, 90, 0.14);
  --chip-hook-fg: #c4a070;
  --chip-due-bg: rgba(196, 112, 122, 0.14);
  --chip-due-fg: #c49098;
  --chip-stale-bg: rgba(180, 178, 170, 0.1);
  --chip-stale-fg: #8a8880;
  --ev-bg: rgba(180, 178, 170, 0.12);
  --ev-click-bg: rgba(111, 168, 134, 0.16);
  --ev-reply-bg: rgba(160, 175, 120, 0.16);
  --ev-meet-bg: rgba(120, 170, 150, 0.14);
  --focus-ring: rgba(111, 168, 134, 0.35);
  --drop-bg: rgba(111, 168, 134, 0.1);
  --compose-bg: #22221f;
  --compose-input-bg: #2a2a27;
  --compose-active-ring: rgba(111, 168, 134, 0.22);
  --primary-on: #1a1a18;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --ink: #b4b2aa;
    --muted: #787670;
    --hairline: #33332f;
    --bg: #1a1a18;
    --panel: #22221f;
    --surface-2: #2c2c28;
    --accent: #6fa886;
    --accent-soft: rgba(111, 168, 134, 0.14);
    --warn: #c4925a;
    --danger: #c4707a;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    --thread-in: #1e2a24;
    --thread-out: #242420;
    --thread-system: #20201d;
    --chip-reply-bg: rgba(111, 168, 134, 0.14);
    --chip-reply-fg: #8fb89a;
    --chip-send-bg: rgba(120, 150, 190, 0.14);
    --chip-send-fg: #8aa0c0;
    --chip-hook-bg: rgba(196, 146, 90, 0.14);
    --chip-hook-fg: #c4a070;
    --chip-due-bg: rgba(196, 112, 122, 0.14);
    --chip-due-fg: #c49098;
    --chip-stale-bg: rgba(180, 178, 170, 0.1);
    --chip-stale-fg: #8a8880;
    --ev-bg: rgba(180, 178, 170, 0.12);
    --ev-click-bg: rgba(111, 168, 134, 0.16);
    --ev-reply-bg: rgba(160, 175, 120, 0.16);
    --ev-meet-bg: rgba(120, 170, 150, 0.14);
    --focus-ring: rgba(111, 168, 134, 0.35);
    --drop-bg: rgba(111, 168, 134, 0.1);
    --compose-bg: #22221f;
    --compose-input-bg: #2a2a27;
    --compose-active-ring: rgba(111, 168, 134, 0.22);
    --primary-on: #1a1a18;
  }
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}
#app.app {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.hidden { display: none !important; }
.error { color: var(--danger); font-size: 0.9rem; }

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.login__card {
  width: min(24rem, 100%);
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 2rem;
  display: grid;
  gap: 1rem;
}
.login__label {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0;
}
.login__card h1 { margin: 0; font-size: 1.5rem; }
.login__hint { margin: 0; color: var(--muted); font-size: 0.9rem; }
.login__card label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.login__card input {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--hairline);
  font: inherit;
}
.login__card button {
  padding: 0.65rem 1rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.app { min-height: 0; height: 100%; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.app__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--panel);
  flex-wrap: wrap;
}
.app__label {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.app__header h1 { margin: 0.15rem 0 0; font-size: 1.1rem; font-weight: 600; }
.app__actions { display: flex; gap: 0.5rem; align-items: center; }
.app__actions input {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--hairline);
  min-width: 14rem;
}
button.ghost {
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
button.primary {
  background: var(--accent);
  color: var(--primary-on);
  border: 0;
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
}
button.primary:hover:not(:disabled) { filter: brightness(1.06); }
button.primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
}

.app__body {
  display: grid;
  grid-template-columns: 14rem 1fr;
  min-height: 0;
  overflow: hidden;
}
.workspace {
  display: grid;
  grid-template-columns: 1fr 0fr;
  min-height: 0;
  overflow: hidden;
  height: 100%;
  transition: grid-template-columns 180ms ease;
}
.workspace--split {
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 38%);
}
@media (max-width: 960px) {
  .app__body { grid-template-columns: 1fr; }
  .workspace--split {
    grid-template-columns: 1fr;
  }
  .workspace--split .main--board { display: none; }
  .lead-pane {
    position: fixed;
    inset: 0;
    z-index: 90;
    max-width: none;
    border-left: 0;
    height: 100dvh;
    max-height: 100dvh;
  }
}
@media (min-width: 961px) and (max-width: 1200px) {
  .workspace--split { grid-template-columns: minmax(0, 1fr) minmax(20rem, 42%); }
}
@media (min-width: 961px) {
  .workspace--board-wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace--board-wide.workspace--pane-open .lead-pane {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(32rem, 40vw);
    max-width: 100%;
    z-index: 88;
    border-left: 1px solid var(--hairline);
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.12);
    height: 100dvh;
    max-height: 100dvh;
  }
  .workspace--board-wide.workspace--pane-open .main--board {
    display: flex;
    padding-right: 0;
  }
}
.lead-pane__header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
body.modal-open { overflow: hidden; }

.lists {
  border-right: 1px solid var(--hairline);
  background: var(--panel);
  padding: 0.5rem 0.45rem;
  overflow: auto;
}
.lists button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.32rem 0.55rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
  border-radius: 3px;
}
.lists button:hover { background: var(--surface-2); }
.lists button.active {
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}
.lists .kind {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.55rem 0 0.2rem 0.55rem;
}
.lists .kind:first-child { margin-top: 0.15rem; }

.lists__all { margin-bottom: 0.35rem; }

.lists .nav-section {
  margin-top: 0.4rem;
  border-top: 1px solid var(--hairline);
  padding-top: 0.2rem;
}
.lists .nav-section__summary {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.2rem 0 0.15rem;
  padding: 0.28rem 0.4rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: 3px;
}
.lists .nav-section__summary:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.lists .nav-section[open] > .nav-section__summary {
  color: var(--ink);
  font-weight: 600;
}
.lists .nav-section__summary::-webkit-details-marker { display: none; }
.lists .nav-section__summary::before {
  content: '▸ ';
  font-size: 0.7rem;
  opacity: 0.75;
}
.lists .nav-section[open] > .nav-section__summary::before {
  content: '▾ ';
}
.lists .nav-section__body {
  padding: 0 0 0.2rem;
}
.lists .nav-section__empty {
  margin: 0.2rem 0.45rem 0.35rem;
  font-size: 0.72rem;
}

.main { overflow: auto; padding: 0.75rem 1rem 2rem; }
.main--board {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.5rem 0.75rem 0.75rem;
  overflow: hidden;
}

.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 0.5rem;
  flex-wrap: wrap;
}
.board-toolbar .small { font-size: 0.78rem; }
.board-layout-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.board-toggle {
  font-family: var(--mono);
  font-size: 0.72rem !important;
  padding: 0.2rem 0.5rem !important;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.board-toggle.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}
.board--compact .card {
  padding: 0.35rem 0.45rem;
  gap: 0.15rem;
}
.board--compact .card__meta,
.board--compact .card__seq,
.board--compact .card__eng { display: none; }
.board--compact .card__foot { margin-top: 0; }
.board-status--ok { color: var(--accent); }
.board-status--err { color: var(--danger); }

/* ── Kanban board ────────────────────────────────────────────────────── */
.board {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: 0.6rem;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
  padding-bottom: 0.5rem;
  scrollbar-gutter: stable;
}
.col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  transition: background 120ms ease, border-color 120ms ease;
}
.col__head {
  padding: 0.6rem 0.75rem 0.4rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--panel);
  border-radius: 4px 4px 0 0;
  position: sticky;
  top: 0;
  z-index: 1;
}
.col__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  display: inline-block;
}
.col__count {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--bg);
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
}
.col__hint {
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.col__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.col__empty {
  margin: 0.5rem auto;
  font-size: 0.78rem;
  color: var(--muted);
  font-family: var(--mono);
}
.col--drop {
  background: var(--drop-bg);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent-soft);
}

/* Per-column tints — subtle so cards stay legible.
   Inbound is amber to flag SLA urgency; prospect stays blue/calm.   */
.col--inbound .col__head  { box-shadow: inset 0 -2px 0 #d99a3a; }
.col--inbound .col__title::before {
  content: "●";
  color: #d99a3a;
  margin-right: 0.3rem;
  font-size: 0.72rem;
  vertical-align: middle;
}
.col--prospect .col__head { box-shadow: inset 0 -2px 0 #c9d4e4; }
.col--contacte .col__head { box-shadow: inset 0 -2px 0 #d8c9e4; }
.col--repondu .col__head  { box-shadow: inset 0 -2px 0 #d4e0a0; }
.col--booke .col__head    { box-shadow: inset 0 -2px 0 var(--accent); }
.col--nurture .col__head  { box-shadow: inset 0 -2px 0 #e4d2a0; }
.col--mort .col__head     { box-shadow: inset 0 -2px 0 #e4a0a0; opacity: 0.85; }
.col--mort .col__body { opacity: 0.7; }

.card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0.55rem 0.65rem;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.84rem;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.card--dragging {
  opacity: 0.45;
  transform: rotate(-0.5deg);
  cursor: grabbing;
}
.card__head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.card__ready { line-height: 0; }
.card__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__sup { color: var(--danger); font-size: 0.85rem; }
.card__sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
}
.card__foot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  flex-wrap: wrap;
}
.card__stages { display: inline-flex; gap: 0.2rem; flex-wrap: wrap; }
.card__stage {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.32rem;
  border: 1px solid var(--hairline);
  color: var(--muted);
  background: var(--bg);
  border-radius: 2px;
}
.card__demo {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.32rem;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--hairline));
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, var(--bg));
  border-radius: 2px;
}
.card__eng { font-size: 0.72rem; }
.card__eng .ev {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0 0.3rem;
  border-radius: 3px;
  background: var(--ev-bg);
  color: var(--muted);
  margin-right: 0.15rem;
}
.card__eng .ev--click { background: var(--ev-click-bg); }
.card__eng .ev--reply { background: var(--ev-reply-bg); }
.card__eng .ev--meet  { background: var(--ev-meet-bg); }
.card__time {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
}

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--hairline);
}
.badge.overdue { border-color: var(--danger); color: var(--danger); }
.badge.ok { border-color: var(--accent); color: var(--accent); }

/* ── Modal: fiche lead ─────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 26, 24, 0.4);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 1.5rem;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--hairline);
  width: min(72rem, 100%);
  max-height: calc(100vh - 3rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.35);
}
.modal--preview { width: min(56rem, 100%); }
.preview-backdrop { z-index: 110; background: rgba(26, 26, 24, 0.55); }
.modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.modal__header h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal__close {
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
}
.modal__close:hover { color: var(--ink); }
.modal__body {
  overflow: auto;
  padding: 1rem 1.25rem 1.25rem;
}
.modal__body .meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.15rem 0;
}
.modal__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (max-width: 880px) {
  .modal__grid { grid-template-columns: 1fr; }
}
.modal__col { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.modal__col label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  margin: 0.4rem 0;
}
.modal__col select,
.modal__col input[type="email"],
.modal__col input[type="url"],
.modal__col input[type="text"],
.modal__col textarea {
  font: inherit;
  border: 1px solid var(--hairline);
  padding: 0.45rem;
  background: var(--panel);
  width: 100%;
}
.modal__col textarea { resize: vertical; min-height: 3rem; }
.modal__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.modal__status {
  flex: 1;
  font-size: 0.85rem;
  color: var(--muted);
}
.modal__status--ok { color: var(--accent); }
.modal__status--err { color: var(--danger); }
.modal__actions { display: flex; gap: 0.5rem; }
.modal__actions button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--hairline);
  padding: 0.5rem 0.95rem;
  background: var(--panel);
  color: var(--ink);
}
.modal__actions button.ghost { background: transparent; }
.modal__actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary-on);
}
.modal__actions button#action-save {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
/* Danger button for hard-delete. Lives on the far left so it can't be
   muscle-memory clicked when reaching for Save / Send on the right.
   Outline-only by default to keep it visually quieter than the primary
   actions; fills in on hover so the operator gets a clear "armed" cue. */
.modal__actions button.danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
  margin-right: auto;
}
.modal__actions button.danger:hover:not(:disabled) {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.modal__actions button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Timeline lists inside the right column. */
.timeline { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.timeline li {
  margin: 0.4rem 0;
  font-size: 0.82rem;
  padding: 0.45rem 0.55rem;
  background: var(--bg);
  border-left: 2px solid var(--hairline);
}
.timeline time {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted);
  display: block;
  margin-bottom: 0.15rem;
}

/* Preview modal contents. */
.preview-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
}
.preview-meta dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.04em;
  align-self: center;
}
.preview-meta dd { margin: 0; }
.cal-event-hint { margin: 0.35rem 0 0; word-break: break-all; }
.cal-event-hint a { color: var(--accent); }
.preview-meta code {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.78rem;
  background: var(--bg);
  padding: 0.05rem 0.3rem;
}
.preview-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--hairline);
}
.preview-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--muted);
}
.preview-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.preview-pane iframe {
  width: 100%;
  height: 28rem;
  border: 1px solid var(--hairline);
  background: #fff;
}
.preview-pane pre {
  background: var(--bg);
  padding: 1rem;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  border: 1px solid var(--hairline);
  max-height: 28rem;
  overflow: auto;
}

/* Toast for save/send confirmations. */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  box-shadow: 0 8px 28px -8px rgba(0,0,0,0.35);
  max-width: 22rem;
}
.toast--ok { background: var(--accent); }
.toast--err { background: var(--danger); }
/* ── Ready-state pill in table ───────────────────────────────────────── */
.ready-cell { width: 1.2rem; padding-right: 0; text-align: center; }
.ready { font-size: 0.85rem; line-height: 1; }
.ready--ok { color: var(--accent); }
.ready--draft { color: var(--warn); }
.ready--miss { color: var(--hairline); }

.lead-name { display: flex; flex-direction: column; }
.lead-name .sub {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
}
.lead-name--nested { padding-left: 1.4rem; }

/* ── Org grouping in the list view ───────────────────────────────────── */
.org-row { background: #fbfaf6; }
.org-row:hover { background: #f4f1ea; }
.org-row.expanded { background: #eef0e9; }
.org-row td { font-weight: 500; }
.org-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.org-toggle {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
  width: 1rem;
  display: inline-block;
  text-align: center;
}
.org-title { font-weight: 600; }
.org-meta {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--mono);
  padding-left: 1.4rem;
}
.contact-row--nested {
  background: #fdfcf9;
}
.contact-row--nested td:first-child + td {
  border-left: 2px solid var(--hairline);
}

/* ── Sibling contact switcher inside the modal ───────────────────────── */
.contact-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--hairline);
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
}
.contact-switcher .small { font-size: 0.72rem; }
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  font-size: 0.78rem;
}
.contact-chip:hover { background: #f4f1ea; }
.contact-chip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--hairline);
}
.contact-chip__dot--ok { background: var(--accent); }
.contact-chip__dot--draft { background: var(--warn); }
.contact-chip__dot--miss { background: var(--hairline); }
.contact-chip__role { color: var(--muted); }
.contact-current { font-weight: 600; }

/* ── Replies & meetings timeline (inbound) ───────────────────────────── */
.reply, .meeting { padding: 0.35rem 0; }
.reply__subj { font-weight: 500; margin-top: 0.15rem; }
.reply__body {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: var(--bg);
  padding: 0.5rem;
  white-space: pre-wrap;
  margin: 0.4rem 0;
  border-left: 2px solid var(--accent);
  max-height: 18rem;
  overflow: auto;
}
.section--has-content { background: #fefdf9; }
.meeting-status {
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--hairline);
  text-transform: uppercase;
}
.meeting-status--booked { color: var(--accent); border-color: var(--accent); }
.meeting-status--rescheduled { color: var(--warn); border-color: var(--warn); }
.meeting-status--cancelled { color: var(--danger); border-color: var(--danger); text-decoration: line-through; }
.meeting-status--uploaded { color: var(--muted); border-color: var(--muted); }
.meeting-status--transcribing,
.meeting-status--summarizing { color: var(--accent); border-color: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.meeting-status--ready { color: #2d6a4f; border-color: #2d6a4f; background: #e9f5ee; }
.meeting-status--sent { color: var(--muted); border-color: var(--muted); }
.meeting-status--failed { color: var(--danger); border-color: var(--danger); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── Meetings: section header + audio-upload control ─────────────────── */
.meetings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.meetings-upload .btn-like {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  cursor: pointer;
}
.meetings-hint { margin: 0 0 0.6rem 0; }

/* Big CTA shown when a recording is sitting on disk waiting for the
   operator to click. Visually distinct from the everyday-form controls
   so it's obvious what to do next. */
.meeting__cta {
  margin-top: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: #fefdf9;
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
}
.meeting__cta p { margin: 0 0 0.5rem 0; }
.meeting__cta .primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
}
.meeting__cta .primary:disabled {
  opacity: 0.45;
  cursor: progress;
}

/* Audio-pipeline workspace inside a meeting row. The row itself stays
   compact; the transcript / summary / draft fold into <details>. */
.meeting--audio { padding: 0.6rem 0.75rem; border: 1px solid var(--hairline); }
.meeting--audio + .meeting--audio { border-top: 0; }
.meeting__head { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.meeting__title { font-weight: 500; margin-top: 0.15rem; }

.meeting__summary,
.meeting__draft,
.meeting__transcript {
  margin-top: 0.6rem;
  padding: 0.4rem 0.55rem;
  background: var(--bg);
  border: 1px solid var(--hairline);
}
.meeting__summary > summary,
.meeting__draft > summary,
.meeting__transcript > summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--ink);
}
.meeting__lede { margin: 0.5rem 0; font-style: italic; color: var(--ink); }
.meeting__col h5 {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.meeting__col ul { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; }
.meeting__col--warn ul { color: var(--warn); }

.meeting__draft label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.meeting__draft input,
.meeting__draft textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.88rem;
  border: 1px solid var(--hairline);
  padding: 0.4rem 0.55rem;
  margin-top: 0.15rem;
  background: #fff;
  color: var(--ink);
  border-radius: 2px;
}
.meeting__draft textarea { font-family: var(--mono); font-size: 0.83rem; line-height: 1.5; }
.meeting__draft .row { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.meeting__draft .primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.meeting__draft .primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.meeting__transcript-body {
  white-space: pre-wrap;
  max-height: 18rem;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  background: #fafaf7;
  padding: 0.5rem;
  margin: 0.4rem 0 0;
  border: 1px solid var(--hairline);
}

/* Attachments fold inside the draft block — the "include transcript /
   include video" checkboxes the operator clicks before pressing
   Expédier. Visually subordinate to the email body so it doesn't
   distract from the main review-and-send action. */
.meeting__attachments {
  margin: 0.7rem 0 0.4rem;
  padding: 0.45rem 0.7rem 0.6rem;
  border: 1px dashed var(--hairline);
  background: #fcfbf6;
}
.meeting__attachments legend {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 0.35rem;
}
.meeting__attachments label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.25rem 0;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink);
}
.meeting__attachments label.attachment-disabled {
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: line-through;
}
.meeting__attachments input[type=checkbox] {
  width: auto;
  margin: 0;
}
.meeting__attachments p { margin: 0.35rem 0 0; }

/* Delete affordance — quiet, danger-tinted text link rather than a
   primary button. We don't want this competing with the Send CTA;
   it's a back-office cleanup action that lives at the bottom of the
   row. */
.meeting__footer {
  margin-top: 0.55rem;
  text-align: right;
}
.link {
  background: transparent;
  border: 0;
  padding: 0.2rem 0.4rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}
.link:hover { color: var(--ink); }
.link--danger { color: var(--danger); }
.link--danger:hover { color: #6e0e0e; }

/* ── Modal + lead-pane: collapsible enrichment sections ─────────────── */
.modal .section,
.lead-pane__body .section {
  margin: 0 0 0.65rem;
  border: 1px solid var(--hairline);
  background: var(--bg);
  padding: 0.5rem 0.75rem;
}
.modal .section > summary,
.lead-pane__body .section > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal .section > summary::-webkit-details-marker,
.lead-pane__body .section > summary::-webkit-details-marker { display: none; }
.modal .section[open] > summary,
.lead-pane__body .section[open] > summary { margin-bottom: 0.5rem; }

.lead-pane__body label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  margin: 0.4rem 0;
}
.lead-pane__body .section input[type="email"],
.lead-pane__body .section input[type="url"],
.lead-pane__body .section input[type="text"],
.lead-pane__body .section select,
.lead-pane__body .section textarea,
.lead-pane__body .section--org input {
  font: inherit;
  border: 1px solid var(--hairline);
  padding: 0.45rem;
  background: var(--panel);
  width: 100%;
}
.lead-pane__body .section textarea { resize: vertical; min-height: 3rem; }

/* Two-column row for Genre + Confiance in the décideur section. */
.dm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.4rem 0 0.5rem;
}
.dm-row label {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  color: var(--muted);
}
.dm-row select {
  margin-top: 0.2rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
}

/* Engagement micro-badges in the outbound timeline. Quiet by default;
   the absence of badges already signals "no engagement yet". */
.timeline .ev {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0 0.32rem;
  border-radius: 3px;
  background: #f3eee2;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  margin-right: 0.15rem;
}
.timeline .ev--click { background: #d4ecdc; }
.timeline .ev--bounce { background: #fadcd9; color: var(--danger); }

/* Suppression banner — blocks the whole outbound section visually so the
   operator can't miss that this lead can't be emailed anymore. */
.suppressed {
  margin: 0.25rem 0 0.5rem;
  padding: 0.35rem 0.55rem;
  background: #fadcd9;
  color: #7a1d1a;
  border: 1px solid #e89c97;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.lead-pane__body .section .row,
.modal .section .row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.lead-pane__body .section button.ghost,
.modal__col .section button.ghost {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  cursor: pointer;
  font: inherit;
}
.lead-pane__body .section button.ghost:disabled,
.modal__col .section button.ghost:disabled { opacity: 0.4; cursor: not-allowed; }

.lead-pane__body .section--org {
  background: var(--panel);
}

.lead-pane__body .seq-enroll {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.lead-pane__body .seq-enroll select {
  flex: 1;
  min-width: 10rem;
  font: inherit;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--hairline);
  background: #fff;
}
.lead-pane__body .seq-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
}
.lead-pane__body .hook-candidates { margin-top: 0.5rem; }

.modal__col .section button.ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* Confidence pills inside section summaries. */
.conf {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--hairline);
}
.conf--high { border-color: var(--accent); color: var(--accent); }
.conf--medium { border-color: var(--warn); color: var(--warn); }
.conf--low { border-color: var(--hairline); color: var(--muted); }

/* Hook signal chips. */
.signals { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.4rem; }
.signals li {
  background: var(--panel);
  border: 1px solid var(--hairline);
  padding: 0.4rem 0.5rem;
}
.signal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}
.signal__kind {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.signal__copy {
  background: transparent;
  border: 1px solid var(--hairline);
  cursor: pointer;
  padding: 0 0.35rem;
  font-size: 0.78rem;
  color: var(--ink);
}
.signal__text { font-size: 0.85rem; }
.signal__url {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  margin-top: 0.25rem;
  color: var(--muted);
}

.candidates { list-style: none; padding: 0; margin: 0.25rem 0 0; display: grid; gap: 0.25rem; }
.candidates button.candidate {
  background: var(--panel);
  border: 1px dashed var(--hairline);
  padding: 0.35rem 0.5rem;
  text-align: left;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  width: 100%;
}
.candidates button.candidate:hover { border-color: var(--accent); }

/* LLM-generated hook candidates. */
.hook-candidates { display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.hook-candidates .small { font-size: 0.75rem; }
.hook-cand {
  background: var(--panel);
  border: 1px solid var(--hairline);
  text-align: left;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  font: inherit;
  display: grid;
  gap: 0.3rem;
}
.hook-cand:hover { border-color: var(--accent); background: #fafaf6; }
.hook-cand__head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
}
.hook-cand__text { font-size: 0.88rem; line-height: 1.4; }

/* ── Sequences ───────────────────────────────────────────────────────────
   Sequence chip on kanban cards, sequence section in the lead modal,
   and the dedicated sequences admin panel. The status chip colors mirror
   the engagement micro-badges (quiet by default; the absence of the chip
   means "not enrolled"). */

.card__seq {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  background: var(--ev-bg);
  color: var(--muted);
  border-left: 3px solid var(--hairline);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__seq.seq--active   { border-left-color: var(--accent); background: var(--chip-reply-bg); color: var(--chip-reply-fg); }
.card__seq.seq--paused   { border-left-color: var(--warn); background: var(--chip-hook-bg); color: var(--chip-hook-fg); }
.card__seq.seq--completed{ border-left-color: var(--muted); background: var(--chip-stale-bg); color: var(--chip-stale-fg); }
.card__seq.seq--stopped  { border-left-color: var(--danger); background: var(--chip-due-bg); color: var(--chip-due-fg); }
.card__seq.seq--failed   { border-left-color: var(--danger); background: var(--chip-due-bg); color: var(--chip-due-fg); }

.section--seq strong { display: flex; align-items: center; gap: 0.5rem; }
.seq-state {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: #f3eee2;
  color: var(--ink);
}
.seq-state--active   { background: #2a8a4f; color: #fff; }
.seq-state--paused   { background: #c69a2c; color: #fff; }
.seq-state--stopped, .seq-state--failed { background: #a44; color: #fff; }
.seq-state--completed { background: #6f6f6f; color: #fff; }

.seq-enroll {
  display: flex; gap: 0.4rem; align-items: center;
  margin-top: 0.4rem;
}
.seq-enroll select {
  flex: 1; padding: 0.3rem 0.4rem; border: 1px solid var(--hairline);
  background: #fff;
}
.seq-actions {
  display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem;
}
.seq-next-preview {
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: #faf7ee;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.seq-next-preview pre {
  white-space: pre-wrap;
  font-size: 0.82rem;
  margin: 0.2rem 0 0;
  color: #444;
}

/* ── Quick-note add form ───────────────────────────────────────────────── */
.section--note-quick textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  padding: 0.4rem;
  border: 1px solid var(--hairline);
  background: #fffefa;
}
.note-quick__actions {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 0.4rem;
}
button.small { padding: 0.25rem 0.6rem; font-size: 0.85rem; }
button.danger {
  background: #a44; color: #fff; border: none;
}
button.danger:hover { background: #944; }
kbd {
  background: #f3eee2;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 0 0.25rem;
  font-size: 0.75rem;
  font-family: ui-monospace, monospace;
}

/* ── Unified activity timeline ─────────────────────────────────────────── */
.section--timeline {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  margin-top: 0.5rem;
  background: #fffefa;
}
.timeline-feed {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}
.timeline-feed .tl:not(.thread-msg) {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--hairline);
}
.timeline-feed .tl:last-child { border-bottom: none; }
.tl__icon {
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  padding-top: 0.15rem;
}
.tl__body header {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
  font-size: 0.75rem;
}
.tl__body time { color: var(--ink); font-feature-settings: "tnum" 1; }
.tl__rel { font-style: italic; }
.tl__body p { margin: 0.2rem 0 0; font-size: 0.88rem; line-height: 1.4; }
.tl__meta { font-style: italic; }
.tl__subject { font-weight: 500; }
.tl__message { margin-top: 0.25rem; }
.tl__message-body {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.45;
  max-height: 12rem;
  overflow: auto;
  margin: 0.35rem 0 0;
  padding: 0.45rem;
  background: #fffefa;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.tl__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.35rem;
}
.tl__actions .link {
  font-size: 0.78rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.tl--outbound { padding: 0.35rem 0.5rem; border-left: 3px solid #6e8aa3; }
.tl--system .tl__icon { opacity: 0.6; }
.tl--reply { background: #f8f4e9; padding: 0.4rem 0.5rem; border-left: 3px solid #2a8a4f; }
.tl--summary { background: #f3f0e2; padding: 0.4rem 0.5rem; border-left: 3px solid #6e8aa3; }

/* ── Sequences admin panel ─────────────────────────────────────────────── */
.modal--sequences {
  width: min(920px, calc(100vw - 2rem));
  max-width: min(920px, calc(100vw - 2rem));
}
.modal--sequences .modal__body {
  min-width: 0;
  overflow-x: hidden;
}
.seq-editor {
  min-width: 0;
  max-width: 100%;
}
.modal--sequences .seq-item__actions button,
.modal--sequences .seq-editor button.small {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--hairline);
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 4px;
}
.modal--sequences .seq-item__actions button.ghost,
.modal--sequences .seq-editor button.ghost {
  background: transparent;
}
.modal--sequences .seq-item__actions button.danger,
.modal--sequences .seq-editor button.danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.modal--sequences .seq-item__actions button.danger:hover:not(:disabled),
.modal--sequences .seq-editor button.danger:hover:not(:disabled) {
  background: var(--chip-due-bg);
}
.modal--sequences .seq-item__actions button:disabled,
.modal--sequences .seq-editor button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.modal--sequences code {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  font-size: 0.88em;
}
.seq-list { list-style: none; margin: 0; padding: 0; }
.seq-item {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
  background: var(--compose-bg);
}
.seq-item header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem; margin-bottom: 0.2rem;
}
.seq-item__actions {
  display: flex; gap: 0.4rem; margin-top: 0.4rem;
}
.seq-editor fieldset {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
  background: var(--compose-bg);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.seq-editor fieldset > p.muted {
  margin: 0 0 0.65rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.seq-editor fieldset legend {
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0 0.3rem;
  color: var(--ink);
}
.seq-editor label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.seq-editor input[type="text"],
.seq-editor input[type="number"],
.seq-editor textarea {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--hairline);
  background: var(--compose-input-bg);
  color: var(--ink);
  font: inherit;
  border-radius: 4px;
}
.seq-editor input[type="text"]:focus,
.seq-editor input[type="number"]:focus,
.seq-editor textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--compose-active-ring);
}
.seq-editor input[readonly] {
  color: var(--muted);
}
.seq-step {
  border-left: 3px solid var(--accent);
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.6rem;
  background: var(--surface-2);
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.modal--sequences .seq-step header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}
.modal--sequences .seq-step header strong {
  font-size: 0.9rem;
}
.seq-step__actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}
.seq-preview-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.65rem;
  background: var(--surface-2);
  border-radius: 4px;
  border: 1px solid var(--hairline);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.seq-preview-bar > .muted {
  margin: 0;
  overflow-wrap: anywhere;
}
.seq-preview-bar__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  margin: 0;
  min-width: 0;
  width: 100%;
}
.seq-preview-bar__label select,
.seq-preview-bar select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#seq-steps {
  min-width: 0;
  max-width: 100%;
}
.seq-body-toolbar {
  margin: 0.25rem 0 0.35rem;
  max-width: 100%;
}
.seq-body-toolbar select {
  font-size: 0.78rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--compose-input-bg);
  color: var(--ink);
  max-width: 10rem;
}
.modal--sequences .seq-body-toolbar.compose-toolbar {
  width: 100%;
}
.seq-actions--top {
  margin-bottom: 0.35rem;
  width: 100%;
  justify-content: flex-start;
}
.lead-pane__body .seq-actions--top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.seq-editor__actions {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 0.6rem;
}

.timeline-compose {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--compose-bg);
}
.timeline-compose--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--compose-active-ring);
}
.timeline-compose__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.timeline-compose__fields {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.timeline-compose__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
@media (max-width: 520px) {
  .timeline-compose__row { grid-template-columns: 1fr; }
}
.timeline-compose label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
}
.timeline-compose input,
.timeline-compose textarea {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--compose-input-bg);
  color: var(--ink);
}
.timeline-compose textarea {
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 6rem;
}
.timeline-compose #compose-send {
  margin-top: 0.5rem;
  width: 100%;
}
.timeline-empty {
  margin: 0.25rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--hairline);
}
.compose-modes {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.compose-mode-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.seq-preview__body {
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 0.8rem;
  max-height: 16rem;
  overflow: auto;
  background: var(--compose-input-bg);
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 0.6rem;
  border-radius: 4px;
}

.modal:not(.modal--abm) #action-send,
.modal:not(.modal--abm) #action-preview {
  display: none;
}

.lead-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0.75rem;
}
.lead-header__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lead-header__meta {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
}
.lead-header__stage {
  display: grid;
  gap: 0.25rem;
  font-size: 0.78rem;
  white-space: nowrap;
}
.lead-header__stage select {
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--hairline);
  background: var(--bg);
}
.lead-suppression-banner {
  margin: 0 0 0.65rem;
  padding: 0.4rem 0.55rem;
  background: var(--chip-due-bg);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--chip-due-fg);
}

.lead-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--hairline);
}
.lead-tabs__btn {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--muted);
  margin-bottom: -1px;
  transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.lead-tabs__btn:hover { color: var(--ink); }
.lead-tabs__btn--active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
  background: var(--accent-soft);
}
.lead-panel.lead-panel--active {
  animation: panel-in 160ms var(--ease-out);
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.lead-panel { display: none; }
.lead-panel--active { display: block; }
.lead-panel[hidden] { display: none !important; }

.lead-pane__scroll .lead-header,
.lead-pane__scroll .lead-tabs,
.lead-pane__scroll .contact-switcher,
.lead-pane__scroll .lead-suppression-banner {
  flex-shrink: 0;
}

.lead-pane__scroll .lead-panel--active {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: block;
  margin-top: 0.25rem;
  padding-right: 0.1rem;
}

.lead-mail-workspace {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.lead-mail-history {
  min-width: 0;
}

.lead-quick-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hairline);
}
.lead-quick-note textarea {
  flex: 1 1 100%;
  min-height: 2.5rem;
  font-size: 0.85rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--hairline);
  resize: vertical;
}

.lead-mail-history__title {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.compose-more { margin-top: 0.15rem; }
.compose-more summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.compose-more summary::-webkit-details-marker { display: none; }

.lead-mail-workspace .timeline-compose {
  margin-bottom: 0;
}

/* ── Split-pane lead workspace ─────────────────────────────────────────── */
.lead-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--hairline);
  overflow: hidden;
  animation: pane-in 200ms var(--ease-out);
}
@keyframes pane-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}
.lead-pane--empty { display: none; }
.workspace--split .lead-pane--empty { display: none; }
.lead-pane__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--panel);
  flex-shrink: 0;
}
.lead-pane__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lead-pane__close {
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.15rem 0.35rem;
}
.lead-pane__body {
  flex: 1;
  overflow: hidden;
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.lead-pane__scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.85rem 0.35rem;
}
.lead-pane__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-top: 1px solid var(--hairline);
  background: var(--panel);
  flex-shrink: 0;
  flex-wrap: wrap;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
  z-index: 3;
}
.lead-pane__status { font-size: 0.82rem; color: var(--muted); min-width: 6rem; }
.lead-pane__status--ok { color: var(--accent); }
.lead-pane__status--err { color: var(--danger); }
.lead-pane__actions { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }

/* Sprint 3: tab-specific footer actions */
.lead-pane__footer #action-compose-send,
.lead-pane__footer #action-save,
.lead-pane__footer #action-delete,
.lead-pane__footer #action-preview,
.lead-pane__footer #action-send {
  display: none;
}
.lead-pane__footer[data-active-tab="mail"] #action-compose-send { display: inline-flex; }
.lead-pane__footer[data-active-tab="outreach"] #action-preview,
.lead-pane__footer[data-active-tab="outreach"] #action-send { display: inline-flex; }
.lead-pane__footer[data-active-tab="record"] #action-save,
.lead-pane__footer[data-active-tab="record"] #action-delete { display: inline-flex; }
.lead-pane__footer[data-active-tab="record"] #action-delete { margin-right: auto; }

/* Desktop: sticky footer send replaces in-compose send */
@media (min-width: 961px) {
  .lead-pane:not(.lead-pane--empty) #timeline-compose > #compose-send { display: none; }
}

.board-toolbar__left,
.board-toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.live-dot { font-size: 0.65rem; }
.live-dot--on { color: #2a8a4f; }
.live-dot--off { color: var(--muted); opacity: 0.5; }

kbd {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--bg);
}

/* Work queues in sidebar (inside .nav-section--queues body) */
.lists .nav-section[data-nav-section="queues"] { margin-top: 0.55rem; }
.lists .queue-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 0.32rem 0.55rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
  border-radius: 3px;
}
.lists .queue-btn:hover { background: var(--surface-2); }
.lists .queue-btn.active {
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}
.lists .queue-btn__count {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  background: var(--surface-2);
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  min-width: 1.1rem;
  text-align: center;
}
.lists .queue-btn--warn .queue-btn__count {
  color: var(--chip-due-fg);
  background: var(--chip-due-bg);
}

/* Next-action chips on cards */
.card__action {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  margin-top: 0.25rem;
}
.card__action--reply { background: var(--chip-reply-bg); color: var(--chip-reply-fg); }
.card__action--send { background: var(--chip-send-bg); color: var(--chip-send-fg); }
.card__action--hook { background: var(--chip-hook-bg); color: var(--chip-hook-fg); }
.card__action--due { background: var(--chip-due-bg); color: var(--chip-due-fg); }
.card__action--stale { background: var(--chip-stale-bg); color: var(--chip-stale-fg); }

.card--selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.card--focused { box-shadow: 0 0 0 2px var(--focus-ring); }
.card__bulk {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
}
.card { position: relative; }
.card__bulk input { width: 1rem; height: 1rem; cursor: pointer; }

/* Bulk bar */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.4rem;
  background: var(--accent-soft);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  flex-wrap: wrap;
}
.bulk-bar select {
  font: inherit;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--hairline);
}

/* Queue list view */
.queue-view { overflow: auto; flex: 1; }
.queue-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  background: var(--panel);
}
.queue-row:hover { background: var(--bg); }
.queue-row--focused { background: var(--accent-soft); }
.queue-row__org { font-weight: 600; font-size: 0.9rem; }
.queue-row__sub { font-size: 0.78rem; color: var(--muted); }

/* Chat-style thread */
.thread-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.thread-msg {
  display: block;
  width: 100%;
  max-width: 92%;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  animation: thread-in 180ms var(--ease-out);
}
@keyframes thread-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.thread-msg--inbound {
  align-self: flex-start;
  background: var(--thread-in);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 2px;
}
.thread-msg--outbound {
  align-self: flex-end;
  background: var(--thread-out);
  border: 1px solid var(--hairline);
  border-bottom-right-radius: 2px;
}
.thread-msg--system {
  align-self: center;
  max-width: 100%;
  background: transparent;
  border: 0;
  padding: 0.25rem 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}
.thread-msg__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  align-items: baseline;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
}
.thread-msg__head .delivery { margin-left: auto; }
.thread-msg__subject { margin: 0; font-weight: 600; font-size: 0.85rem; }
.thread-msg__preview { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--muted); }
.thread-msg__body {
  margin: 0.35rem 0 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  white-space: pre-wrap;
  max-height: 12rem;
  overflow: auto;
}
.thread-msg__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 0.35rem;
}
.thread-msg__actions .link {
  font-size: 0.78rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}
.thread-msg__head time {
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.thread-msg--inline-compose {
  align-self: stretch;
  max-width: 100%;
  background: var(--compose-bg);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 2px var(--compose-active-ring);
}

.compose-from__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.compose-from__row input {
  flex: 1 1 8rem;
  min-width: 6rem;
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--compose-input-bg);
  color: var(--ink);
}
.compose-from__email-input {
  flex: 1.4 1 10rem;
  font-family: var(--mono);
  font-size: 0.82rem;
}
.compose-from__bracket {
  font-family: var(--mono);
  font-size: 0.78rem;
  user-select: none;
}

/* Rich compose toolbar */
.compose-toolbar {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.compose-toolbar button {
  font-size: 0.78rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--hairline);
  background: var(--compose-input-bg);
  color: var(--ink);
  cursor: pointer;
  border-radius: 3px;
}
.compose-rich {
  min-height: 6rem;
  max-height: 16rem;
  overflow: auto;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--compose-input-bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.5;
}
.compose-rich:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.compose-rich:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.compose-rich blockquote {
  margin: 0.35rem 0;
  padding-left: 0.65rem;
  border-left: 2px solid var(--hairline);
  color: var(--muted);
}

.timeline-compose--sticky-send #compose-send { margin-top: 0.35rem; }

/* Mobile compose bar */
.compose-mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.compose-mobile-bar button { width: 100%; padding: 0.75rem; }

@media (max-width: 960px) {
  .timeline-compose #compose-send { display: none; }
  .workspace--split .compose-mobile-bar:not(.hidden) { display: block; }
  .lead-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lead-tabs::-webkit-scrollbar { display: none; }
  .lead-tabs__btn { flex-shrink: 0; min-height: 2.5rem; }
  .lead-pane__footer {
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
  }
  .lead-pane__footer[data-active-tab="mail"] #action-compose-send { display: none; }
  .lead-pane__footer[data-active-tab="mail"] .lead-pane__actions:empty,
  .lead-pane__footer[data-active-tab="mail"] .lead-pane__actions { min-height: 0; }
  .thread-msg { max-width: 100%; }
  .thread-feed { padding-bottom: 0.25rem; }
  .compose-rich { max-height: 12rem; }
  .lead-pane__scroll .lead-panel--active { padding-bottom: 0.75rem; }
}

/* Sequence analytics */
.seq-analytics {
  margin-bottom: 1rem;
  padding: 0.65rem 0.75rem;
  background: var(--compose-bg);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.seq-analytics table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.seq-analytics th,
.seq-analytics td {
  text-align: left;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--hairline);
}
.seq-analytics th { color: var(--muted); font-weight: 600; }
.seq-analytics__scroll {
  overflow-x: auto;
  margin-top: 0.35rem;
}
.seq-analytics__scroll table { min-width: 42rem; }

/* Deliverability panel (sequences modal + timeline) */
.deliv-summary {
  margin-bottom: 1rem;
  padding: 0.65rem 0.75rem;
  background: var(--compose-bg);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.deliv-summary--warn {
  border-color: var(--warn);
  background: var(--chip-hook-bg);
}
.deliv-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.deliv-summary__flag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--chip-due-fg);
}
.deliv-summary__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.82rem;
}
.deliv-summary__grid em {
  font-style: normal;
  color: var(--muted);
  margin-right: 0.2rem;
}
.deliv-rate--warn { color: var(--chip-due-fg); font-weight: 600; }
.deliv-hotspots {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--hairline);
}
.deliv-hotspots__list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.8rem;
}
.deliv-hotspots__list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--hairline);
}
.deliv-hotspots__list li:last-child { border-bottom: none; }
.deliv-issues {
  margin-top: 0.5rem;
}
.deliv-issues__list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.8rem;
}
.deliv-issues__list li {
  display: grid;
  gap: 0.1rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--hairline);
}
.deliv-issues__list li:last-child { border-bottom: none; }
.thread-msg--deliverability {
  background: var(--chip-due-bg);
  color: var(--chip-due-fg);
  border-left: 3px solid var(--danger);
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
}

/* Sprint 1: delivery status + shortcuts */
.delivery {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}
.delivery--pending { background: rgba(99, 102, 241, 0.12); color: #9094e8; }
.delivery--sent { background: rgba(148, 163, 184, 0.12); color: var(--muted); }
.delivery--open { background: rgba(111, 168, 134, 0.14); color: var(--accent); }
.delivery--click { background: rgba(120, 150, 190, 0.14); color: var(--chip-send-fg); }
.delivery--bounce { background: rgba(196, 112, 122, 0.14); color: var(--chip-due-fg); }

.thread-msg__content { display: flex; flex-direction: column; gap: 0.35rem; }
.thread-msg__body--new { margin: 0; }
.thread-msg__quote {
  border-left: 2px solid var(--hairline);
  padding-left: 0.5rem;
  margin: 0;
}
.thread-msg__quote summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.thread-msg__quote summary::-webkit-details-marker { display: none; }
.thread-msg__body--quote {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  max-height: 12rem;
  overflow: auto;
}

.compose-status {
  font-size: 0.75rem;
  color: var(--muted);
  min-height: 1rem;
}

.shortcuts-backdrop .modal--shortcuts { max-width: 28rem; }
.shortcuts-body {
  display: grid;
  gap: 0.65rem;
  padding: 0.5rem 0;
}
.shortcuts-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.88rem;
}
.shortcuts-row kbd {
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
}

/* Sprint 2: theme toggle */
.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
}
.theme-toggle__btn {
  border: 0;
  border-radius: 0;
  padding: 0.35rem 0.5rem;
  min-width: 2rem;
}
.theme-toggle__btn + .theme-toggle__btn {
  border-left: 1px solid var(--hairline);
}
.theme-toggle__btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.compose-ai-suggest.loading { opacity: 0.6; pointer-events: none; }

.compose-ai-full {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  margin-left: 0.15rem;
}
.compose-ai-full input {
  margin: 0;
  accent-color: var(--accent);
}

/* Dark: mute kanban column accents */
:root[data-theme="dark"] .col--inbound .col__title::before,
:root[data-theme="dark"] .col--prospect .col__head,
:root[data-theme="dark"] .col--contacte .col__head,
:root[data-theme="dark"] .col--repondu .col__head,
:root[data-theme="dark"] .col--booke .col__head,
:root[data-theme="dark"] .col--nurture .col__head,
:root[data-theme="dark"] .col--mort .col__head {
  opacity: 0.85;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .col--inbound .col__title::before,
  :root[data-theme="system"] .col__head {
    opacity: 0.85;
  }
}