/* Email compose (Send email, AI "Copy draft"): wide, condensed header, the message editor dominates.
   Loaded after application.css (stylesheet_link_tag :app is alphabetical), so these override .stack / .contact-form. */
main:has(.compose-form) { max-width:1200px; margin-top:.5rem; }
.compose-head { gap:.5rem; margin-bottom:.4rem; }
.compose-head h1 { font-size:1.25rem; margin:.1rem 0; }
.compose-hint { margin:0 0 .4rem; line-height:1.3; }
.contact-form.compose-form { max-width:none; width:100%; box-sizing:border-box; gap:.45rem; padding:.6rem .75rem; }

/* one-line fields: inline label | input | (mic / buttons) */
.compose-line { display:grid; grid-template-columns:4.75rem minmax(0,1fr); align-items:center; gap:.5rem; min-width:0; }
.compose-line.with-mic { grid-template-columns:4.75rem minmax(0,1fr) auto; }
.compose-line > label, .compose-label, .compose-form .signature-picker > label { font-weight:600; color:#374151; font-size:.9rem; }
.compose-line input, .compose-line select { padding:.35rem .45rem; min-width:0; }
.compose-static { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compose-line-end { display:inline-flex; gap:.35rem; align-items:center; }
.compose-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.45rem 1rem; align-items:center; }
.compose-pair:has(> :only-child) { grid-template-columns:minmax(0,1fr); }
.compose-form .signature-picker { display:grid; grid-template-columns:4.75rem minmax(0,1fr) auto; gap:.5rem; align-items:center; }
.compose-form .signature-picker select { width:100%; padding:.35rem .45rem; }
.compose-form .signature-picker > a { font-size:.85rem; white-space:nowrap; }

/* To / Cc / Bcc (compose_recipients_controller.js): Gmail-style Cc / Bcc links, contact suggestions */
.compose-recipients { position:relative; display:grid; gap:.45rem; }
.compose-line[hidden] { display:none; }
.compose-form .link-button { background:none; border:0; padding:.1rem .25rem; color:var(--brand); font:inherit; font-size:.88rem; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.compose-form .link-button[hidden] { display:none; }
.recipient-menu { position:absolute; z-index:40; list-style:none; margin:0; padding:.25rem; background:#fff; border:1px solid var(--line);
  border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.15); max-height:18rem; overflow:auto; }
.recipient-menu li { padding:.35rem .5rem; border-radius:4px; cursor:pointer; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recipient-menu li span { color:#6b7280; }
.recipient-menu li:hover, .recipient-menu li.active { background:#eef2ff; }

/* Attachments (email_attachments_controller.js): 📎 button, drop anywhere on the form, one chip per file */
.compose-form.compose-dragging { outline:2px dashed var(--brand); outline-offset:4px; background:#f8fafc; }
.compose-attach { display:grid; gap:.35rem; }
.compose-attach-bar { display:flex; flex-wrap:wrap; gap:.35rem .75rem; align-items:center; }
.compose-record-files { border:0; padding:0; margin:0; background:none; border-radius:0; }
.compose-record-files > summary { list-style:none; display:inline; }
.compose-record-files > summary::-webkit-details-marker { display:none; }
.compose-record-files ul { list-style:none; margin:.3rem 0 0; padding:.4rem .6rem; border:1px solid var(--line); border-radius:6px; display:grid; gap:.2rem; max-height:12rem; overflow:auto; }
.attach-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.attach-chips:empty { display:none; }
.attach-chip { display:inline-flex; align-items:center; gap:.35rem; max-width:100%; background:#f3f4f6; border:1px solid var(--line); border-radius:999px; padding:.15rem .25rem .15rem .6rem; font-size:.86rem; }
.attach-chip.uploading { background:#fff; }
.attach-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:18rem; }
.attach-chip progress { width:4.5rem; height:.45rem; }
.attach-remove { background:none; border:0; border-radius:999px; width:1.5rem; height:1.5rem; line-height:1; font-size:1.1rem; cursor:pointer; color:#4b5563; padding:0; }
.attach-remove:hover, .attach-remove:focus-visible { background:#e5e7eb; color:#111827; }
.attach-error { margin:0; }

/* tools row: ✨ AI toggle, 📋 canned text, 🎤 for the message */
.compose-tools { display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; }
.compose-tools .editor-inserts { margin:0; }
.compose-ai { border:0; border-radius:0; padding:0; margin:0; background:none; } /* marketing.css styles bare details */
.compose-ai > summary { list-style:none; display:inline-block; width:auto; }
.compose-ai > summary::-webkit-details-marker { display:none; }
.compose-ai[open] { flex-basis:100%; }
.compose-ai[open] > summary { margin-bottom:.35rem; }
.compose-ai .ai-draft { padding:.45rem .6rem; }
.compose-ai .ai-draft-row select { width:auto; max-width:100%; }
.compose-ai .ai-draft-status { margin-top:.25rem; }
.compose-form .dictation-button { width:2.25rem; height:2.25rem; font-size:1.1rem; }

.compose-body { gap:.2rem; }
.compose-body .tox-tinymce { border-radius:4px; }
.compose-form .form-actions { gap:.6rem; }
.compose-note { flex:1 1 16rem; }

@media (max-width:700px) {
  main:has(.compose-form) { padding:0 .4rem; margin-top:.3rem; }
  .contact-form.compose-form { padding:.45rem; gap:.4rem; }
  .compose-pair { grid-template-columns:minmax(0,1fr); gap:.4rem; }
  .compose-line, .compose-form .signature-picker { grid-template-columns:3.75rem minmax(0,1fr); }
  .compose-line.with-mic { grid-template-columns:3.75rem minmax(0,1fr) auto; }
  .compose-form .signature-picker > a { grid-column:2; }
  .compose-head h1 { font-size:1.1rem; }
}

/* 📋 Insert canned text picker (canned_picker_controller.js) */
.canned-picker { position:relative; border:0; padding:0; margin:0; background:none; border-radius:0; } /* marketing.css styles bare details */
.canned-picker > summary { list-style:none; display:inline-block; }
.canned-picker > summary::-webkit-details-marker { display:none; }
.canned-picker-panel { position:absolute; z-index:30; top:calc(100% + .3rem); left:0; width:min(28rem, calc(100vw - 1.5rem)); background:#fff;
  border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.15); padding:.5rem; display:grid; gap:.4rem; }
.canned-picker-list { list-style:none; margin:0; padding:0; max-height:min(22rem, 60vh); overflow:auto; display:grid; gap:.15rem; }
.canned-picker-list li[hidden] { display:none; }
.canned-picker-item { display:grid; gap:.1rem; width:100%; text-align:left; background:none; border:1px solid transparent; border-radius:4px; padding:.35rem .45rem; cursor:pointer; font:inherit; color:inherit; }
.canned-picker-item:hover, .canned-picker-item:focus-visible { background:#f3f4f6; border-color:var(--line); outline:none; }
.canned-preview { font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.canned-badge { font-size:.72rem; background:#e0f2fe; color:#075985; border-radius:999px; padding:0 .4rem; font-weight:400; }
.canned-picker-empty, .canned-picker-foot { margin:0; font-size:.85rem; }
.canned-subject-offer { margin:.15rem 0 .4rem; font-size:.85rem; }
.canned-subject-offer[hidden] { display:none; }
.picture-grid { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr)); gap:1rem; padding:0; }
.picture-versions { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.picture-versions figcaption { font-weight:600; font-size:.85rem; }
.picture-layout { margin-left:.5rem; }
.picture-layout a.active { font-weight:700; }
.picture-card, .picture-grid li { border:1px solid var(--line); border-radius:8px; padding:.6rem; background:#fff; }
.picture-thumb { width:100%; height:8rem; object-fit:cover; border-radius:4px; background:#f3f4f6; }
.picture-actions { display:flex; gap:.4rem; align-items:center; }
.picture-picker-grid { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:.4rem; margin:.4rem 0; padding:0; max-height:16rem; overflow:auto; }
.picture-picker-item { display:grid; gap:.15rem; width:100%; background:none; border:1px solid transparent; border-radius:4px; padding:.2rem; cursor:pointer; font:inherit; }
.picture-picker-item .picture-thumb { height:4.5rem; }
.picture-picker-item:hover, .picture-picker-item:focus-visible { border-color:var(--line); background:#f3f4f6; }
.picture-library-note, #picture-library-public-note { background:#fff7ed; border:1px solid #fdba74; color:#9a3412; padding:.55rem .75rem; border-radius:6px; }
@media (max-width:700px) { .canned-picker-panel { width:calc(100vw - 3rem); } }

/* Settings > Canned text */
.stack.canned-form { max-width:900px; }
.canned-search { display:flex; gap:.4rem; align-items:center; margin:.5rem 0; max-width:32rem; }
.canned-visibility { white-space:nowrap; }

/* Sent emails in the communication log: Bcc line (sender / admins only), attachment links, inline images */
.log-email-bcc { margin:.1rem 0; font-size:.85rem; }
.log-email-files { list-style:none; margin:.35rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem; }
.log-email-files a { display:inline-block; background:#f3f4f6; border:1px solid var(--line); border-radius:999px; padding:.1rem .6rem; font-size:.85rem; text-decoration:none; }
img.email-inline-img { max-width:100%; height:auto; }
/* Send split button (Send email ▾ -> Send later), Save draft and the autosave stamp. */
.compose-form .compose-actions { align-items:center; flex-wrap:wrap; }
.compose-form .send-split { display:inline-flex; align-items:stretch; position:relative; }
.compose-form .send-later { display:flex; border:0; border-radius:0; padding:0; margin:0; background:none; } /* marketing.css styles bare details */
.compose-form .send-split > input.btn { border-top-right-radius:0; border-bottom-right-radius:0; }
.compose-form .send-later > summary { list-style:none; border-top-left-radius:0; border-bottom-left-radius:0; border-left:1px solid rgba(255,255,255,.35); padding-left:.55rem; padding-right:.55rem; cursor:pointer; display:flex; align-items:center; margin:0; }
.compose-form .send-later > summary::-webkit-details-marker { display:none; }
.compose-form .send-later-menu { position:absolute; bottom:calc(100% + .35rem); left:0; z-index:20; min-width:17rem; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.16); padding:.5rem; display:flex; flex-direction:column; gap:.3rem; }
.compose-form .send-later-title { margin:0 0 .2rem; font-weight:600; font-size:.86rem; }
.compose-form .send-later-item { text-align:left; background:none; border:0; border-radius:5px; padding:.35rem .45rem; cursor:pointer; font-size:.88rem; display:flex; flex-direction:column; }
.compose-form .send-later-item:hover, .compose-form .send-later-item:focus { background:#eef2ff; }
.compose-form .send-later-custom { display:flex; flex-direction:column; gap:.15rem; font-size:.8rem; color:var(--muted); border-top:1px solid var(--line); padding-top:.4rem; }
.compose-form .draft-stamp { font-size:.8rem; }
.compose-form .draft-stamp.alert-text { color:#b91c1c; }
.compose-form .draft-stamp.is-saved { color:#14532d; font-weight:600; }
.compose-form .draft-stamp.is-saved a { font-weight:700; }

/* 🎤 Dictate (big, labeled) for the message body: dictation_button(big: true) */
.dictation-button.dictation-button-big,
.compose-form .dictation-button.dictation-button-big { width:auto; height:auto; min-height:2.25rem; padding:.3rem .85rem; display:inline-flex;
  align-items:center; gap:.35rem; font:inherit; font-size:.95rem; font-weight:600; color:var(--brand); border:1px solid var(--brand); background:#fff; }
.dictation-button-big .dictation-icon { font-size:1.1rem; }
.dictation-big.recording .dictation-button-big { color:#fff; background:#dc2626; border-color:#dc2626; }
.dictation-big.unsupported .dictation-button-big { opacity:.55; cursor:help; color:#4b5563; border-color:var(--line); }
@media (max-width:700px) { .dictation-button.dictation-button-big { min-height:2.75rem; padding:.4rem 1rem; } }

/* ✨ Improve (email_improve_controller.js) */
.email-improve-menu { position:relative; border:0; border-radius:0; padding:0; margin:0; background:none; }
.email-improve-menu > summary { list-style:none; display:inline-flex; align-items:center; min-height:2.25rem; width:auto; cursor:pointer; font-weight:600; }
.email-improve-menu > summary::-webkit-details-marker { display:none; }
.email-improve-options { position:absolute; z-index:30; top:calc(100% + .25rem); left:0; min-width:15rem; max-width:calc(100vw - 2rem);
  background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:.3rem; display:flex; flex-direction:column; }
.email-improve-options button { text-align:left; background:none; border:0; border-radius:6px; padding:.5rem .65rem; font:inherit; cursor:pointer; color:inherit; }
.email-improve-options button:hover, .email-improve-options button:focus-visible { background:#eef2ff; }
.email-improve-options p { margin:.25rem .65rem .2rem; font-size:.8rem; }
.editor-inserts.has-improve:has(.email-improve-panel:not([hidden])) { flex-basis:100%; }
.email-improve-panel { flex-basis:100%; border:1px solid #c7d2fe; background:#f8faff; border-radius:8px; padding:.6rem .75rem; }
.email-improve-panel[hidden], .email-improve-undo[hidden], .improve-chip[hidden] { display:none; }
.email-improve-title { font-weight:600; margin-bottom:.25rem; }
.email-improve-status { margin:.2rem 0; font-size:.88rem; }
.email-improve-status:empty { display:none; }
.email-improve-status.error { color:#b91c1c; }
.email-improve-preview { background:#fff; border:1px solid var(--line); border-radius:6px; padding:.5rem .7rem; max-height:22rem; overflow:auto; margin:.35rem 0; }
.email-improve-preview p { margin:0 0 .6rem; }
.email-improve-preview p:last-child { margin-bottom:0; }
.email-improve-preview img { max-width:100%; height:auto; }
.email-improve-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.35rem; }
.email-improve-actions .btn { min-height:2.1rem; }
.email-improve-undo { font-size:.88rem; }
.email-improve-undo .link-button { background:none; border:0; padding:.1rem .25rem; color:var(--brand); font:inherit; cursor:pointer; text-decoration:underline; }
.improve-chip { border:1px solid #c7d2fe; background:#eef2ff; color:#3730a3; border-radius:999px; padding:.3rem .8rem; font:inherit; font-size:.88rem; cursor:pointer; }
.improve-chip:hover { background:#e0e7ff; }