/* styles-additions-v26.css — MB9: Full-width drafts tabs layout (G6) +
 * composer state validation messaging (G5)
 *
 * Loaded AFTER v25.css. Cache buster v=200.
 *
 * Sections:
 *   1. Drafts tabs view (G6) — replaces narrow right-column drafts panel
 *   2. Pre-flight validation banner (G5)
 *   3. Back-to-compose link
 */


/* =============================================================
 * 1. Drafts tabs view (G6)
 * ============================================================= */

/* When drafts have been generated, the composer's left+right column split
 * collapses into a single full-width drafts view. The intake carousel is
 * hidden; a slim "← Edit settings" link at the top lets the user return.
 *
 * Layout target: ~100% of modal content width, vertical scroll, comfortable
 * reading width (max 720px centered) for the body itself. */

.ec-drafts-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background: var(--surface-card, #fff);
}

.ec-drafts-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--border-default, #e5e5e5);
  background: var(--surface-subtle, #f8f8f7);
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}
.ec-drafts-back {
  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);
}
.ec-drafts-back:hover {
  background: var(--surface-card, #fff);
  color: var(--text-primary, #171717);
}
.ec-drafts-settings-summary {
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ec-drafts-settings-summary strong {
  color: var(--text-secondary, #525252);
  font-weight: 600;
}

/* Tab strip */
.ec-drafts-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-default, #e5e5e5);
  background: var(--surface-card, #fff);
  overflow-x: auto;
}
.ec-drafts-tab {
  flex: 1 1 0;
  min-width: 140px;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: transparent;
  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-drafts-tab:last-child {
  border-right: none;
}
.ec-drafts-tab:hover {
  background: var(--surface-subtle, #f8f8f7);
}
.ec-drafts-tab.is-active {
  background: var(--surface-card, #fff);
  border-bottom: 3px solid var(--color-accent, #FFD500);
  margin-bottom: -1px;  /* overlap the bottom border */
  padding-bottom: calc(var(--space-3, 12px) - 2px);
}
.ec-drafts-tab-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #171717);
  display: block;
}
.ec-drafts-tab-score {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-secondary, #525252);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}
.ec-drafts-tab-score-pass { color: var(--color-pass, #16a34a); }
.ec-drafts-tab-score-warn { color: var(--color-warn, #d97706); }
.ec-drafts-tab-score-fail { color: var(--color-critical, #dc2626); }

/* Tab body */
.ec-drafts-tab-body {
  padding: var(--space-5, 24px) var(--space-4, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  min-height: 300px;
}

/* Subject line + body */
.ec-drafts-subject-row {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #a3a3a3);
  margin-bottom: -8px;
}
.ec-drafts-subject {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #171717);
  line-height: 1.3;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.ec-drafts-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary, #171717);
  white-space: pre-wrap;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3, 12px) 0;
  border-top: 1px solid var(--border-default, #e5e5e5);
  border-bottom: 1px solid var(--border-default, #e5e5e5);
}

/* Rubric + tone heatmap side-by-side (or stacked on narrow viewports) */
.ec-drafts-analysis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4, 16px);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 700px) {
  .ec-drafts-analysis {
    grid-template-columns: 1fr;
  }
}
.ec-drafts-analysis-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.ec-drafts-analysis-title {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #a3a3a3);
}
.ec-drafts-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
.ec-drafts-check {
  display: flex;
  gap: var(--space-2, 8px);
  font-size: 13px;
  line-height: 1.4;
}
.ec-drafts-check-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-weight: 700;
}
.ec-drafts-check-pass .ec-drafts-check-icon { color: var(--color-pass, #16a34a); }
.ec-drafts-check-fail .ec-drafts-check-icon { color: var(--color-critical, #dc2626); }
.ec-drafts-check-text { color: var(--text-primary, #171717); }
.ec-drafts-check-detail {
  font-size: 11px;
  color: var(--text-secondary, #525252);
  margin-top: 2px;
}

.ec-drafts-heatmap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
}
.ec-drafts-heatmap svg {
  max-width: 100%;
  height: auto;
}

/* Pick this draft footer */
.ec-drafts-pick-row {
  display: flex;
  justify-content: center;
  padding: var(--space-3, 12px) 0 var(--space-2, 8px);
  border-top: 1px solid var(--border-default, #e5e5e5);
}
.ec-drafts-pick-btn {
  padding: 12px 24px;
  background: var(--text-primary, #171717);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
.ec-drafts-pick-btn:hover {
  background: #333;
}
.ec-drafts-pick-btn.is-picked {
  background: var(--color-pass, #16a34a);
}

/* When in drafts view, hide the intake carousel + body editor */
.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 {
  display: none;
}
.ec-modal[data-stage="intake"] .ec-drafts-view,
.ec-modal[data-stage="edit"]   .ec-drafts-view {
  display: none;
}
.ec-modal[data-stage="edit"] .ec-form > .ec-intake {
  display: none;  /* in edit stage, hide carousel — body editor + send bar only */
}

/* =============================================================
 * 2. Pre-flight validation banner (G5)
 * ============================================================= */

.ec-validation-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 6px;
  margin: var(--space-3, 12px) var(--space-4, 16px) 0;
  font-size: 13px;
  color: var(--text-primary, #171717);
}
.ec-validation-banner-icon {
  flex-shrink: 0;
  color: var(--color-warn, #d97706);
  font-size: 16px;
  line-height: 1.2;
}
.ec-validation-banner-text {
  flex: 1;
}
.ec-validation-banner-text strong {
  color: var(--color-warn, #d97706);
  display: block;
  margin-bottom: 2px;
}
.ec-validation-banner-dismiss {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-tertiary, #a3a3a3);
  padding: 0 4px;
}

/* Generate Draft button disabled state from G5 validation */
.ec-generate-btn:disabled,
button.ec-generate-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}