/* composer.css — MB21 c4 consolidation
 *
 * Email composer surface: .ec-* family (overlay, modal shell, intake form,
 * notes/topics editor, body editor, drafts panel, rich drafts, attachments,
 * compliance footer, send mode bar). Plus .ec-rich-drafts-* which lives
 * inside the composer.
 *
 * Receives migrated rules per the c4 classification rubric. The composer
 * is locked from prior sessions; only consolidation here, no structural
 * changes.
 */



/* === migrated from styles-additions-v32.css === */
/* =============================================================
 * 2. Composer header redesign (M1)
 *
 * Replaces the small "Compose email · OES Equipment · Houston, TX"
 * subtitle line with a bold identity block.
 * ============================================================= */
.ec-header {
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border-bottom: 1px solid var(--border-default, #e5e5e5);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 12px);
}

.ec-header-identity {
  flex: 1;
  min-width: 0;
}

/* Eyebrow text — "Compose email" or "Re-engaging" etc. */
.ec-header-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #525252);
  margin-bottom: 6px;
}

/* Identity row — main pill stack */
.ec-header-identity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Context line — account name + location below identity */
.ec-header-context {
  font-size: 12px;
  color: var(--text-secondary, #525252);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ec-header-context-sep {
  color: var(--text-tertiary, #a3a3a3);
}

.ec-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--text-secondary, #525252);
  flex-shrink: 0;
}

.ec-close:hover {
  background: var(--surface-subtle, #f8f8f7);
}

/* Batch badge restyled to fit new header */
.ec-modal[data-batch-mode="true"] .ec-header-eyebrow {
  color: #171717;
}

.ec-modal[data-batch-mode="true"] .ec-header-eyebrow::before {
  content: '⚡ ';
  color: var(--color-accent, #FFD500);
}

/* Migration aid: hide the old #ec-title if present */
.ec-header-identity #ec-title {
  display: none;
}

/* =============================================================
 * 7. Q2 — smart intake suggestion chips + tooltips
 * ============================================================= */
/* Suggested chip — pulses subtly to indicate AI suggestion */
.ec-chip[data-suggested="true"] {
  position: relative;
  border-color: var(--color-accent, #FFD500) !important;
  background: rgba(255, 213, 0, 0.15);
}

.ec-chip[data-suggested="true"]::after {
  content: '✨';
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 10px;
  background: var(--color-accent, #FFD500);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Suggestion "why" hint — small italic text below carousel */
.ec-suggestion-hint {
  font-size: 11px;
  font-style: italic;
  color: var(--text-secondary, #525252);
  margin-top: 6px;
  padding-left: var(--space-2, 8px);
  border-left: 2px solid var(--color-accent, #FFD500);
}

.ec-suggestion-hint-icon {
  margin-right: 4px;
  font-style: normal;
}

/* Further-actions row — appears below intake carousel when relevant */
.ec-further-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  background: rgba(255, 213, 0, 0.08);
  border-radius: 6px;
  border: 1px dashed var(--color-accent, #FFD500);
}

.ec-further-actions-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #525252);
  width: 100%;
  margin-bottom: 2px;
}

.ec-further-action-chip {
  background: var(--surface-card, #fff);
  border: 1px solid var(--text-primary, #171717);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary, #171717);
}

.ec-further-action-chip:hover {
  background: var(--color-accent, #FFD500);
}

/* =============================================================
 * 8. Q3 — type-your-own + Refine mode
 * ============================================================= */
/* "Refine with AI" button — shown when body has user content + no drafts yet */
.ec-refine-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-subtle, #f8f8f7);
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
  margin-top: var(--space-2, 8px);
}

.ec-refine-bar[data-visible="true"] {
  display: flex;
}

.ec-refine-bar-text {
  font-size: 12px;
  color: var(--text-secondary, #525252);
}

.ec-refine-bar-text strong {
  color: var(--text-primary, #171717);
}

.ec-refine-btn {
  background: var(--color-accent, #FFD500);
  color: #171717;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ec-refine-btn:hover {
  background: #fcc500;
}

.ec-refine-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* When drafts panel is in "refine" mode — different header */
.ec-drafts-panel[data-mode="refine"] .ec-drafts-header::before {
  content: '✨ Refinement suggestions · ';
  font-weight: 600;
}

/* === end migrated from styles-additions-v32.css === */


/* === migrated from styles-additions-v31.css === */
/* styles-additions-v31.css — MB11: Batch Tracker view + composer differentiation
 *
 * Loaded AFTER v30.css. Cache buster v=230.
 *
 * Sections:
 *   1. Batch composer visual differentiation (K7) — yellow accent + badge
 *   2. Batch Tracker view (J3) — list of contacts with status
 *   3. Per-row attachment button (J4)
 *   4. Review mode footer (J6)
 *   5. Active/paused batch cards on New Batch tab (J8)
 *   6. Hide the advance-prompt overlay (J3 replaces it)
 */
/* =============================================================
 * 1. Batch composer visual differentiation (K7)
 * ============================================================= */
/* Yellow accent strip at top of modal when in batch mode */
.ec-modal[data-batch-mode="true"]::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent, #FFD500);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index: 1;
}

/* Batch badge in modal header */
.ec-batch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #171717;
  color: var(--color-accent, #FFD500);
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 12px;
  vertical-align: middle;
}

.ec-batch-badge-icon {
  font-size: 13px;
  line-height: 1;
}

/* Hide batch badge in non-batch mode */
.ec-modal:not([data-batch-mode="true"]) .ec-batch-badge {
  display: none;
}

/* =============================================================
 * 2. Batch Tracker view (J3)
 *
 * Mounts at top of composer modal (above TO field) when batch mode is active.
 * Scrollable list of contacts with status per row.
 * ============================================================= */
.ec-batch-tracker {
  display: none;  /* hidden by default; JS shows when batch mode active */
  margin: 0 0 var(--space-3, 12px) 0;
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 8px;
  background: var(--surface-card, #fff);
  overflow: hidden;
}

.ec-modal[data-batch-mode="true"] .ec-batch-tracker {
  display: block;
}

.ec-batch-tracker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-subtle, #f8f8f7);
  border-bottom: 1px solid var(--border-default, #e5e5e5);
}

.ec-batch-tracker-title {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #525252);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ec-batch-tracker-stats {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
}

.ec-batch-tracker-stats .ec-stat-drafted { color: var(--color-pass, #16a34a); }

.ec-batch-tracker-stats .ec-stat-pending { color: var(--text-tertiary, #a3a3a3); }

/* Toggle button to expand/collapse */
.ec-batch-tracker-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary, #525252);
  padding: 2px 6px;
  border-radius: 3px;
}

.ec-batch-tracker-toggle:hover { background: var(--surface-card, #fff); }

.ec-batch-tracker[data-collapsed="true"] .ec-batch-tracker-list { display: none; }

.ec-batch-tracker[data-collapsed="false"] .ec-batch-tracker-list { display: block; }

.ec-batch-tracker[data-collapsed="true"] .ec-batch-tracker-toggle::after { content: '▾'; }

.ec-batch-tracker[data-collapsed="false"] .ec-batch-tracker-toggle::after { content: '▴'; }

/* List of contact rows */
.ec-batch-tracker-list {
  max-height: 240px;
  overflow-y: auto;
}

.ec-batch-tracker-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid var(--border-subtle, #f0f0f0);
  cursor: pointer;
  transition: background 120ms ease-out;
}

.ec-batch-tracker-row:last-child { border-bottom: none; }

.ec-batch-tracker-row:hover { background: var(--surface-subtle, #f8f8f7); }

.ec-batch-tracker-row.is-current {
  background: rgba(255, 213, 0, 0.12);
  border-left: 3px solid var(--color-accent, #FFD500);
  padding-left: calc(var(--space-3, 12px) - 3px);
}

.ec-batch-tracker-row.is-current .ec-batch-tracker-name {
  font-weight: 600;
}

/* Status dot column */
.ec-batch-tracker-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-default, #e5e5e5);
  border: 2px solid var(--surface-card, #fff);
  box-shadow: 0 0 0 1px var(--border-default, #e5e5e5);
  flex-shrink: 0;
}

.ec-batch-tracker-row[data-status="drafted"] .ec-batch-tracker-status-dot {
  background: var(--color-pass, #16a34a);
  box-shadow: 0 0 0 1px var(--color-pass, #16a34a);
}

.ec-batch-tracker-row[data-status="sent"] .ec-batch-tracker-status-dot {
  background: #171717;
  box-shadow: 0 0 0 1px #171717;
}

.ec-batch-tracker-row[data-status="skipped"] .ec-batch-tracker-status-dot {
  background: var(--text-tertiary, #a3a3a3);
  box-shadow: 0 0 0 1px var(--text-tertiary, #a3a3a3);
}

/* Name + status text column */
.ec-batch-tracker-name {
  font-size: 13px;
  color: var(--text-primary, #171717);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-batch-tracker-status-text {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, #a3a3a3);
  display: block;
  margin-top: 1px;
}

/* Attachment icon column (J4) */
.ec-batch-tracker-attach-btn {
  background: transparent;
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #525252);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ec-batch-tracker-attach-btn:hover {
  background: var(--surface-card, #fff);
  border-color: var(--text-primary, #171717);
}

.ec-batch-tracker-attach-btn.has-attachments {
  color: var(--color-pass, #16a34a);
  border-color: var(--color-pass, #16a34a);
}

.ec-batch-tracker-attach-count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
}

/* Per-row Open in Outlook button (Review mode, J6) */
.ec-batch-tracker-open-btn {
  background: var(--color-accent, #FFD500);
  color: #171717;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}

.ec-batch-tracker-open-btn:hover { background: #fcc500; }

.ec-batch-tracker-open-btn.is-sent {
  background: var(--surface-subtle, #f8f8f7);
  color: var(--text-tertiary, #a3a3a3);
  cursor: default;
}

.ec-batch-tracker-open-btn.is-sent::before { content: '✓ '; }

/* Show open-in-outlook button only in review mode */
.ec-batch-tracker[data-mode="draft"] .ec-batch-tracker-open-btn { display: none; }

.ec-batch-tracker[data-mode="review"] .ec-batch-tracker-attach-btn { display: none; }

/* =============================================================
 * 3. Tracker action footer (J3 + J6)
 * ============================================================= */
.ec-batch-tracker-footer {
  display: flex;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-subtle, #f8f8f7);
  border-top: 1px solid var(--border-default, #e5e5e5);
  justify-content: flex-end;
}

.ec-batch-tracker-footer button {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.ec-batch-tracker-pause {
  background: transparent;
  border: 1px solid var(--border-default, #e5e5e5);
  color: var(--text-primary, #171717);
}

.ec-batch-tracker-end {
  background: transparent;
  border: 1px solid var(--color-critical, #dc2626);
  color: var(--color-critical, #dc2626);
}

.ec-batch-tracker-review-mode,
.ec-batch-tracker-complete {
  background: var(--color-pass, #16a34a);
  color: #fff;
  border: none;
  padding: 4px 14px;
  font-weight: 600;
}

.ec-batch-tracker-review-mode:disabled,
.ec-batch-tracker-complete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================================================
 * 4. Active/paused batch cards on New Batch tab (J8)
 * ============================================================= */
.ec-active-batches-section {
  margin-bottom: var(--space-4, 16px);
}

.ec-active-batches-title {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #525252);
  margin-bottom: var(--space-2, 8px);
}

.ec-active-batch-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  background: var(--surface-card, #fff);
  border: 2px solid var(--color-accent, #FFD500);
  border-radius: 8px;
  margin-bottom: var(--space-2, 8px);
}

.ec-active-batch-card.is-paused {
  border-color: var(--border-default, #e5e5e5);
  background: var(--surface-subtle, #f8f8f7);
}

.ec-active-batch-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #171717);
}

.ec-active-batch-card-meta {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
  margin-top: 4px;
}

.ec-active-batch-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.ec-active-batch-resume,
.ec-active-batch-delete {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.ec-active-batch-resume {
  background: #171717;
  color: var(--color-accent, #FFD500);
  border: none;
  font-weight: 600;
}

.ec-active-batch-delete {
  background: transparent;
  border: 1px solid var(--border-default, #e5e5e5);
  color: var(--text-secondary, #525252);
}

/* =============================================================
 * 5. Hide the advance-prompt overlay (J3 replaces it)
 *
 * The pre-existing "Logged: email to X. Continue to next contact?" overlay
 * is now redundant — the Tracker shows progress + navigation. Hide it.
 * ============================================================= */
.ec-advance-overlay {
  display: none !important;
}

/* =============================================================
 * 6. History view: wired-action buttons (J8)
 * ============================================================= */
.ec-history-batch-actions {
  display: flex;
  gap: 6px;
  margin-top: var(--space-2, 8px);
}

.ec-history-batch-action {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--border-default, #e5e5e5);
  color: var(--text-primary, #171717);
}

.ec-history-batch-action:hover {
  background: var(--surface-card, #fff);
  border-color: var(--text-primary, #171717);
}

.ec-history-batch-action.is-delete {
  border-color: var(--color-critical, #dc2626);
  color: var(--color-critical, #dc2626);
}

.ec-history-batch-action.is-resume {
  background: #171717;
  color: var(--color-accent, #FFD500);
  border-color: #171717;
  font-weight: 600;
}

/* === end migrated from styles-additions-v31.css === */


/* === migrated from styles-additions-v30.css === */
/* styles-additions-v30.css — MB10.7: Single-column composer layout + un-hide
 * postgen intake + collapse drafts grid
 *
 * Loaded AFTER v29.css. Cache buster v=225.
 *
 * SUPERSEDES MB10.5 K4 (v28) and MB10.6 N2 (v29) layout attempts. Both targeted
 * the wrong selectors; the actual 2-column culprit was `.ec-layout-2col` from
 * v22.css plus the `.ec-state-postgen` hide rules from v19.css.
 *
 * Sections:
 *   1. Single-column layout for .ec-layout-2col (O1)
 *   2. Un-hide intake/notes/generate post-generation (O2)
 *   3. Drafts row: single column (O3)
 *   4. Cleanup: remove sticky/drawer behavior on right column
 */
/* =============================================================
 * 1. Single-column layout (O1)
 *
 * v22.css declared:
 *   @media (min-width: 1100px) {
 *     .ec-layout-2col { display: grid; grid-template-columns: 1.5fr 1fr; }
 *   }
 *
 * That grid is the root cause of the "empty left column" appearance the user
 * has flagged across MB10.5 + MB10.6 deploys. We override at ALL viewports
 * (including ≥1100px) to a single-column flex with column-reverse so the
 * RIGHT column (drafts + picked body + sliders) appears on TOP, and the LEFT
 * column (intake + notes + generate) appears BELOW. Matches the user's
 * "drafts at top, intake below" spec.
 * ============================================================= */
.ec-layout-2col {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: var(--space-3, 12px) !important;
  align-items: stretch !important;
}

/* Wins against v22.css's `@media (min-width: 1100px)` rules too — same
 * specificity but loaded later. */
@media (min-width: 1100px) {
  .ec-layout-2col {
    display: flex !important;
    flex-direction: column-reverse !important;
    grid-template-columns: none !important;  /* belt + suspenders for cascade */
    gap: var(--space-3, 12px) !important;
  }
}

/* =============================================================
 * 2. Column reset: no sticky, no drawer, full width (O1 cont.)
 * ============================================================= */
.ec-col-left,
.ec-col-right {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  /* Wipe v22.css's sticky positioning on the right column at ≥1100px */
  position: static !important;
  top: auto !important;
  align-self: stretch !important;
  /* Wipe v22.css's drawer transform/fixed at <1100px */
  transform: none !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  /* v22.css line 148: right column had a left border + left padding */
  border-left: none !important;
  padding-left: 0 !important;
}

/* Hide the drawer's manual close button (no drawer = no need to close it) */
.ec-drawer-close {
  display: none !important;
}

/* Hide the assist-toggle button at narrow viewports (was opening the drawer
 * which no longer exists) */
.ec-assist-toggle {
  display: none !important;
}

/* =============================================================
 * 3. Un-hide intake/notes/paste-toggle/generate in postgen (O2)
 *
 * v19.css hid these post-generate so the right column could take over.
 * With single-column + column-reverse, the intake should remain accessible
 * BELOW the drafts so the user can tweak goal/tone/product and re-generate
 * without losing context.
 *
 * Explicit display values (not `revert`) because each element has its own
 * intended display from v19/v20:
 *   .ec-intake-fieldset   → flex (column)
 *   .ec-notes-section     → block
 *   .ec-paste-toggle-row  → flex (centered)
 *   .ec-generate-row      → flex (centered)
 * ============================================================= */
.ec-modal.ec-state-postgen .ec-intake-fieldset {
  display: flex !important;
}

.ec-modal.ec-state-postgen .ec-notes-section {
  display: block !important;
}

.ec-modal.ec-state-postgen .ec-paste-toggle-row {
  display: flex !important;
}

.ec-modal.ec-state-postgen .ec-generate-row {
  display: flex !important;
}

/* When postgen, compact the intake visually so it doesn't dominate — drafts
 * are the focus, intake is secondary. */
.ec-modal.ec-state-postgen .ec-pregen-section {
  background: var(--surface-subtle, #f8f8f7);
  border-radius: 8px;
  padding: var(--space-3, 12px);
  margin-top: var(--space-3, 12px);
}

.ec-modal.ec-state-postgen .ec-pregen-section .ec-legend {
  font-size: 12px;
  color: var(--text-tertiary, #a3a3a3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =============================================================
 * 4. Drafts row: single column (O3)
 *
 * v19.css line 688-691:
 *   .ec-drafts-row { display: grid; grid-template-columns: 1fr 1fr; }
 *
 * MB10.5 K2 changed rendering so renderDrafts() writes only the SELECTED
 * draft into this container. With a 2-col grid and one item, the second
 * cell goes empty. Single-column block lets the rendered draft fill the
 * available width.
 * ============================================================= */
.ec-drafts-row {
  display: block !important;
  grid-template-columns: 1fr !important;  /* belt + suspenders */
  gap: 0 !important;
}

/* =============================================================
 * 5. Body editor in picked-body-row: full width + some prominence
 * ============================================================= */
.ec-picked-body-row {
  width: 100%;
  max-width: 100%;
}

.ec-picked-body-row .ec-body-row {
  /* Body editor is prime real estate — frame it */
  border: 2px solid var(--color-accent, #FFD500);
  border-radius: 8px;
  padding: var(--space-3, 12px);
  margin: var(--space-3, 12px) 0;
}

.ec-picked-body-row .ec-textarea {
  /* Make the body textarea taller — was 12 rows, give it room */
  min-height: 200px;
}

/* === end migrated from styles-additions-v30.css === */


/* === migrated from styles-additions-v29.css === */
/* styles-additions-v29.css — MB10.6: Un-hide intake in batch mode +
 * actual layout fix + batch nav transition signal
 *
 * Loaded AFTER v28.css. Cache buster v=220.
 *
 * Overrides v28.css's overly-aggressive batch-mode hide rules.
 *
 * Sections:
 *   1. Un-hide intake/carousel in batch mode (N1)
 *   2. Force single-column form layout (N2 — kills the whitespace)
 *   3. Header subtitle transition signal on batch nav (N3)
 */
/* =============================================================
 * 1. Un-hide intake/carousel in batch mode (N1)
 * ============================================================= */
/* v28.css hid the carousel under [data-batch-mode="true"] on the assumption
 * that batch context pre-set the goal/tone/product. That assumption is wrong
 * — the goal validation still fires and the user has no UI to pick one.
 *
 * Un-hide everything. Per-contact intake still needed in batch mode. */
.ec-modal[data-batch-mode="true"] .ec-intake-carousel,
.ec-modal[data-batch-mode="true"] .ec-intake-slides,
.ec-modal[data-batch-mode="true"] [data-intake-carousel],
.ec-modal[data-batch-mode="true"] .ec-intake {
  display: block !important;
}

/* Also un-hide anything that v27.css may have hidden via data-drafts-present */
.ec-modal[data-batch-mode="true"][data-drafts-present="true"] .ec-intake,
.ec-modal[data-batch-mode="true"][data-drafts-present="true"] .ec-intake-carousel,
.ec-modal[data-batch-mode="true"][data-drafts-present="true"] [data-intake-carousel] {
  display: block !important;
}

/* =============================================================
 * 2. Force single-column form layout (N2)
 * ============================================================= */
/* v28.css's column-collapse rules targeted speculative class names
 * (.ec-col-left, .ec-col-right, etc.) that didn't match the actual DOM.
 * This pass uses a more aggressive approach: force the form into a single
 * column in batch mode and let all immediate children take 100% width.
 *
 * This intentionally uses `*` selector for children — drafts, if present,
 * will render below the intake/body editor (matching the original
 * single-screen spec).
 */
.ec-modal[data-batch-mode="true"] .ec-form,
.ec-modal[data-batch-mode="true"] .ec-modal-body,
.ec-modal[data-batch-mode="true"] [data-modal-body] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ec-modal[data-batch-mode="true"] .ec-form > *,
.ec-modal[data-batch-mode="true"] .ec-modal-body > *,
.ec-modal[data-batch-mode="true"] [data-modal-body] > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

/* For non-batch mode too — apply only when drafts are NOT yet generated.
 * Once drafts arrive, the rich view sits below the intake (still single
 * column). The old 2-column split is gone everywhere. */
.ec-modal:not([data-drafts-present="true"]) .ec-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Specifically: hunt down any grid or flex-row containers inside the form
 * that may be causing the 2-column split, and override them. */
.ec-modal[data-batch-mode="true"] .ec-form [style*="grid-template-columns"],
.ec-modal[data-batch-mode="true"] .ec-form [style*="flex-direction: row"],
.ec-modal[data-batch-mode="true"] .ec-form .ec-grid,
.ec-modal[data-batch-mode="true"] .ec-form .ec-row-flex,
.ec-modal[data-batch-mode="true"] .ec-form .ec-two-col {
  display: block !important;
  grid-template-columns: 1fr !important;
}

/* Center the form content with a max-width for readability on wide modals */
.ec-modal[data-batch-mode="true"] .ec-form {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Same for non-batch — but only when no drafts to render alongside */
.ec-modal:not([data-batch-mode="true"]):not([data-drafts-present="true"]) .ec-form {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================
 * 3. Header subtitle transition signal (N3)
 * ============================================================= */
/* When the user clicks Skip/Next in batch nav, the subtitle (account name +
 * location) changes instantly with no visual signal. Brief yellow pulse
 * highlights the change. JS adds the .is-changed class for 400ms. */
.ec-modal-subtitle,
[data-account-subtitle] {
  transition: background 200ms ease-out, padding 200ms ease-out;
  display: inline-block;
  padding: 2px 4px;
  border-radius: 3px;
}

.ec-modal-subtitle.is-changed,
[data-account-subtitle].is-changed {
  background: rgba(255, 213, 0, 0.35);  /* Formon yellow @ 35% */
  padding: 2px 8px;
  animation: ec-subtitle-flash 600ms ease-out;
}

@keyframes ec-subtitle-flash {
  0% {
    background: rgba(255, 213, 0, 0.55);
    transform: translateX(-4px);
  }
  20% {
    transform: translateX(0);
  }
  100% {
    background: rgba(255, 213, 0, 0);
    padding: 2px 4px;
  }
}

/* Also flash the BATCH 1 OF N progress chunk to reinforce the change */
.ec-batch-progress,
[data-batch-progress] {
  transition: background 200ms ease-out;
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 3px;
}

.ec-batch-progress.is-changed,
[data-batch-progress].is-changed {
  background: rgba(255, 213, 0, 0.35);
  animation: ec-subtitle-flash 600ms ease-out;
}

/* === end migrated from styles-additions-v29.css === */


/* === migrated from styles-additions-v28.css === */
/* styles-additions-v28.css — MB10.5: Tab strip atop the rich draft view +
 * batch-mode layout fixes
 *
 * Loaded AFTER v27.css. Cache buster v=215.
 *
 * Sections:
 *   1. Neutralize MB10 H1.2's minimalist drafts inline (force-hide)
 *   2. Tab strip atop the RICH draft view (color-coded + WINNER badge)
 *   3. Tab minimize state (collapse rich preview, keep tabs)
 *   4. Batch-mode layout: hide carousel, drafts fill whitespace
 *   5. Body source indicator (from MB10 H1.5, kept)
 */
/* =============================================================
 * 1. Force-hide MB10's new (minimalist) inline drafts
 * ============================================================= */
/* The MB10 H1.2 inline drafts container was the wrong direction.
 * Hide it entirely in case K1 missed any path that still inserts it. */
.ec-drafts-inline,
.ec-modal .ec-drafts-inline {
  display: none !important;
}

/* =============================================================
 * 2. Tab strip atop the rich draft view
 * ============================================================= */
/* The rich draft view (MB5/6-era) renders the colored-segment annotations
 * + tone heatmap + length slider. We add a tab strip at the top that lets
 * the user switch between Draft A / Draft B, with a WINNER badge on the
 * highest-scored one.
 *
 * The rich view is wrapped in a container with id="ec-rich-drafts" (added
 * by K3). The tab strip is rendered directly above it. */
.ec-rich-drafts-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--space-3, 12px) 0;
}

.ec-rich-drafts-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-default, #e5e5e5);
  background: var(--surface-card, #fff);
  margin-bottom: 0;
}

.ec-rich-drafts-tab {
  flex: 1 1 0;
  min-width: 140px;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-subtle, #f8f8f7);
  border: none;
  border-right: 1px solid var(--border-default, #e5e5e5);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  position: relative;
  transition: background 120ms ease-out;
}

.ec-rich-drafts-tab:last-child {
  border-right: none;
}

.ec-rich-drafts-tab:hover {
  background: var(--surface-card, #fff);
}

.ec-rich-drafts-tab-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #171717);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.ec-rich-drafts-tab-score {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary, #525252);
}

.ec-rich-drafts-tab-score-pass { color: var(--color-pass, #16a34a); }

.ec-rich-drafts-tab-score-warn { color: var(--color-warn, #d97706); }

.ec-rich-drafts-tab-score-fail { color: var(--color-critical, #dc2626); }

/* Selected tab — green highlight per the original spec */
.ec-rich-drafts-tab.is-selected {
  background: var(--surface-card, #fff);
  box-shadow: inset 0 -3px 0 0 var(--color-pass, #16a34a);
}

.ec-rich-drafts-tab.is-selected .ec-rich-drafts-tab-label {
  color: var(--color-pass, #16a34a);
}

/* WINNER badge — green pill on highest-scored draft */
.ec-rich-drafts-winner-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  background: var(--color-pass, #16a34a);
  color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* Minimize/expand toggle (right side of tab strip) */
.ec-rich-drafts-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  background: var(--surface-subtle, #f8f8f7);
  border: none;
  border-left: 1px solid var(--border-default, #e5e5e5);
  cursor: pointer;
  font-size: 16px;
  color: var(--text-secondary, #525252);
  font-family: inherit;
  transition: background 120ms ease-out;
}

.ec-rich-drafts-toggle:hover { background: var(--surface-card, #fff); }

.ec-rich-drafts-wrapper[data-minimized="true"] .ec-rich-drafts-toggle::before {
  content: '▾';
}

.ec-rich-drafts-wrapper[data-minimized="false"] .ec-rich-drafts-toggle::before {
  content: '▴';
}

/* =============================================================
 * 3. Tab minimize state — collapse the rich preview
 * ============================================================= */
/* When minimized, only the tab strip is visible. The rich view body
 * (subject, body, annotations, rubric, etc.) is hidden. */
.ec-rich-drafts-wrapper[data-minimized="true"] .ec-rich-drafts-body {
  display: none;
}

.ec-rich-drafts-wrapper[data-minimized="false"] .ec-rich-drafts-body {
  display: block;
}

/* Container for the existing rich draft view (where MB5/6's render lives) */
.ec-rich-drafts-body {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default, #e5e5e5);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: var(--space-4, 16px);
}

/* =============================================================
 * 4. Batch-mode layout: hide carousel, drafts fill space
 * ============================================================= */
/* The batch composer doesn't need the intake carousel — the batch context
 * already chose goal/tone/product. Hide the carousel to free up space for
 * the rich drafts view. */
.ec-modal[data-batch-mode="true"] .ec-intake-carousel,
.ec-modal[data-batch-mode="true"] .ec-intake-slides,
.ec-modal[data-batch-mode="true"] [data-intake-carousel] {
  display: none;
}

/* Keep the NOTES/TOPICS textarea — useful in batch mode for per-contact tweaks */
.ec-modal[data-batch-mode="true"] .ec-notes-topics,
.ec-modal[data-batch-mode="true"] [data-notes-topics] {
  display: block;
}

/* If the composer uses a 2-column layout (left intake, right drafts),
 * collapse to single column in batch mode so drafts fill width. */
.ec-modal[data-batch-mode="true"] .ec-form {
  display: flex;
  flex-direction: column;
}

.ec-modal[data-batch-mode="true"] .ec-form > .ec-col-left,
.ec-modal[data-batch-mode="true"] .ec-form > .ec-col-right,
.ec-modal[data-batch-mode="true"] .ec-form > .ec-left-column,
.ec-modal[data-batch-mode="true"] .ec-form > .ec-right-column {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}

/* If the rich drafts view was constrained to a right-column width, free it */
.ec-modal[data-batch-mode="true"] .ec-rich-drafts-wrapper {
  width: 100%;
  max-width: 100%;
}

/* =============================================================
 * 5. Body source indicator (kept from MB10 H1.5)
 * ============================================================= */
/* This styling stays from v27 but with slight refinement — indicator is
 * also visible in batch mode now. */
.ec-body-source-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(22, 163, 74, 0.1);
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--color-pass, #16a34a);
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* === end migrated from styles-additions-v28.css === */


/* === migrated from styles-additions-v27.css === */
/* styles-additions-v27.css — MB10: Single-screen drafts redesign
 *
 * Loaded AFTER v26.css. Cache buster v=210.
 *
 * Supersedes MB9 G6's 3-stage state machine. The composer is now a single
 * screen where drafts, body editor, and intake controls all coexist.
 *
 * Sections:
 *   1. Override v26.css stage visibility (no more stages)
 *   2. Inline drafts section (between TO field and body editor)
 *   3. Tab expand/minimize states
 *   4. Selected-tab green highlight
 *   5. Auto-fill body editor
 *   6. Intake controls compact state
 */
/* =============================================================
 * 1. Override v26.css stage visibility — drafts and intake coexist
 * ============================================================= */
/* Stage-based visibility rules from v26 are obsolete. Show all sections
 * unconditionally; JS controls expand/minimize. */
.ec-modal[data-stage="intake"] .ec-form > .ec-intake,
.ec-modal[data-stage="intake"] .ec-form > .ec-body-editor-wrap,
.ec-modal[data-stage="intake"] .ec-form > .ec-attachments,
.ec-modal[data-stage="drafts"] .ec-form > .ec-intake,
.ec-modal[data-stage="drafts"] .ec-form > .ec-body-editor-wrap,
.ec-modal[data-stage="drafts"] .ec-form > .ec-attachments,
.ec-modal[data-stage="edit"]   .ec-form > .ec-intake,
.ec-modal[data-stage="edit"]   .ec-form > .ec-body-editor-wrap,
.ec-modal[data-stage="edit"]   .ec-form > .ec-attachments {
  display: block;
}

/* Drafts view is now inline, no longer full-screen replacement */
.ec-modal[data-stage="intake"] .ec-drafts-inline,
.ec-modal[data-stage="drafts"] .ec-drafts-inline,
.ec-modal[data-stage="edit"]   .ec-drafts-inline {
  display: block;
}

/* Hide the v26 full-screen drafts view if it still exists */
.ec-modal .ec-drafts-view {
  display: none !important;
}

/* Send bar always visible (was hidden in drafts stage by v26) */
.ec-modal[data-stage="drafts"] .ec-send-bar {
  display: flex;
}

/* =============================================================
 * 2. Inline drafts section
 * ============================================================= */
/* Selected tab — green highlight per Juston's spec */
.ec-drafts-tab.is-selected {
  background: rgba(22, 163, 74, 0.06);
  box-shadow: inset 0 -3px 0 0 var(--color-pass, #16a34a);
}

.ec-drafts-tab.is-selected .ec-drafts-tab-label {
  color: var(--color-pass, #16a34a);
}

/* =============================================================
 * 3. Tab expand/minimize states
 * ============================================================= */
.ec-drafts-inline[data-minimized="false"] .ec-drafts-body {
  display: block;
}

.ec-drafts-inline[data-minimized="true"] .ec-drafts-body {
  display: none;
}

.ec-drafts-inline[data-minimized="true"] .ec-drafts-toggle::before {
  content: '▾';
}

.ec-drafts-inline[data-minimized="false"] .ec-drafts-toggle::before {
  content: '▴';
}

/* =============================================================
 * 4. Intake compact state (after drafts generated)
 * ============================================================= */
/* When drafts have been generated at least once, the intake controls
 * shrink to a compact accordion-style section so the focus shifts to
 * the body editor + drafts. */
.ec-modal[data-drafts-present="true"] .ec-intake {
  /* Compact mode — hide carousel slide indicator, smaller padding */
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-subtle, #f8f8f7);
  border-radius: 6px;
  margin-bottom: var(--space-3, 12px);
}

.ec-modal[data-drafts-present="true"] .ec-intake-slide-indicator {
  /* The • • • • dots */
  display: none;
}

/* =============================================================
 * 5. Body editor — prime real estate
 * ============================================================= */
.ec-modal[data-drafts-present="true"] .ec-body-editor-wrap {
  /* Body editor gets prominence after drafts are generated */
  border: 2px solid var(--color-accent, #FFD500);
  border-radius: 8px;
  padding: var(--space-3, 12px);
  margin: var(--space-3, 12px) 0;
}

.ec-modal[data-drafts-present="true"] .ec-body-editor-wrap label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #525252);
  display: block;
  margin-bottom: 4px;
}

/* === end migrated from styles-additions-v27.css === */


/* === migrated from styles-additions-v25.css === */
/* =============================================================
 * 4. Edit-contact button in composer (F3)
 * ============================================================= */
.ec-edit-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-secondary, #525252);
  margin-left: var(--space-2, 8px);
}

.ec-edit-contact-btn:hover {
  background: var(--surface-subtle, #f8f8f7);
  color: var(--text-primary, #171717);
}

/* When placed next to the recipient picker, vertical-align with the select */
.ec-recipient-row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

/* =============================================================
 * 5. Composer no-email state — layout fix (F2)
 * ============================================================= */
/* Previous design: when no email on file, the form short-circuited and left
 * the left column empty below the warning. Fix: keep the warning as a banner
 * at the top of the form, and let the carousel + body editor render below it
 * normally. Send / Open-in-Outlook buttons get disabled (visual gray) while
 * Save Draft stays enabled. */
.ec-no-email-banner {
  /* The pink/red warning panel, but as a banner not a replacement */
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 6px;
  margin-bottom: var(--space-3, 12px);
}

.ec-no-email-banner-title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-critical, #dc2626);
}

.ec-no-email-banner-hint {
  font-size: 12px;
  color: var(--text-secondary, #525252);
  line-height: 1.4;
}

.ec-no-email-banner-actions {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  margin-top: var(--space-1, 4px);
}

.ec-no-email-add-btn,
.ec-no-email-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
}

.ec-no-email-add-btn {
  background: var(--color-critical, #dc2626);
  color: #fff;
  border: none;
}

.ec-no-email-add-btn:hover { background: #b91c1c; }

.ec-no-email-edit-btn {
  background: transparent;
  color: var(--text-primary, #171717);
  border: 1px solid var(--border-default, #e5e5e5);
}

.ec-no-email-edit-btn:hover { background: var(--surface-subtle, #f8f8f7); }

/* Disabled send buttons in no-email state */
.ec-send-bar button:disabled,
button.ec-send-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* === migrated from styles-additions-v24.css === */
/* =============================================================
 * 7. Composer batch-mode header
 * ============================================================= */
.ec-batch-header {
  /* Renders only when BatchState.isActive() */
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-3, 12px);
  padding-bottom: var(--space-3, 12px);
  border-bottom: 1px dashed var(--border-default, #e5e5e5);
}

.ec-batch-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}

.ec-batch-position {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #525252);
}

.ec-batch-nav {
  display: flex;
  gap: var(--space-1, 4px);
}

.ec-batch-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-primary, #171717);
}

.ec-batch-nav-btn:hover {
  background: var(--surface-subtle, #f8f8f7);
  border-color: var(--border-strong, #d4d4d4);
}

.ec-batch-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ec-batch-skip-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 8px 12px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary, #525252);
  font-size: 13px;
  font-family: inherit;
}

.ec-batch-skip-btn:hover { background: var(--surface-subtle, #f8f8f7); }

.ec-batch-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.ec-batch-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border-default, #e5e5e5);
  border-radius: 2px;
  overflow: hidden;
}

.ec-batch-progress-fill {
  height: 100%;
  background: var(--color-accent, #FFD500);
  transition: width 200ms ease-out;
}

.ec-batch-progress-text {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
  white-space: nowrap;
}

/* =============================================================
 * 8. Advance prompt overlay (after activity logged)
 * ============================================================= */
.ec-advance-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5, 24px);
  animation: ec-advance-fade-in 180ms ease-out;
}

@keyframes ec-advance-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ec-advance-card {
  max-width: 480px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}

.ec-advance-icon {
  font-size: 32px;
  color: var(--color-pass, #16a34a);
}

.ec-advance-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #171717);
}

.ec-advance-subtext {
  font-size: 14px;
  color: var(--text-secondary, #525252);
}

.ec-advance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  justify-content: center;
}

/* =============================================================
 * 10. Composer cleanups — drafts vertical stack
 * ============================================================= */
/* MB8 D2: drafts panel stacks vertically in the right column
 * (previously: side-by-side overflowed at narrow right-column widths) */
.ec-drafts-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.ec-draft-card {
  width: 100%;
  min-width: 0;
}

/* When the right column is the drawer (narrow viewport, auto-opened),
 * give drafts room to breathe. */
@media (max-width: 1099px) {
  .ec-col-right .ec-draft-card {
    max-width: 100%;
  }
}

/* =============================================================
 * 11. Batch attachment picker (at batch start + per-contact)
 * ============================================================= */
/* Per-contact attachment indicator in composer footer */
.ec-attach-list .ec-attach-chip.is-from-batch-default {
  border: 1px dashed var(--color-accent, #FFD500);
}

.ec-attach-list .ec-attach-chip.is-from-batch-default::before {
  content: 'BATCH · ';
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  color: var(--color-accent, #FFD500);
  margin-right: 4px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* === migrated from styles-additions-v23.css === */
/* styles-additions-v23.css — MB7.5: composer drawer + header tab hotfix
 *
 * Loaded AFTER v22.css. This is a small patch layer addressing three issues
 * found during iPad testing on the deployed MB7:
 *
 *   1. Drawer-over-modal layout broken at narrow viewports (<1100px)
 *      → drawer now takes the full viewport so it visually replaces the
 *        modal while open, with backdrop dimming everything underneath
 *   2. Header nav tabs (Dashboard / Companies / Contacts / Activities /
 *      Email Outreach) overflow on narrow viewports
 *      → flex-wrap kicks in below 900px so tabs wrap to a second row
 *   3. The right column wrap from MB7 mod 04 was too broad — that's fixed
 *      structurally in email-composer-modal.js (no CSS here for it)
 *
 * Cache buster: v=180
 */
/* =============================================================
 * 1. Composer drawer — full-viewport at narrow widths
 * =============================================================
 *
 * MB7's v22.css set the drawer to min(94vw, 420px). On a 1024px viewport,
 * that meant 420px of drawer overlapping a 960px-wide centered modal — they
 * overlapped by ~388px and the modal content got squeezed.
 *
 * Fix: at narrow viewports, the drawer takes the FULL viewport when open.
 * The backdrop continues to dim everything underneath. Effectively the
 * drawer replaces the modal temporarily — tap close to return to the form.
 *
 * Above 1100px, the right column is permanently in-line (two-column layout).
 * Drawer behavior doesn't apply.
 */
@media (max-width: 1099px) {
  .ec-col-right {
    /* Override v22.css min(94vw, 420px) */
    width: 100vw;
    max-width: 100vw;
    /* Preserve all other position: fixed properties from v22.css */
  }

  /* Backdrop fully opaque (almost) so the modal underneath doesn't bleed
   * through and create the "split panel" illusion */
  .ec-drawer-backdrop.is-open {
    background: rgba(0, 0, 0, 0.55);
  }

  /* Drawer's own close button stays anchored top-right */
  .ec-drawer-close {
    /* v22.css already styles this; just ensure it's tappable */
    z-index: 1;
  }
}

/* =============================================================
 * 3. Composer footer-area styling for the relocated sections
 * =============================================================
 *
 * After MB7.5 mod 01, attachments + compliance footer + error + planned
 * action mount sit BELOW the two-column area in normal form flow. At wide
 * viewports they span the full modal width (above the send bar). At narrow
 * viewports they sit naturally after the form.
 *
 * Most styling carries over from v15/v21/v22. This just ensures the spacing
 * between the column area and the footer area looks intentional.
 */
.ec-form-footer-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--border-default, #e5e5e5);
}

@media (min-width: 1100px) {
  .ec-form-footer-area {
    margin-top: var(--space-3, 12px);
  }
}

/* === end migrated from styles-additions-v23.css === */


/* === migrated from styles-additions-v22.css === */
/* styles-additions-v22.css — MB7: composer redesign + iPad pass
 *
 * Loaded AFTER all prior v* stylesheets. Latest layer wins per the cascade.
 *
 * Sections:
 *   1. Composer modal sizing + outer shell
 *   2. Two-column layout (≥1100px)
 *   3. Single-column collapsed (<1100px) + assist drawer
 *   4. Form rows + inputs (density pass)
 *   5. Buttons (touch targets ≥44px)
 *   6. Chips (channel/outcome pickers)
 *   7. Right column sections (AI assist, drafts, rubric, heatmap)
 *   8. iPad-specific behavior
 *   9. Color tightening — yellow accent, neutral everything else
 *
 * Loaded by index.html as the final cascade layer.
 */
/* =============================================================
 * 1. Composer modal sizing
 * ============================================================= */
.ec-overlay {
  /* Existing positioning preserved by base styles. */
  padding: var(--space-4, 16px);
}

.ec-modal {
  /* Wider than the legacy ~600px to make room for the right column. */
  width: min(94vw, 960px);
  max-height: 88vh;
  overflow: auto;
  padding: var(--space-5, 24px);
  border-radius: 10px;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default, #e5e5e5);
  /* Replace heavy box-shadow with a flat industrial look */
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* Header — sticky to the modal top, sits above the layout columns */
.ec-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding-bottom: var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
  border-bottom: 1px solid var(--border-default, #e5e5e5);
}

.ec-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary, #171717);
  letter-spacing: -0.01em;
}

.ec-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-tertiary, #a3a3a3);
}

/* Header controls (assist toggle + close) — right-aligned cluster */
.ec-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}

/* The "Assist" toggle button shown only at <1100px */
.ec-assist-toggle {
  display: none;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 8px 12px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary, #171717);
}

.ec-assist-toggle:hover,
.ec-assist-toggle:active {
  background: var(--surface-subtle, #f8f8f7);
}

.ec-close {
  /* Touch target ≥44px via padding around the 20px icon */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary, #525252);
}

.ec-close:hover,
.ec-close:active {
  background: var(--surface-subtle, #f8f8f7);
  color: var(--text-primary, #171717);
}

/* =============================================================
 * 2. Two-column layout (≥1100px viewport)
 * ============================================================= */
.ec-layout-2col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}

@media (min-width: 1100px) {
  .ec-layout-2col {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-5, 24px);
    align-items: flex-start;
  }

  .ec-col-left {
    min-width: 0; /* lets the body textarea reflow inside the grid cell */
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
  }

  .ec-col-right {
    /* Right column is "sticky" inside the modal — stays visible as left column scrolls */
    position: sticky;
    top: 0;
    align-self: flex-start;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    padding-left: var(--space-4, 16px);
    border-left: 1px solid var(--border-default, #e5e5e5);
  }
}

/* =============================================================
 * 3. Single-column collapsed + assist drawer (<1100px)
 * ============================================================= */
@media (max-width: 1099px) {
  .ec-assist-toggle {
    display: inline-flex;
  }

  /* Left column always renders, full width */
  .ec-col-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
  }

  /* Right column hides by default; slides in as a drawer when toggled */
  .ec-col-right {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(94vw, 420px);
    z-index: 10001;
    background: var(--surface-card, #fff);
    border-left: 1px solid var(--border-default, #e5e5e5);
    padding: var(--space-5, 24px);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 240ms ease-out;
    box-shadow: -4px 0 24px rgba(0,0,0,0.08);
  }

  .ec-col-right.is-open {
    transform: translateX(0);
  }

  /* Drawer's own close button (top-right inside drawer) */
  .ec-drawer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary, #525252);
  }
  .ec-drawer-close:hover {
    background: var(--surface-subtle, #f8f8f7);
  }
}

/* The drawer-close button is only meaningful at narrow viewports; hide on wide */
@media (min-width: 1100px) {
  .ec-drawer-close { display: none; }
}

/* =============================================================
 * 4. Form rows + inputs (density pass)
 * ============================================================= */
.ec-form {
  /* The grid-based two-column layout lives directly inside the form */
  display: contents;
}

.ec-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.ec-label {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #a3a3a3);
}

.ec-input,
.ec-textarea,
select.ec-select,
select#ec-to,
select#ec-send-mode {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-card, #fff);
  color: var(--text-primary, #171717);
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ec-input:hover,
.ec-textarea:hover,
select.ec-select:hover {
  border-color: var(--border-strong, #d4d4d4);
}

.ec-input:focus,
.ec-textarea:focus,
select.ec-select:focus,
select#ec-to:focus,
select#ec-send-mode:focus {
  border-color: var(--color-accent, #FFD500);
  box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.25);
}

.ec-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Inline label for send mode (sits next to the select on the footer toolbar) */
.ec-label-inline {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #a3a3a3);
  margin-right: var(--space-2, 8px);
}

/* Word count microcopy */
.ec-word-count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
}

.ec-body-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* Section dividers — used between right-column sections */
.ec-col-right > .ec-section {
  padding-bottom: var(--space-3, 12px);
  border-bottom: 1px dashed var(--border-default, #e5e5e5);
}

.ec-col-right > .ec-section:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.ec-btn-ai-label {
  /* No special styling — inherits from button */
}

/* =============================================================
 * 6. Chips (channel pickers, outcome pickers, etc.)
 * ============================================================= */
.ec-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.ec-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  /* Touch target: min-height 44px, padding compensates for the smaller visible footprint */
  min-height: 44px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-primary, #171717);
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.ec-chip:hover {
  background: var(--surface-subtle, #f8f8f7);
  border-color: var(--border-strong, #d4d4d4);
}

.ec-chip.is-active {
  background: var(--color-accent, #FFD500);
  border-color: var(--color-accent, #FFD500);
  color: #000;
  font-weight: 500;
}

/* =============================================================
 * 7. Right column sections (AI assist, drafts, rubric, heatmap)
 * ============================================================= */
/* =============================================================
 * 8. iPad-specific behavior
 * ============================================================= */
/* On iPad in landscape orientation, lock-in two-column layout
 * even though 1194x834 < some desktop sizes. The 1100px breakpoint above
 * handles this — iPad Pro 11" landscape is 1194px wide, just over. */
/* Disable text selection on chip buttons / icon buttons — they're tap targets, not text */
.ec-chip,
.ec-close,
.ec-drawer-close,
.ec-assist-toggle {
  -webkit-user-select: none;
  user-select: none;
}

/* Prevent the iOS "tap highlight" rectangle on touch */
.ec-modal button,
.ec-modal a,
.ec-modal label {
  -webkit-tap-highlight-color: transparent;
}

/* On iPad, when an input is focused, the modal scrolls the input into view.
 * The JS hook handles the scroll-into-view; here we just ensure the modal
 * scrolls smoothly. */
.ec-modal {
  scroll-behavior: smooth;
}

/* =============================================================
 * 9. Color tightening — strip non-accent colors from the composer surface
 * ============================================================= */
/* Override any stray blue/green/purple buttons that pre-existed in earlier
 * v* stylesheet layers, so the composer surface uses only the new palette.
 * Specificity: .ec-modal scope is enough to win against generic .btn-* rules. */
.ec-modal .btn-blue,
.ec-modal .btn-info { background: var(--surface-card, #fff); color: var(--text-primary, #171717); border: 1px solid var(--border-default, #e5e5e5); }

.ec-modal .btn-green,
.ec-modal .btn-success { background: var(--color-pass, #16a34a); color: #fff; border: 1px solid var(--color-pass, #16a34a); }

/* Compliance footer accordion — make it visually quiet */
.ec-footer-preview {
  font-size: 12px;
  color: var(--text-tertiary, #a3a3a3);
  background: var(--surface-subtle, #f8f8f7);
  border: 1px solid var(--border-default, #e5e5e5);
  border-radius: 6px;
  padding: 8px 12px;
}

.ec-footer-preview summary {
  cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ec-footer-text {
  margin-top: 8px;
  white-space: pre-wrap;
  font-size: 11px;
  color: var(--text-secondary, #525252);
}

.ec-footer-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
}

.ec-footer-note code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  background: var(--surface-card, #fff);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border-default, #e5e5e5);
}

/* Error message — kept rare, kept visible */
.ec-error {
  padding: 10px 12px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 6px;
  color: var(--color-critical, #dc2626);
  font-size: 13px;
}

/* Attachments list — chips with paperclip icons */
.ec-attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  min-height: 36px;
  align-items: center;
}

.ec-attach-empty {
  font-size: 12px;
  color: var(--text-tertiary, #a3a3a3);
  font-style: italic;
}

/* Subject suggestions — appear under the subject input when available */
.ec-subject-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-top: var(--space-1, 4px);
}

/* Send bar — sits at the bottom of the left column */
.ec-send-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-default, #e5e5e5);
  margin-top: var(--space-2, 8px);
}

.ec-send-mode {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.ec-actions {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

/* Backdrop for the assist drawer at narrow viewports */
.ec-drawer-backdrop {
  display: none;
}

@media (max-width: 1099px) {
  .ec-drawer-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: var(--z-modal-backdrop, 1000);
    animation: ec-drawer-fade 240ms ease-out;
  }
  @keyframes ec-drawer-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* === end migrated from styles-additions-v22.css === */


/* === migrated from styles-additions-v20.css === */
/* styles-additions-v20.css — MB5: Composer evidence + slide intake + cadence groundwork
 *
 * Adds:
 *   - AI-badge hidden fix (mod 02)
 *   - Paste-mode sliders+reroll hide (mod 03)
 *   - Slide-carousel intake (mods 05, 09)
 *   - AI-default pill ring (mod 08)
 *   - Sequence-role hint row (mod 17)
 *   - Send-time recommender badge (mod 18)
 *   - Cadence tip card (mod 20)
 *   - Tone heatmap overlay (mod 15)
 *
 * Loaded after v19.css so anything here wins on equal specificity.
 */
/* ============================================================
 * Mod 02 — AI-suggested badge respects [hidden] attribute
 * ============================================================
 * v19.css declares .ec-ai-badge { display: inline-flex; } which ties on
 * specificity with the [hidden] attribute selector and wins by source order.
 * The fix below also ties on specificity but comes later (and is loaded
 * after v19), so it correctly hides the badge when the attribute is set.
 */
.ec-ai-badge[hidden] {
  display: none;
}

/* ============================================================
 * Mod 03 — Hide sliders and re-roll bar in paste/suggest-improvements mode
 * ============================================================
 * In paste-mode, the AI returns surgical suggested-changes against the
 * user's pasted draft. There is no "picked draft" to re-roll, so the
 * sliders panel and re-roll button are not meaningful and would silently
 * no-op (state.pickedDraft is never set in this flow).
 */
.ec-modal.ec-paste-mode .ec-sliders-row,
.ec-modal.ec-paste-mode .ec-reroll-row {
  display: none;
}

/* ============================================================
 * Mods 05, 09 — Slide-format intake carousel (Option A: compact single-row)
 * ============================================================
 * One question visible at a time, progress dots above, prev/next/skip
 * below. Auto-advances on pill click. Replaces the stacked fieldset.
 */
.ec-intake-carousel {
  /* Inherits .ec-fieldset base styles from v19 */
  position: relative;
}

.ec-carousel-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: var(--space-1) 0 var(--space-2);
}

.ec-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-default);
  transition: background-color 120ms ease, transform 120ms ease;
}

.ec-progress-dot.is-active {
  background: var(--color-accent, #FFD500);
  transform: scale(1.25);
}

.ec-progress-dot.is-complete {
  background: var(--color-accent, #FFD500);
}

.ec-carousel-track {
  position: relative;
  min-height: 96px; /* enough for label + pill row + (optional) follow-up */
}

.ec-carousel-slide {
  /* Re-uses .ec-intake-q child layout from v19 */
  animation: ec-carousel-fade 180ms ease;
}

.ec-carousel-slide[hidden] {
  display: none;
}

@keyframes ec-carousel-fade {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.ec-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle, var(--border-default));
}

.ec-carousel-prev,
.ec-carousel-next,
.ec-carousel-skip {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.ec-carousel-prev:hover:not(:disabled),
.ec-carousel-next:hover:not(:disabled),
.ec-carousel-skip:hover {
  background: var(--surface-hover, rgba(0,0,0,0.04));
  border-color: var(--text-tertiary);
}

.ec-carousel-prev:disabled,
.ec-carousel-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ec-carousel-skip {
  color: var(--text-tertiary);
  font-size: 12px;
  border-style: dashed;
}

.ec-carousel-step-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  flex: 1;
  text-align: center;
}

/* ============================================================
 * Mod 08 — AI-suggested-default pill ring
 * ============================================================
 * When suggest-defaults endpoint returns a recommended tone/length, the
 * matching pill renders with a subtle ring. The user picking any pill
 * removes this class (ownership transfer).
 */
.ec-pill.ec-pill-ai-default {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
  border-color: rgba(59, 130, 246, 0.5);
}

.ec-pill.ec-pill-ai-default::after {
  content: '✨';
  font-size: 9px;
  margin-left: 4px;
  opacity: 0.7;
}

/* ============================================================
 * Mod 17 — Sequence-role hint row
 * ============================================================
 * Small row below the carousel showing which sequence role this email
 * plays (derived from Goal pill, user-overridable via dropdown).
 */
.ec-sequence-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 var(--space-1);
  padding: 8px 12px;
  background: var(--surface-subtle, rgba(0,0,0,0.02));
  border-radius: 6px;
  font-size: 12px;
}

.ec-sequence-hint-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
}

.ec-sequence-hint-select {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--text-primary);
}

.ec-sequence-hint-derived {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 11px;
}

/* ============================================================
 * Mod 18 — Send-time recommender badge
 * ============================================================
 * Below the Generate button. Shows "Best time to send: …" in user's
 * local timezone. Clickable "Schedule" CTA opens TouchModal in later mode.
 */
.ec-send-time-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
  padding: 8px 12px;
  background: rgba(255, 213, 0, 0.08);
  border: 1px solid rgba(255, 213, 0, 0.35);
  border-radius: 6px;
  font-size: 12px;
}

.ec-send-time-badge[hidden] { display: none; }

.ec-send-time-badge-icon {
  font-size: 14px;
}

.ec-send-time-tz {
  color: var(--text-tertiary);
  font-size: 10px;
}

.ec-schedule-send {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-primary);
}

.ec-schedule-send:hover {
  background: var(--surface-hover, rgba(0,0,0,0.04));
}

/* ============================================================
 * Mod 20 — Cadence tip card (in suggested-changes panel)
 * ============================================================
 * After the diff renders, a small card suggests the next touch in the
 * sequence. "Schedule that follow-up" opens TouchModal pre-filled.
 */
.ec-cadence-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 12px 14px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
}

.ec-cadence-tip-icon {
  font-size: 18px;
  line-height: 1.1;
}

.ec-cadence-tip-content {
  flex: 1;
  min-width: 0;
}

.ec-cadence-tip-content p {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-primary);
}

.ec-cadence-tip-rationale {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}

.ec-cadence-tip-schedule {
  margin-top: 8px;
  background: var(--color-accent, #FFD500);
  color: #000;
  border: 1px solid var(--color-accent, #FFD500);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.ec-cadence-tip-schedule:hover {
  opacity: 0.9;
}

/* ============================================================
 * Mod 04 — Generate-button loading state
 * ============================================================
 * The button label changes to "Generating drafts…" / "Reading your draft…"
 * during the call. The ec-ai-status span (used in MB4 to render text next
 * to the button) is no longer used, but we keep the rule below so any
 * stale text gets hidden cleanly.
 */
.ec-generate-btn:disabled {
  opacity: 0.7;
  cursor: progress;
}

.ec-ai-status {
  display: none;
}

/* ============================================================
 * Mod 11 — Notes textarea breathing room at top
 * ============================================================
 * After the carousel restructure, the notes block sits above the carousel
 * and benefits from a slightly more pronounced separator.
 */
.ec-notes-section {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle, var(--border-default));
  margin-bottom: var(--space-2);
}

/* === end migrated from styles-additions-v20.css === */


/* === migrated from styles-additions-v19.css === */
/* ============================================================
   styles-additions-v19.css — MB4 (Sprint 6, post-MB3)

   Adds:
   - Add-contact button in composer recipient row (mod 03)
   - Compact-textarea wrapper transitions (compact-textarea.js)
   - Tone radar chart container (radar-chart.js)
   - Rubric panel — header, tier dots, expanded check rows (rubric-panel.js)
   - Composer segments — lever annotation colors + legend (composer-segments.js)
   - Suggested-changes diff view (suggested-changes-panel.js)
   - Composer split-state — pre-gen + post-gen sections
   - Multi-Q intake form layout
   - A/B draft cards side-by-side
   - Sliders + re-roll bar

   Loads AFTER v18.
   ============================================================ */
/* ============================================================
   1. ADD-CONTACT BUTTON (mod 03)
   ============================================================ */
.ec-to-row { align-items: flex-start; }

.ec-to-control {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  width: 100%;
}

.ec-to-control select {
  flex: 1;
  min-width: 0;
}

.ec-add-contact-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--easing-out),
              border-color var(--motion-fast) var(--easing-out);
}

.ec-add-contact-btn:hover {
  background: var(--bg-elev-2);
  border-color: var(--text-primary);
}

.ec-add-contact-btn:focus-visible {
  outline: 2px solid var(--accent, var(--text-primary));
  outline-offset: -2px;
}

/* ============================================================
   7. COMPOSER SPLIT-STATE (mod 06)

   The composer modal has two visual states:
     .ec-state-pregen  — intake-only, body hidden unless paste-toggle
     .ec-state-postgen — A/B drafts, sliders, picked draft as final body

   States are driven by a class on the modal root (.ec-modal).
   ============================================================ */
.ec-pregen-section,
.ec-postgen-section {
  /* Default both hidden; state class makes one visible. */
  display: none;
}

.ec-modal.ec-state-pregen .ec-pregen-section { display: block; }

.ec-modal.ec-state-postgen .ec-postgen-section { display: block; }

/* When in postgen, hide the intake/notes/paste-toggle */
.ec-modal.ec-state-postgen .ec-intake-fieldset,
.ec-modal.ec-state-postgen .ec-notes-section,
.ec-modal.ec-state-postgen .ec-paste-toggle-row,
.ec-modal.ec-state-postgen .ec-generate-row {
  display: none;
}

/* Pre-gen: hide post-gen-only stuff like the picked-draft body, sliders */
.ec-modal.ec-state-pregen .ec-drafts-row,
.ec-modal.ec-state-pregen .ec-sliders-row,
.ec-modal.ec-state-pregen .ec-picked-body-row {
  display: none;
}

/* ============================================================
   8. MULTI-Q INTAKE LAYOUT (mod 07)
   ============================================================ */
.ec-intake-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elev-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.ec-intake-q {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ec-intake-q-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ec-intake-q-label-required::after {
  content: 'required';
  font-size: 9px;
  color: var(--text-tertiary);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* AI-suggested badge */
.ec-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: #1e40af;
  background: rgba(59, 130, 246, 0.10);
  padding: 1px 6px;
  border-radius: 3px;
}

.ec-ai-badge::before { content: '✨'; font-size: 10px; }

/* Pill row (single-select via buttons) */
.ec-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.ec-pill {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out),
              border-color var(--motion-fast) var(--easing-out),
              color var(--motion-fast) var(--easing-out);
}

.ec-pill:hover { background: var(--bg-elev-2); }

.ec-pill.is-active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-page);
}

.ec-pill-ai-default {
  /* AI-suggested default shows a subtle ring */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Follow-up sub-dropdown (revealed when goal=follow-up) */
.ec-followup-link {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
}

.ec-intake-q[data-goal="follow-up"] .ec-followup-link {
  display: flex;
}

.ec-followup-select {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  background: var(--bg-page);
}

/* ============================================================
   9. PASTE-TOGGLE ROW (mod 08)
   ============================================================ */
.ec-paste-toggle-row {
  display: flex;
  justify-content: center;
  margin: var(--space-2) 0;
}

.ec-paste-toggle {
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-decoration-color: var(--border-default);
  text-underline-offset: 3px;
  transition: color var(--motion-fast) var(--easing-out),
              text-decoration-color var(--motion-fast) var(--easing-out);
}

.ec-paste-toggle:hover {
  color: var(--text-primary);
  text-decoration-color: var(--text-primary);
}

.ec-paste-body-row {
  display: none;
  margin-top: var(--space-2);
}

.ec-modal.ec-paste-mode .ec-paste-body-row {
  display: block;
}

.ec-paste-body-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--space-1);
}

/* ============================================================
   10. GENERATE BUTTON ROW (mod 08)
   ============================================================ */
.ec-generate-row {
  display: flex;
  justify-content: center;
  margin: var(--space-4) 0;
}

.ec-generate-btn {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(59,130,246,0.18);
  transition: transform var(--motion-fast) var(--easing-out),
              box-shadow var(--motion-fast) var(--easing-out),
              filter var(--motion-fast) var(--easing-out);
}

.ec-generate-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.ec-generate-btn:active { transform: translateY(0); }

.ec-generate-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.ec-generate-btn-icon { font-size: var(--text-lg); }

/* ============================================================
   11. A/B DRAFTS SIDE-BY-SIDE (mod 09)
   ============================================================ */
.ec-drafts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

@media (max-width: 720px) {
  .ec-drafts-row { grid-template-columns: 1fr; }
}

.ec-draft-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-elev-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
  transition: border-color var(--motion-fast) var(--easing-out),
              box-shadow var(--motion-fast) var(--easing-out);
}

.ec-draft-card:hover {
  border-color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ec-draft-card.is-picked {
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15), 0 2px 8px rgba(0,0,0,0.06);
}

.ec-draft-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ec-draft-subject {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
}

.ec-draft-body-preview {
  /* The lever-annotated body lives here (mounted by ComposerSegments) */
  min-height: 120px;
}

.ec-draft-radar {
  /* RadarChart mounts here */
  display: flex;
  justify-content: center;
}

.ec-draft-rubric {
  /* RubricPanel mounts here */
}

.ec-draft-pick-btn {
  background: var(--text-primary);
  color: var(--bg-page);
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  align-self: stretch;
  transition: opacity var(--motion-fast) var(--easing-out);
}

.ec-draft-pick-btn:hover { opacity: 0.85; }

.is-picked .ec-draft-pick-btn {
  background: #16a34a;
}

/* ============================================================
   12. SLIDERS + RE-ROLL (mod 11)
   ============================================================ */
.ec-sliders-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elev-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
}

.ec-sliders-header {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
}

.ec-slider-row {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  gap: var(--space-2);
}

.ec-slider-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.ec-slider-input {
  width: 100%;
  accent-color: var(--text-primary);
}

.ec-slider-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: right;
}

.ec-reroll-row {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.ec-reroll-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: background var(--motion-fast) var(--easing-out),
              border-color var(--motion-fast) var(--easing-out);
}

.ec-reroll-btn:hover {
  background: var(--bg-elev-2);
  border-color: var(--text-primary);
}

.ec-reroll-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.ec-reroll-icon { font-size: 14px; }

/* ============================================================
   13. PICKED-DRAFT FINAL BODY ROW (mod 09)

   When a draft is picked, the picked draft's subject + body become
   editable, replacing the AB draft cards.
   ============================================================ */
.ec-picked-body-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ec-picked-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
}

.ec-picked-back-btn {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  margin-left: auto;
}

.ec-picked-back-btn:hover { color: var(--text-primary); }

/* === migrated from styles-additions-v16.css === */
/* ============================================================
   styles-additions-v16.css — Mega-batch 1 feature styles

   Additive to all prior styles. Loads AFTER components-base.css
   (so it can compose primitives) and AFTER all other styles-additions
   layers. Holds MB1-specific feature styling that doesn't generalize
   to a primitive.

   Sections:
     1. Missing-email banner (mod 03 — email composer)
     2. Standalone page chrome (.std-page-*)
     3. Search + filter bar (used by all 3 standalone pages)
     4. Dashboard summary table widget
     5. Global compose dropdown
     6. App-mode nav extensions (5 tabs instead of 2)
   ============================================================ */
/* ============================================================
   1. MISSING-EMAIL BANNER (mod 03)

   Shown at top of email composer modal when recipient has emails: [].
   Replaces the previous bottom-of-form warning that required scrolling.
   ============================================================ */
.ec-missing-email-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2_5);
  padding: var(--space-2_5) var(--space-3);
  margin: 0 0 var(--space-3);
  background: var(--color-rose-50);
  border: 1px solid var(--color-rose-200);
  border-left: 3px solid var(--color-rose-600);
  border-radius: var(--radius-sm);
  color: var(--color-rose-900);
  font-size: var(--text-13);
}

.ec-missing-email-banner[hidden] { display: none; }

.ec-missing-email-icon {
  font-size: var(--text-16);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.ec-missing-email-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.ec-missing-email-content strong {
  font-weight: 600;
}

.ec-missing-email-add {
  align-self: flex-start;
  margin-top: var(--space-1);
  background: transparent;
  border: 1px solid var(--color-rose-600);
  color: var(--color-rose-800);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out);
}

.ec-missing-email-add:hover {
  background: var(--color-rose-100);
}

/* === migrated from styles-additions-v14.css === */
/* ============================================================
   Composer notes / topics textarea
   ============================================================ */
.ec-notes-section {
  margin-bottom: 14px;
  padding: 12px;
  background: rgba(244, 232, 195, 0.45);   /* faint cream */
  border: 1px solid rgba(160, 130, 60, 0.20);
  border-radius: 8px;
}

.ec-notes-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-text-muted, #6a6a6a);
  margin-bottom: 4px;
}

.ec-notes-hint {
  display: block;
  font-size: 11px;
  color: var(--ds-text-muted, #888);
  margin-bottom: 8px;
  font-style: italic;
}

.ec-notes-textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
}

.ec-notes-textarea:focus {
  outline: none;
  border-color: rgba(160, 130, 60, 0.50);
  box-shadow: 0 0 0 2px rgba(160, 130, 60, 0.15);
}

/* === migrated from styles-additions-v11.css === */
/* styles-additions-v11.css — Email composer modal (Step 1) */
/* ============================================================
   OVERLAY + MODAL SHELL
   ============================================================ */
.ec-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 22, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 18vh;
  overflow-y: auto;
}

.ec-overlay.ec-open { display: flex; }

.ec-modal {
  background: #FAF8F2;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 720px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.ec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}

.ec-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #2C2C2A;
  letter-spacing: -0.01em;
}

.ec-subtitle {
  font-size: 13px;
  color: #5F5E5A;
}

.ec-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #888780;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.ec-close:hover { background: rgba(0,0,0,0.05); color: #2C2C2A; }

.ec-form {
  padding: 18px 24px 0;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* ============================================================
   FORM ROWS / LABELS / INPUTS
   ============================================================ */
.ec-row { margin-bottom: 14px; }

.ec-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 540px) {
  .ec-row-grid { grid-template-columns: 1fr; }
}

.ec-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #5F5E5A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.ec-label-inline {
  font-size: 12px;
  font-weight: 600;
  color: #5F5E5A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 8px;
}

.ec-input,
.ec-textarea,
.ec-select,
.ec-form select {
  width: 100%;
  padding: 9px 12px;
  background: #FFF;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: #2C2C2A;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ec-input:focus,
.ec-textarea:focus,
.ec-select:focus,
.ec-form select:focus {
  outline: none;
  border-color: #1F2D44;
  box-shadow: 0 0 0 3px rgba(31, 45, 68, 0.12);
}

.ec-textarea {
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  line-height: 1.55;
  resize: vertical;
  min-height: 200px;
}

.ec-subject-input {
  font-size: 15px;
  font-weight: 500;
}

/* ============================================================
   FIELDSET BLOCKS
   ============================================================ */
.ec-fieldset {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin: 0 0 14px;
  background: rgba(255,255,255,0.5);
}

.ec-legend {
  font-size: 12px;
  font-weight: 600;
  color: #5F5E5A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 6px;
  margin-left: -6px;
}

/* ============================================================
   SEGMENTED CONTROL (first-outreach radio)
   ============================================================ */
.ec-segmented {
  display: inline-flex;
  background: #F1EFE8;
  border-radius: 8px;
  padding: 3px;
  margin-top: 8px;
  width: fit-content;
}

.ec-seg-opt {
  position: relative;
  cursor: pointer;
}

.ec-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }

.ec-seg-opt span {
  display: block;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #5F5E5A;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.ec-seg-opt input:checked + span {
  background: #FFF;
  color: #1F2D44;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.ec-followup-detail {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}

/* ============================================================
   CHIP ROW (channel + outcome pickers)
   ============================================================ */
.ec-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ec-chip {
  background: #FFF;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 100px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #5F5E5A;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.ec-chip:hover {
  border-color: #1F2D44;
  color: #1F2D44;
}

.ec-chip.is-active {
  background: #1F2D44;
  color: #FFF;
  border-color: #1F2D44;
}

/* ============================================================
   SUBJECT SUGGESTIONS
   ============================================================ */
.ec-subject-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.ec-subject-suggestions:empty { display: none; }

.ec-subj-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #FFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s ease;
}

.ec-subj-chip:hover {
  border-color: #1F2D44;
  background: rgba(31,45,68,0.03);
}

.ec-subj-chip-strategy {
  flex-shrink: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1F2D44;
  background: rgba(31,45,68,0.08);
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 600;
}

.ec-subj-chip-text {
  font-size: 14px;
  color: #2C2C2A;
}

/* ============================================================
   BODY HEADER + WORD COUNT
   ============================================================ */
.ec-body-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.ec-word-count {
  font-size: 11px;
  color: #888780;
  font-family: ui-monospace, monospace;
}

/* ============================================================
   AI BAR
   ============================================================ */
.ec-ai-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 10px 0 14px;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
}

.ec-ai-status {
  font-size: 12px;
  color: #5F5E5A;
  font-family: ui-monospace, monospace;
}

/* ============================================================
   ATTACHMENTS
   ============================================================ */
.ec-attach-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 24px;
}

.ec-attach-empty {
  font-size: 13px;
  color: #888780;
  font-style: italic;
}

.ec-attach-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: #FFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  font-size: 13px;
}

.ec-attach-icon { font-size: 14px; }

.ec-attach-name {
  flex: 1;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #2C2C2A;
}

.ec-attach-remove {
  background: transparent;
  border: none;
  font-size: 16px;
  color: #888780;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.ec-attach-remove:hover { background: rgba(160,69,69,0.12); color: #A04545; }

.ec-picker-popup {
  position: relative;
  background: #FFF;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  margin-top: 10px;
  padding: 12px;
  max-height: 320px;
  overflow-y: auto;
}

.ec-picker-header {
  font-size: 12px;
  font-weight: 600;
  color: #5F5E5A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.ec-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ec-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: background 0.12s ease;
}

.ec-picker-item:hover {
  background: rgba(31,45,68,0.05);
  border-color: rgba(31,45,68,0.15);
}

.ec-picker-icon { font-size: 14px; flex-shrink: 0; }

.ec-picker-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #2C2C2A;
}

.ec-picker-filename {
  font-size: 11px;
  color: #888780;
  font-family: ui-monospace, monospace;
}

.ec-picker-close {
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  font-size: 12px;
  color: #5F5E5A;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   FOOTER PREVIEW (collapsible)
   ============================================================ */
.ec-footer-preview {
  margin-bottom: 16px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 8px 12px;
}

.ec-footer-preview summary {
  font-size: 12px;
  font-weight: 600;
  color: #5F5E5A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 4px 0;
}

.ec-footer-text {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #5F5E5A;
  margin: 8px 0 0;
  white-space: pre-wrap;
  background: #FFF;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.06);
}

.ec-footer-note {
  font-size: 11px;
  color: #888780;
  margin: 8px 0 0;
}

.ec-footer-note code {
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
}

/* ============================================================
   ERROR BAR
   ============================================================ */
.ec-error {
  background: #F5E0DD;
  color: #6B2929;
  border: 1px solid rgba(160,69,69,0.25);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

/* ============================================================
   SEND BAR (sticky footer)
   ============================================================ */
.ec-send-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0 18px;
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
  position: sticky;
  bottom: 0;
  background: #FAF8F2;
  flex-wrap: wrap;
}

.ec-send-mode {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ec-send-mode .ec-select {
  width: auto;
  min-width: 160px;
}

.ec-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   Planned-action linkage checkbox (Polish patch 2 B3)
   ============================================================ */
.ec-planned-action {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(40, 160, 80, 0.08);
  border: 1px solid rgba(40, 160, 80, 0.20);
  border-radius: 6px;
  cursor: pointer;
}

.ec-planned-action input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.ec-planned-action-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ec-planned-action-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-text, #1a1a1a);
}

.ec-planned-action-desc {
  font-size: 12px;
  color: var(--ds-text-muted, #555);
  font-style: italic;
}

/* === end migrated from styles-additions-v11.css === */