/* Harmonized email composer with the email assistant (communication design r2, area 08). */
.ct-composer { --ct-assistant-width:344px; }
/* The sticky assistant panel is contained by the body row, so it can never slide over the footer. */
.ct-composer-body { display:grid; grid-template-columns:minmax(0,1fr) var(--ct-assistant-width); gap:24px; align-items:start; }
.ct-composer ::selection { background:#a7f3d0; color:#064e3b; }
.ct-composer-main { min-width:0; }
.ct-composer-main > .fi-sc { gap:24px; }

/* Subject: the authored topic, then the locked frame (R29). */
.ct-greeting-line { display:flex; align-items:flex-start; gap:8px; padding:9px 12px; border:1px dashed var(--ct-border); border-radius:8px; background:var(--ct-subtle); }
.ct-greeting-line p { margin:0; min-width:0; font-size:13px; line-height:20px; color:var(--ct-text); overflow-wrap:anywhere; }
.ct-greeting-line .ct-subject-fixed { font-size:12px; }
.ct-subject-line { display:flex; align-items:flex-start; gap:8px; margin-top:-14px; padding:9px 12px; border:1px dashed var(--ct-border); border-radius:8px; background:var(--ct-subtle); }
.ct-subject-line p { margin:0; min-width:0; font-size:13px; line-height:20px; color:var(--ct-text); overflow-wrap:anywhere; }
.ct-subject-lock { flex:none; width:14px; height:14px; margin-top:3px; color:var(--ct-muted); }
.ct-subject-label { margin-inline-end:6px; font-size:12px; font-weight:500; color:var(--ct-muted); }
.ct-subject-topic { font-weight:500; }
.ct-subject-fixed { color:var(--ct-muted); }
.ct-subject-line + .ct-topic-suggestion { margin-top:8px; }
.ct-topic-suggestion { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:9px 12px; border:1px solid #bfdbfe; border-radius:8px; background:var(--ct-info-soft); color:#1e3a8a; }
.ct-topic-suggestion .ct-icon { width:16px; height:16px; color:var(--ct-info); }
.ct-topic-suggestion p { flex:1 1 220px; margin:0; font-size:13px; line-height:20px; }
.ct-topic-suggestion p span { color:#1e40af; margin-inline-end:4px; }

/* The answer streams in place of the subject and body (D39). */
.ct-assistant-stage { display:grid; gap:16px; }
/* A column whose only content is hidden by the streaming state leaves no gap behind. */
.ct-composer-letter > .fi-sc > .fi-grid-col:not(:has(:is(.ct-subject-line,.ct-topic-suggestion,.ct-assistant-stage,.fi-fo-field):not([style*="display: none"]):not([x-cloak]))) { display:none; }
.ct-assistant-stage[data-kind=topic] { margin-bottom:24px; }
.ct-stage-field { display:grid; gap:8px; }
.ct-stage-label { font-size:14px; line-height:20px; font-weight:500; color:var(--gray-950,var(--ct-text)); }
.ct-stage-subject { display:flex; flex-wrap:wrap; align-items:center; min-height:36px; margin:0; padding:7px 12px; border:1px solid var(--ct-primary); border-radius:8px; background:var(--ct-surface); font-size:14px; line-height:20px; }
.ct-stage-topic { font-weight:500; }
.ct-stage-subject .ct-subject-fixed { margin-inline-start:2px; }
.ct-stage-editor { overflow:hidden; border:1px solid var(--ct-primary); border-radius:8px; background:var(--ct-surface); }
.ct-stage-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; min-height:42px; padding:8px 12px; border-bottom:1px dashed var(--ct-border); background:var(--ct-subtle); font-size:12px; line-height:18px; }
.ct-stage-status { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ct-primary); }
.ct-stage-held { flex:1 1 200px; color:var(--ct-muted); }
.ct-stage-pulse { width:8px; height:8px; border-radius:999px; background:var(--ct-progress-fill); box-shadow:0 0 0 0 rgb(16 185 129 / 45%); animation:ct-stage-pulse 1.6s var(--ct-ease) infinite; }
.ct-stage-content { min-height:224px; padding:14px 16px; font-size:14px; line-height:1.7; }
.ct-stage-content p { margin:0 0 12px; }
.ct-stage-content ul { margin:0 0 12px; padding-inline-start:20px; list-style:disc; }
.ct-stage-caret { display:inline-block; width:2px; height:1.1em; margin-inline-start:2px; vertical-align:-2px; background:var(--ct-primary); animation:ct-stage-caret 1s steps(2,start) infinite; }
@keyframes ct-stage-pulse { 70% { box-shadow:0 0 0 7px rgb(16 185 129 / 0%); } 100% { box-shadow:0 0 0 0 rgb(16 185 129 / 0%); } }
@keyframes ct-stage-caret { to { visibility:hidden; } }

/* Assistant panel. */
.ct-assistant-panel { position:sticky; top:24px; display:grid; min-width:0; border:1px solid var(--ct-border); border-radius:var(--ct-radius); background:var(--ct-surface); box-shadow:0 1px 2px rgb(23 23 23 / 4%),0 8px 24px -12px rgb(23 23 23 / 10%); }
.ct-assistant-heading { display:flex; gap:12px; padding:18px 20px 16px; border-bottom:1px dashed var(--ct-border); }
.ct-assistant-mark { display:grid; flex:none; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--ct-primary-soft); color:var(--ct-primary); }
.ct-assistant-mark .ct-icon { width:18px; height:18px; }
.ct-assistant-heading h2 { margin:0; font-size:15px; line-height:22px; font-weight:600; }
.ct-assistant-heading p { margin:2px 0 0; font-size:12px; line-height:18px; color:var(--ct-muted); }
.ct-assistant-prototype-note { display:flex; align-items:flex-start; gap:8px; margin:0; padding:10px 20px; border-bottom:1px dashed var(--ct-border); background:var(--ct-subtle); font-size:12px; line-height:18px; color:var(--ct-muted); }
.ct-assistant-prototype-note .ct-icon { flex:none; width:15px; height:15px; margin-top:2px; }
.ct-assistant-compose { display:grid; gap:12px; padding:16px 20px 18px; }
.ct-assistant-label { font-size:13px; line-height:20px; font-weight:500; color:var(--ct-text); }
.ct-assistant-input { display:block; width:100%; min-height:96px; resize:vertical; padding:10px 12px; border:1px solid var(--ct-border-strong); border-radius:8px; background:var(--ct-surface); color:var(--ct-text); font:inherit; font-size:13px; line-height:20px; caret-color:var(--ct-primary); transition:border-color var(--ct-motion,200ms) var(--ct-ease),box-shadow var(--ct-motion,200ms) var(--ct-ease); }
.ct-assistant-input::placeholder { color:#8a8a8a; }
/* Harmonized field focus: the border turns primary; no ring and no outline (as native fields). */
.ct-composer .ct-assistant-input:is(:focus,:focus-visible) { outline:none; border-color:var(--ct-primary); box-shadow:none; }
.ct-assistant-input:disabled { background:var(--ct-subtle); color:var(--ct-muted); cursor:not-allowed; }
.ct-assistant-input.is-invalid { border-color:var(--ct-danger); }
.ct-assistant-error { margin:-4px 0 0; font-size:12px; line-height:18px; color:#b91c1c; }
.ct-assistant-actions { display:flex; align-items:center; gap:12px; }
.ct-assistant-run { flex:1; }
.ct-assistant-run-label { display:inline-flex; align-items:center; gap:6px; }
.ct-assistant-run-label .ct-icon { width:16px; height:16px; }
.ct-assistant-shortcut { display:inline-flex; gap:4px; flex:none; }
.ct-assistant-shortcut kbd { min-width:22px; padding:1px 6px; border:1px solid var(--ct-border); border-bottom-width:2px; border-radius:5px; background:var(--ct-subtle); font:inherit; font-size:11px; line-height:18px; color:var(--ct-muted); text-align:center; }
.ct-assistant-quick { display:flex; flex-wrap:wrap; gap:6px; }
.ct-assistant-chip { min-height:28px; padding:4px 10px; border:1px solid var(--ct-border); border-radius:999px; background:var(--ct-surface); font-size:12px; line-height:18px; font-weight:500; color:var(--ct-text); transition:background-color var(--ct-motion,200ms) var(--ct-ease),border-color var(--ct-motion,200ms) var(--ct-ease),color var(--ct-motion,200ms) var(--ct-ease); }
.ct-assistant-chip:hover:not(:disabled) { border-color:#6ee7b7; background:var(--ct-primary-soft); color:#065f46; }
.ct-assistant-chip:focus-visible,.ct-assistant-restore:focus-visible,.ct-assistant-context summary:focus-visible { outline:2px solid var(--ct-primary); outline-offset:2px; }
.ct-assistant-chip:disabled { color:var(--ct-faint); cursor:not-allowed; }
.ct-assistant-writing { display:grid; gap:10px; padding:12px; border:1px solid #a7f3d0; border-radius:8px; background:var(--ct-primary-soft); }
.ct-assistant-progress { position:relative; height:3px; overflow:hidden; border-radius:999px; background:#d1fae5; }
.ct-assistant-progress span { position:absolute; inset-block:0; width:40%; border-radius:inherit; background:var(--ct-progress-fill); animation:ct-assistant-progress 1.4s var(--ct-ease) infinite; }
@keyframes ct-assistant-progress { from { inset-inline-start:-40%; } to { inset-inline-start:100%; } }
.ct-assistant-writing-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ct-assistant-writing-row p { margin:0; font-size:13px; line-height:20px; color:#065f46; font-variant-numeric:tabular-nums; }
.ct-assistant-writing-row p span { margin-inline-start:4px; color:#047857; }
.ct-assistant-hint { margin:0; font-size:12px; line-height:18px; color:#047857; }
.ct-assistant-notice { display:flex; align-items:flex-start; gap:10px; margin:0 20px 18px; padding:12px; border:1px solid #bfdbfe; border-radius:8px; background:var(--ct-info-soft); }
.ct-assistant-notice > .ct-icon { flex:none; width:18px; height:18px; margin-top:1px; color:var(--ct-info); }
.ct-assistant-notice h3 { margin:0; font-size:13px; line-height:20px; font-weight:600; color:#1e3a8a; }
.ct-assistant-notice p { margin:2px 0 0; font-size:12px; line-height:18px; color:#1e40af; }
.ct-assistant-failure,.ct-assistant-done { display:flex; align-items:flex-start; gap:10px; margin:0 20px 18px; padding:12px; border-radius:8px; }
.ct-assistant-failure { border:1px solid #fecaca; background:var(--ct-danger-soft); }
.ct-assistant-failure > .ct-icon { flex:none; width:18px; height:18px; margin-top:1px; color:var(--ct-danger); }
.ct-assistant-failure h3 { margin:0; font-size:13px; line-height:20px; font-weight:600; color:#7f1d1d; }
.ct-assistant-failure p { margin:2px 0 10px; font-size:12px; line-height:18px; color:#991b1b; }
.ct-assistant-done { align-items:center; border:1px solid #a7f3d0; background:var(--ct-primary-soft); }
.ct-assistant-done > .ct-icon { flex:none; width:18px; height:18px; color:var(--ct-primary); }
.ct-assistant-done p { flex:1; margin:0; font-size:12px; line-height:18px; color:#065f46; }
.ct-assistant-context { margin:0 20px; border-top:1px dashed var(--ct-border); }
.ct-assistant-context summary { display:flex; align-items:center; gap:8px; padding:12px 0; font-size:12px; line-height:18px; font-weight:500; color:var(--ct-muted); cursor:pointer; list-style:none; }
.ct-assistant-context summary::-webkit-details-marker { display:none; }
.ct-assistant-context summary .ct-icon { width:15px; height:15px; }
.ct-assistant-context[open] summary { color:var(--ct-text); }
.ct-assistant-context dl { display:grid; gap:8px; margin:0 0 10px; }
.ct-assistant-context dl div { display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px; font-size:12px; line-height:18px; }
.ct-assistant-context dt { color:var(--ct-muted); }
.ct-assistant-context dd { margin:0; color:var(--ct-text); overflow-wrap:anywhere; }
.ct-assistant-context > p { margin:0 0 14px; font-size:12px; line-height:18px; color:var(--ct-muted); }
.ct-assistant-history { display:grid; gap:10px; margin:0 20px; padding:14px 0 20px; border-top:1px dashed var(--ct-border); }
.ct-assistant-history h3 { margin:0; font-size:13px; line-height:20px; font-weight:600; }
.ct-assistant-history-item { display:grid; gap:4px; padding:10px 12px; border:1px solid var(--ct-border); border-radius:8px; background:var(--ct-surface); }
.ct-assistant-run-head { display:flex; align-items:center; gap:8px; font-size:12px; line-height:18px; }
.ct-assistant-run-head time { margin-inline-start:auto; color:var(--ct-muted); font-variant-numeric:tabular-nums; }
.ct-assistant-run-number { display:grid; place-items:center; width:20px; height:20px; border-radius:999px; background:var(--ct-subtle); font-size:11px; font-weight:600; color:var(--ct-muted); font-variant-numeric:tabular-nums; }
.ct-assistant-history-item > p { margin:0; font-size:12px; line-height:18px; color:var(--ct-muted); overflow-wrap:anywhere; }
.ct-assistant-history-item > .ct-assistant-run-topic { color:var(--ct-text); font-weight:500; }
.ct-assistant-restore { justify-self:start; margin-top:2px; padding:0; border:0; background:none; font-size:12px; line-height:18px; font-weight:500; color:var(--ct-link,#047857); text-decoration:underline; text-underline-offset:3px; text-decoration-color:#a7f3d0; }
.ct-assistant-restore:hover { color:var(--ct-link-hover,#065f46); text-decoration-color:currentColor; }
.ct-assistant-empty { margin:0; font-size:12px; line-height:18px; color:var(--ct-muted); }

/* Footer: the standard Harmonized canvas footer (.ct-form-footer), with product button sizing. */
.ct-composer-footer .fi-btn { min-height:40px; min-width:88px; }

/* Sent, waiting for approval and no permission. */
.ct-composer-result-heading { display:flex; align-items:flex-start; gap:14px; padding:22px 24px; border-bottom:1px dashed var(--ct-border); }
.ct-composer-result-icon,.ct-composer-empty-icon { display:grid; flex:none; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--ct-primary-soft); color:var(--ct-primary); }
.ct-composer-result[data-status=awaiting_approval] .ct-composer-result-icon { background:var(--ct-warning-soft); color:var(--ct-warning); }
.ct-composer-result-icon .ct-icon,.ct-composer-empty-icon .ct-icon { width:20px; height:20px; }
.ct-composer-result-heading h2 { margin:0; font-size:17px; line-height:26px; font-weight:600; }
.ct-composer-result-heading p { margin:2px 0 0; font-size:13px; line-height:20px; color:var(--ct-muted); }
.ct-composer-result-facts { display:grid; gap:10px; margin:0 0 20px; }
.ct-composer-result-facts div { display:grid; grid-template-columns:140px minmax(0,1fr); gap:12px; font-size:13px; line-height:20px; }
.ct-composer-result-facts dt { color:var(--ct-muted); }
.ct-composer-result-facts dd { margin:0; overflow-wrap:anywhere; }
.ct-composer-result-body { max-width:72ch; padding:16px 18px; border:1px solid var(--ct-border); border-radius:8px; background:var(--ct-subtle); }
.ct-composer-result-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.ct-composer-empty { display:grid; justify-items:start; gap:10px; max-width:640px; padding:28px; }
.ct-composer-empty h2 { margin:6px 0 0; font-size:17px; line-height:26px; font-weight:600; }
.ct-composer-empty p { margin:0; font-size:13px; line-height:21px; color:var(--ct-muted); }
.ct-composer-empty-icon { background:var(--ct-subtle); color:var(--ct-muted); }
.ct-letter-preview { display:block; width:100%; height:calc(100vh - 220px); min-height:480px; border:1px solid var(--ct-border); border-radius:8px; background:#f5f5f5; }

@media(max-width:1100px) {
    .ct-composer-body { grid-template-columns:minmax(0,1fr); }
    .ct-assistant-panel { position:static; }
}
@media(max-width:700px),(pointer:coarse) { .ct-assistant-shortcut { display:none; } }
@media(max-width:700px) {
    .ct-composer-result-facts div,.ct-assistant-context dl div { grid-template-columns:minmax(0,1fr); gap:2px; }
    .ct-assistant-heading,.ct-assistant-compose { padding-inline:16px; }
    .ct-assistant-failure,.ct-assistant-done,.ct-assistant-notice,.ct-assistant-context,.ct-assistant-history { margin-inline:16px; }
    .ct-assistant-prototype-note { padding-inline:16px; }
}
@media(prefers-reduced-motion:reduce) {
    .ct-stage-pulse,.ct-stage-caret { animation:none; }
    .ct-assistant-progress span { width:100%; inset-inline-start:0; animation:none; opacity:.6; }
}