/* Emails: shared inbox (mail.js) */
.mlpage { max-width: 1280px; }
.mldemo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 12px; margin-bottom: 12px; border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface2); font-size: 0.875rem; color: var(--grey-ink); }
.mldemo > .ic { color: var(--muted); flex: none; }
.mldemo > span { flex: 1 1 280px; min-width: 0; }
.state .mlgap { margin-top: 12px; }
.mlstatebtns { margin-top: 16px; display: flex; justify-content: center; gap: 12px; }
.mlboxes { margin-bottom: 12px; }
.mltabs { margin-bottom: 12px; align-items: center; }
/* The Views row (Inbox, New, Mine ... Drafts) wraps onto a second line when it runs out of room. It never scrolls sideways, so it never needs a scroll bar. */
.mlpage .mltabs.tabs { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
.mltabs .mlrefresh { margin-left: auto; flex: none; }
.mlsyncerr { margin: 0 0 12px; }

.mlsplit { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.mlcol { min-width: 0; }
.mllist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-card); overflow: hidden; }
.mllist li + li { border-top: 1px solid var(--divider); }
.mlrow { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 14px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.mlrow:hover { background: var(--row-hover); }
.mlrow.sel { background: var(--row-sel); box-shadow: inset 3px 0 0 var(--blue-btn); }
.mlrow:focus-visible { outline-offset: -2px; }
.mlrtop, .mlrbot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mlfrom { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlrow.unread .mlfrom { font-weight: 800; }
.mlrow.unread .mlsubj { font-weight: 600; }
.mltime { flex: none; font-size: 0.8125rem; color: var(--muted); }
.mlsubj { display: flex; align-items: center; gap: 4px; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mlsubj .mlclip { flex: none; color: var(--muted); display: inline-flex; }
.mlsubj .mlclip .ic { width: 14px; height: 14px; }
.mlsnip { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlwho { flex: none; display: inline-flex; }
.mlbox { display: block; }
.mlnone { padding: 32px 16px; text-align: center; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-card); }

.mlpane { min-width: 0; padding: 20px 24px; position: sticky; top: calc(var(--strip, 0px) + 16px); max-height: calc(100vh - var(--strip, 0px) - 32px); overflow-y: auto; }
.mlpane.composing { position: static; max-height: none; overflow: visible; }
.mlempty { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.mlempty .ic { width: 28px; height: 28px; }
.mlback { display: none; }
.mlread .mlh { font-size: 1.25rem; font-weight: 800; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.mlmeta { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.mlfromline { overflow-wrap: anywhere; }
.mlstate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.mlacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; }
.mlacts .btn .ic { width: 16px; height: 16px; }
.mlassign { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding: 12px; margin-bottom: 12px; border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface2); }
.mlassign .fld { flex: 1 1 220px; margin: 0; }
.mlassign .formact { margin: 0; }
.mlatt { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--grey-ink); }
.mlbody { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.55; padding: 4px 0 16px; max-width: 72ch; }
.mlreply { display: flex; align-items: flex-start; gap: 8px; padding-top: 12px; margin: 0; border-top: 1px solid var(--divider); }
.mlreply .ic { flex: none; margin-top: 2px; }

/* Phones and narrow screens: the email replaces the list, with a Back link */
@media (max-width: 899px) {
  .mlsplit { grid-template-columns: minmax(0, 1fr); }
  .mlsplit:not(.reading) .mlpane { display: none; }
  .mlsplit.reading .mlcol { display: none; }
  .mlpane { position: static; max-height: none; overflow: visible; padding: 16px; }
  .mlback { display: inline-flex; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
  .mltop.reading { display: none; }
}
@media (max-width: 520px) {
  .mltabs { gap: 0 14px; }
  .mltabs .mlrtxt { display: none; }
  .mlacts .btn { flex: 1 1 auto; }
}

/* Sending switch banner (admins) */
.mlsendbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; margin-bottom: 12px; border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface); font-size: 0.875rem; color: var(--grey-ink); }
.mlsendbar > .ic { color: var(--muted); flex: none; }
.mlsendbar > span:first-of-type { flex: 1 1 280px; min-width: 0; }
.mlsendsw { display: inline-flex; align-items: center; gap: 8px; }
.mlsendsw .switch[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Replies under the email */
.mlthread { padding: 12px 0 4px; border-top: 1px solid var(--divider); }
.mlth { font-size: 0.875rem; font-weight: 700; color: var(--grey-ink); margin: 0 0 8px; }
.mlbub { border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface2); padding: 10px 12px; margin-bottom: 8px; }
.mlbub.off { opacity: 0.7; }
.mlbubhd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mlbubhd .small { margin-left: auto; }
.mlbubto { margin-top: 2px; overflow-wrap: anywhere; }
.mlbubtxt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.5; margin-top: 6px; max-height: 7.5em; overflow: hidden; }
.mlbubft { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; font-size: 0.8125rem; }
.mlreplybar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; border-top: 1px solid var(--divider); }
.mlthread + .mlreplybar { border-top: 0; }
.mlreplybar .btn .ic { width: 16px; height: 16px; }

/* Compose */
.mlcompose { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.mlcompose .fld { margin: 0; }
.mlcompose textarea { width: 100%; min-height: 160px; resize: vertical; }
.mlchd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mlchd h3 { font-size: 1rem; font-weight: 800; margin: 0; }
.mlsig { padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-card); overflow-x: auto; }
.mlorigbtn { align-self: flex-start; }
.mlquote { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; }
.mlquotebody { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; color: var(--grey-ink); margin-top: 8px; max-height: 320px; overflow-y: auto; }
.mloffnote { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--grey-ink); }
.mloffnote .ic { flex: none; margin-top: 2px; color: var(--muted); }
.mldonechk { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; min-height: 32px; }
.mlcompose .formact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
@media (max-width: 520px) {
  .mlcompose { padding: 12px; }
  .mlcompose .formact .btn { flex: 1 1 auto; }
  .mlreplybar .btn { flex: 1 1 auto; }
}

/* Is the mail check running? (admins get the banner) */
.mlcheck { margin: 0 0 12px; }
.mlwarn { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--amber-bar); border-radius: var(--r-card); background: var(--amber-bg); color: var(--ink); }
.mlwarn > .ic { flex: none; margin-top: 2px; color: var(--amber); }
.mlwarn > span { min-width: 0; }

/* More of the list */
.mlmore { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0 4px; }
.mlmore p { margin: 0; }

/* Attachments received */
.mlattach { padding: 4px 0 8px; }
.mlattach .mlth { display: flex; align-items: center; gap: 6px; }
.mlattach .mlth .ic { width: 16px; height: 16px; }
.mlattach > p { margin: 0 0 8px; }
.mlattl { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface2); overflow: hidden; }
.mlattl li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; }
.mlattl li + li { border-top: 1px solid var(--divider); }
.mlattn { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.mlattl .btn .ic { width: 16px; height: 16px; }

/* Reply attachments and the new address tick */
.mlfiles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mlfiles .fileb { min-height: 40px; }
.mlfilel { list-style: none; margin: 0; padding: 0; flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
.mlfilel li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 4px 8px; border: 1px solid var(--divider); border-radius: var(--r-ctl); background: var(--surface2); overflow-wrap: anywhere; }
.mlnewaddr { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--amber-bar); border-radius: var(--r-card); background: var(--amber-bg); }
.mlnewaddr label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.mlbubatt { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; overflow-wrap: anywhere; }
.mlbubatt .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* Calm pass: one honest card while Outlook isn't connected */
.mlhonest { max-width: 640px; display: flex; flex-direction: column; gap: 8px; }
.mlhonest p { color: var(--ink); }
.mlhonest .mlstatebtns { margin-top: 8px; justify-content: flex-start; flex-wrap: wrap; }
.mlpage .small { font-size: 0.875rem; }

/* Attachment picture viewer: the picture is read live from Outlook and only kept in this tab */
.mlview { position: fixed; inset: 0; z-index: 90; background: rgba(16, 22, 19, 0.72); display: flex; flex-direction: column; padding: 16px; }
.mlviewbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--surface); color: var(--ink); border-radius: 10px; max-width: 1100px; width: 100%; margin: 0 auto; }
.mlviewbar b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlviewacts { display: flex; gap: 8px; flex: none; }
.mlviewpic { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px 0 0; }
.mlviewpic img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; }

/* Drag to assign: a strip of faces along the top of the page, always in view, with a first name under each. It wraps onto a second line
   when there are a lot of people, and never scrolls. Desktop only (a mouse); "Assign to…" covers phones and keyboards. */
.mldropbar { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .mldropbar { display: flex; align-items: center; gap: 6px 16px; flex: none; margin: 0 0 8px; padding: 4px 12px; border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface2); }
  .mldlabel { flex: none; display: flex; flex-direction: column; gap: 1px; max-width: 124px; }
  .mldlabel b { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .mldlabel .small { font-size: 0.75rem; line-height: 1.25; }
  .mldropbar ul { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .mldrop { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 80px; padding: 3px 2px 2px; border: 1px dashed var(--line); border-radius: 10px; font-size: 0.75rem; line-height: 1.2; color: var(--grey-ink); background: var(--surface); transition: background .12s, border-color .12s; }
  .mldrop > span:not(.av):not(.mldropic) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mldropic { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: var(--divider); color: var(--grey-ink); }
  .mldropic .ic { width: 16px; height: 16px; }
  body.mldragging .mldrop { border-color: var(--blue-btn, #4471B8); }
  .mldrop.over { background: var(--blue-bg, #E7EFF8); border-style: solid; color: var(--ink); }
  .mldraggable { cursor: grab; }
  .mldraggable.dragging { opacity: 0.5; }
}

/* The email as designed (logos and all), in a locked-down frame */
.mlframe { display: block; width: 100%; height: 360px; border: 0; background: #FFFFFF; border-radius: 8px; margin: 4px 0 8px; }

/* The email as a task */
.mltask { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin: 4px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.mltaskrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.mltaskrow > label { font-weight: 600; font-size: var(--fs-14); }
.mltaskrow select { min-height: 36px; border-radius: 8px; }
.mltaskbtns { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mlout { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); font-weight: 600; }
.mlout .ic { width: 16px; height: 16px; }
.mlout.good { color: var(--good, #2F6B55); }
.mlout.amber { color: var(--amber-ink, #8A5A00); }
.mlsuggest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: var(--blue-bg, #E7EFF8); font-size: var(--fs-14); }
.mlsuggest .mas { width: 34px; height: 38px; flex: none; }
.mlsuggest p { margin: 0; flex: 1 1 260px; }
.mltaskform { display: flex; flex-direction: column; gap: 10px; }
.mltaskform fieldset { border: 0; margin: 0; padding: 0; }
.mltaskform legend { font-weight: 600; font-size: var(--fs-14); margin-bottom: 6px; }
.mlchecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.mlchecks label { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--fs-14); }
.mltt { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; line-height: 18px; background: var(--blue-bg, #E7EFF8); color: var(--ink); vertical-align: 1px; }
.mltt.sug { background: transparent; border: 1px dashed var(--line); }

/* Reply preview: exactly what the customer gets */
.mlpv { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.mlpvh { display: flex; flex-direction: column; gap: 2px; }
.mlpvframe { border: 1px solid var(--line); background: #F4F5F4; height: 520px; }
.mlpvfit { overflow: hidden; max-width: 100%; }
.mlpvfit .mlframe { margin: 0; max-width: none; }
.mltypeacts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.mltypeacts select { min-height: 36px; border-radius: 8px; }
.mllinked { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-14); color: var(--good, #2F6B55); font-weight: 600; }
.mllinked .ic { width: 16px; height: 16px; }
.mlrow2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; }

/* ---------- Agent D design pass (mail.js): parked line in the reading pane ---------- */
.mlparked { margin: 0 0 12px; }
.mlacts .btn .ic { margin-right: 2px; }

/* MCP Assistant suggestions */
.mlsuggest { align-items: flex-start; }
.mlsg-body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.mlsg-body p { margin: 0; flex: none; }
.mlsg-h { font-size: 0.8125rem; color: var(--muted); }
.mlsg-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mlsg-body .chip { margin-right: 2px; }
.mlurg { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; line-height: 18px; background: var(--red-bg); color: var(--red); vertical-align: 1px; }

/* Sent Items, filed-in-Outlook marker, conversation and the read-only folder list */
.mlfiledrow { display: flex; min-width: 0; margin-top: 2px; }
.mlfiled { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--surface2); color: var(--grey-ink); font-weight: 500; }
.mlfiledhint { margin: 8px 0 0; }
.mlconvo { padding: 12px 0 4px; border-top: 1px solid var(--divider); }
.mlconvl { list-style: none; margin: 0; padding: 0; }
.mlconvl li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.mlconvl li + li { border-top: 1px solid var(--divider); }
.mlcvtxt { display: flex; flex-direction: column; min-width: 0; font-size: 0.875rem; }
.mlcvwho, .mlcvsub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlconvl .link { flex: none; }
.mlfbtn { flex: none; }
.mlfoldp { margin-bottom: 12px; }
.mlfoldp .mlth { margin-bottom: 8px; }
.mlfbox { margin: 12px 0 4px; font-size: 0.8125rem; font-weight: 700; color: var(--grey-ink); }
.mlftree { list-style: none; margin: 0; padding: 0; }
.mlftree li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 0.875rem; }
.mlfname { min-width: 0; overflow-wrap: anywhere; }
.mlfn { flex: none; }
.mlftree .mlfd1 { padding-left: 16px; } .mlftree .mlfd2 { padding-left: 32px; } .mlftree .mlfd3 { padding-left: 48px; } .mlftree .mlfd4 { padding-left: 64px; } .mlftree .mlfd5 { padding-left: 80px; } .mlftree .mlfd6 { padding-left: 96px; }
.mlfnote { margin: 10px 0 0; }
.mlfintro { margin: 0 0 6px; }
.mlftree .mlfopen { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 -6px; padding: 3px 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mlftree .mlfopen:hover, .mlftree .mlfopen:focus-visible { background: var(--row-hover); }
.mlftree .mlfopen .mlfname { color: var(--link); font-weight: 600; }
.mlftree .mlfopen:hover .mlfname { text-decoration: underline; }
.mlshl { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }

/* Test send (one person, fixed test address) */
.mltest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--divider); }

/* Cc staff picker */
.mlccrow { display: flex; gap: 8px; align-items: stretch; }
.mlccrow input { flex: 1; min-width: 0; }
.mlccbtn { flex: none; min-width: 44px; padding: 0 12px; gap: 6px; }
.mlccbtn .ic { width: 16px; height: 16px; }
.mlccbtn[aria-expanded="true"] { background: var(--blue-tint); border-color: var(--blue-btn); }
.mlstaff { margin-top: 8px; border: 1px solid var(--divider); border-radius: var(--r-sm, 10px); background: var(--surface); padding: 8px; }
.mlstaff input[type=search] { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.mlstaffl { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.mlstaffb { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; cursor: pointer; color: inherit; font: inherit; min-height: 44px; }
.mlstaffb:hover, .mlstaffb:focus-visible { background: var(--blue-tint); }
.mlstaffb.on { border-color: var(--blue-btn); }
.mlstaffb span { display: flex; flex-direction: column; min-width: 0; }
.mlstaffb small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlstaffb .mlstaffok { margin-left: auto; color: var(--blue-btn); flex: none; }
.mlstaffnone { padding: 8px; }

/* ---------- Reading pane actions: status panel, one action row, labelled task box ---------- */
.mlstatus { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface2); }
.mlsico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--divider); color: var(--grey-ink); }
.mlsico .ic { width: 18px; height: 18px; }
.mls-done .mlsico { color: var(--good, #2F6B55); }
.mlstxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mlstxt b { font-size: 1rem; color: var(--ink); }
.mlsline { font-size: 0.875rem; color: var(--ink); overflow-wrap: anywhere; }
.mlsline.muted { color: var(--muted); }
.mlacts .mlquietrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-left: auto; }
.mlacts.mlquiet { padding-top: 8px; }
@media (max-width: 520px) { .mlacts .mlquietrow { margin-left: 0; flex: 1 1 100%; } }

.mltgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 16px; align-items: start; }
.mltf { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.mltf label, .mltf .mltlab { font-weight: 600; font-size: var(--fs-14, 0.875rem); color: var(--ink); }
.mltf select { width: 100%; min-height: 40px; border-radius: 8px; }
.mltf .mltypeacts { min-height: 40px; }
.mltf .mltaskbtns { min-height: 40px; }
.mltaskhint { margin: 0; }

/* Mark done: which Outlook folder should it be filed in? (shared .swscrim / .swdlg frame) */
.mfdlg.swdlg { top: 5vh; width: min(560px, calc(100% - 32px)); max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
.mfdlg h2 { margin: 0; font-size: 1.125rem; }
.mfdlg h2:focus { outline: none; }
.mfdlg .mfsubj, .mfdlg .mfnote { margin: 0; overflow-wrap: anywhere; }
.mfdlg .fld { margin: 0; }
.mfdlg input[type="search"] { width: 100%; box-sizing: border-box; min-height: 40px; }
.mfdlg .formact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.mfsec:empty { display: none; }
.mfsec .mlth { margin: 0 0 6px; }
.mfsug { display: flex; flex-direction: column; gap: 6px; }
.mflist { display: flex; flex-direction: column; gap: 2px; max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--divider); border-radius: var(--r-card); padding: 4px; }
.mflist > p { margin: 8px; }
.mfopt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; text-align: left; font: inherit; color: var(--ink); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.mfopt:hover { background: var(--row-hover); }
.mfopt:focus-visible { outline: 2px solid var(--blue-btn, #4471B8); outline-offset: -2px; }
.mfopt[aria-pressed="true"] { background: var(--blue-bg, #E7EFF8); border-color: var(--blue-btn, #4471B8); }
.mfopt.mfbig { min-height: 56px; border-color: var(--line); background: var(--surface); }
.mfopt.mfbig[aria-pressed="true"] { background: var(--blue-bg, #E7EFF8); border-color: var(--blue-btn, #4471B8); }
.mfopttxt { display: flex; flex-direction: column; min-width: 0; }
.mfname { overflow-wrap: anywhere; }
.mfcheck { flex: none; width: 18px; height: 18px; color: var(--blue-btn, #4471B8); visibility: hidden; }
.mfcheck .ic { width: 18px; height: 18px; }
.mfopt[aria-pressed="true"] .mfcheck { visibility: visible; }
.mflist .mfd1 { padding-left: 26px; } .mflist .mfd2 { padding-left: 42px; } .mflist .mfd3 { padding-left: 58px; } .mflist .mfd4 { padding-left: 74px; } .mflist .mfd5 { padding-left: 90px; } .mflist .mfd6 { padding-left: 106px; }
.mltofile { background: var(--surface2); }
@media (max-width: 640px) {
  .mfdlg.swdlg { top: auto; bottom: 0; left: 0; right: 0; width: auto; transform: none; border-radius: 16px 16px 0 0; max-height: 92vh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .mflist { max-height: 30vh; }
}

/* The MCP Assistant talking: her face beside a speech bubble */
.mlsuggest.mlsay { padding: 0; background: none; gap: 8px; flex-wrap: nowrap; align-items: flex-start; }
.mlsuggest.mlsay .mas { width: 34px; height: 38px; flex: none; margin-top: 2px; }
.mlsuggest.mlsay .mlsg-body { flex: 1 1 0; min-width: 0; position: relative; padding: 8px 12px; border-radius: 4px 12px 12px 12px; background: var(--blue-bg, #E7EFF8); overflow-wrap: anywhere; }
.mlsuggest.mlsay .mlsg-body::before { content: ""; position: absolute; left: -6px; top: 8px; border: 6px solid transparent; border-left-width: 0; border-right-color: var(--blue-bg, #E7EFF8); }
.mlsuggest.mlsay .mlsg-body p { flex: none; }
.tkpane .mlsuggest.mlsay { padding: 0; gap: 6px; }
.tkpane .mlsuggest.mlsay .mas { width: 28px; height: 32px; }
@media (max-width: 480px) { .mlsuggest.mlsay .mas { width: 28px; height: 32px; } .mlsuggest.mlsay .mlsg-body { padding: 8px 10px; } }
.mlsendbar.live { border-color: var(--good); background: var(--good-bg, #E6F2EA); color: var(--good); } .mlsendbar.live > .ic { color: var(--good); }

/* Email search (Nov 2026): the bar at the top, its filters, and the results list */
.mlsrch { margin-bottom: 12px; }
.mlsrow { display: flex; align-items: center; gap: 8px; position: relative; }
.mlsic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: inline-flex; pointer-events: none; }
.mlsic .ic { width: 18px; height: 18px; }
.mlsrow input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 40px; padding-left: 38px; }
.mlsrow .btn { flex: none; }
.mlsfbtn.on { border-color: var(--blue-btn); color: var(--blue-ink); }
.mlsdot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--blue-btn); vertical-align: middle; }
.mlsgo .ic { width: 16px; height: 16px; }
.mlsfilt { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-top: 8px; padding: 12px; border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface2); }
.mlsfilt .fld { flex: 1 1 180px; margin: 0; min-width: 0; }
.mlsfilt .fld select, .mlsfilt .fld input { width: 100%; }
.mlsfilt .mlsatt, .mlsfilt .mlsreset { flex: none; min-height: 40px; }
.mlshead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px; font-size: 0.875rem; color: var(--grey-ink); min-height: 24px; }
.mlshead .link { display: inline-flex; align-items: center; gap: 4px; }
.mlshead .link .ic { width: 14px; height: 14px; }
.mlschips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; margin-top: 2px; }
.mlschips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlsfold { display: inline-flex; align-items: center; gap: 4px; }
.mlsfold .ic { width: 12px; height: 12px; flex: none; }
.mlsin { background: var(--blue-bg); color: var(--blue-ink); font-weight: 600; }
.mlsstate { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mlsstate p { margin: 0; }
.mlsend { text-align: center; margin: 12px 0 0; }
.mlsskel { padding: 16px; }
.mlfound .mlacts.mlquiet a { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 520px) {
  .mlsgo .mlsgot { display: none; }
  .mlsfilt .fld { flex: 1 1 100%; }
}

/* ---------- Writing a reply: buttons at the top, the form under the subject, Send always in view, address suggestions ---------- */
.mlreplybar.mlreplytop { border-top: 0; padding: 12px 0 0; }
.mlcompose .mlsubjrow { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; overflow-wrap: anywhere; }
.mlcompose .mladdcc { align-self: flex-start; }
.mlopts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.mlopts .link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.mlopts .link .ic { width: 16px; height: 16px; }
.mlccrow { position: relative; }
.mlsug { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm, 10px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); }
.mlsugi { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 2px 10px; min-height: 44px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.mlsugi:hover, .mlsugi.on { background: var(--blue-tint); }
.mlsugn { min-width: 0; overflow-wrap: anywhere; }
.mlsugn small { color: var(--muted); font-size: 0.8125rem; }
.mlsuge { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 0.8125rem; }
.mlsugt { flex: none; margin-left: auto; color: var(--muted); font-size: 0.75rem; }
/* Send, Save draft and Cancel stay at the bottom of the screen while a long reply is written (room on the right for the assistant button) */
.mlcompose .mlbar { position: sticky; bottom: 0; z-index: 10; margin: 4px -16px -16px; padding: 12px 64px 12px 16px; background: var(--surface); border-top: 1px solid var(--divider); border-radius: 0 0 var(--r-card) var(--r-card); }
.mlbar .mldonechk { margin-left: auto; }
@media (max-width: 899px) { .mlcompose .mlbar { padding-right: 16px; } } /* below this the assistant button sits at the top, so the bar can use the full width */
@media (max-width: 520px) {
  .mlcompose .mlbar { margin: 4px -12px -12px; padding: 8px 12px; gap: 8px; }
  .mlbar .btn { padding-left: 12px; padding-right: 12px; }
  .mlbar .mldonechk { margin-left: 0; flex: 1 1 100%; }
}

/* ---------- Emails: views on the left, the list, the email on the right, and one toolbar that stays put (Oct 2026) ----------
   Wide screens get three panes that fill the screen. In-between screens keep the two panes (the views as a row above the list).
   Phones keep one at a time. Everything below is scoped to the Emails page (.mlapp, .mlfull), so Tasks, which reuses the
   email pane, looks exactly as before. */
.mlrh { display: none; }
.mlquotebtn { margin: 0 0 12px; }
.mlquotebtn .ic { width: 16px; height: 16px; }

/* The email pane scrolls on its own and its toolbar stays at the top of it (everything but phones) */
@media (min-width: 900px) {
  .mlapp .mlpane, .mlapp .mlpane.composing { position: sticky; top: calc(var(--strip, 0px) + 16px); max-height: calc(100vh - var(--strip, 0px) - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 0; }
  .mlapp .mlpane > .mlread:not(.mlthree) { padding: 16px 20px 24px; }
  .mlapp .mlnewpane { padding: 16px 20px 24px; }
  .mlapp .mlpane > .mlnewlist { margin: 16px 20px 24px; }
  .mlapp .mlthree { display: flex; flex-direction: column; min-height: 100%; }
  .mlapp .mlthree .mlhead { padding: 14px 20px 0; }
  .mlapp .mlthree .mlrest { padding: 4px 20px 24px; }
  .mlapp .mlthree .mltool { order: -1; position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 20px; background: var(--surface); border-bottom: 1px solid var(--divider); }
  .mlapp .mltool .mlreplybar, .mlapp .mltool .mlreplybar.mlreplytop { flex-wrap: nowrap; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); }
  .mlapp .mltool .mlacts, .mlapp .mltool .mlacts.mlquiet { flex: 1 1 auto; gap: 6px 8px; padding: 0; }
  .mlapp .mltool .btn { min-height: 36px; padding: 0 12px; gap: 6px; font-size: 0.875rem; }
  .mlapp .mltool .link.quiet { min-height: 36px; }
  .mlapp .mltool .mlquietrow { gap: 2px 6px; }
  /* Copy details is a small icon here (it still has its name for screen readers and a tooltip) */
  .mlapp .mltool .link.quiet[data-act="mlcopy"] { width: 36px; justify-content: center; padding: 0; border-radius: 8px; }
  .mlapp .mltool .link.quiet[data-act="mlcopy"] .mlqt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mlapp .mltool .link.quiet[data-act="mlcopy"]:hover { background: var(--row-hover); }
  .mlapp .mlthree #mlcomposef { scroll-margin-top: 64px; }
  /* A compact header, task box and attachment chips, so the email itself starts high up (the same look Tasks already uses) */
  .mlapp .mlthree .mlh { font-size: 1.125rem; line-height: 1.3; }
  .mlapp .mlthree .mlmeta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; padding-bottom: 8px; }
  .mlapp .mlthree .mlmeta > .small { font-size: 0.8125rem; }
  .mlapp .mlthree .mlfromline { font-size: 0.9375rem; }
  .mlapp .mlthree .mlstate { margin-top: 0; gap: 6px; }
  .mlapp .mlthree .mlstatus { margin: 8px 0 0; }
  .mlapp .mlthree .mlparked { margin: 8px 0 8px; }
  .mlapp .mlthree .mltask { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; margin: 8px 0; border-color: var(--divider); }
  .mlapp .mlthree .mltask > .mlsuggest, .mlapp .mlthree .mltask > .mltaskform, .mlapp .mlthree .mltask > .mllinked, .mlapp .mlthree .mltask > .mltgrid, .mlapp .mlthree .mltask > .mltaskhint { flex: 1 1 100%; }
  .mlapp .mlthree .mltgrid { gap: 6px 16px; }
  .mlapp .mlthree .mltaskhint { font-size: 0.8125rem; }
  .mlapp .mlthree .mltaskrow { gap: 6px 10px; }
  .mlapp .mlthree .mltaskrow > label { font-size: 0.8125rem; color: var(--grey-ink); }
  .mlapp .mlthree .mltaskrow select, .mlapp .mlthree .mltypeacts select { min-height: 32px; padding-top: 0; padding-bottom: 0; font-size: 0.875rem; }
  .mlapp .mlthree .mltaskbtns .btn.small, .mlapp .mlthree .mltypeacts .btn.small { min-height: 30px; }
  .mlapp .mlthree .mltypeacts { gap: 6px 10px; }
  .mlapp .mlthree .mlsuggest { padding: 6px 10px; gap: 8px; }
  .mlapp .mlthree .mlsuggest .mas { width: 26px; height: 30px; }
  .mlapp .mlthree .mlattach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 0 8px; }
  .mlapp .mlthree .mlattach .mlth { margin: 0; font-size: 0.8125rem; }
  .mlapp .mlthree .mlattach > p { margin: 0; }
  .mlapp .mlthree .mlattl { display: contents; }
  .mlapp .mlthree .mlattl li, .mlapp .mlthree .mlattl li + li { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 2px 2px 2px 10px; border: 1px solid var(--divider); border-radius: 999px; background: var(--surface2); }
  .mlapp .mlthree .mlattn { flex: 0 1 auto; flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; overflow-wrap: normal; }
  .mlapp .mlthree .mlattn b { font-size: 0.8125rem; font-weight: 600; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mlapp .mlthree .mlattn .small { font-size: 0.75rem; white-space: nowrap; }
  .mlapp .mlthree .mlattl .btn.small { flex: none; width: 28px; min-height: 28px; height: 28px; padding: 0; border-radius: 50%; }
  .mlapp .mlthree .mlattl .btn.small span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mlapp .mlthree .mlattl .chip, .mlapp .mlthree .mlattl li > .small { margin-right: 8px; font-size: 0.75rem; }
  /* Quick view: "View" keeps its word (the plain download stays a small round icon, as before) */
  .mlapp .mlthree .mlattl .mlattacts { flex-wrap: nowrap; gap: 2px; }
  .mlapp .mlthree .mlattl .mlattacts .btn.small { width: auto; padding: 0 10px 0 8px; border-radius: 999px; }
  .mlapp .mlthree .mlattl .mlattacts .btn.small span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
  .mlapp .mlthree .mlattl .mlattacts .link.quiet { flex: none; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; color: var(--grey-ink); }
  .mlapp .mlthree .mlattl .mlattacts .link.quiet:hover { background: var(--divider); text-decoration: none; }
  .mlapp .mlthree .mlattl .mlattacts .link.quiet span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mlapp .mlthree .mlframe { margin-top: 0; }
  /* The toolbar stays in view, so the second Reply / Forward row under the email isn't needed */
  .mlapp .mlthree .mlrest > .mlreplybar:not(.mlreplytop) { display: none; }
  .mlapp .mlthree .mlbody { padding-top: 0; }
}

/* Wide screens: three panes filling the screen. Between 1280 and 1359 the menu is at full width and leaves too little room, so those keep two panes. */
@media (min-width: 1100px) and (max-width: 1279px), (min-width: 1360px) {
  .mlpage.mlfull { max-width: 1560px; display: flex; flex-direction: column; height: calc(100vh - var(--strip, 0px) - 120px); min-height: 700px; }
  .mlfull > .hbar { flex: none; }
  .mlfull .mlwrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .mlfull .mltophead { flex: none; }
  .mlfull .mlapp { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 172px minmax(260px, 300px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }

  /* Left: views and mailboxes (the faces to drag onto are in a strip along the top). Nothing here needs a scroll bar on a normal laptop screen;
     if a very short window ever does, the menu still scrolls, but without drawing a bar. */
  .mlfull .mlrail { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 12px 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-right: 1px solid var(--divider); background: var(--surface2); }
  .mlfull .mlrail::-webkit-scrollbar { display: none; }
  .mlfull .mlrh { display: block; margin: 0 0 6px 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .mlfull .mlsec-tabs { order: 1; }
  .mlfull .mlsec-box { order: 2; }
  .mlfull .mltabs.tabs { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; margin: 0; overflow: visible; border-bottom: 0; -webkit-mask-image: none; mask-image: none; }
  .mlfull .mltabs .tab { width: 100%; min-height: 32px; padding: 0 10px; justify-content: space-between; border-radius: 8px; box-shadow: none; font-weight: 500; color: var(--grey-ink); }
  .mlfull .mltabs .tab:hover { background: var(--row-hover); color: var(--ink); }
  .mlfull .mltabs .tab[aria-selected="true"] { background: var(--blue-tint); color: var(--blue-ink); font-weight: 700; box-shadow: none; }
  .mlfull .mltabs .tab[aria-selected="true"] .n { color: var(--blue-ink); }
  .mlfull .mltabs .mlrefresh, .mlfull .mltabs .mlfbtn { margin: 0; width: 100%; min-height: 30px; padding: 0 10px; justify-content: flex-start; }
  .mlfull .mltabs .mlrefresh { margin-top: 6px; }
  .mlfull .mlboxes.seg { flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0; }
  .mlfull .mlboxes label { display: block; }
  .mlfull .mlboxes span { display: flex; width: 100%; min-height: 30px; padding: 0 10px; border-color: transparent; background: transparent; border-radius: 8px; font-weight: 500; color: var(--grey-ink); }
  .mlfull .mlboxes label:hover span { background: var(--row-hover); color: var(--ink); }
  .mlfull .mlboxes input:checked + span { border-color: transparent; background: var(--blue-tint); color: var(--blue-ink); font-weight: 700; }

  /* Middle: the list. Right: the email. Each scrolls on its own. */
  .mlfull .mlsplit { display: contents; }
  .mlfull .mlcol { min-width: 0; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--divider); background: var(--surface); }
  .mlfull .mlcol .mllist, .mlfull .mlcol .mlnone { border: 0; border-radius: 0; }
  .mlfull .mlcol .mlfoldp { margin: 12px; }
  .mlfull .mlcol .mlshead { margin: 8px 12px; }
  .mlfull .mlapp .mlpane, .mlfull .mlapp .mlpane.composing { position: static; max-height: none; min-width: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--surface); }
  .mlfull .mlthree .mltool { border-radius: 0; }
}
@media (min-width: 1100px) and (max-width: 1279px) and (max-height: 859px), (min-width: 1360px) and (max-height: 859px) { .mlfull .hbar .lede { display: none; } }

/* ---------- Visual hierarchy (Oct 2026): the subject and the sender lead, details sit back, and each email has one main button ----------
   One filled button at a time (Take it, or Mark done, or the email's next step). Reply, Reply all and Forward sit together as one outlined
   group. Everything else is a quiet button. Dates, addresses, previews, labels and counts are small and grey. Emails page only. */

/* The list: unread stands out, read rows sit back, the preview and the details are quiet */
.mlpage .mlrow { gap: 3px; padding: 11px 14px 11px 16px; }
.mlpage .mlrow .mlfrom { font-weight: 500; color: var(--grey-ink); }
.mlpage .mlrow .mlsubj { font-size: 0.875rem; font-weight: 400; color: var(--grey-ink); }
.mlpage .mlrow.unread .mlfrom { font-weight: 700; color: var(--ink); }
.mlpage .mlrow.unread .mlsubj { font-weight: 600; color: var(--ink); }
.mlpage .mlrow .mltime { font-size: 0.75rem; color: var(--muted); }
.mlpage .mlrow.unread .mltime { color: var(--blue-ink); font-weight: 600; }
.mlpage .mlrow .mlsnip { font-size: 0.8125rem; color: var(--muted); }
.mlpage .mlrow .mlbox { font-size: 0.75rem; color: var(--muted); }
.mlpage .mlrow .mlclip { color: var(--muted); }
.mlchiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; margin-top: 3px; }
.mlchiprow .mlcats, .mlchiprow .mlcats.sm { margin: 0; display: contents; }
.mlpage .mlrow .mltt { margin: 0; padding: 0 8px; border: 1px solid var(--divider); border-radius: 999px; background: var(--surface2); color: var(--grey-ink); font-size: 0.75rem; font-weight: 500; line-height: 20px; vertical-align: baseline; }
.mlpage .mlrow .mltt.sug { background: transparent; border-style: dashed; border-color: var(--line); color: var(--muted); }
.mlpage .mlrow .mlcat { background: transparent; border-color: var(--divider); color: var(--grey-ink); font-weight: 500; }
.mlpage .mlrow .mlfiled, .mlpage .mlrow .mlfiledrow .chip { background: transparent; border: 0; padding: 0; color: var(--muted); font-size: 0.75rem; font-weight: 400; }
/* A long error (an email that is no longer in Outlook, a mailbox that didn't sync) wraps instead of running off the edge */
.mlwrap .mlsyncerr .kind { white-space: normal; align-items: flex-start; }
.mlwrap .mlsyncerr .kind i { margin-top: 6px; }
/* Urgent is the one loud thing in a row */
.mlpage .mlrow .mlurg { font-weight: 700; }

@media (min-width: 900px) {
  /* The header and the search: one filled button for the page (New email), the rest quiet */
  .mlpage .hbar-act .btn:not(.primary) { border-color: transparent; background: transparent; color: var(--grey-ink); font-weight: 500; }
  .mlpage .hbar-act .btn:not(.primary):hover { background: var(--divider); color: var(--ink); }
  .mlpage .mlsrow input[type="search"] { min-height: 38px; }
  .mlpage .mlsrow .btn { min-height: 38px; }
  .mlpage .mlsrow .mlsgo.btn.primary { background: var(--surface); border-color: var(--line); color: var(--ink); }
  .mlpage .mlsrow .mlsgo.btn.primary:hover { background: var(--divider); border-color: var(--line); }
  .mlpage .mlsrow .mlsfbtn { color: var(--grey-ink); font-weight: 500; }
  .mlpage .mlsrow .mlsfbtn.on { color: var(--blue-ink); border-color: var(--blue-btn); }

  /* Views and mailboxes on the left: quiet links at the bottom of the views */
  .mlapp .mlrail .link.quiet { color: var(--muted); font-weight: 400; }
  .mlapp .mlrail .link.quiet:hover { color: var(--ink); }
  .mlapp .mltabs .tab .n { font-weight: 500; color: var(--muted); }

  /* The toolbar: Reply, Reply all and Forward as one group; one filled button; the rest quiet */
  .mlapp .mltool .btn:not(.primary) { border-color: transparent; background: transparent; color: var(--grey-ink); font-weight: 500; }
  .mlapp .mltool .btn:not(.primary):hover { background: var(--divider); color: var(--ink); }
  .mlapp .mltool .mlreplybar .btn { border: 0; border-radius: 0; background: transparent; color: var(--ink); font-weight: 600; }
  .mlapp .mltool .mlreplybar .btn + .btn { border-left: 1px solid var(--divider); }
  .mlapp .mltool .mlreplybar .btn:hover { background: var(--divider); }
  .mlapp .mltool .mlreplybar .btn:focus-visible { outline-offset: -2px; }
  .mlapp .mltool .btn.primary { font-weight: 600; }
  .mlapp .mltool .link.quiet { color: var(--muted); font-weight: 500; }
  .mlapp .mltool .link.quiet:hover { color: var(--ink); }

  /* The email: the subject leads, the sender is clear, the address, date and Cc sit back */
  .mlapp .mlthree .mlh { font-size: 1.3125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); }
  .mlapp .mlthree .mlmeta { gap: 2px 12px; margin-top: 6px; }
  .mlapp .mlthree .mlfromline { color: var(--ink); }
  .mlapp .mlthree .mlfromline b { font-weight: 600; }
  .mlapp .mlthree .mlfromline .muted { font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
  .mlapp .mlthree .mlmeta > .small, .mlapp .mlthree .mlmeta .small { color: var(--muted); font-weight: 400; }
  .mlapp .mlthree .mlstate .chip { font-weight: 500; }

  /* The task box, the labels and the attachments are helpers, not headlines */
  .mlapp .mlthree .mltask { border-color: transparent; background: var(--surface2); }
  .mlapp .mlthree .mltf label, .mlapp .mlthree .mltf .mltlab { font-weight: 500; font-size: 0.8125rem; color: var(--grey-ink); }
  .mlapp .mlthree .mltaskhint { color: var(--muted); font-size: 0.75rem; }
  .mlapp .mlthree .mlcat { background: transparent; border-color: var(--divider); color: var(--grey-ink); font-weight: 500; }
  .mlapp .mlthree .mlattach .mlth { font-weight: 600; color: var(--muted); }
  .mlapp .mlthree .mlattl li, .mlapp .mlthree .mlattl li + li { border-color: transparent; background: var(--surface2); }
  .mlapp .mlthree .mlattn b { font-weight: 500; color: var(--ink); }
  .mlapp .mlthree .mlattn .small { color: var(--muted); }
  .mlapp .mlthree .mlattl .btn.small { border-color: transparent; background: transparent; color: var(--grey-ink); }
  .mlapp .mlthree .mlattl .btn.small:hover { background: var(--divider); }
  .mlapp .mlthree .mlthread .mlth, .mlapp .mlthree .mlconvo .mlth { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .mlapp .mlthree .mlconvo .mlth .small { text-transform: none; letter-spacing: 0; font-weight: 400; }
}

/* ---------- Panel review fixes (Oct 2026) ---------- */
/* The search box takes the page colours in dark mode (the browser's own grey fill and placeholder were too faint) and the same border as the other fields */
.mlpage .mlsrow input[type="search"] { border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); }
.mlpage .mlsrow input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
/* A long subject ends in dots; the Urgent badge and the paper clip keep their size */
.mlsubj .mlst { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mlsubj .mlurg, .mlsubj .mltt, .mlsubj .mlint { flex: none; }
/* Who has it: the first name beside the initial */
.mlwho { align-items: center; gap: 5px; }
.mlwho .mlwhon { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
/* The drag targets are for dragging: they don't look like buttons that can be clicked */
.mldrop { cursor: default; }
/* Reply, while the email is still loading */
.mlreplybar[aria-busy="true"] .btn:disabled { opacity: 0.55; cursor: progress; }
/* Log a Bowranda lead is the next step for a web enquiry: a clear link with room around it */
@media (min-width: 900px) {
  .mlapp .mltool .mlquietrow { gap: 2px 10px; }
  .mlapp .mltool .link.quiet[data-act="mllead"] { color: var(--blue-ink); font-weight: 600; }
}

/* ---------- Emails that didn't send (14 Oct 2026) ----------
   A red box at the top of the page until the email is written again or someone presses Got it. It is rare, so it is allowed to be loud. */
.mlfails { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--red); border-left-width: 4px; border-radius: var(--r-card); background: var(--red-bg); color: var(--ink); }
.mlfailhd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.mlfailhd b { color: var(--red); font-weight: 700; }
.mlfailhd .small { color: var(--grey-ink); }
.mlfails ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 11.5rem; overflow-y: auto; }
@media (max-width: 899px) { .mlfails ul { max-height: none; overflow-y: visible; } }
.mlfails li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--divider); }
.mlfails li:first-child { border-top: 0; padding-top: 0; }
.mlfailtxt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mlfailtxt b { font-weight: 600; overflow-wrap: anywhere; }
.mlfailtxt .small { color: var(--grey-ink); overflow-wrap: anywhere; }
.mlfailwhy { color: var(--ink); font-size: 0.875rem; overflow-wrap: anywhere; }
.mlfailacts { display: flex; align-items: center; gap: 4px 12px; flex: none; }

/* ---------- Email polish (14 Oct 2026) ---------- */
/* In dark mode the email's own white page sits in the dark pane: give it room inside, so the text doesn't touch the edge, and a fine outline */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mlapp .mlthree iframe.mlframe[data-mlid]:not([data-pv]) { box-sizing: content-box; width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
}
:root[data-theme="dark"] .mlapp .mlthree iframe.mlframe[data-mlid]:not([data-pv]) { box-sizing: content-box; width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }

/* ---------- Attachment quick view (14 Oct 2026) ---------- */
.mlattacts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.mlattacts .link.quiet { display: inline-flex; align-items: center; gap: 4px; }
.mlview { gap: 0; }
.mlviewttl { min-width: 0; display: flex; flex-direction: column; }
.mlviewttl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlviewdl[hidden] { display: none; }
.mlviewhold { flex: 1; min-height: 0; display: flex; flex-direction: column; max-width: 1100px; width: 100%; margin: 12px auto 0; }
.mlviewbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.mlviewbody .mlviewpic { flex: 1; padding: 0; }
.mlviewpdf { flex: 1; min-height: 0; width: 100%; border: 0; border-radius: 8px; background: #FFFFFF; }
.mlviewtxt { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 16px; border-radius: 8px; background: var(--surface); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font: 0.8125rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mlviewtblw { flex: 1; min-height: 0; overflow: auto; border-radius: 8px; background: var(--surface); }
.mlviewtbl { border-collapse: collapse; min-width: 100%; font-size: 0.8125rem; color: var(--ink); }
.mlviewtbl th, .mlviewtbl td { padding: 6px 10px; border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlviewtbl th { position: sticky; top: 0; background: var(--surface2); font-weight: 600; }
.mlview .mlviewmsg { margin: auto; padding: 24px; color: #FFFFFF; text-align: center; }
.mlview .mlviewnote { margin: 0; color: #E5ECE8; }
.mlviewbody > .btn { align-self: center; }
@media (max-width: 640px) {
  .mlview { padding: 8px; }
  .mlviewbar { flex-wrap: wrap; }
  .mlviewacts { flex: 1 1 100%; flex-wrap: wrap; }
  .mlviewhold { margin-top: 8px; }
}


/* Drafts (15 Oct 2026): a quiet "Draft" mark on emails you have started answering and on their Reply buttons, the kind of reply on the Drafts list, and the saved-at text by Send */
.mldraftchip, .mldraftpill { flex: none; display: inline-block; margin-right: 6px; padding: 0 7px; border: 1px solid var(--divider); border-radius: 999px; background: var(--surface2); color: var(--grey-ink); font-size: 0.6875rem; font-weight: 600; line-height: 18px; vertical-align: 1px; }
.mldraftpill { margin: 0 0 0 6px; }
.mldraftrow .mldkind { flex: none; margin-left: auto; padding: 0 7px; border-radius: 999px; background: var(--surface2); color: var(--grey-ink); font-size: 0.6875rem; font-weight: 600; line-height: 18px; }
.mlbar .mldraftst { margin-left: 4px; }
.mlbar .mldraftst:empty { display: none; }
.mlbar .mldraftst.bad { color: var(--red); }

/* ---------- Emails list: every second email is lightly shaded in the portal blue (Oct 2026) ----------
   It helps the eye follow one email across the row. The shade is faint; hover is a little stronger and the open email stronger again,
   with the blue edge it already had. Emails page only (the Tasks page has its own list). */
.mlpage { --mlz: rgba(68, 113, 184, 0.055); --mlz-hover: rgba(68, 113, 184, 0.1); --mlz-sel: rgba(68, 113, 184, 0.15); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mlpage { --mlz: rgba(110, 155, 222, 0.07); --mlz-hover: rgba(110, 155, 222, 0.13); --mlz-sel: rgba(110, 155, 222, 0.22); } }
:root[data-theme="dark"] .mlpage { --mlz: rgba(110, 155, 222, 0.07); --mlz-hover: rgba(110, 155, 222, 0.13); --mlz-sel: rgba(110, 155, 222, 0.22); }
.mlpage .mllist li:nth-child(even) .mlrow { background: var(--mlz); }
.mlpage .mllist li .mlrow:hover { background: var(--mlz-hover); }
.mlpage .mllist li .mlrow.sel { background: var(--mlz-sel); }

/* ---------- Emails list: more emails on the screen (Oct 2026) ----------
   Each row is three lines (who and when; subject; preview with the owner's name), and a fourth only when there is a task type, labels or a
   mailbox name to show. On a short screen (laptops, 800px high or less) the preview is left out and the owner moves up beside the subject,
   so a row is two lines. Scoped to the Emails list (.mlpage .mlcol), so Tasks is unchanged; desktop only, phones keep their roomy rows. */
.mlrfoot { display: contents; }
@media (min-width: 900px) {
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 0; align-items: center; padding: 8px 14px 8px 16px; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) > .mlrtop,
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) > .mlrbot { display: contents; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mlfrom { grid-column: 1; grid-row: 1; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mltime { grid-column: 2; grid-row: 1; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) > .mlsubj { grid-column: 1 / -1; grid-row: 2; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mlsnip { grid-column: 1; grid-row: 3; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mlwho { grid-column: 2; grid-row: 3; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mlfrom, .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mltime,
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mlsubj, .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mlsnip { line-height: 1.3; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mlwho .av { width: 22px; height: 22px; font-size: 0.6875rem; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow):not(:has(.mlwho)) .mlsnip { grid-column: 1 / -1; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mltime, .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mlwho { justify-self: end; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) > .mlrfoot { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; margin-top: 2px; }
  .mlpage .mlcol .mlrfoot .mlchiprow { margin: 0; }
  .mlpage .mlcol .mlrfoot .mlbox { margin-left: auto; white-space: nowrap; line-height: 1.3; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) > .mlfiledrow { grid-column: 1 / -1; grid-row: 5; margin: 2px 0 0; }
}
@media (min-width: 900px) and (max-height: 800px) {
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) { padding-top: 7px; padding-bottom: 7px; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mlsnip { display: none; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) > .mlsubj { grid-column: 1; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow):not(:has(.mlwho)) > .mlsubj { grid-column: 1 / -1; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) .mlwho { grid-row: 2; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) > .mlrfoot { grid-row: 3; }
  .mlpage .mlcol .mlrow:not(.mlsres):not(.mldraftrow) > .mlfiledrow { grid-row: 4; }
}

/* Select several emails in Unassigned and move them together: a tick box on each row, a bar above the list, and one drag for all of them */
.mllist li { position: relative; }
.mlpick { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.mlpick input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.mlpage .mlcol li.mlpickable > .mlrow.mlrow:not(.mlsres):not(.mldraftrow) { padding-left: 46px; }
.mlpage .mllist li.picked .mlrow { background: var(--blue-tint); box-shadow: inset 3px 0 0 var(--blue-btn); }
.mlpickbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px; border-bottom: 1px solid var(--divider); background: var(--surface2); font-size: 0.875rem; }
.mlpickbar .chkl { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.mlpickbar .small { min-width: 0; }
.mlpickact { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.mlpickact[hidden] { display: none; }
.mlpickact select { min-height: 36px; padding: 4px 8px; border: 1px solid var(--input-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; }
/* A list that is still being brought up to date: dimmed, with a line saying so */
.mllist.mlstale { opacity: 0.55; }
.mlupd { margin: 0; padding: 6px 14px; }
/* The picture that follows the pointer when several emails are dragged */
.mldragbadge { position: fixed; top: -200px; left: -200px; padding: 8px 14px; border-radius: 999px; background: var(--blue-btn); color: #fff; font-size: 0.875rem; font-weight: 700; white-space: nowrap; }