/* /carnegie/tower/app.css — BD Tower
 *
 * Inherits create/app.css for header/hero/buttons. This file only adds
 * Tower-specific surfaces (sections, prospect cards, contacts panel,
 * drafts panel). Visual language follows Carnegie editorial:
 *   - borderless sections with top divider rules (not boxed cards)
 *   - cream page bg, white card bg, near-black text
 *   - gold accent (#c0a062) for emphasis (numbers, hot tier, highlights)
 *   - Playfair Display headings, DM Sans body
 *   - generous whitespace, no heavy shadows
 */

/* iOS zoom-on-focus prevention — every input/textarea/select in Tower
   reads ≥16px. R7 of the mobile UX rubric. */
.tower-app input,
.tower-app textarea,
.tower-app select,
.tower-input,
.tower-app .air-input {
  font-size: max(16px, 1rem);
}

/* ── Sections (editorial, match /create) ──────────────────────────────── */
.tower-main {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 80px;
}

.tower-section {
  background: transparent;
  border: 0;
  /* 2026-05-31 hotfix: Tower body is LIGHT (#fff via --air-surface), not
   * dark. The prior rgba(255,255,255,.10) made section dividers invisible.
   * Use dark-on-light at low opacity. */
  border-top: 1px solid rgba(24, 27, 28, 0.10);
  border-radius: 0;
  padding: var(--air-space-7, 48px) 0;
}
.tower-section:first-of-type { border-top: 0; }

.tower-step-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}
.tower-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--air-text, #181b1c);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  font-family: "Poppins", system-ui, sans-serif;
  flex-shrink: 0;
}
.tower-step-header h2 {
  margin: 0;
  font-family: "Playfair Display", "EB Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tower-count {
  color: var(--air-text-secondary, #535353);
  font-weight: 400;
  font-size: 15px;
  font-family: "DM Sans", system-ui, sans-serif;
  margin-left: 6px;
}

/* ── Form labels + inputs ─────────────────────────────────────────────── */
.tower-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--air-text-secondary, #535353);
  margin: 18px 0 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tower-label:first-of-type { margin-top: 0; }
.tower-hint {
  font-weight: 400;
  color: var(--air-text-tertiary, #798b95);
  font-size: 11px;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}

.tower-input {
  width: 100%;
  background: var(--air-surface, #ffffff);
  border: 1px solid var(--air-divider, rgba(13, 28, 36, 0.12));
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--air-text, #181b1c);
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  font-family: "DM Sans", system-ui, sans-serif;
}
.tower-input:focus {
  outline: none;
  border-color: var(--air-text, #181b1c);
  box-shadow: 0 0 0 3px rgba(13, 28, 36, 0.06);
}
.tower-textarea { resize: vertical; min-height: 80px; }

.tower-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.tower-status {
  color: var(--air-text-secondary, #535353);
  font-size: 13px;
}
.tower-status.is-error { color: #b00020; }
.tower-status.is-success { color: #1a7f4a; }

/* ── Prospect grid ────────────────────────────────────────────────────── */
.tower-prospect-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Prospect card (collapsible) ──────────────────────────────────────── */
.tower-card {
  background: var(--air-surface, #ffffff);
  border: 1px solid var(--air-divider, rgba(13, 28, 36, 0.10));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.tower-card:hover {
  border-color: rgba(13, 28, 36, 0.18);
  box-shadow: 0 4px 18px rgba(13, 28, 36, 0.06);
}

/* Left edge tier ribbon */
.tower-card.is-hot  { border-left: 3px solid #c0a062; }   /* gold */
.tower-card.is-warm { border-left: 3px solid #d4a86a; }
.tower-card.is-cool { border-left: 3px solid #b8c5d4; }
.tower-card.is-cold { border-left: 3px solid rgba(13, 28, 36, 0.10); }

/* COLLAPSED head: name + score + chips, all in one row */
.tower-card-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  align-items: start;
  user-select: none;
}
.tower-card-summary:hover { background: rgba(13, 28, 36, 0.02); }
.tower-card-summary-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tower-card-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.tower-card-title {
  font-family: "Playfair Display", "EB Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--air-text, #181b1c);
}
.tower-card-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(13, 28, 36, 0.18);
}
.tower-card-title a:hover { border-bottom-color: #c0a062; }
.tower-card-domain {
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 12px;
  color: var(--air-text-tertiary, #798b95);
}

/* Chips row (collapsed view) */
.tower-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tower-chip {
  display: inline-flex;
  align-items: center;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(13, 28, 36, 0.05);
  color: var(--air-text-secondary, #535353);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tower-chip.is-vertical { background: rgba(13, 28, 36, 0.07); color: var(--air-text, #181b1c); }
.tower-chip.is-product  { background: rgba(192, 160, 98, 0.14); color: #8a6a2a; font-weight: 600; }
.tower-chip.is-value    { background: rgba(13, 28, 36, 0.04); color: var(--air-text-secondary, #535353); }
.tower-chip.is-value.is-truncated::after { content: '…'; opacity: 0.6; margin-left: 2px; }

/* Score block (right side of collapsed head) */
.tower-card-score {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.tower-card-score-num {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--air-text, #181b1c);
}
.tower-card-score-tier {
  display: inline-block;
  padding: 3px 9px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 999px;
}
.tier-hot  { background: #c0a062; color: #fff; }
.tier-warm { background: rgba(192,160,98,0.18); color: #8a6a2a; }
.tier-cool { background: rgba(13, 28, 36, 0.06); color: var(--air-text-secondary, #535353); }
.tier-cold { background: rgba(13, 28, 36, 0.04); color: var(--air-text-tertiary, #798b95); }

.tower-card-chevron {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--air-text-tertiary, #798b95);
  transition: transform 200ms ease;
  align-self: center;
}
.tower-card.is-expanded .tower-card-chevron { transform: rotate(180deg); }

/* EXPANDED body */
.tower-card-body {
  display: none;
  padding: 0 18px 18px;
  border-top: 1px solid var(--air-divider, rgba(13, 28, 36, 0.06));
  margin-top: 0;
}
.tower-card.is-expanded .tower-card-body { display: block; }

.tower-card-desc {
  font-size: 14px;
  color: var(--air-text, #181b1c);
  line-height: 1.55;
  margin: 16px 0 0;
}
.tower-card-why {
  font-size: 13px;
  color: var(--air-text-secondary, #535353);
  line-height: 1.55;
  padding: 10px 14px;
  background: rgba(192,160,98,0.06);
  border-left: 2px solid #c0a062;
  border-radius: 0 6px 6px 0;
  margin: 12px 0 0;
}

.tower-detail-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.tower-detail-row strong {
  display: block;
  font-size: 10px;
  color: var(--air-text-tertiary, #798b95);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 6px;
  font-weight: 700;
  font-family: "DM Sans", system-ui, sans-serif;
}
.tower-detail-row p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--air-text, #181b1c); }
.tower-detail-row ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--air-text, #181b1c); }
.tower-detail-row li { margin: 2px 0; }

.tower-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--air-divider, rgba(13, 28, 36, 0.06));
}

/* ── Contacts panel ───────────────────────────────────────────────────── */
/* .tower-contacts lives inside the drawer now (was inline-grid pre-drawer).
   Default to flex; the legacy `.tower-card.has-contacts` toggle is kept
   only so the few remaining inline-grid callers (if any) still work. */
.tower-contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(13, 28, 36, 0.02);
  border-radius: 10px;
  padding: 14px;
  margin-top: 14px;
}
.tower-card .tower-contacts { display: none; }
.tower-card.has-contacts .tower-contacts { display: flex; }

.tower-role-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--air-divider, rgba(13, 28, 36, 0.08));
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.tower-role-filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10px;
  color: var(--air-text-tertiary, #798b95);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.tower-role-filter select {
  background: var(--air-surface, #ffffff);
  border: 1px solid var(--air-divider, rgba(13, 28, 36, 0.14));
  border-radius: 6px;
  padding: 5px 9px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--air-text, #181b1c);
  cursor: pointer;
  font-weight: 500;
}
.tower-role-filter-note {
  font-size: 12px;
  color: #b06a2a;
  font-style: italic;
}

.tower-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 6px;
  transition: background 100ms ease;
}
.tower-contact-row:hover { background: rgba(13, 28, 36, 0.03); }
.tower-contact-row label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
}
.tower-contact-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--air-text, #181b1c);
  cursor: pointer;
  flex-shrink: 0;
}
.tower-contact-name { font-weight: 600; font-size: 13px; }
.tower-contact-title { font-size: 12px; color: var(--air-text-secondary, #535353); margin-left: 4px; }
.tower-contact-email {
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 11px;
  color: var(--air-text-tertiary, #798b95);
  margin-left: auto;
  flex-shrink: 0;
}
.tower-contact-email.is-missing { color: #b06a2a; font-style: italic; font-family: "DM Sans", system-ui, sans-serif; }

/* v2-B: contact-row channels container — groups email + LinkedIn badges
   so they stack neatly on the right edge of the row. */
.tower-contact-channels {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.tower-contact-channels .tower-contact-email { margin-left: 0; }
.tower-contact-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: "DM Sans", system-ui, sans-serif;
  text-decoration: none;
  background: rgba(10, 102, 194, 0.14);
  color: #0a66c2;
  white-space: nowrap;
  line-height: 1.4;
}
.tower-contact-linkedin:hover {
  background: rgba(10, 102, 194, 0.22);
  text-decoration: none;
}

/* ── Drafts panel ───────────────────────────────────────────────────────
 * The drafts panel is rendered inside the right-sliding drawer (no longer
 * inside a legacy .tower-card grid). Default to visible — the legacy
 * `.tower-card.has-drafts .tower-drafts` selector below kept the panel
 * `display:none` in the drawer because that wrapper class doesn't exist
 * anymore. Hotfix 2026-05-31 after Kenneth saw "1 draft ready" status with
 * nothing under it. */
.tower-drafts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.tower-draft {
  background: rgba(13, 28, 36, 0.02);
  border: 1px solid var(--air-divider, rgba(13, 28, 36, 0.08));
  border-radius: 10px;
  padding: 10px 12px;
}
.tower-draft-meta {
  font-size: 10.5px;
  color: var(--air-text-tertiary, #798b95);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tower-draft-meta strong { color: var(--air-text, #181b1c); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 12px; }
.tower-draft input[type="text"] {
  background: var(--air-surface, #ffffff);
  border: 1px solid var(--air-divider, rgba(13, 28, 36, 0.12));
  border-radius: 6px;
  padding: 7px 10px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--air-text, #181b1c);
  width: 100%;
  margin-bottom: 6px;
}
.tower-draft textarea {
  background: var(--air-surface, #ffffff);
  border: 1px solid var(--air-divider, rgba(13, 28, 36, 0.12));
  border-radius: 6px;
  padding: 8px 10px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--air-text, #181b1c);
  width: 100%;
  min-height: 96px;
  max-height: 280px;
  resize: vertical;
}
.tower-draft.is-sent {
  opacity: 0.55;
  pointer-events: none;
  border-left: 3px solid #1a7f4a;
}

/* Per-draft action row — currently just "Preview before send" but built
 * as a row so future per-draft actions (e.g. re-draft, copy to clipboard)
 * land in the same spot. */
.tower-draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tower-draft-actions .btn-preview-draft {
  font-size: 11.5px;
  padding: 5px 11px;
  font-weight: 600;
}

.tower-send-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(192,160,98,0.08);
  border-radius: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 10px;
}
.tower-send-bar-info { font-size: 13px; color: var(--air-text-secondary, #535353); }
.tower-send-bar-info strong { color: var(--air-text, #181b1c); font-weight: 700; }

/* ── Misc ─────────────────────────────────────────────────────────────── */
.tower-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(13, 28, 36, 0.15);
  border-top-color: #c0a062;
  border-radius: 50%;
  animation: tower-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes tower-spin { to { transform: rotate(360deg); } }

#btn-gmail.is-connected {
  color: #1a7f4a;
  border-color: rgba(26, 127, 74, 0.3);
}

/* ── PR-A.1 additions (2026-05-30) ────────────────────────────────────── */
.tower-url-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
/* The chip input itself inherits .create-tag-input + .refine-url-tags from
   create/app.css — Tower's HTML uses those classes directly, no overrides. */

/* ICP filter + Email template drawer chrome
 * 2026-05-31 hotfix: Tower body is LIGHT (--air-surface #ffffff). The prior
 * version migrated this block to dark-theme alphas (rgba(255,255,255,*))
 * on the wrong assumption tower body was #0b0e11, which made the drawer
 * title, summary state, lede + hint all invisible white-on-white. Repainted
 * for the actual light surface using the standard --air-text token. */
.tower-icp-drawer {
  border: 1px solid rgba(24, 27, 28, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 14px 0 6px;
  background: var(--air-surface, #ffffff);
}
.tower-icp-drawer[open] { background: var(--air-surface-cream, #fafaf7); }
.tower-icp-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  color: var(--air-text, #181b1c);
  font-family: "DM Sans", system-ui, sans-serif;
}
.tower-icp-summary::-webkit-details-marker { display: none; }
.tower-icp-summary::before {
  content: '\25B8';
  color: var(--air-text-secondary, #535353);
  transition: transform 120ms ease;
  font-size: 10px;
  display: inline-block;
}
.tower-icp-drawer[open] .tower-icp-summary::before { transform: rotate(90deg); }
.tower-icp-summary-label { font-weight: 600; color: var(--air-text, #181b1c); }
.tower-icp-summary-state {
  color: var(--air-text-secondary, #535353);
  font-size: 12px;
}
.tower-icp-summary-state.is-set {
  color: #4a30c9;
  font-weight: 600;
}
.tower-icp-summary-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--air-text-tertiary, #798b95);
  font-style: italic;
}
.tower-icp-body { padding: 10px 0 4px; }
.tower-icp-lede {
  font-size: 12.5px;
  color: var(--air-text-secondary, #535353);
  margin: 0 0 10px;
  line-height: 1.5;
  font-family: "DM Sans", system-ui, sans-serif;
}
.tower-icp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .tower-icp-grid { grid-template-columns: 1fr; }
}
.tower-icp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
/* ── /PR-A.1 additions ──────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────── */
/* PR-B: Kanban + cross-user dedupe + per-prospect drawer                   */
/* ──────────────────────────────────────────────────────────────────────── */

.tower-kanban {
  --kanban-gap: 14px;
  --kanban-col-min: 260px;
  margin-top: 12px;
}

/* Mobile tabs (hidden on desktop). Tap-targets switch which column is visible. */
.kanban-tabs {
  display: none;          /* hidden on desktop — see media query */
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.kanban-tab {
  flex: 1 1 0;
  min-width: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 10px;
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 6px;
  background: #fff;
  color: var(--air-text-secondary, #535353);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-tab.is-active {
  background: #181b1c;
  color: #fff;
  border-color: #181b1c;
}
.kanban-tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
}
.kanban-tab:not(.is-active) .kanban-tab-count {
  background: rgba(13, 28, 36, 0.08);
  color: var(--air-text-secondary, #535353);
}

.kanban-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--kanban-col-min), 1fr));
  gap: var(--kanban-gap);
  align-items: start;
}

.kanban-column {
  background: rgba(13, 28, 36, 0.025);
  border: 1px solid rgba(13, 28, 36, 0.06);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(13, 28, 36, 0.06);
}
.kanban-column-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--air-text, #181b1c);
}
.kanban-column-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--air-text-secondary, #535353);
  background: rgba(13, 28, 36, 0.05);
  padding: 1px 7px;
  border-radius: 9px;
}
.kanban-column-hint {
  margin-left: auto;
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--air-text-faint, #798b95);
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 50%;
  cursor: help;
  background: #fff;
  font-style: italic;
}
.kanban-column-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  transition: background .12s;
}
.kanban-column-body.is-drop-target {
  background: rgba(192, 160, 98, 0.10);
  border-radius: 6px;
}
.kanban-empty {
  text-align: center;
  font-size: 12px;
  color: var(--air-text-faint, #798b95);
  padding: 16px 0;
  font-style: italic;
}

/* Card */
.kanban-card {
  background: #fff;
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-left: 3px solid rgba(13, 28, 36, 0.10);
  border-radius: 6px;
  padding: 10px 10px 10px 12px;
  display: flex;
  gap: 8px;
  cursor: grab;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  position: relative;
}
.kanban-card:hover {
  box-shadow: 0 2px 8px rgba(13, 28, 36, 0.08);
  border-color: rgba(13, 28, 36, 0.18);
}
.kanban-card.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.kanban-card.is-hot   { border-left-color: #c0a062; }
.kanban-card.is-warm  { border-left-color: #d4a86a; }
.kanban-card.is-cool  { border-left-color: #b8c5d4; }
.kanban-card.is-cold  { border-left-color: rgba(13, 28, 36, 0.15); }
.kanban-card-drag {
  width: 12px;
  font-size: 14px;
  color: var(--air-text-faint, #798b95);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.kanban-card-body { flex: 1; min-width: 0; }
.kanban-card-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.kanban-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--air-text, #181b1c);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kanban-card-score {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(13, 28, 36, 0.05);
}
.kanban-card-score.score-hot   { background: rgba(192, 160, 98, 0.18); color: #8a6a2a; }
.kanban-card-score.score-warm  { background: rgba(212, 168, 106, 0.16); color: #a0784d; }
.kanban-card-score.score-cool  { background: rgba(184, 197, 212, 0.30); color: #4a5d70; }
.kanban-card-score.score-cold  { background: rgba(13, 28, 36, 0.05); color: var(--air-text-secondary, #535353); }
.kanban-card-domain {
  font-size: 11px;
  color: var(--air-text-secondary, #535353);
  font-family: var(--air-font-mono, ui-monospace, SFMono-Regular, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kanban-card-vertical {
  font-size: 11px;
  color: var(--air-text-faint, #798b95);
  margin-top: 3px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kanban-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.kanban-card-synced,
.kanban-card-contacted,
.kanban-card-dedupe {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
}
.kanban-card-synced   { background: rgba(26, 127, 74, 0.12); color: #1a7f4a; }
.kanban-card-contacted { background: rgba(13, 28, 36, 0.08); color: var(--air-text-secondary, #535353); }
.kanban-card-dedupe   { background: rgba(184, 0, 32, 0.12); color: #b00020; }
.kanban-card-move-wrap {
  display: none;       /* desktop: hidden — drag-drop handles it */
  margin-top: 8px;
}
.kanban-card-move {
  width: 100%;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid rgba(13, 28, 36, 0.15);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
}

/* Desktop: hide column tabs, show columns side-by-side. */
@media (min-width: 901px) {
  .kanban-tabs { display: none; }
  .kanban-column { display: flex; }
}

/* Tablet: shrink columns, allow horizontal scroll if needed. */
@media (max-width: 1100px) {
  .kanban-columns {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
  }
}

/* ── Mobile kanban (≤900px) ─────────────────────────────────────────────
 * Replaces the old "one column at a time + dropdown" with a real kanban:
 *   - All 4 columns laid out horizontally (each ~85vw wide).
 *   - Swipe-scroll left/right between them with snap points (one column
 *     per snap, like Instagram stories or Linear's mobile kanban).
 *   - Long-press a card (550ms) to enter "drag mode" — visual cue is a
 *     lift + slight scale. While in drag mode, drag the card across to
 *     another column and release to drop. A subtle haptic on long-press
 *     start tells the user the gesture armed.
 *   - The mobile "Move to" dropdown stays as a fallback for accessibility
 *     (visible only inside an Actions submenu, not on the card body), so
 *     users on assistive tech still have a path.
 */
@media (max-width: 900px) {
  /* Hide the tab-row + dropdown — replaced by swipe. */
  .kanban-tabs { display: none; }
  .kanban-card-move-wrap { display: none; }

  /* Horizontal scroller. CSS scroll-snap gives the column-at-a-time feel
   * without a JS library. -webkit-overflow-scrolling for inertial scroll
   * on iOS. overscroll-behavior contains the swipe so the page doesn't
   * jiggle vertically while we swipe horizontally. */
  .kanban-columns {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;       /* Firefox: hide thin scrollbar */
    gap: 12px;
    padding: 0 12px 12px;
    margin: 0 -12px;             /* bleed past .tower-main padding so first/last column snap fully visible */
  }
  .kanban-columns::-webkit-scrollbar { display: none; }   /* Webkit */
  .kanban-column {
    display: flex !important;    /* override .kanban-column { display:none } from old rule */
    flex: 0 0 85vw;              /* one column ≈ full width with sliver of next visible */
    max-width: 360px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Hide the per-card desktop drag handle (the ⋮⋮ icon); we use long-press. */
  .kanban-card-drag { display: none; }
  /* Sticky column header so the user always sees which column they're in
   * even after scrolling cards within the column. */
  .kanban-column-header {
    position: sticky;
    top: 0;
    background: var(--air-bg-card, #fff);
    z-index: 2;
    border-bottom: 1px solid rgba(13, 28, 36, 0.08);
  }
  /* Cards: bigger tap targets, full width of column. */
  .kanban-card {
    padding: 12px;
    min-height: 64px;
    touch-action: pan-y;        /* allow vertical scroll inside column */
  }
  /* Long-press "drag-armed" state: card lifts slightly, neighbours dim. */
  .kanban-card.is-drag-armed {
    transform: scale(1.03);
    box-shadow: 0 12px 28px rgba(13, 28, 36, 0.18);
    z-index: 50;
    transition: transform .15s ease, box-shadow .15s ease;
    /* While armed we want to OWN every touch — no scroll-jacking. */
    touch-action: none;
  }
  /* Card actively being dragged across columns (after armed + moved). */
  .kanban-card.is-touch-dragging {
    opacity: 0.85;
    position: fixed;            /* float above the page during drag */
    pointer-events: none;
    z-index: 100;
    width: var(--touch-drag-w, 280px);
    /* x/y set inline by JS from touchmove. */
  }
  /* Column getting hovered during touch drag — drop preview. */
  .kanban-column.is-touch-drop-target .kanban-column-body {
    background: rgba(192, 160, 98, 0.10);
    outline: 2px dashed rgba(192, 160, 98, 0.45);
    outline-offset: -4px;
  }
  /* Column-dot indicator under hero so the user knows there are 4 columns
   * and where they're scrolled to (rendered by app.js as #kanban-dots). */
  #kanban-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 6px 0 10px;
  }
  #kanban-dots .kanban-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(13, 28, 36, 0.18);
    transition: background .2s ease, transform .2s ease;
  }
  #kanban-dots .kanban-dot.is-current {
    background: var(--air-accent, #c0a062);
    transform: scale(1.4);
  }
}
@media (min-width: 901px) {
  /* Desktop: never show the dot indicator. */
  #kanban-dots { display: none; }
}

/* ── Per-prospect drawer ─────────────────────────────────────────────── */

.tower-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.tower-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
}
.tower-drawer[aria-hidden="true"]:not(.is-open) {
  /* tighten visibility for AT */
  visibility: hidden;
}
.tower-drawer.is-open {
  visibility: visible;
}
.tower-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 28, 36, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.tower-drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(540px, 96vw);
  background: var(--air-bg-card, #fff);
  border-left: 1px solid rgba(13, 28, 36, 0.10);
  box-shadow: -10px 0 30px rgba(13, 28, 36, 0.15);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  padding: 18px 22px 32px;
}
.tower-drawer.is-open .tower-drawer-panel {
  transform: translateX(0);
}
body.drawer-open {
  overflow: hidden;       /* prevent body scroll behind the drawer on mobile */
}

.drawer-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(13, 28, 36, 0.06);
}
.drawer-card-title {
  font-family: var(--air-font-display, "Playfair Display", Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.2;
}
.drawer-card-title a {
  color: var(--air-text, #181b1c);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.drawer-card-title a:hover { border-bottom-color: #c0a062; }
.drawer-card-meta {
  font-size: 12px;
  color: var(--air-text-secondary, #535353);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.drawer-card-domain {
  font-family: var(--air-font-mono, ui-monospace, monospace);
  font-size: 11px;
}
.drawer-card-score {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.drawer-card-score.score-hot  { background: rgba(192, 160, 98, 0.18); color: #8a6a2a; }
.drawer-card-score.score-warm { background: rgba(212, 168, 106, 0.16); color: #a0784d; }
.drawer-card-score.score-cool { background: rgba(184, 197, 212, 0.30); color: #4a5d70; }
.drawer-card-score.score-cold { background: rgba(13, 28, 36, 0.05); }
.btn-drawer-close {
  background: transparent;
  border: 0;
  font-size: 26px;
  cursor: pointer;
  color: var(--air-text-secondary, #535353);
  line-height: 1;
  padding: 0 4px;
  margin: -4px -4px 0 0;
}
.btn-drawer-close:hover { color: var(--air-text, #181b1c); }

.drawer-dedupe {
  background: rgba(184, 0, 32, 0.06);
  border: 1px solid rgba(184, 0, 32, 0.18);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: #b00020;
  line-height: 1.45;
  margin-bottom: 12px;
}
.drawer-dedupe strong { font-weight: 700; }
.drawer-dedupe code {
  font-family: var(--air-font-mono, ui-monospace, monospace);
  background: rgba(184, 0, 32, 0.10);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.drawer-dedupe-user {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: help;
}

.drawer-attio {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.drawer-attio {
  background: rgba(26, 127, 74, 0.08);
  color: #1a7f4a;
  border: 1px solid rgba(26, 127, 74, 0.18);
}
.drawer-attio.is-syncing {
  background: rgba(13, 28, 36, 0.04);
  color: var(--air-text-secondary, #535353);
  border-color: rgba(13, 28, 36, 0.08);
}
.drawer-attio.is-error {
  background: rgba(184, 0, 32, 0.06);
  color: #b00020;
  border-color: rgba(184, 0, 32, 0.18);
}
.drawer-attio.is-pending {
  background: transparent;
  color: var(--air-text-secondary, #535353);
  border-color: rgba(13, 28, 36, 0.10);
}
.drawer-attio a {
  font-family: var(--air-font-mono, ui-monospace, monospace);
  font-size: 10px;
  text-decoration: underline;
}
.drawer-attio-hint {
  font-size: 11px;
  color: var(--air-text-faint, #798b95);
  font-style: italic;
}

.drawer-card-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--air-text-secondary, #535353);
  margin: 0 0 12px;
}
.drawer-card-why {
  font-size: 12px;
  background: rgba(192, 160, 98, 0.07);
  border-left: 2px solid #c0a062;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.drawer-card-why strong {
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #8a6a2a;
  display: block;
  margin-bottom: 2px;
}

.drawer-section { margin: 16px 0; }
.drawer-section h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--air-text-faint, #798b95);
  margin: 0 0 6px;
}
.drawer-section p, .drawer-section ul {
  font-size: 13px;
  line-height: 1.55;
  color: var(--air-text, #181b1c);
  margin: 0;
}
.drawer-section ul {
  padding-left: 18px;
}
.drawer-section ul li { margin: 2px 0; }

.drawer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(13, 28, 36, 0.06);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Conferences modal ─────────────────────────────────────────────────── */
.tower-modal {
  position: fixed; inset: 0;
  display: none;
  z-index: 1200;
}
.tower-modal.open { display: block; }
.tower-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(13, 28, 36, 0.55);
  backdrop-filter: blur(2px);
}
.tower-modal-panel {
  position: relative;
  max-width: 760px;
  margin: 6vh auto;
  background: var(--air-card-bg, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(13, 28, 36, 0.28);
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.tower-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(13, 28, 36, 0.08);
}
.tower-modal-header h3 {
  margin: 0;
  font-family: var(--air-heading-font, 'Playfair Display', Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--air-text, #181b1c);
}
.tower-modal-x {
  background: transparent; border: 0;
  font-size: 28px; line-height: 1;
  cursor: pointer;
  color: var(--air-text-muted, #535353);
  padding: 4px 10px;
  border-radius: 6px;
}
.tower-modal-x:hover { background: rgba(13, 28, 36, 0.06); }
.tower-modal-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
}

/* Conference cards (multi-select list) */
.tower-conf-list {
  display: flex; flex-direction: column;
  gap: 10px;
  margin: 12px 0 16px;
}
.tower-conf-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  background: #fff;
}
.tower-conf-card:hover { border-color: rgba(13, 28, 36, 0.25); background: rgba(192, 160, 98, 0.04); }
.tower-conf-card:has(input:checked) { border-color: #8a6a2a; background: rgba(192, 160, 98, 0.10); }
.tower-conf-check { margin-top: 4px; transform: scale(1.15); cursor: pointer; }
.tower-conf-card-body { flex: 1; min-width: 0; }
.tower-conf-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.tower-conf-card-head strong {
  font-size: 16px;
  color: var(--air-text, #181b1c);
}
.tower-conf-score {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(192, 160, 98, 0.16);
  color: #8a6a2a;
  flex-shrink: 0;
}
.tower-conf-tier-hot .tower-conf-score { background: rgba(220, 60, 60, 0.14); color: #b03030; }
.tower-conf-tier-warm .tower-conf-score { background: rgba(218, 144, 56, 0.16); color: #a45f10; }
.tower-conf-tier-cool .tower-conf-score { background: rgba(98, 142, 192, 0.14); color: #4a6b9a; }
.tower-conf-tier-cold .tower-conf-score { background: rgba(120, 120, 120, 0.14); color: #555; }
.tower-conf-meta {
  font-size: 13px;
  color: var(--air-text-muted, #535353);
  margin: 4px 0 6px;
}
.tower-conf-meta a { color: #8a6a2a; text-decoration: none; }
.tower-conf-meta a:hover { text-decoration: underline; }
.tower-conf-why {
  font-size: 14px;
  color: var(--air-text, #181b1c);
  margin: 4px 0 8px;
  line-height: 1.5;
}
.tower-conf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tower-conf-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(13, 28, 36, 0.06);
  color: var(--air-text-muted, #535353);
}

@media (max-width: 700px) {
  .tower-modal-panel { margin: 0; max-height: 100vh; border-radius: 0; height: 100vh; }
  .tower-modal-body { padding: 16px; }
}

/* ── PR-1a: contacts-found pill on kanban cards ───────────────────────── */
.kanban-card-contacts-found {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  white-space: nowrap;
}
/* v2-B: per-channel sub-pills — globally retrieved counts visible to all users.
   Email = warm amber (existing palette), LinkedIn = LI brand-adjacent slate-blue
   so the two channels are visually distinct at a glance. */
.kanban-card-contacts-channel {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.kanban-card-contacts-channel.is-email {
  background: rgba(192, 160, 98, 0.18);
  color: #8a6a2a;
}
.kanban-card-contacts-channel.is-linkedin {
  background: rgba(10, 102, 194, 0.14);
  color: #0a66c2;
}

/* ── PR-1b: select toggle button + selected-card chrome ───────────────── */
.kanban-card { position: relative; }
/* Mobile-first selection affordance — bottom-right corner of card, big
   tap target, becomes the ✓ badge when selected. */
.kanban-card-select-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 9999px;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--air-border, #d6e0e5);
  color: var(--air-text, #181b1c);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.kanban-card-select-btn:hover { background: #fff; border-color: var(--air-text, #181b1c); }
.kanban-card-select-btn:active { transform: scale(0.92); }
.kanban-card-select-btn[aria-pressed="true"] {
  background: var(--air-text, #181b1c);
  border-color: var(--air-text, #181b1c);
  color: #fff;
}
.kanban-card.is-selected .kanban-card-select-btn {
  background: var(--air-text, #181b1c);
  border-color: var(--air-text, #181b1c);
  color: #fff;
}
/* Bigger touch target on phones */
@media (max-width: 640px) {
  .kanban-card-select-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; right: 6px; bottom: 6px; }
}
.kanban-card.is-selected {
  outline: 2px solid var(--air-accent, #c0a062);
  outline-offset: -1px;
  background: rgba(192, 160, 98, 0.06);
}

/* ── PR-1b: floating bulk-action bar ──────────────────────────────────── */
.tower-bulk-bar {
  position: fixed;
  /* 2026-05-31 audit (P0 #3): glassy translucent dark surface instead of
   * pure #181b1c so it doesn't read as a giant near-black plate. Desktop
   * centers via translate (no min-width); the ≤600px media query below
   * switches back to left/right:12px insets to clear the WhatsApp FAB. */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  background: rgba(31, 36, 43, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(13, 28, 36, 0.32), 0 4px 12px rgba(13, 28, 36, 0.16);
  max-width: min(720px, calc(100vw - 32px));
  animation: tower-bulk-bar-rise .18s cubic-bezier(.2,.6,.3,1) both;
}
/* 2026-05-31: when the contact-batch bar is ALSO on screen (e.g. user
 * selected prospect cards AND added contacts to the outreach queue from a
 * drawer), the two sticky bars stack at the same `bottom:` and overlap.
 * Lift the prospect-bulk bar above the batch bar so both stay reachable.
 * `:has()` is widely supported (Chrome 105+ / Safari 15.4+ / Firefox 121+);
 * older browsers fall back to the original single-bar position which is
 * still functional (the batch bar just covers the bottom of bulk-bar).
 * The batch bar is removed from the DOM (not hidden) when its queue is
 * empty, so a plain existence check is enough. */
body:has(#tower-batch-bar) .tower-bulk-bar {
  /* 70px = batch-bar height (~58) + 12px gap */
  bottom: calc(72px + 70px + env(safe-area-inset-bottom, 0px));
}
@keyframes tower-bulk-bar-rise {
  from { transform: translate(-50%, 24px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}
.tower-bulk-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  font-family: "DM Sans", system-ui, sans-serif;
}
/* Left column: meta row (count + Clear + warnings) on top, sub-line below.
 * 2026-05-31 Kenneth: same shape as .tower-batch-bar-left so the two sticky
 * bars are visually identical on the left side. Was previously a single
 * inline-flex row with the count + sub-line + Clear all baseline-aligned,
 * which wrapped weirdly on mid-width screens. */
.tower-bulk-bar-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.tower-bulk-bar-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  flex-wrap: wrap;
}
.tower-bulk-bar-count strong { font-size: 15px; font-weight: 700; }
.tower-bulk-bar-sub {
  font-family: "DM Sans", system-ui, sans-serif;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  line-height: 1.4;
}
.tower-bulk-bar-clear {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  text-decoration: underline;
  cursor: pointer;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  padding: 0;
  margin-left: 4px;
  line-height: 1;
}
.tower-bulk-bar-clear:hover { color: #fff; }
.tower-bulk-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Override .air-btn dark-bg styles so they look good on the dark bar. */
.tower-bulk-bar .air-btn,
.tower-bulk-bar .air-btn-ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
  font-family: "DM Sans", system-ui, sans-serif;
}
.tower-bulk-bar .air-btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.14);
}
.tower-bulk-bar-ai .tower-bulk-bar-ai-icon {
  display: inline-block;
  margin-right: 4px;
  /* Gentle hue shift gradient on the ✨ to read as an AI accent. */
  background: linear-gradient(120deg, #d4a86a, #c0a062, #f4d491);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 4px rgba(192, 160, 98, 0.45));
}
@media (max-width: 600px) {
  .tower-bulk-bar {
    /* 2026-05-31 audit (P0 #3): on phones, drop center-translate and use
     * left/right insets so the bar clears the WhatsApp FAB (left) and the
     * annotations pill (centered). */
    left: 64px;  /* clear WhatsApp FAB (40px + 12px gutter + buffer) */
    right: 12px;
    transform: none;
    max-width: none;
    /* Respect iOS safe-area on phones with home indicator (X+). 12px floor
     * lifts the bar off the chin; adds safe-area-inset-bottom on top. */
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  @keyframes tower-bulk-bar-rise {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .tower-bulk-bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  /* Buttons row: each button grows equally, no truncation, action bar
   * never overflows the viewport. flex-wrap allows soft wrapping for
   * mid-size phones (e.g. 540-600px) before they collapse to column. */
  .tower-bulk-bar-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tower-bulk-bar-actions > .air-btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    white-space: normal;        /* let labels wrap to 2 lines if needed */
    line-height: 1.15;
    padding: 10px 12px;
  }
  .tower-bulk-bar-meta {
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 4px;
  }
}
/* Long label visible by default; short label hidden. Mobile flips
 * this so the action bar buttons stay one line and the bar never
 * overflows the viewport. */
.tower-bulk-bar-label-short { display: none; }
@media (max-width: 600px) {
  .tower-bulk-bar-label-long  { display: none; }
  .tower-bulk-bar-label-short { display: inline; }
}

/* Tightest phones (≤380px e.g. iPhone SE): stack action buttons fully
 * so each gets the full row. */
@media (max-width: 380px) {
  .tower-bulk-bar-actions {
    flex-direction: column;
  }
  .tower-bulk-bar-actions > .air-btn {
    width: 100%;
  }
}

/* ── Live phase indicators ──────────────────────────────────────────── */
.kanban-card.is-busy {
  position: relative;
  border-color: rgba(13, 28, 36, 0.18);
}
.kanban-card.is-busy::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200% 100%;
  animation: kanban-card-busy-sweep 1.4s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}
@keyframes kanban-card-busy-sweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.kanban-card-phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  font-size: 11px;
  font-weight: 600;
  background: #1a73e8;
  color: #fff;
  border-radius: 9999px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  z-index: 2;
  position: relative;
}
.kanban-card-phase-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: kanban-card-phase-pulse 1.1s ease-in-out infinite;
}
@keyframes kanban-card-phase-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.6);  opacity: 0.4; }
}

/* Drawer-header phase strip */
.tower-drawer-phase {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  background: rgba(26, 115, 232, 0.08);
  border: 1px solid rgba(26, 115, 232, 0.2);
  border-radius: 10px;
  color: #1a4a8e;
  font-size: 13px;
  font-weight: 500;
}
.tower-drawer-phase[hidden] { display: none; }
.tower-drawer-phase-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(26, 115, 232, 0.25);
  border-top-color: #1a73e8;
  border-radius: 50%;
  animation: tower-spinner-spin 0.8s linear infinite;
}
@keyframes tower-spinner-spin {
  to { transform: rotate(360deg); }
}

/* "Gmail not connected" chip in bulk bar */
.tower-bulk-bar-blocked {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #ffb37a;
  font-weight: 600;
  margin-left: 4px;
}

/* ── AI Auto-Pilot ─────────────────────────────────────────────────────── */
.tower-modal-wide { max-width: 920px; }

.tower-auto-toggle-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  background: rgba(192, 160, 98, 0.07);
  border-radius: 12px;
  margin: 12px 0 18px;
  flex-wrap: wrap;
}
.tower-auto-toggle-row .refine-online-toggle { font-weight: 600; }
#auto-status-label { font-size: 14px; }

.tower-auto-config { margin-bottom: 18px; }

.tower-divider {
  border: 0;
  border-top: 1px solid rgba(13, 28, 36, 0.10);
  margin: 24px 0 18px;
}

.tower-auto-section-h {
  font-family: var(--air-heading-font, 'Playfair Display', Georgia, serif);
  font-size: 18px;
  margin: 18px 0 8px;
  color: var(--air-text, #181b1c);
}

/* Run list */
.tower-auto-runs { display: flex; flex-direction: column; gap: 8px; }
.tower-auto-run {
  border: 1px solid rgba(13, 28, 36, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  background: #fff;
  transition: border-color 100ms, background 100ms;
}
.tower-auto-run:hover { border-color: rgba(13, 28, 36, 0.20); background: rgba(192, 160, 98, 0.04); }
.tower-auto-run-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--air-text-muted, #535353);
}
.tower-auto-run-head strong { color: var(--air-text, #181b1c); font-weight: 600; }
.tower-auto-run-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.tower-auto-run-ok { background: rgba(60, 140, 80, 0.14); color: #2e6f3e; }
.tower-auto-run-error { background: rgba(220, 60, 60, 0.14); color: #b03030; }
.tower-auto-run-partial { background: rgba(218, 144, 56, 0.16); color: #a45f10; }
.tower-auto-run-no_matches, .tower-auto-run-running { background: rgba(120, 120, 120, 0.14); color: #555; }
.tower-auto-run-dur { margin-left: auto; font-size: 12px; opacity: 0.7; }
.tower-auto-run-meta { font-size: 13px; color: var(--air-text-muted, #535353); margin-top: 4px; }
.tower-auto-run-stats {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--air-text-muted, #535353);
}
.tower-auto-run-stats .ok { color: #2e6f3e; }
.tower-auto-run-stats .muted { opacity: 0.7; }
.tower-auto-run-stats .err { color: #b03030; }

/* Run detail */
.tower-auto-summary {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 12px 14px;
  background: rgba(192, 160, 98, 0.08);
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}
.tower-auto-summary .ok { color: #2e6f3e; }
.tower-auto-summary .muted { opacity: 0.7; font-weight: 500; }
.tower-auto-summary .err { color: #b03030; }

.tower-auto-stage {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(13, 28, 36, 0.08);
  border-radius: 10px;
  background: #fff;
}
.tower-auto-stage-err { border-color: rgba(220, 60, 60, 0.30); }
.tower-auto-stage h5 {
  margin: 0 0 8px; font-size: 15px;
  display: flex; align-items: center; gap: 8px;
}
.tower-auto-stage h5 small { font-size: 11px; opacity: 0.6; font-weight: 400; }
.tower-auto-conf-ul { padding-left: 20px; margin: 0; }
.tower-auto-conf-ul li { margin: 6px 0; }
.tower-auto-detail-why { font-size: 13px; color: var(--air-text-muted, #535353); margin: 2px 0 4px; }

.tower-auto-companies { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tower-auto-company {
  border: 1px solid rgba(13, 28, 36, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(250, 250, 247, 0.5);
}
.tower-auto-company.ok { border-left: 3px solid #2e6f3e; }
.tower-auto-company.muted { border-left: 3px solid rgba(120, 120, 120, 0.4); opacity: 0.85; }
.tower-auto-company.warn { border-left: 3px solid rgba(218, 144, 56, 0.6); }
.tower-auto-company-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  flex-wrap: wrap;
}
.tower-auto-company-head strong { color: var(--air-text, #181b1c); }
.tower-auto-outcome {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(13, 28, 36, 0.06);
}
.tower-auto-fb {
  border: 1px solid rgba(13, 28, 36, 0.15);
  background: #fff;
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 4px;
  transition: background 100ms;
}
.tower-auto-fb:hover { background: rgba(192, 160, 98, 0.10); }
.tower-auto-fb.active { background: rgba(192, 160, 98, 0.30); border-color: #8a6a2a; }

.tower-auto-company-meta { font-size: 12px; color: var(--air-text-muted, #535353); margin: 4px 0; }
.tower-auto-company-meta a { color: #8a6a2a; }
.tower-auto-why { font-size: 13px; color: var(--air-text, #181b1c); margin: 4px 0; }
.tower-auto-hook { font-size: 13px; color: var(--air-text-muted, #535353); margin: 4px 0 0; padding-left: 8px; border-left: 2px solid rgba(192, 160, 98, 0.5); }

@media (max-width: 700px) {
  .tower-modal-wide { max-width: 100%; }
}


/* ── Outreach history (Step 4 table) ───────────────────────────────────── */
.tower-history-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tower-history-toolbar #history-search {
  flex: 1;
  min-width: 0;
}
.tower-history-table-wrap {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow-x: auto;
  background: rgba(255,255,255,0.01);
}
.tower-history-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--air-text-muted, #888);
  font-size: 14px;
}
.tower-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tower-history-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--air-text-muted, #888);
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  background: rgba(20,20,20,0.96);
  backdrop-filter: blur(4px);
}
.tower-history-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
}
.tower-history-row:hover { background: rgba(255,255,255,0.02); }
.tower-history-when {
  white-space: nowrap;
  color: var(--air-text-muted, #999);
  font-variant-numeric: tabular-nums;
}
.tower-history-company-link {
  color: var(--air-text, #ddd);
  text-decoration: none;
  font-weight: 600;
}
.tower-history-company-link:hover {
  color: var(--air-accent, #f4a623);
  text-decoration: underline;
}
.tower-history-company-stale {
  color: var(--air-text-muted, #888);
  font-style: italic;
  font-size: 12px;
}
.tower-history-domain {
  color: var(--air-text-muted, #888);
  text-decoration: none;
  font-size: 11px;
}
.tower-history-domain:hover { color: var(--air-accent, #f4a623); }
.tower-history-recipient { color: var(--air-text-soft, #c8c8c8); }
.tower-history-subject {
  color: var(--air-text, #ddd);
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tower-history-actions {
  white-space: nowrap;
  display: flex;
  gap: 10px;
  align-items: center;
}
.tower-history-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--air-accent, #f4a623);
  font-size: 12px;
  cursor: pointer;
}
.tower-history-toggle:hover { text-decoration: underline; }
.tower-history-gmail {
  font-size: 11px;
  color: var(--air-text-muted, #888);
  text-decoration: none;
}
.tower-history-gmail:hover { color: var(--air-accent, #f4a623); text-decoration: underline; }
.tower-history-legacy {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  padding: 1px 5px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  margin-left: 6px;
}
.tower-history-body-row td {
  padding: 0 14px 14px !important;
  background: rgba(0,0,0,0.18);
}
.tower-history-body {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(0,0,0,0.28);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--air-text, #ddd);
  max-height: 360px;
  overflow-y: auto;
}
@media (max-width: 720px) {
  .tower-history-table thead { display: none; }
  .tower-history-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 12px 14px;
  }
  .tower-history-row td {
    padding: 0 !important;
    border: 0 !important;
  }
  .tower-history-when { grid-column: 2; text-align: right; font-size: 11px; }
  .tower-history-company { grid-column: 1; }
  .tower-history-recipient { grid-column: 1 / -1; font-size: 12px; }
  .tower-history-subject { grid-column: 1 / -1; max-width: 100%; white-space: normal; }
  .tower-history-actions { grid-column: 1 / -1; }
}

/* ── Outreach state pills (v2.1) ───────────────────────────────────────── */
.kanban-card-outreach {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.kanban-card-outreach.is-sent {
  background: rgba(60, 140, 80, 0.14);
  color: #2e6f3e;
}
.kanban-card-outreach.is-stale {
  background: rgba(218, 144, 56, 0.18);
  color: #a45f10;
  /* gentle pulse to grab attention without being noisy */
  animation: kanban-stale-pulse 2.4s ease-in-out infinite;
}
.kanban-card-outreach.is-replied {
  background: rgba(98, 142, 192, 0.18);
  color: #2c5897;
  font-weight: 700;
}

/* Stale card body — left-edge accent */
.kanban-card.kanban-card-stale {
  border-left: 3px solid #c97a1f;
}
.kanban-card.kanban-card-stale::before {
  /* corner triangle to make it scannable across columns */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 14px 14px 0;
  border-color: transparent #c97a1f transparent transparent;
  opacity: 0.7;
  pointer-events: none;
}

@keyframes kanban-stale-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* Auto-pilot provenance pill */
.kanban-card-auto {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(192, 160, 98, 0.18);
  color: #8a6a2a;
}

/* ── Auto-Pilot mode selector + similar block ──────────────────────────── */
.tower-auto-mode-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 16px;
}
.tower-auto-mode {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color 100ms, background 100ms;
}
.tower-auto-mode:hover { border-color: rgba(13, 28, 36, 0.25); background: rgba(192, 160, 98, 0.04); }
.tower-auto-mode:has(input:checked) { border-color: #8a6a2a; background: rgba(192, 160, 98, 0.10); }
.tower-auto-mode input { margin-top: 4px; cursor: pointer; }
.tower-auto-mode span { font-size: 13px; color: var(--air-text, #181b1c); line-height: 1.4; }
.tower-auto-mode small { color: var(--air-text-muted, #535353); font-size: 11px; }

@media (max-width: 700px) {
  .tower-auto-mode-row { grid-template-columns: 1fr; }
}

/* Mode badge in run list */
.tower-auto-run-mode {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tower-auto-run-mode.is-conf { background: rgba(98, 142, 192, 0.16); color: #2c5897; }
.tower-auto-run-mode.is-sim  { background: rgba(60, 140, 80, 0.14); color: #2e6f3e; }
.tower-auto-run-mode.is-both { background: rgba(192, 160, 98, 0.22); color: #8a6a2a; }
.tower-auto-run-trig {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(13, 28, 36, 0.06);
  color: var(--air-text-muted, #535353);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Similar-mode seed list in run detail */
.tower-auto-similar-seeds {
  font-size: 12px;
  color: var(--air-text-muted, #535353);
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: rgba(13, 28, 36, 0.04);
  border-radius: 6px;
}
.tower-auto-similar-seeds a { color: #8a6a2a; word-break: break-all; }

/* ── Gmail button — needs-rescope nudge ───────────────────────────────── */
#btn-gmail.needs-rescope {
  background: rgba(218, 144, 56, 0.18);
  color: #a45f10;
  border-color: rgba(218, 144, 56, 0.4);
  animation: kanban-stale-pulse 3s ease-in-out infinite;
}
#btn-gmail.needs-rescope:hover {
  background: rgba(218, 144, 56, 0.28);
}


/* ── Per-column "Show all N" toggle ───────────────────────────────────── */
.kanban-column-more {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 8px;
  background: transparent;
  color: var(--air-text-muted, #999);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, color .15s, background .15s;
}
.kanban-column-more:hover {
  border-color: var(--air-accent, #f4a623);
  color: var(--air-accent, #f4a623);
  background: rgba(244, 166, 35, 0.06);
}


/* ── Drawer: Attio notes inline render ──────────────────────────────────
 * 2026-05-31 audit (P0 #1): this block lives inside the LIGHT drawer
 * (.tower-drawer-panel, bg #fff), so the previous white-on-white tokens
 * (rgba(255,255,255,…)) were unreadable. Repainted for light surface. */
.drawer-attio-notes {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 10px;
  background: rgba(13, 28, 36, 0.03);
}
.drawer-attio-notes-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--air-text, #181b1c);
}
.drawer-attio-notes-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.drawer-attio-notes-empty {
  color: #3a3a3a;
  font-size: 12px;
}
.drawer-attio-note {
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(13, 28, 36, 0.04);
}
.drawer-attio-note-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin-bottom: 2px;
}
.drawer-attio-note-when {
  color: #3a3a3a;
  white-space: nowrap;
}
.drawer-attio-note-meta {
  color: #3a3a3a;
  font-size: 11px;
  margin-bottom: 6px;
}
.drawer-attio-note-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--air-text, #181b1c);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.drawer-attio-notes-error {
  color: #b00020;
  font-size: 12px;
}
.air-btn-xs {
  font-size: 10px;
  padding: 2px 6px;
  line-height: 1.2;
}

/* ── Auto-Send pipeline UI (v2.2) ──────────────────────────────────────── */
.tower-auto-run-stats .warn { color: #a45f10; font-weight: 600; }
.tower-auto-summary .warn { color: #a45f10; }

.tower-auto-steps-trail {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.tower-auto-step {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(13, 28, 36, 0.04);
  color: var(--air-text-muted, #535353);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
.tower-auto-step-ok { background: rgba(60, 140, 80, 0.10); color: #2e6f3e; }
.tower-auto-step-warn { background: rgba(218, 144, 56, 0.12); color: #a45f10; }
.tower-auto-step-err { background: rgba(220, 60, 60, 0.10); color: #b03030; }
.tower-auto-step-muted { background: rgba(120, 120, 120, 0.10); color: #555; }

/* Card pill for staged drafts (auto-pilot waiting for approval). */
.kanban-card-staged {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(192, 160, 98, 0.22);
  color: #8a6a2a;
  border: 1px dashed rgba(138, 106, 42, 0.5);
}

/* Stale-draft warning pill — shows when drafts no longer match the contacts
 * panel (the 2026-05-31 divergence bug). Red-ish to signal Send will be
 * blocked. Sits in the kanban-card-meta row next to other pills. */
.kanban-card-stale-drafts {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(220, 70, 70, 0.18);
  color: #b03030;
  border: 1px solid rgba(176, 48, 48, 0.45);
}


/* ── Batch outreach bar + modal + contact row badge ─────────────────────
 * Sticky floating bar at the bottom showing queued contacts and the
 * "Send to BD Assistant" CTA. Layout matches .tower-bulk-bar conventions:
 *   - Desktop: row, centered, max-width clamp, left-info / right-actions
 *   - Mobile (≤600px): flex column, left/right insets to clear FAB/toolbar
 *   - "Clear" is a tiny corner link (not a full button), anchored top-right
 *   - Send button uses long/short label pattern so it never clips the bar */
.tower-batch-bar {
  /* 2026-05-31: shape, surface, and font baseline now match .tower-bulk-bar
   * exactly — same glassy translucent dark surface, same shadow, same border,
   * same DM Sans baseline. The two sticky bars (per-prospect vs per-contact)
   * are visually identical except for the chip color. */
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(31, 36, 43, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(13, 28, 36, 0.32), 0 4px 12px rgba(13, 28, 36, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  color: #fff;
  max-width: min(720px, calc(100vw - 32px));
  width: max-content;
  animation: tower-bulk-bar-rise .18s cubic-bezier(.2,.6,.3,1) both;
}

/* Buttons on the dark batch bar need light-on-dark overrides. Mirror the
 * .tower-bulk-bar conventions (rgba(255,255,255,0.08) ghost, #fff primary). */
.tower-batch-bar .air-btn,
.tower-batch-bar .air-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  font-family: "DM Sans", system-ui, sans-serif;
}
.tower-batch-bar .air-btn:hover:not(:disabled),
.tower-batch-bar .air-btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}
.tower-batch-bar .air-btn-primary {
  background: #fff;
  color: #181b1c;
  border-color: #fff;
}
.tower-batch-bar .air-btn-primary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.88);
}
.tower-batch-bar .air-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* AI primary CTA — copy the gradient ✨ icon styling from .tower-bulk-bar-ai
 * verbatim so the two bars are pixel-identical. */
.tower-batch-bar .tower-bulk-bar-ai .tower-bulk-bar-ai-icon {
  display: inline-block;
  margin-right: 4px;
  background: linear-gradient(120deg, #d4a86a, #c0a062, #f4d491);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 4px rgba(192, 160, 98, 0.45));
}

/* Clear is an INLINE text link inside the meta row (no longer absolute-
 * positioned — that caused the primary button to cover it when wrapped).
 * Matches .tower-bulk-bar-clear's pattern. */
.tower-batch-bar-clear {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
  cursor: pointer;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  padding: 0;
  margin-left: 4px;
  line-height: 1;
}
.tower-batch-bar-clear:hover:not(:disabled) { color: #fff; }
.tower-batch-bar-clear:disabled { opacity: 0.4; cursor: not-allowed; }

.tower-batch-bar-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.tower-batch-bar-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  flex-wrap: wrap;
}
.tower-batch-bar-count strong { font-size: 15px; font-weight: 700; }
.tower-batch-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tower-batch-chip {
  display: inline-block;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(244, 166, 35, 0.18);
  color: var(--air-accent, #f4a623);
  white-space: nowrap;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tower-batch-chip.is-more {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.65);
}
.tower-batch-warning {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11.5px;
  color: #ffb37a;
}
.tower-batch-bar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Long/short label pattern — desktop shows the full "Send N to BD Assistant",
 * mobile shows the short form so the bar never overflows the viewport. */
.tower-batch-bar-label-short { display: none; }

@media (max-width: 600px) {
  .tower-batch-bar {
    /* On phones, drop center-translate and use left/right insets so the
     * bar clears the WhatsApp FAB on the left and the annotations toolbar
     * floating on the right. Matches .tower-bulk-bar mobile layout. */
    left: 64px;
    right: 12px;
    transform: none;
    max-width: none;
    width: auto;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .tower-batch-bar-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tower-batch-bar-right > .air-btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    line-height: 1.15;
    padding: 10px 12px;
  }
  .tower-batch-bar-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  /* Send button keeps the long label hidden; switch to short. */
  .tower-batch-bar-label-long  { display: none; }
  .tower-batch-bar-label-short { display: inline; }
}

/* Tightest phones (≤380px): stack action buttons fully so each gets the
 * full row. */
@media (max-width: 380px) {
  .tower-batch-bar-right { flex-direction: column; }
  .tower-batch-bar-right > .air-btn { width: 100%; }
}

/* Contact row "in batch" badge */
.tower-contact-batch-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(244, 166, 35, 0.15);
  color: var(--air-accent, #f4a623);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}
.tower-contact-row.is-in-batch {
  background: rgba(244, 166, 35, 0.04);
}

/* Batch modal status + rows */
.tower-batch-status {
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}
.tower-batch-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
}
.tower-batch-row {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.015);
  transition: border-color .2s, background .2s;
}
.tower-batch-row.is-drafting,
.tower-batch-row.is-sending {
  border-color: rgba(244,166,35,0.4);
  background: rgba(244,166,35,0.04);
}
.tower-batch-row.is-sent {
  border-color: rgba(86,200,120,0.35);
  background: rgba(86,200,120,0.04);
}
.tower-batch-row.is-error {
  border-color: rgba(255,118,118,0.4);
  background: rgba(255,118,118,0.04);
}
.tower-batch-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.tower-batch-row-main {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.tower-batch-row-title {
  color: var(--air-text-muted, #999);
  font-size: 12px;
}
.tower-batch-row-status {
  font-size: 12px;
  white-space: nowrap;
  color: var(--air-text-soft, #c8c8c8);
}
.tower-batch-row-meta {
  font-size: 12px;
  color: var(--air-text-muted, #888);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.tower-batch-row-prospect { color: var(--air-text-soft, #c8c8c8); }
.tower-batch-row-gmail {
  color: var(--air-accent, #f4a623);
  text-decoration: none;
  font-size: 11px;
  margin-left: 6px;
}
.tower-batch-row-gmail:hover { text-decoration: underline; }
.tower-batch-row-remove {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--air-text-muted, #aaa);
  border-radius: 6px;
  font-size: 14px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.tower-batch-row-remove:hover {
  border-color: #f57676;
  color: #f57676;
}
.tower-batch-row-subject {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--air-text, #ddd);
}
.tower-batch-row-preview {
  margin-top: 4px;
  font-size: 12px;
  color: var(--air-text-soft, #c8c8c8);
  line-height: 1.5;
  padding: 8px 10px;
  background: rgba(0,0,0,0.22);
  border-radius: 6px;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 120px;
  overflow-y: auto;
}
.tower-batch-row-error {
  margin-top: 4px;
  font-size: 12px;
  color: #f57676;
  padding: 6px 10px;
  background: rgba(255,118,118,0.06);
  border-radius: 6px;
}
.tower-batch-modal-footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}


/* ── ICP chip picker (multi-select dropdowns, 2026-05-30) ─────────────────
 * Tower body is LIGHT (--air-surface #ffffff). 2026-05-31 hotfix after
 * Kenneth screenshotted invisible chips: the prior dark-themed alphas
 * (rgba(255,255,255,*)) rendered white-on-white. Repainted for light
 * surface using --air-text (#181b1c) at low opacities. */
.tower-icp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px 9px;
  min-height: 38px;
  background: var(--air-surface-cream, #fafaf7);
  border: 1px solid rgba(24, 27, 28, 0.10);
  border-radius: 8px;
}
.tower-icp-chip {
  appearance: none;
  border: 1px solid rgba(24, 27, 28, 0.18);
  background: #ffffff;
  color: var(--air-text, #181b1c);
  /* Match the size/weight of prospect-card meta pills (kanban-card-* line ~795–820):
   * small 11px, 600 weight, 2px×8px padding, 8px radius, DM Sans (page-default). */
  padding: 3px 9px;
  border-radius: 8px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.tower-icp-chip:hover {
  background: #f4f5f7;
  border-color: rgba(24, 27, 28, 0.32);
}
.tower-icp-chip.is-on {
  background: rgba(124, 92, 255, 0.10);
  border-color: rgba(124, 92, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.30);
  color: #4a30c9;
}
.tower-icp-chip.is-on::before { content: "✓ "; opacity: .85; }

/* Coarse-pointer / phone-width devices need 44px tap targets — keep the
 * compact look but expand padding so the tap zone clears 44px. */
@media (pointer: coarse), (max-width: 768px) {
  .tower-icp-chip {
    padding: 8px 11px;
    font-size: 12px;
    min-height: 32px;   /* visible pill height; tap zone extended via padding */
  }
  .tower-icp-chips { gap: 6px; }
}

/* ── Email format toggle (Text/BD Assistant ↔ HTML/Web Designer) ─────────
 * Sized to match the prospect-card meta pill convention — small,
 * 11px/600 DM Sans, 8px radius. The agent caption (<small>) hangs below
 * the format label on two lines because there's just enough room. */
.tower-email-format-toggle {
  display: flex;
  gap: 6px;
  margin: 6px 0 14px;
  flex-wrap: wrap;
}
.tower-email-format-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tower-email-format-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(24, 27, 28, 0.18);
  background: #ffffff;
  color: var(--air-text, #181b1c);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.tower-email-format-pill small {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--air-text-secondary, #535353);
  letter-spacing: 0.02em;
}
.tower-email-format-opt:hover .tower-email-format-pill {
  background: #f4f5f7;
  border-color: rgba(24, 27, 28, 0.32);
}
.tower-email-format-opt input[type="radio"]:checked + .tower-email-format-pill {
  background: rgba(124, 92, 255, 0.10);
  border-color: rgba(124, 92, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.30);
  color: #4a30c9;
}
.tower-email-format-opt input[type="radio"]:checked + .tower-email-format-pill small {
  color: #4a30c9;
}
.tower-email-format-opt input[type="radio"]:focus-visible + .tower-email-format-pill {
  outline: 2px solid rgba(124, 92, 255, 0.55);
  outline-offset: 2px;
}

/* ── HTML draft preview (drawer, when bodyHtml is present) ─────────────── */
.tower-draft.is-html { border-left: 3px solid rgba(124, 92, 255, 0.55); padding-left: 10px; }
.tower-draft-format-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.22);
  color: #fff;
  vertical-align: middle;
}
.tower-draft-format-pill.is-text {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
}
.tower-draft-html-preview {
  /* 2026-05-31 audit (P0 #5): this preview <details> lives inside the
   * light drawer (.tower-drawer-panel, bg #fff), so the prior dark-surface
   * borders were invisible. Repainted for light surface. */
  margin: 6px 0;
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 8px;
  background: rgba(13, 28, 36, 0.03);
}
.tower-draft-html-preview summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(13, 28, 36, 0.7);
  list-style: none;
}
.tower-draft-html-preview summary::-webkit-details-marker { display: none; }
.tower-draft-html-preview summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform .15s ease;
}
.tower-draft-html-preview[open] summary::before { transform: rotate(90deg); }
.tower-draft-html-frame {
  /* 2026-05-31 audit (P0 #5): visible separator on light drawer. */
  display: block;
  width: 100%;
  min-height: 360px;
  max-height: 560px;
  border: 1px solid rgba(13, 28, 36, 0.12);
  border-top-color: rgba(13, 28, 36, 0.12);
  background: #fff;
  border-radius: 0 0 8px 8px;
}

/* ── 2026-05-31 audit (P1 CTA #11): Discover-menu split-button popover ─
 * Wraps Find via conference + AI Auto-Pilot under a single ghost CTA so
 * "Find similar prospects" stays the sole primary action in Step 1. */
.tower-discover-menu-wrap {
  position: relative;
  display: inline-block;
}
.tower-discover-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 260px;
  padding: 6px;
  background: var(--air-surface, #fff);
  border: 1px solid var(--air-divider, rgba(13, 28, 36, 0.10));
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(13, 28, 36, 0.18), 0 4px 12px rgba(13, 28, 36, 0.08);
  display: none;
}
.tower-discover-menu[data-open="true"] { display: block; }
.tower-discover-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  color: var(--air-text, #181b1c);
  cursor: pointer;
}
.tower-discover-menu-item:hover,
.tower-discover-menu-item:focus-visible {
  background: rgba(13, 28, 36, 0.05);
  outline: none;
}
.tower-discover-menu-item small {
  display: block;
  font-size: 11px;
  color: var(--air-text-secondary, #535353);
  margin-top: 2px;
  font-weight: 400;
}


/* ── Draft preview modal (Kenneth 2026-05-30) ──────────────────────────
   Always-on iframe preview before any send. Renders HTML drafts in a
   sandboxed iframe and text drafts as a styled letter card. Sits at z-index
   above the batch modal so it can launch from inside that flow if needed. */
/* ── Draft preview modal — light theme to match the rest of Tower ────
 * 2026-05-31: prior version was dark-themed (#15171d panel, white text)
 * which collided with everything else in Tower (light --air-surface, dark
 * --air-text). Kenneth flagged: "font style, font size, bleeding out of
 * border, dark font on dark background" — now aligned with the same
 * tokens .tower-modal (conferences) and .tower-draft (drawer cards) use:
 *   bg: var(--air-card-bg, #fff)
 *   text: var(--air-text, #181b1c)
 *   borders: rgba(13,28,36,*) at 0.06–0.12
 *   heading: Playfair Display
 *   body: DM Sans
 */
.tower-draft-preview-modal {
  position: fixed; inset: 0;
  display: none;
  z-index: 1200;
}
/* .tower-draft-preview-modal.open + .tower-modal-backdrop styles moved
 * into the flex-centered block below to avoid two competing layouts. */

.tower-draft-preview-panel {
  /* Center via flex on the modal root (set below), NOT absolute positioning.
   * absolute + translate left the bottom of the modal clipped under iOS
   * browser chrome and on short laptops because 92vh + the translate offset
   * pushed the footer below the visible viewport. Flex layout with explicit
   * margin on all four sides + max-height accounting for safe-area is the
   * robust fix. */
  position: relative;
  width: min(880px, 100%);
  /* Cap height so there's always breathing room above + below. dvh accounts
   * for mobile browser chrome; safe-area-inset-* adds iOS notch/home-indicator
   * padding. 32px = 16px gap × 2 (top + bottom). */
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  background: var(--air-card-bg, #fff);
  color: var(--air-text, #181b1c);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(13, 28, 36, 0.28);
  animation: tower-draft-preview-in .2s ease;
}
@keyframes tower-draft-preview-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* The modal root itself is a flex container that centers the panel and
 * adds the 16px (mobile) / 32px (desktop) margin on all four sides via
 * padding. This is what guarantees the panel never touches an edge. */
.tower-draft-preview-modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px))
           max(16px, env(safe-area-inset-right, 0px))
           max(16px, env(safe-area-inset-bottom, 0px))
           max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}
.tower-draft-preview-modal .tower-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(13, 28, 36, 0.55);
  backdrop-filter: blur(2px);
  z-index: -1;  /* Sit behind the panel without absolute-positioning the panel. */
}

.tower-draft-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(13, 28, 36, 0.08);
  background: transparent;
}
.tower-draft-preview-title {
  margin: 0;
  font-family: var(--air-heading-font, "Playfair Display", "EB Garamond", Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--air-text, #181b1c);
}
.tower-draft-preview-subtitle {
  margin: 6px 0 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--air-text-secondary, #535353);
}
.tower-draft-preview-modal .tower-modal-x {
  appearance: none;
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--air-text-muted, #535353);
  font: 600 24px/1 "DM Sans", system-ui, sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.tower-draft-preview-modal .tower-modal-x:hover {
  background: rgba(13, 28, 36, 0.06);
  color: var(--air-text, #181b1c);
}

.tower-draft-preview-body-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fafaf8;
}

.tower-draft-preview-group {
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.tower-draft-preview-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(13, 28, 36, 0.025);
  border-bottom: 1px solid rgba(13, 28, 36, 0.08);
}
.tower-draft-preview-group-head h4 {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--air-text, #181b1c);
}
.tower-draft-preview-group-meta {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--air-text-tertiary, #798b95);
}

.tower-draft-preview-row {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(13, 28, 36, 0.06);
}
.tower-draft-preview-row:last-child { border-bottom: 0; }

.tower-draft-preview-meta {
  margin-bottom: 10px;
}
.tower-draft-preview-to {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--air-text, #181b1c);
  margin-bottom: 8px;
  min-width: 0;
}
.tower-draft-preview-to strong {
  color: var(--air-text-tertiary, #798b95);
  font-weight: 500;
}
.tower-draft-preview-email {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--air-text-secondary, #535353);
  word-break: break-all;
  min-width: 0;
}
.tower-draft-preview-format {
  display: inline-block;
  padding: 2px 8px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 999px;
  flex-shrink: 0;
}
.tower-draft-preview-format.is-html {
  background: rgba(124, 92, 255, 0.14);
  color: #5a3fbf;
}
.tower-draft-preview-format.is-text {
  background: rgba(13, 28, 36, 0.06);
  color: var(--air-text-secondary, #535353);
}

.tower-draft-preview-subject {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  background: var(--air-surface, #ffffff);
  border: 1px solid rgba(13, 28, 36, 0.12);
  border-radius: 6px;
  color: var(--air-text, #181b1c);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.tower-draft-preview-subject:focus {
  outline: none;
  border-color: var(--air-text, #181b1c);
}

.tower-draft-preview-frame {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 320px;
  max-height: 480px;
  background: #fff;
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 6px;
  margin-top: 10px;
}
.tower-draft-preview-letter {
  margin-top: 10px;
  padding: 16px 18px;
  background: #fafaf6;
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 6px;
  color: var(--air-text, #181b1c);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13.5px;
  line-height: 1.55;
}
.tower-draft-preview-letter pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  font: inherit;
  color: inherit;
}

.tower-draft-preview-edit-text {
  margin-top: 10px;
  border: 1px solid rgba(13, 28, 36, 0.10);
  border-radius: 6px;
  background: var(--air-surface, #ffffff);
  overflow: hidden;
}
.tower-draft-preview-edit-text summary {
  cursor: pointer;
  padding: 8px 12px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: var(--air-text-secondary, #535353);
  list-style: none;
  user-select: none;
}
.tower-draft-preview-edit-text summary::-webkit-details-marker { display: none; }
.tower-draft-preview-edit-text summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform .15s ease;
}
.tower-draft-preview-edit-text[open] summary::before { transform: rotate(90deg); }
.tower-draft-preview-body {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--air-surface, #ffffff);
  border: 0;
  border-top: 1px solid rgba(13, 28, 36, 0.08);
  color: var(--air-text, #181b1c);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
}
.tower-draft-preview-body:focus { outline: none; }

.tower-draft-preview-footer {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid rgba(13, 28, 36, 0.08);
  background: #fff;
  flex-wrap: wrap;
}
.tower-draft-preview-footer-meta {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--air-text-secondary, #535353);
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: center;
}
.tower-draft-preview-footer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 640px) {
  /* Mobile: tighter padding around the panel (12px instead of 16px) and a
   * smaller title — but KEEP the same flex-center + 4-side margin pattern.
   * Was previously edge-to-edge fullscreen which is what made the bottom
   * clip under iOS chrome. */
  .tower-draft-preview-modal.open {
    padding: max(12px, env(safe-area-inset-top, 0px))
             max(12px, env(safe-area-inset-right, 0px))
             max(12px, env(safe-area-inset-bottom, 0px))
             max(12px, env(safe-area-inset-left, 0px));
  }
  .tower-draft-preview-panel {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .tower-draft-preview-header { padding: 14px 16px; }
  .tower-draft-preview-title { font-size: 19px; }
  .tower-draft-preview-body-wrap { padding: 14px 16px; }
  .tower-draft-preview-row { padding: 12px; }
  .tower-draft-preview-frame { min-height: 240px; max-height: 50vh; }
  .tower-draft-preview-footer { padding: 12px 16px; }
}


/* Edit by BD Assistant — prompt textarea + Apply button inside the
 * draft preview modal footer. Lives ABOVE the meta + cancel/send row.
 * Light-themed to match the rest of Tower. */
.tower-draft-preview-ai-edit {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  margin: 0 0 4px;
  background: rgba(192, 160, 98, 0.06);
  border: 1px solid rgba(192, 160, 98, 0.22);
  border-radius: 10px;
}
.tower-draft-preview-ai-edit-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6a2a;
}
.tower-draft-preview-ai-edit-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.tower-draft-preview-ai-edit-input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  background: var(--air-surface, #ffffff);
  border: 1px solid rgba(13, 28, 36, 0.12);
  border-radius: 6px;
  color: var(--air-text, #181b1c);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  resize: vertical;
  min-height: 38px;
  max-height: 160px;
}
.tower-draft-preview-ai-edit-input::placeholder {
  color: var(--air-text-tertiary, #798b95);
}
.tower-draft-preview-ai-edit-input:focus {
  outline: none;
  border-color: var(--air-text, #181b1c);
}
.tower-draft-preview-ai-edit-btn {
  flex-shrink: 0;
  min-width: 78px;
  justify-content: center;
}
.tower-draft-preview-ai-edit-status {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--air-text-secondary, #535353);
  min-height: 0;
}
.tower-draft-preview-ai-edit-status:empty {
  display: none;
}

/* Phase 2 — AgentRun mount inside the AI-edit panel. Hidden by default;
 * gets `hidden` removed when the streaming refine kicks off. Constrains
 * AgentRun's full-width chrome inside the modal's 880px panel and gives
 * it a touch of breathing room above the status line. */
.tower-refine-agentrun {
  margin-top: 12px;
}
.tower-refine-agentrun:not([hidden]) {
  display: block;
}
.tower-refine-agentrun .agentrun-panel {
  border-radius: 10px;
}

@media (max-width: 600px) {
  .tower-draft-preview-ai-edit-row {
    flex-direction: column;
    gap: 6px;
  }
  .tower-draft-preview-ai-edit-btn {
    width: 100%;
  }
}

/* ── Engaged → Create handoff CTA (drawer + kanban card) ───────────────
 * Highlights the "Create page" action prominently on engaged prospects.
 * Light-theme; uses Tower's purple accent (--air-accent) for the CTA so
 * it reads as the natural next step after the prospect has converted. */
.drawer-create-handoff {
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(124, 92, 255, 0.22);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.06) 0%, rgba(124, 92, 255, 0.02) 100%);
}
.drawer-create-handoff-head {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  color: var(--air-text, #181b1c);
  margin-bottom: 4px;
}
.drawer-create-handoff-head strong { font-weight: 600; }
.drawer-create-handoff-hint {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  color: rgba(24, 27, 28, 0.65);
  line-height: 1.5;
  margin: 0 0 10px;
}
.drawer-create-handoff .btn-create-page {
  width: 100%;
  background: linear-gradient(135deg, #4a30c9 0%, #6048d6 100%);
  color: #ffffff;
  border: none;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-family: "DM Sans", system-ui, sans-serif;
  box-shadow: 0 2px 6px rgba(74, 48, 201, 0.18);
  transition: filter 0.12s, box-shadow 0.12s;
}
.drawer-create-handoff .btn-create-page:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(74, 48, 201, 0.28);
}
.drawer-create-handoff .btn-create-page:active {
  filter: brightness(0.95);
}

/* Kanban card pill — small purple "🎉 engaged" indicator so users can
 * spot promotable prospects without opening the drawer. */
.kanban-card-engaged-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 8px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  background: rgba(124, 92, 255, 0.10);
  color: #4a30c9;
  border: 1px solid rgba(124, 92, 255, 0.32);
  letter-spacing: 0.2px;
}

/* ── LinkedIn (HeyReach) connect modal ─────────────────────────────────────
   Light Tower palette per architecture skill. Reuses base .tower-modal-*. */
.tower-linkedin-modal-panel {
  max-width: 560px;
  width: min(560px, 100%);
}
.tower-linkedin-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px 6px;
}
.tower-linkedin-modal-intro {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--air-text-secondary, #535353);
}
.tower-linkedin-modal-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tower-linkedin-modal-label > span {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--air-text, #181b1c);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tower-linkedin-modal-label select.air-input {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  padding: 9px 12px;
}
.tower-linkedin-modal-hint {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--air-text-secondary, #535353);
}
.tower-linkedin-modal-hint code {
  background: rgba(24, 27, 28, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.tower-linkedin-modal-empty {
  background: rgba(255, 168, 0, 0.08);
  border: 1px solid rgba(255, 168, 0, 0.30);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--air-text, #181b1c);
}
.tower-linkedin-modal-empty .tower-linkedin-refresh {
  margin: 0 4px;
}
.tower-linkedin-modal-help {
  margin-top: 4px;
  background: rgba(24, 27, 28, 0.03);
  border: 1px solid rgba(24, 27, 28, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
}
.tower-linkedin-modal-help summary {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--air-text, #181b1c);
}
.tower-linkedin-modal-help p,
.tower-linkedin-modal-help ol {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: var(--air-text-secondary, #535353);
  margin: 8px 0 0;
}
.tower-linkedin-modal-help ol {
  padding-left: 22px;
}
.tower-linkedin-modal-footer {
  display: flex;
  gap: 8px;
  padding: 10px 22px 18px;
  border-top: 1px solid rgba(13, 28, 36, 0.08);
}

/* ── Channel pill (3-way: Email · LinkedIn · Both) ────────────────────────
   Used on every send affordance (drawer Send, bulk-bar, batch-bar).
   Mirrors the canonical Tower pill convention (11px DM Sans, 8px radius,
   dark-on-light, purple #4a30c9 selected). See bd-tower-architecture.md →
   "Pill / chip convention". */
.tower-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px 0;
  flex-wrap: wrap;
}
.tower-channel-pill-opt {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(24, 27, 28, 0.18);
  background: #ffffff;
  color: var(--air-text, #181b1c);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tower-channel-pill-opt:hover:not(.is-disabled):not(.is-on) {
  background: rgba(124, 92, 255, 0.04);
  border-color: rgba(124, 92, 255, 0.32);
}
.tower-channel-pill-opt.is-on {
  background: rgba(124, 92, 255, 0.10);
  border-color: rgba(124, 92, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.30);
  color: #4a30c9;
}
.tower-channel-pill-opt.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* On dark sticky bars (.tower-bulk-bar, .tower-batch-bar), invert the pill
   palette so it stays visible on the dark glass background. */
.tower-bulk-bar .tower-channel-pill-opt,
.tower-batch-bar .tower-channel-pill-opt {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
}
.tower-bulk-bar .tower-channel-pill-opt:hover:not(.is-disabled):not(.is-on),
.tower-batch-bar .tower-channel-pill-opt:hover:not(.is-disabled):not(.is-on) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}
.tower-bulk-bar .tower-channel-pill-opt.is-on,
.tower-batch-bar .tower-channel-pill-opt.is-on {
  background: #ffffff;
  color: #181b1c;
  border-color: #ffffff;
  box-shadow: none;
}
/* Mobile: full-width pill rows are cleaner than inline */
@media (max-width: 600px) {
  .tower-channel-pill {
    width: 100%;
  }
  .tower-channel-pill-opt {
    flex: 1 1 auto;
    text-align: center;
    padding: 6px 8px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Pass 2 BD Researcher partner-pages — UI additions.
 *  (a) .kanban-card-from-partner: provenance chip on prospect cards surfaced
 *      via the weekly partner-pages auto-discover. Matches .kanban-card-auto's
 *      visual weight; uses a cool blue to differentiate from the warm gold of
 *      generic auto-pilot provenance.
 *  (b) #auto-partner-pages-inputs: read-only seed-list panel in the Auto-Pilot
 *      modal when mode=partner-pages.
 * ────────────────────────────────────────────────────────────────────────── */
.kanban-card-from-partner {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(53, 48, 182, 0.12);
  color: #3530b6;
}

.tower-auto-partner-pages-status {
  font-size: 13px;
  color: #475569;
  margin-top: 4px;
  margin-bottom: 8px;
}
.tower-auto-partner-pages-status a {
  color: #3530b6;
  text-decoration: none;
}
.tower-auto-partner-pages-status a:hover {
  text-decoration: underline;
}
.tower-auto-partner-pages-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.6);
}
.tower-auto-partner-pages-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  font-size: 13px;
}
.tower-auto-partner-pages-list li:last-child {
  border-bottom: 0;
}
.tower-auto-partner-pages-list li a {
  color: #0b1020;
  text-decoration: none;
  font-weight: 500;
}
.tower-auto-partner-pages-list li a:hover {
  text-decoration: underline;
}
.tower-auto-partner-pages-list li small {
  color: #798b95;
  font-size: 11px;
}