/* alec-detail.css — Alec email detail panel styles
   Split from alec.css as part of FEAT-033 Chunk 6.2.
   All detail panel CSS goes here, not in alec.css. */

.alec-detail-pane { padding: 20px; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.alec-detail-empty { padding: 60px 20px; text-align: center; color: var(--light-gray); font-size: 14px; }
.alec-detail-scenario { padding: 10px 14px; margin: 10px 16px 0; border-radius: 0 6px 6px 0; }
.alec-detail-scenario.header-green { background: var(--green-light); border-left: 3px solid var(--teal); }
.alec-detail-scenario.header-yellow { background: var(--amber-light); border-left: 3px solid var(--amber); }
.alec-detail-scenario.header-red { background: var(--red-light); border-left: 3px solid var(--red); }
.alec-detail-scenario-title { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.alec-detail-scenario-sub { font-size: 11px; color: var(--gray); margin-bottom: 8px; }
.alec-detail-scenario-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.alec-yellow-btn { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--amber); background: var(--white); color: #92400e; cursor: pointer; font-family: inherit; }
.alec-yellow-btn:hover { background: var(--amber-light); }
.alec-yellow-btn.alec-yellow-btn-secondary { border-color: var(--border); color: var(--gray); }
.alec-detail-email { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.alec-detail-email-meta { font-size: 12px; color: var(--gray); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.alec-detail-email-from, .alec-detail-email-subject { margin-bottom: 4px; }
.alec-detail-email-body { font-size: 14px; line-height: 1.6; color: var(--navy); white-space: pre-wrap; word-wrap: break-word; }
.alec-detail-read { background: var(--white); border-left: 4px solid var(--teal); border-radius: 6px; padding: 12px 16px; }
.alec-detail-read-label { font-size: 11px; font-weight: 700; color: var(--teal-dark); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.alec-detail-read-summary { font-size: 13px; color: var(--navy); line-height: 1.5; }
.alec-detail-read-meta { font-size: 11px; color: var(--gray); margin-top: 6px; }
.alec-detail-draft { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.alec-detail-draft-label { font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.alec-detail-draft-body { font-size: 14px; line-height: 1.6; color: var(--navy); white-space: pre-wrap; word-wrap: break-word; }
.alec-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.alec-detail-btn { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--white); color: var(--navy); cursor: pointer; transition: opacity 0.15s; font-family: inherit; }
.alec-detail-btn:hover { opacity: 0.85; }
.alec-detail-btn.primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.alec-detail-btn.alec-detail-btn-tertiary { color: var(--gray); }
.alec-detail-next { background: var(--green-light); border-radius: 10px; padding: 14px 16px; border-left: 4px solid var(--green); }
.alec-detail-next-label { font-size: 12px; font-weight: 700; color: #065f46; margin-bottom: 8px; }
.alec-detail-next-body { font-size: 13px; color: var(--navy); }
.alec-detail-next-list { font-size: 13px; color: var(--navy); margin: 0; padding-left: 20px; line-height: 1.6; }

/* Section A — Frozen layout for detail panel (Chunk 6.2) */
.alec-detail-pane { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.alec-detail-frozen-header { flex-shrink: 0; }
.alec-detail-scroll { flex: 1; overflow-y: auto; padding: 16px; }
.alec-detail-frozen-footer { flex-shrink: 0; border-top: 0.5px solid var(--border); padding: 12px 16px; background: var(--white); }

/* Section C — Email metadata block (Chunk 6.2) */
.alec-detail-email-meta { font-size: 12px; color: var(--gray); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 0.5px solid var(--border); line-height: 1.8; }
.alec-detail-email-meta strong { color: var(--navy); font-weight: 600; }

/* Section D — Draft separator (Chunk 6.2) */
.alec-draft-separator { display: flex; align-items: center; gap: 8px; margin: 16px 0 12px; }
.alec-draft-separator-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.alec-draft-separator-label { font-size: 10px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; }
.alec-draft-separator-line { flex: 1; height: 0.5px; background: var(--border); }

/* Section E — Action buttons footer (Chunk 6.2) */
.alec-detail-action-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.alec-action-btn { font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: 0.5px solid var(--border); background: var(--white); color: var(--navy); cursor: pointer; font-family: inherit; }
.alec-action-btn:hover { opacity: 0.85; }
.alec-action-btn.primary { background: var(--teal); color: var(--white); border-color: var(--teal); }
.alec-action-btn.tertiary { color: var(--gray); border-color: var(--border); }

/* Section F — Confidence badge on inbox rows (Chunk 6.2) */
.alec-confidence-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 8px; background: var(--bg); color: var(--navy); border: 0.5px solid var(--border); }

/* Section G — Scenario filter row (Chunk 6.2) */
.alec-scenario-filter { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 0.5px solid var(--border); flex-wrap: wrap; }
.alec-scenario-btn { font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 6px; border: 0.5px solid var(--border); background: var(--white); color: var(--gray); cursor: pointer; font-family: inherit; }
.alec-scenario-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* FEAT-033 step 9 — outgoing/auto-filed detail-panel additions */
.alec-detail-source-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-right: 6px; vertical-align: middle; }
.alec-detail-source-badge.alec-source-trac { background: #dbeafe; color: #1e40af; }
.alec-detail-source-badge.alec-source-dani { background: var(--green-light); color: #065f46; }
.alec-detail-source-badge.alec-source-alec { background: var(--teal-light); color: var(--teal-dark); }
.alec-detail-source-badge.alec-source-user { background: var(--border); color: var(--gray); }
.alec-detail-flag-context { background: var(--bg); border-left: 3px solid var(--amber); border-radius: 0 6px 6px 0; padding: 10px 14px; margin-bottom: 12px; }
.alec-detail-flag-context-meta { font-size: 11px; color: var(--gray); }
.alec-detail-recipient-warning { font-size: 12px; color: #991b1b; background: var(--red-light); padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; }
.alec-detail-channel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.alec-detail-channel-label { font-size: 12px; font-weight: 600; color: var(--gray); }
.alec-detail-channel-row .draft-send-toggle { margin: 0; }
.alec-detail-channel-row .send-type-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.alec-detail-sms-note { font-size: 11px; color: var(--gray); margin-bottom: 8px; line-height: 1.4; }
.alec-detail-email-body-empty { font-style: italic; color: var(--light-gray); font-size: 13px; }

/* Mobile responsive — Alec detail panel (max-width: 768px) */
@media (max-width: 768px) {
  .alec-detail-scroll { padding: 12px; }
  .alec-detail-frozen-footer { padding: 10px 12px; }
  .alec-detail-scenario { margin: 8px 12px 0; }
  .alec-detail-scenario-btns { flex-wrap: wrap; }
  .alec-yellow-btn { flex: 1 1 auto; min-height: 44px; }
}