/* ============================================================
   Engagement Engine — EPW-PRO-175
   External Correspondence Intelligence UI
   ============================================================ */

body.engagement-active #expanded-title,
body.engagement-active #detail-panel,
body.engagement-active #bg-layer { display: none !important; }

/* ---- KPI Banner ---- */
.eng-kpi-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 8px;
}
.eng-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.eng-test-badge {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.eng-test-badge-text {
  background: #FEF3C7;
  color: #92400E;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #F59E0B;
}
.eng-test-badge-desc {
  font-size: 10px;
  color: #92400E99;
}

/* ---- Action Bar ---- */
.eng-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid #E2E8F0;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.eng-scan-btn, .eng-run-btn {
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid #CBD5E1;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.eng-scan-btn { color: #0D9488; border-color: #0D948833; }
.eng-scan-btn:hover { background: #0D94880F; }
.eng-run-btn { color: #7C3AED; border-color: #7C3AED33; }
.eng-run-btn:hover { background: #7C3AED0F; }
.eng-scan-btn:disabled, .eng-run-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.eng-filters {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.eng-pill-active {
  background: var(--page-accent, #7C3AED) !important;
  color: #fff !important;
  border-color: var(--page-accent, #7C3AED) !important;
}

/* ---- Split Pane ---- */
.eng-split {
  display: flex;
  flex: 1;
  min-height: 0; /* critical for flex children to shrink properly */
  overflow: hidden;
  position: relative;
}
.eng-list-pane {
  width: 380px;
  min-width: 300px;
  border-right: 1px solid #E2E8F0;
  overflow-y: auto;
  background: #FAFBFC;
  position: relative;
  z-index: 1;
}
.eng-detail-pane {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  background: #fff;
  position: relative;
  z-index: 1;
}
.eng-detail-empty {
  color: #94A3B8;
  font-size: 14px;
  text-align: center;
  padding: 60px 20px;
}

/* ---- Queue List Items ---- */
.eng-list { padding: 0; }
.eng-empty {
  padding: 30px 20px;
  color: #94A3B8;
  font-size: 13px;
  text-align: center;
}
.eng-error { color: #DC2626; }
.eng-item {
  padding: 12px 16px;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
  transition: background 0.1s;
}
.eng-item:hover { background: #F1F5F9; }
.eng-item-selected { background: #EDE9FE; border-left: 3px solid #7C3AED; }
.eng-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.eng-item-sender {
  font-weight: 600;
  font-size: 13px;
  color: #1E293B;
}
.eng-item-subject {
  font-size: 12px;
  color: #475569;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eng-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94A3B8;
}
.eng-item-email { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.eng-item-date { white-space: nowrap; }

/* ---- Status Pills ---- */
.eng-item-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.eng-status-detected { background: #DBEAFE; color: #1D4ED8; }
.eng-status-draft-ready { background: #D1FAE5; color: #059669; }
.eng-status-test-draft { background: #FEF3C7; color: #92400E; }
.eng-status-sent { background: #DCFCE7; color: #16A34A; }
.eng-status-test-sent { background: #FDE68A; color: #92400E; }
.eng-status-archived-via-consolidated-reply { background: #E2E8F0; color: #64748B; }

/* ---- Empathy Badge ---- */
.eng-empathy-badge {
  font-size: 10px;
  font-weight: 700;
  color: #7C3AED;
  background: #EDE9FE;
  padding: 1px 6px;
  border-radius: 8px;
}

/* ---- Detail Panel ---- */
.eng-detail-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}
.eng-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.eng-detail-name {
  font-size: 18px;
  font-weight: 700;
  color: #1E293B;
}
.eng-detail-subject {
  font-size: 14px;
  color: #475569;
  margin-bottom: 2px;
}
.eng-detail-email {
  font-size: 12px;
  color: #94A3B8;
}

/* CRM tags */
.eng-detail-crm {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.eng-crm-tag {
  font-size: 11px;
  background: #F1F5F9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Empathy section */
.eng-detail-empathy {
  background: #F5F3FF;
  border: 1px solid #DDD6FE;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.eng-empathy-label {
  font-size: 12px;
  font-weight: 600;
  color: #6D28D9;
  margin-bottom: 6px;
}
.eng-empathy-none { color: #94A3B8; }
.eng-empathy-text {
  font-size: 13px;
  color: #1E293B;
  line-height: 1.5;
}
.eng-empathy-source {
  font-size: 11px;
  color: #94A3B8;
  margin-top: 6px;
}

/* Draft sections */
.eng-detail-sections { margin-bottom: 16px; }
.eng-sections-title {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 12px 0;
}
.eng-section-block {
  margin-bottom: 12px;
}
.eng-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #7C3AED;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.eng-section-textarea {
  width: 100%;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  color: #1E293B;
  resize: vertical;
  box-sizing: border-box;
}
.eng-section-textarea:focus {
  outline: none;
  border-color: #7C3AED;
  box-shadow: 0 0 0 2px #7C3AED22;
}
.eng-section-content {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  padding: 8px 12px;
  background: #F8FAFC;
  border-radius: 6px;
}
.eng-section-empty {
  color: #CBD5E1;
  font-style: italic;
}

/* Preview */
.eng-preview-details {
  margin-bottom: 16px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
}
.eng-preview-details summary {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  background: #F8FAFC;
  border-radius: 6px;
}
.eng-preview-body {
  padding: 12px 16px;
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  border-top: 1px solid #E2E8F0;
}

/* Action buttons */
.eng-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
}
.eng-btn {
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.eng-btn-save { background: #0D9488; color: #fff; }
.eng-btn-save:hover { background: #0F766E; }
.eng-btn-test-send { background: #F59E0B; color: #fff; }
.eng-btn-test-send:hover { background: #D97706; }
.eng-btn-send { background: #7C3AED; color: #fff; }
.eng-btn-send:hover { background: #6D28D9; }
.eng-btn-view { background: #EDE9FE; color: #7C3AED; margin-top: 6px; font-size: 12px; padding: 5px 12px; }
.eng-btn-view:hover { background: #DDD6FE; }
.eng-sent-label {
  font-size: 13px;
  font-weight: 600;
  color: #16A34A;
}
.eng-sent-id {
  font-size: 11px;
  color: #94A3B8;
}

/* ---- Scan Results ---- */
.eng-scan-results { padding: 4px 0; }
.eng-scan-results h3 { font-size: 16px; color: #1E293B; margin: 0 0 8px 0; }
.eng-scan-results p { font-size: 13px; color: #475569; margin: 0 0 12px 0; }
.eng-scan-sender {
  padding: 10px 0;
  border-bottom: 1px solid #F1F5F9;
}
.eng-scan-email { font-size: 12px; color: #94A3B8; margin-left: 8px; }
.eng-scan-count {
  font-size: 11px;
  background: #EDE9FE;
  color: #7C3AED;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 8px;
}
.eng-scan-subjects { padding: 4px 0 0 16px; }
.eng-scan-msg { font-size: 12px; color: #64748B; padding: 2px 0; }
.eng-scan-clear { color: #16A34A; font-weight: 500; }

/* ---- Pipeline Running ---- */
.eng-pipeline-running {
  text-align: center;
  padding: 40px 20px;
  color: #64748B;
}
.eng-pipeline-note {
  font-size: 12px;
  color: #94A3B8;
}
.eng-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #E2E8F0;
  border-top-color: #7C3AED;
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: engSpin 0.8s linear infinite;
}
@keyframes engSpin {
  to { transform: rotate(360deg); }
}

/* ---- Pipeline Results ---- */
.eng-pipeline-results { padding: 4px 0; }
.eng-pipeline-results h3 { font-size: 16px; color: #1E293B; margin: 0 0 8px 0; }
.eng-pipeline-results p { font-size: 13px; color: #475569; margin: 0 0 12px 0; }
.eng-pipeline-item {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.eng-pipeline-ok { background: #F0FDF4; border: 1px solid #BBF7D0; }
.eng-pipeline-error { background: #FEF2F2; border: 1px solid #FECACA; color: #DC2626; }
.eng-pipeline-empathy {
  font-size: 12px;
  color: #6D28D9;
  margin-top: 6px;
  font-style: italic;
}
.eng-pipeline-draft {
  font-size: 12px;
  color: #64748B;
  margin-top: 4px;
  line-height: 1.4;
}

/* ---- Recompose / Regenerate controls ---- */
.eng-btn-regen { background: #7C3AED; color: #fff; border: none; }
.eng-btn-regen:hover { background: #6D28D9; }
.eng-btn-regen:disabled { background: #C4B5FD; cursor: wait; }
.eng-btn-empathy { background: #0891B2; color: #fff; border: none; }
.eng-btn-empathy:hover { background: #0E7490; }
.eng-btn-sm { font-size: 11px; padding: 2px 8px; }
.eng-tone-select {
  padding: 5px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}
.eng-focus-input {
  padding: 5px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  flex: 1;
  min-width: 140px;
  max-width: 240px;
}
.eng-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
}

/* ---- Empathy Picker ---- */
.eng-empathy-picker {
  margin-top: 12px;
  background: #F0FDFA;
  border: 1px solid #99F6E4;
  border-radius: 8px;
  padding: 12px;
}
.eng-empathy-picker-loading { text-align: center; padding: 16px; color: #64748B; }
.eng-empathy-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.eng-empathy-picker-list { max-height: 280px; overflow-y: auto; }
.eng-empathy-option {
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.eng-empathy-option:hover { border-color: #0891B2; background: #F0FDFA; }
.eng-empathy-option-source { font-size: 11px; color: #64748B; margin-left: 6px; }
.eng-empathy-option-date { font-size: 11px; color: #94A3B8; margin-left: 6px; }
.eng-empathy-option-text { font-size: 13px; margin-top: 4px; color: #1E293B; }
.eng-empathy-option-detail { font-size: 11px; color: #94A3B8; margin-top: 2px; }
.eng-empathy-picker-custom {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.eng-empathy-custom {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
}
.eng-empathy-picker-selected {
  padding: 10px;
  background: #ECFDF5;
  border: 1px solid #6EE7B7;
  border-radius: 6px;
  font-size: 13px;
}
.eng-empathy-picker-empty { padding: 12px; color: #64748B; font-size: 13px; }
.eng-empathy-picker-error { padding: 12px; color: #DC2626; font-size: 13px; }

/* ---- Empty Empathy Section 2 ---- */
.eng-section-empty-empathy { background: #FFFBEB; border: 1px dashed #FCD34D; border-radius: 6px; padding: 8px; }
.eng-empathy-missing-tag {
  font-size: 10px;
  background: #FEF3C7;
  color: #92400E;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: normal;
}
.eng-empathy-missing-prompt { font-size: 12px; color: #92400E; margin-bottom: 6px; }
.eng-section-textarea-optional { border-color: #FCD34D; background: #FFFEF5; }

/* ---- Composing status ---- */
.eng-status-composing { color: #D97706; background: #FFFBEB; border-color: #FCD34D; }