/* 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;
}