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


/* ============================================================
   2. COMPACT-TEXTAREA WRAPPER (compact-textarea.js)
   ============================================================ */

.ct-wrap {
  position: relative;
  width: 100%;
}
.ct-textarea {
  width: 100%;
  transition: min-height var(--motion-medium, 250ms) var(--easing-out),
              padding-right var(--motion-fast) var(--easing-out);
  resize: vertical;
}
.ct-state-compact .ct-textarea {
  min-height: 60px;
  resize: none;
}
.ct-state-expanded .ct-textarea {
  min-height: 180px;
  padding-right: 32px;  /* leave room for shrink toggle */
}
.ct-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--easing-out),
              background var(--motion-fast) var(--easing-out);
}
.ct-wrap:hover .ct-toggle,
.ct-state-expanded .ct-toggle,
.ct-textarea:focus + .ct-toggle {
  opacity: 1;
}
.ct-toggle:hover {
  background: var(--bg-elev-2);
  color: var(--text-primary);
}
.ct-toggle-icon {
  font-size: 14px;
  line-height: 1;
  transform: rotate(45deg);
}
.ct-state-compact .ct-toggle-icon { transform: rotate(45deg); }
.ct-state-expanded .ct-toggle-icon { transform: rotate(-135deg); }


/* ============================================================
   3. RADAR CHART (radar-chart.js)
   ============================================================ */

.rc-svg {
  display: block;
  margin: 0 auto;
}
.rc-rings { pointer-events: none; }
.rc-axes { pointer-events: none; }
.rc-labels { pointer-events: none; }


/* ============================================================
   4. RUBRIC PANEL (rubric-panel.js)
   ============================================================ */

.rp-panel {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rp-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-fast) var(--easing-out);
}
.rp-header:hover { background: var(--bg-elev-2); }
.rp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.rp-dot-pass    { background: #16a34a; }   /* green */
.rp-dot-warn    { background: #eab308; }   /* yellow */
.rp-dot-fail    { background: #dc2626; }   /* red */
.rp-dot-neutral { background: var(--text-tertiary); }
.rp-summary {
  flex: 1;
  font-weight: 500;
}
.rp-toggle {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.rp-body {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.rp-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: default;
}
.rp-check:hover { background: var(--bg-elev-2); }
.rp-check-icon {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  flex-shrink: 0;
  width: 16px;
}
.rp-pass .rp-check-icon { color: #16a34a; }
.rp-fail .rp-check-icon { color: #dc2626; }
.rp-check-text { flex: 1; min-width: 0; }
.rp-check-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.rp-check-why {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}


/* ============================================================
   5. COMPOSER SEGMENTS — lever annotations (composer-segments.js)
   ============================================================ */

.cs-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.cs-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5, 6px);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  cursor: pointer;
}
.cs-legend {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cs-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
}
.cs-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.cs-body {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.cs-segment {
  border-radius: 3px;
  padding: 1px 2px;
  margin: 0 -2px;
  transition: filter var(--motion-fast) var(--easing-out),
              box-shadow var(--motion-fast) var(--easing-out);
  cursor: help;
}

/* Color tokens — light-translucent fills */
.cs-segment-yellow { background: rgba(234, 179, 8, 0.18);  }
.cs-segment-green  { background: rgba(22, 163, 74, 0.18);  }
.cs-segment-blue   { background: rgba(59, 130, 246, 0.18); }
.cs-segment-orange { background: rgba(249, 115, 22, 0.20); }
.cs-segment-gray   { background: rgba(120, 120, 120, 0.15);}

.cs-legend-yellow .cs-legend-swatch { background: rgba(234, 179, 8, 0.55);  }
.cs-legend-green  .cs-legend-swatch { background: rgba(22, 163, 74, 0.55);  }
.cs-legend-blue   .cs-legend-swatch { background: rgba(59, 130, 246, 0.55); }
.cs-legend-orange .cs-legend-swatch { background: rgba(249, 115, 22, 0.60); }
.cs-legend-gray   .cs-legend-swatch { background: rgba(120, 120, 120, 0.50);}

.cs-segment:hover {
  filter: brightness(0.95);
}

/* When a rubric check pulses a segment */
@keyframes cs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.55); }
}
.cs-pulse {
  animation: cs-pulse 1.2s ease-in-out 2;
}


/* ============================================================
   6. SUGGESTED CHANGES PANEL (suggested-changes-panel.js)
   ============================================================ */

.sc-panel {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elev-2);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sc-bulk-actions {
  display: flex;
  gap: var(--space-2);
}
.sc-accept-all,
.sc-reject-all,
.sc-accept,
.sc-reject {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing-out),
              border-color var(--motion-fast) var(--easing-out);
}
.sc-accept-all,
.sc-accept {
  border-color: #16a34a;
  color: #16a34a;
}
.sc-accept-all:hover,
.sc-accept:hover {
  background: rgba(22, 163, 74, 0.08);
}
.sc-reject-all,
.sc-reject {
  color: var(--text-secondary);
}
.sc-reject-all:hover,
.sc-reject:hover {
  background: var(--bg-elev-2);
  color: var(--text-primary);
}
.sc-list {
  display: flex;
  flex-direction: column;
}
.sc-change {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: opacity var(--motion-medium) var(--easing-out);
}
.sc-change:last-child { border-bottom: 0; }
.sc-change-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sc-type-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  padding: 2px 6px;
  border-radius: 3px;
}
.sc-type-replace { background: rgba(59, 130, 246, 0.15); color: #1e40af; }
.sc-type-insert  { background: rgba(22, 163, 74, 0.15); color: #14532d; }
.sc-type-delete  { background: rgba(220, 38, 38, 0.15); color: #7f1d1d; }
.sc-change-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.sc-change-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.sc-from { color: var(--text-secondary); }
.sc-strike { text-decoration: line-through; }
.sc-arrow { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); }
.sc-to { color: var(--text-primary); }
.sc-insert { color: #15803d; }
.sc-delete { color: #b91c1c; }
.sc-why {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-elev-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border-default);
}
.sc-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.sc-processed { opacity: 0.55; }
.sc-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  text-align: right;
}
.sc-processed-accepted .sc-status { color: #15803d; }
.sc-processed-rejected .sc-status { color: var(--text-tertiary); }
.sc-empty {
  padding: var(--space-4);
  text-align: center;
}
.sc-empty-msg {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}


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

/* Free-text "anything else" — also the NOTES area */
.ec-intake-text {
  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);
  resize: vertical;
  min-height: 60px;
}


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


/* ============================================================
   14. AI ERROR MESSAGES (existing — kept for parity)
   ============================================================ */

.ec-ai-error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.30);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: #7f1d1d;
}