/* NTD-51 M1 (slice C). Styling for <lead-messages> and <compose-window>.
   Spec: docs/superpowers/specs/2026-10-02-mail-conversations-design.md rev 5, "Accessibility and
   layout". The mockup (.local/mail-mockup/contact.html) is visual-only, not normative; colours
   here are inspired by it but accessibility rules (focus, target size, contrast) are binding. */

.lm-root { width: 100%; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* AngularJS injects this rule itself for ng-show/ng-hide, but it is pinned explicitly here
   because the Minimise/Restore (#7) and Reply/Note tab (#9) fixes below depend on ng-show
   keeping the compose DOM (and its Trumbowyg instance) alive while hidden. */
.ng-hide { display: none !important; }

.lm-collapsed { padding: 6px 0; }

.lm-reveal,
.lm-new-email,
.lm-filter,
.lm-expander,
.lm-retry,
.lm-quote-toggle,
.lm-reply-btn,
.lm-delete-btn,
.lm-original button,
.lm-tab,
.lm-earlier button,
.lm-actions button,
.lm-attach button,
.lm-attachments button {
  min-height: 24px;
  min-width: 24px;
}

/* WCAG 2.2 target size (2.5.8): these are plain <a> download links, not buttons, so the box
   model needs an explicit inline-block + line-height rather than min-height/min-width, which
   the CSS spec ignores on non-replaced inline elements. */
.lm-attachments a,
.lm-original a {
  display: inline-block;
  min-height: 24px;
  min-width: 24px;
  line-height: 24px;
}

.lm-area { border-top: 2px solid #1ab394; padding-top: 12px; margin-top: 12px; }

.lm-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lm-heading { margin: 0; font-size: 14px; color: #333; }

.lm-filters { display: flex; gap: 6px; }
.lm-filter {
  border: 1px solid #e5e6e7;
  background: #fff;
  color: #707070;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.lm-filter-on { color: #0c7a63; font-weight: 600; border-color: #0c7a63; }

.lm-new-email {
  border: 1px solid #0c7a63;
  background: #0c7a63;
  color: #fff;
  border-radius: 3px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.lm-reveal {
  border: 1px solid #e5e6e7;
  background: #fff;
  color: #555;
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
}

.lm-empty { color: #707070; font-style: italic; padding: 8px 0; }

.lm-items { list-style: none; margin: 0; padding: 0; }

.lm-item {
  border: 1px solid #e7eaec;
  border-left-width: 3px;
  border-radius: 4px;
  margin-bottom: 8px;
  background: #fff;
}

.lm-kind-enquiry { border-left-color: #9b59b6; }
.lm-kind-email,
.lm-kind-autoemail { border-left-color: #1c84c6; }
.lm-kind-reply { border-left-color: #1ab394; }
.lm-kind-note { border-left-color: #f8ac59; background: #fffbe6; }
.lm-kind-earlieremail { border-left-color: #b0b7bd; }

.lm-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px; flex-wrap: wrap; }

.lm-expander {
  flex: 1 1 200px;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.lm-expander:focus-visible,
.lm-filter:focus-visible,
.lm-new-email:focus-visible,
.lm-reveal:focus-visible,
.lm-retry:focus-visible,
.lm-quote-toggle:focus-visible,
.lm-reply-btn:focus-visible,
.lm-delete-btn:focus-visible,
.lm-original a:focus-visible,
.lm-original button:focus-visible,
.lm-tab:focus-visible,
.cw-send:focus-visible,
.cw-btn-text:focus-visible,
.me-btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1c84c6;
  outline-offset: 2px;
}

/* The titlebar's own buttons sit on a dark background (#2f4050): the shared blue focus
   indicator above is only ~2.6:1 against it (fails WCAG 1.4.11's 3:1 for UI components), so
   they get their own indicator colour here instead (round-2 review I-2). */
.cw-btn:focus-visible {
  outline: 2px solid #1ab394;
  outline-offset: 2px;
}

/* NTD-52 026: Trumbowyg 2.31.0's own stylesheet resets its generated contenteditable to
   outline:none (wwwroot/Scripts/plugins/trumbowyg/trumbowyg.min.css, unminified source at
   .local/editor-spike/vendor/extracted/trumbowyg-2.31.0/dist/ui/trumbowyg.css's
   ".trumbowyg-editor", specificity (0,1,0)) -- this replaces the prior editor's equivalent rule
   that used to live here (PR #45 round-3 review #7's reasoning still applies: WCAG 1.4.11 needs a
   real, high-contrast indicator here, not the browser default). ".me-surface .trumbowyg-editor
   :focus-visible" is (0,3,0), comfortably ahead of Trumbowyg's own (0,1,0) reset regardless of
   stylesheet load order. Colour: #0a2540 (near-black navy) against the editable's white
   background is 15.54:1, the same navy/white pairing already verified in that review --
   comfortably over WCAG 1.4.11's 3:1 for non-text UI components. The adapter's own toolbar
   buttons (.me-btn) are plain native <button> elements, never wrapped in Trumbowyg's own button
   pane (hidden below -- mailEditor.js never renders it, btns:[]), so they share the #1c84c6
   focus-visible rule above like every other plain control in this file. */
.me-surface .trumbowyg-editor:focus-visible {
  outline: 2px solid #0a2540;
  outline-offset: -2px;
}

/* Trumbowyg always creates a (possibly empty) button pane container even with btns: [] -- the
   adapter never uses it; its own toolbar is the .me-btn row below instead. */
.trumbowyg-button-pane { display: none !important; }

.me-root { display: block; }
.me-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: #f5f5f5; border: 1px solid #ccc; border-bottom: none; border-radius: 3px 3px 0 0; }
.me-btn { min-height: 28px; min-width: 28px; border: 1px solid transparent; background: transparent; border-radius: 3px; color: #333; cursor: pointer; }
.me-btn:hover { background: #e5e5e5; }
.me-btn[aria-pressed="true"] { background: #c2c2c2; border-color: #999; }
.me-btn[disabled] { opacity: 0.5; cursor: default; }
.me-surface .trumbowyg-box,
.me-surface .me-textarea { border: 1px solid #ccc; border-radius: 0 0 3px 3px; }
.me-quoted { color: #707070; border-left: 2px solid #e7eaec; padding-left: 8px; margin: 6px 0; overflow-wrap: anywhere; }

/* Reflow at 320 CSS px (round-2 review I-2): long sender names, "to" addresses and subjects
   must wrap rather than force horizontal scrolling. min-width:0 on .lm-expander (above) lets
   this flex item shrink below its text's intrinsic width so the wrap below can take effect. */
.lm-who,
.lm-to,
.lm-subject,
.lm-snippet { overflow-wrap: anywhere; }
.lm-who { font-weight: 600; color: #333; }
.lm-to { color: #666; }
.lm-chip {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 2px;
  background: #eef0f2;
  color: #5e6873;
  margin-left: 6px;
}
.lm-subject { color: #333; margin-left: 6px; }
.lm-snippet { color: #707070; margin-left: 6px; }

.lm-status-wrap { display: flex; align-items: center; gap: 6px; padding-right: 8px; white-space: nowrap; }
.lm-status { font-size: 11px; padding: 2px 8px; border-radius: 3px; font-weight: 600; }
.lm-status-sending { background: #eef0f2; color: #5e6873; }
/* round-3 review I-6: #8a6d3b on #fcf0d8 was ~4.29:1 at this 11px size, short of WCAG's 4.5:1
   normal-text minimum. #87642f on the same background is 4.78:1 (verified via relative
   luminance). Scoped to this chip only -- #8a6d3b elsewhere (.lm-att-pending/.lm-trust) sits on
   different backgrounds and is out of scope for this fix. */
.lm-status-checking { background: #fcf0d8; color: #87642f; }
.lm-status-sent { background: #e3f6ef; color: #0c7a63; }
.lm-status-notsent { background: #fde3e3; color: #a94442; }
.lm-status-detail { color: #a94442; font-size: 12px; padding: 0 12px 8px; }

.lm-retry {
  border: 1px solid #a94442;
  background: #fff;
  color: #a94442;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}

.lm-time { color: #707070; font-size: 12px; white-space: nowrap; padding-right: 10px; }

.lm-item-body { padding: 0 12px 12px; color: #333; }
/* round-3 review I-6: plain/quoted bodies can contain one long unbroken token (URL, etc.) that
   would otherwise force horizontal scrolling at 320 CSS px. ".lm-quoted" always pairs with this
   class (see leadMessages.js), so this also covers quoted text. */
.lm-text { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
/* round-4 review #10: sanitized HTML message bodies (outbound/earlier-email, rendered via
   ng-bind-html -- see leadMessages.js's "lm-body-html" class on that element) get the same
   320px reflow guarantee .lm-text above already has for plain text. Long unbroken URLs wrap,
   embedded images never exceed their container, and a table -- the widest block-level content
   sanitization lets through -- scrolls within its own box instead of forcing the whole page to
   scroll sideways (display:block is the standard no-wrapper-markup way to make a <table> itself
   a scroll container; its row/cell children keep their table layout). Sanitization itself is
   untouched here -- this only lays out whatever safe markup the server already allowed through. */
.lm-body-html { overflow-wrap: anywhere; min-width: 0; }
.lm-body-html img { max-width: 100%; height: auto; }
.lm-body-html table { display: block; max-width: 100%; overflow-x: auto; }

.lm-loading { color: #707070; font-style: italic; }

.lm-trust { margin: 6px 0; padding: 5px 9px; background: #fcf8e3; border: 1px solid #faebcc; color: #8a6d3b; border-radius: 3px; font-size: 12px; }

/* round-3 review I-6: attachment names/filenames are also unbroken tokens; same 320px reflow
   fix as above. */
.lm-attachments { margin: 8px 0; font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.lm-attachments ul { list-style: none; margin: 4px 0 0; padding: 0; }
.lm-attachments li { margin-bottom: 4px; }
.lm-att-pending,
.lm-att-failed { color: #8a6d3b; font-style: italic; }
.lm-att-blocked { color: #a94442; }
.lm-attachments button {
  border: 1px solid #e5e6e7;
  background: #fff;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
}

.lm-quote-toggle {
  background: none;
  border: none;
  color: #707070;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
}
.lm-quoted { color: #707070; border-left: 2px solid #e7eaec; padding-left: 8px; margin: 6px 0; }

.lm-reply-btn {
  display: block;
  margin-top: 8px;
  border: 1px solid #0c7a63;
  background: #fff;
  color: #0c7a63;
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
}

/* round-3 review I-6: original/attachment-filename text, same 320px reflow fix. */
.lm-original { margin-top: 8px; font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.lm-original button {
  border: 1px solid #e5e6e7;
  background: #fff;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
}
.lm-delete-btn {
  display: block;
  margin-top: 8px;
  border: 1px solid #a94442;
  background: #fff;
  color: #a94442;
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
}

.lm-earlier { text-align: center; margin: 8px 0; }
.lm-earlier button {
  border: 1px solid #e5e6e7;
  background: #fff;
  border-radius: 3px;
  padding: 5px 12px;
  cursor: pointer;
}

.lm-compose { border: 1px solid #1ab394; border-radius: 4px; margin-top: 10px; }
.lm-tablist { display: flex; border-bottom: 1px solid #e5e6e7; }
.lm-tab {
  border: none;
  background: none;
  padding: 8px 14px;
  color: #707070;
  cursor: pointer;
  font: inherit;
}
.lm-tab-on { color: #0c7a63; border-bottom: 2px solid #0c7a63; font-weight: 600; }

.lm-panel { padding: 10px 12px; }
.lm-field { padding: 6px 0; color: #707070; }
.lm-field strong { color: #333; overflow-wrap: anywhere; }
.lm-field label { display: inline-block; min-width: 60px; }
.lm-field input[type="text"] { padding: 4px 6px; border: 1px solid #8c8c8c; border-radius: 3px; width: 70%; }

.lm-editor { margin: 8px 0; }
.lm-note-text { width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #8c8c8c; border-radius: 3px; }

.lm-attach { margin: 8px 0; font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.lm-attach button,
.lm-actions button {
  border: 1px solid #e5e6e7;
  background: #fff;
  border-radius: 3px;
  padding: 5px 12px;
  cursor: pointer;
}
.lm-actions { margin-top: 8px; }
.lm-actions button { border-color: #0c7a63; background: #0c7a63; color: #fff; font-weight: 600; }
.lm-actions button[disabled] { opacity: 0.6; cursor: default; }

.lm-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.lm-error { color: #a94442; font-size: 12px; margin: 6px 0; }

/* ---- compose-window (the single floating "New email" dialog) ---- */

.cw-root {
  position: fixed;
  right: 24px;
  bottom: 0;
  width: min(560px, 100vw - 32px);
  z-index: 2000;
}

.cw-dialog {
  background: #fff;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.cw-titlebar {
  background: #2f4050;
  color: #fff;
  padding: 9px 14px;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.cw-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }

.cw-controls { display: flex; gap: 4px; }
.cw-btn {
  border: none;
  background: transparent;
  color: #a7b1c2;
  min-width: 24px;
  min-height: 24px;
  cursor: pointer;
  font-size: 14px;
}
.cw-btn:hover { color: #fff; }

.cw-body { padding: 10px 14px; overflow-y: auto; }
.cw-field { padding: 5px 0; color: #707070; font-size: 13px; }
.cw-field strong { color: #333; overflow-wrap: anywhere; }
.cw-field input[type="text"] { width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #8c8c8c; border-radius: 3px; }
.cw-editor { margin: 8px 0; }
.lm-signature-note { margin: -4px 0 8px; font-size: 12px; color: #6b7280; }
.cw-loading { color: #707070; font-style: italic; padding: 10px 0; }

.cw-attach { margin: 8px 0; font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.cw-btn-text {
  border: 1px solid #e5e6e7;
  background: #fff;
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  min-height: 24px;
}
.cw-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.cw-error { color: #a94442; font-size: 12px; margin: 6px 0; }
.cw-reopen { display: inline-block; margin-left: 8px; vertical-align: baseline; }

.cw-actions { display: flex; justify-content: flex-end; padding-top: 6px; }
.cw-send {
  border: 1px solid #0c7a63;
  background: #0c7a63;
  color: #fff;
  font-weight: 600;
  border-radius: 3px;
  padding: 6px 16px;
  cursor: pointer;
  min-height: 24px;
}
.cw-send[disabled] { opacity: 0.6; cursor: default; }

.cw-minimized .cw-dialog { max-height: none; }

@media (max-width: 899px) {
  .cw-root {
    left: 0;
    right: 0;
    width: 100%;
  }
  .cw-dialog { border-radius: 0; max-height: 70vh; }
  .cw-titlebar { border-radius: 0; }

  /* Spec: "the area gets that much bottom padding, so the composer never covers the last
     message." Toggled by composeWindow.js on <body> whenever the window is open. */
  body.cw-has-open-window { padding-bottom: 70vh; }
}

/* NTD-51: the list pages' "check for news" control */
.la-root { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.la-checked { color: #707070; font-size: 11px; }
.la-refresh { min-height: 24px; min-width: 24px; }
.la-refresh:focus-visible { outline: 2px solid #0c7a63; outline-offset: 2px; }

/* NTD-45 rev 13 (Jimmy, 2026-10-08): the on-demand "AI Reply" button in the Reply tab, replacing
   the old background-draft panel (whose .lm-draft-* rules above were removed with it). */
.lm-ai-reply { margin: 8px 0; }
.lm-ai-reply-btn { min-height: 32px; padding: 4px 12px; border: 1px solid #0c7a63; border-radius: 3px; background: #fff; color: #0c7a63; font-weight: 600; cursor: pointer; }
.lm-ai-reply-btn:hover { background: #e3f6ef; }
.lm-ai-reply-btn[disabled] { opacity: 0.6; cursor: default; }
.lm-ai-reply-btn:focus-visible { outline: 2px solid #1c84c6; outline-offset: 2px; }

.lm-ai-reply-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #c9ece2; border-top-color: #0c7a63; border-radius: 50%; animation: lm-ai-reply-spin 0.8s linear infinite; vertical-align: middle; margin-right: 4px; }
@keyframes lm-ai-reply-spin { to { transform: rotate(360deg); } }

.lm-ai-reply-staffonly,
.lm-ai-reply-failed { margin: 6px 0; padding: 6px 9px; border-radius: 3px; font-size: 13px; }
.lm-ai-reply-staffonly { background: #fcf8e3; border: 1px solid #faebcc; color: #8a6d3b; }
.lm-ai-reply-failed { background: #fde3e3; border: 1px solid #ebccd1; color: #a94442; }

.lm-ai-reply-gaps { margin: 8px 0; padding: 6px 9px; background: #fcf8e3; border: 1px solid #faebcc; border-radius: 3px; font-size: 13px; color: #8a6d3b; }
.lm-ai-reply-gaps p { margin: 0 0 4px; font-weight: 600; }
.lm-ai-reply-gaps ul { margin: 0; padding-left: 18px; }