/* 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-display {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.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 15 — Tone heatmap overlay (composer-segments extension)
 * ============================================================
 * When the heatmap toggle is on, segments are colored by tone_category
 * lift band instead of by segment type. Maps Sopro lift % to a 5-band
 * gradient: green (high lift), light-green (medium), yellow (small),
 * light-red (small drag), red (heavy drag).
 */
.cs-controls .cs-heatmap-toggle-label {
  margin-left: var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
}

.cs-body.cs-heatmap-on .cs-segment {
  /* Disable type-based color when heatmap mode is active */
  background-color: transparent;
}
.cs-body.cs-heatmap-on .cs-segment[data-tone-band="high-lift"]   { background-color: rgba(34, 197, 94, 0.22); }
.cs-body.cs-heatmap-on .cs-segment[data-tone-band="medium-lift"] { background-color: rgba(132, 204, 22, 0.20); }
.cs-body.cs-heatmap-on .cs-segment[data-tone-band="small-lift"]  { background-color: rgba(234, 179, 8, 0.20); }
.cs-body.cs-heatmap-on .cs-segment[data-tone-band="small-drag"]  { background-color: rgba(251, 146, 60, 0.22); }
.cs-body.cs-heatmap-on .cs-segment[data-tone-band="heavy-drag"]  { background-color: rgba(239, 68, 68, 0.22); }


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