/* CRM email (crm-email.js): 1 · choose a template, 2 · the email the AI drafted, What the AI read beside it.
   One page, never a modal. Tokens only; 16px inputs on phones; no sideways scroll. The email itself is a white
   "paper" inside a sandboxed frame (its colours are the email's own, set inside the frame). */

.em { display: grid; gap: 14px; max-width: 1240px; min-width: 0; }
.em .card { margin: 0; min-width: 0; }

.em .em-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.em-head-main { min-width: 0; display: grid; gap: 2px; }
.em-title { margin: 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }

.em-warn { border: 1px solid var(--warn); border-left-width: 4px; background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 10px 14px; font-weight: 600; }

.em-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.em-main { display: grid; gap: 14px; min-width: 0; }

.em-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.em-step-h h2 { margin: 0; font-size: 16px; }
.em-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--primary-soft); color: var(--primary); }
.em-status { margin-left: auto; text-align: right; }

/* 1 · the templates: one radio group of cards */
.em-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.em-tpl { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 10px 12px; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.em-tpl:hover { background: var(--surface-hover); }
.em-tpl:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.em-tpl[aria-checked="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--surface-sel); }
.em-tpl[aria-checked="true"] .em-tpl-name { color: var(--primary); }
.em-tpl[aria-disabled="true"] { cursor: progress; }
.em-tpl-name { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.em-tpl-purpose { font-size: 12.5px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.em-tpl-src { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

/* 2 · the email */
.em-empty { margin: 0; color: var(--text-muted); }
.em-mail[data-state="empty"] .em-compose { display: none; }
.em-mail:not([data-state="empty"]) .em-empty { display: none; }
.em-compose { display: grid; gap: 12px; min-width: 0; }
.em-subj, .em-ai { width: 100%; }
.em-paper { position: relative; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.em-frame { display: block; width: 100%; min-height: 300px; border: 0; border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow); }
.em-writing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--surface) 86%, transparent); border-radius: var(--radius); }
.em-writing[hidden] { display: none; }
.em-mail[data-state="writing"] .em-paper { min-height: 320px; }
.em-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.em-files .cx-files { flex-basis: 100%; }
.em-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.em-sp { flex: 1 1 auto; }

/* What the AI read */
.em-side { min-width: 0; }
.em-know summary { display: grid; gap: 2px; cursor: pointer; list-style: none; }
.em-know summary::-webkit-details-marker { display: none; }
.em-know summary::after { content: 'Show'; justify-self: start; font-size: 12px; font-weight: 600; color: var(--primary); }
.em-know[open] summary::after { content: 'Hide'; }
.em-know-h { font-size: 15px; font-weight: 700; }
.em-know-note { margin: 10px 0 0; }
.em-k-facts { margin-top: 12px; }
.em-k-h { margin: 16px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.em-k-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.em-k-list li { display: grid; gap: 2px; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.em-h-item { padding-top: 8px; border-top: 1px solid var(--border); }
.em-h-top { display: flex; justify-content: space-between; gap: 8px; }
.em-h-prev { font-size: 12.5px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* who it is to (Communications) */
.em-who { display: grid; gap: 8px; max-width: 640px; }
.em-who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.em-who-item { width: 100%; display: grid; gap: 2px; text-align: left; font: inherit; color: var(--text); padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.em-who-item:hover { background: var(--surface-hover); }
.em-who-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.em-who-item:disabled { cursor: not-allowed; opacity: .6; }
.em-who-none { padding: 4px 2px; }

@media (min-width: 1001px) {
  .em-side { position: sticky; top: 12px; }
}
@media (max-width: 1000px) {
  .em-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .em-head { flex-direction: column; }
  .em-tpls { grid-template-columns: minmax(0, 1fr); }
  .em-step-h { flex-wrap: wrap; }
  .em-status { flex-basis: 100%; margin-left: 0; text-align: left; }
  .em-subj, .em-ai, .em-who-q { font-size: 16px; }
  .em-paper { padding: 6px; }
  .em-foot .btn { flex: 1 1 auto; }
  .em-foot .em-sp { display: none; }
  .em-foot [data-act="send"] { order: -1; flex-basis: 100%; }
}