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

/* The main body textarea gets the bulk of vertical space */
#ec-body {
  min-height: 220px;
}
@media (min-width: 1100px) {
  #ec-body {
    /* On wide viewports, give the body textarea proportionally more height */
    min-height: 320px;
  }
}

/* Notes textarea is compact — 2 rows is fine for the prompt-hint use case */
#ec-notes-textarea,
.ec-notes-textarea {
  min-height: 56px;
  font-size: 13px;
}

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


/* =============================================================
 * 5. Buttons (touch targets enforced)
 * ============================================================= */

.ec-btn-primary,
.ec-btn-secondary,
.ec-btn-tertiary,
.ec-btn-ai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.ec-btn-primary:active,
.ec-btn-secondary:active,
.ec-btn-tertiary:active,
.ec-btn-ai:active {
  transform: translateY(1px);
}

.ec-btn-primary {
  background: var(--color-accent, #FFD500);
  border: 1px solid var(--color-accent, #FFD500);
  color: #000;
}
.ec-btn-primary:hover {
  background: #f0c700;
  border-color: #f0c700;
}
.ec-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ec-btn-secondary {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default, #e5e5e5);
  color: var(--text-primary, #171717);
}
.ec-btn-secondary:hover {
  background: var(--surface-subtle, #f8f8f7);
  border-color: var(--border-strong, #d4d4d4);
}

.ec-btn-tertiary {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary, #525252);
}
.ec-btn-tertiary:hover {
  background: var(--surface-subtle, #f8f8f7);
  color: var(--text-primary, #171717);
}

/* AI generate button — same shape as secondary but with subtle accent border */
.ec-btn-ai {
  background: var(--surface-card, #fff);
  border: 1px solid var(--color-accent, #FFD500);
  color: var(--text-primary, #171717);
  font-weight: 500;
  width: 100%;
}
.ec-btn-ai:hover {
  background: rgba(255, 213, 0, 0.08);
}
.ec-btn-ai:disabled {
  border-color: var(--border-default, #e5e5e5);
  color: var(--text-tertiary, #a3a3a3);
  cursor: not-allowed;
}

.ec-btn-ai-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent, #FFD500);
}
.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)
 * ============================================================= */

/* Each major section in the right column gets the same vertical rhythm */
.ec-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.ec-section-label {
  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: 0;
}

/* Rubric rows — pass/fail at a glance */
.ec-rubric-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
.ec-rubric-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.4;
}
.ec-rubric-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ec-rubric-row.is-pass .ec-rubric-icon { color: var(--color-pass, #16a34a); }
.ec-rubric-row.is-fail .ec-rubric-icon { color: var(--color-critical, #dc2626); }
.ec-rubric-row.is-warn .ec-rubric-icon { color: #f59e0b; }
.ec-rubric-text {
  color: var(--text-primary, #171717);
}

/* AI session meter */
.ec-ai-meter {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-tertiary, #a3a3a3);
}


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

/* iOS rounded-rectangle button default — strip it */
.ec-btn-primary,
.ec-btn-secondary,
.ec-btn-tertiary,
.ec-btn-ai,
.ec-chip {
  -webkit-appearance: none;
  appearance: 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: 10000;
    animation: ec-drawer-fade 240ms ease-out;
  }
  @keyframes ec-drawer-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}