/* Messages & Email tab (Oct 16 redesign, Build 251). Deedlio navy + teal. Nothing under 13px;
   message text 16px; every button at least 44px tall. Two columns when the drawer is wide enough
   (a container query, because the drawer - not the window - decides the room), stacked otherwise. */
.txMx{--mx-navy:#082d63;--mx-teal:#10b7b4;--mx-teal-ink:#087d7a;--mx-tint:#e9f9f8;--mx-sent:#eef5ff;--mx-sent-line:#cfe0fa;--mx-line:#dde5ed;--mx-muted:#5b6678;--mx-text:#17283d;container-type:inline-size;color:var(--mx-text);font-size:15px}
.txMx button{min-height:44px;font-size:14px}
.txMxHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.txMxHead h3{margin:0;color:var(--mx-navy);font-size:20px}
.txMxSummary{margin:6px 0 0;color:var(--mx-muted);font-size:14px}
.txMxSummary b{color:var(--mx-navy)}
.txMxHead .rowActions{display:flex;gap:8px;flex-wrap:wrap}
.txMxHead .rowActions button{padding:0 18px}

.txMxGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.txMxListCol,.txMxRowTop,.txMxWho,.txMxSubject{min-width:0}
@container (min-width:760px){
 .txMxGrid{grid-template-columns:minmax(270px,38%) minmax(0,1fr)}
 .txMxList{max-height:calc(100dvh - 250px);overflow:auto}
 .txMxConvo{max-height:calc(100dvh - 520px);min-height:260px;overflow:auto}
 .txMxBack{display:none!important}
}

/* ---- list ---- */
.txMxFilters{display:flex;gap:8px;margin-bottom:10px}
.txMxFilter{flex:1;border:1px solid var(--mx-line);border-radius:999px;background:#fff;color:var(--mx-navy);font-weight:800}
.txMxFilter.active{background:var(--mx-navy);border-color:var(--mx-navy);color:#fff}
.txMxList{display:flex;flex-direction:column;gap:8px;padding:2px}
/* Rows keep their own height: in a scrolling flex column they would otherwise shrink and clip. */
.txMxList>*,.txMxConvo>*,.txMxRow>*{flex:none}
.txMxRow{display:flex;flex-direction:column;gap:4px;width:100%;padding:12px 14px;border:1px solid var(--mx-line);border-left:4px solid transparent;border-radius:12px;background:#fff;text-align:left;cursor:pointer;color:var(--mx-text)}
.txMxRow:hover{background:#f5fbfb}
.txMxRow.active{border-color:var(--mx-teal);border-left-color:var(--mx-teal);background:var(--mx-tint)}
.txMxRow.out:not(.active){background:#fafcff}
.txMxRowTop{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.txMxWho{font-size:13px;font-weight:700;color:var(--mx-teal-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txMxRow.out .txMxWho{color:#2856a3}
.txMxWhen{flex:none;font-size:13px;color:var(--mx-muted);white-space:nowrap}
.txMxSubject{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--mx-text)}
.txMxRow.unread .txMxSubject{font-weight:900;color:var(--mx-navy)}
.txMxDot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--mx-teal)}
.txMxPreview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.4;color:var(--mx-muted)}
.txMxTags{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.txMxTag,.txMsgPortalTag{display:inline-block;padding:3px 9px;border-radius:999px;background:#f1f4f8;color:#475467;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none}
.txMxTagReply{background:#fff1e6;color:#a4400b}
.txMxTagSent{background:var(--mx-sent);color:#2856a3}
.txMsgPortalTag{background:var(--mx-tint);color:var(--mx-teal-ink)}

/* ---- conversation ---- */
.txMxPane{min-width:0;display:flex;flex-direction:column;gap:12px}
.txMxConvo{display:flex;flex-direction:column;gap:8px;padding:2px}
.txMxBack{align-self:flex-start;border:0;background:none;color:var(--mx-teal-ink);font-weight:800;padding:0 4px}
.txMxMsg{width:100%;border:1px solid var(--mx-line);border-radius:14px;background:#fff;color:var(--mx-text);text-align:left}
/* Received on the left, sent on the right with a light blue tint - like a text conversation. */
.txMxMsg.in{margin-right:9%}
.txMxMsg.out{margin-left:9%;width:auto;background:var(--mx-sent);border-color:var(--mx-sent-line)}
button.txMxMsg{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 14px;cursor:pointer}
button.txMxMsg:hover{border-color:var(--mx-teal)}
button.txMxMsg.unread .txMxLine b{color:var(--mx-navy)}
.txMxLine{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.txMxLine span{color:var(--mx-muted)}
.txMxMsg.open{padding:16px 18px;box-shadow:0 6px 20px rgba(8,45,99,.08);border-color:var(--mx-teal)}
.txMxMsg.open.out{border-color:#9dbcf0}
.txMxMsgHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.txMxMsgWho b{display:block;font-size:15px;color:var(--mx-navy)}
.txMxMsgWho span{display:block;margin-top:2px;font-size:13px;color:var(--mx-muted);word-break:break-all}
.txMxMsgRight{display:flex;align-items:center;gap:6px}
.txMxMsgSubject{margin:10px 0 4px;font-size:17px;color:var(--mx-text)}
.txMxRecipients{font-size:13px;color:var(--mx-muted);line-height:1.5}
.txMxMsgBody{margin-top:12px}
.txMxMsgBody pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--mx-text);background:none;border:0;padding:0;max-height:none}
.txMxMsgBody .crmConvoMore{margin-top:10px;min-height:44px;font-size:14px}
.txMxMenuWrap{position:relative}
.txMxMore{width:44px;padding:0;border:1px solid var(--mx-line);border-radius:10px;background:#fff;color:var(--mx-navy);font-size:20px;font-weight:900;line-height:1}
.txMxMenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;padding:6px;border:1px solid var(--mx-line);border-radius:12px;background:#fff;box-shadow:0 16px 40px rgba(8,45,99,.18)}
.txMxMenu[hidden]{display:none}
.txMxMenu button{display:block;width:100%;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--mx-text);text-align:left;font-weight:600}
.txMxMenu button:hover{background:#f2f6fa}
.txMxMenu .txMxDanger{color:#b42318;border-top:1px solid #f0f2f5;border-radius:0 0 8px 8px}
.txMxMenu .txMxDanger:hover{background:#fff1f0}
.txMxFiles{display:grid;gap:8px;margin-top:14px}
.txMxFile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--mx-line);border-radius:12px;background:#f8fafc}
.txMxFileIcon{font-size:22px}
.txMxFileName b,.txMxFileName small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txMxFileName b{font-size:14px}
.txMxFileName small{margin-top:2px;font-size:13px;color:var(--mx-muted)}
.txMxFileActions{display:flex;gap:6px;align-items:center}
.txMxFileActions button{padding:0 14px}
.txMxFileActions .txMsgSaveFile{border:1px solid #bfe9e6;background:var(--mx-tint);color:var(--mx-teal-ink);font-weight:800;white-space:nowrap}
.txMxInDocs{font-size:13px;color:var(--mx-muted)}

/* ---- reply box ---- */
.txMxReply{padding:14px 16px;border:1px solid var(--mx-line);border-top:3px solid var(--mx-teal);border-radius:14px;background:#fff}
.txMxReply[hidden]{display:none}
.txMxModes{display:inline-flex;padding:3px;border-radius:12px;background:#f1f4f8}
.txMxMode{padding:0 18px;border:0;border-radius:9px;background:none;color:var(--mx-navy);font-weight:800}
.txMxMode.active{background:var(--mx-navy);color:#fff}
.txMxReplying{margin-top:12px}
.txMxReplying small{display:block;font-size:13px;font-weight:800;color:var(--mx-muted);text-transform:uppercase;letter-spacing:.04em}
.txMxReplying b{display:block;margin-top:2px;font-size:15px;color:var(--mx-navy)}
.txMxReplying q{display:block;margin-top:6px;padding:6px 10px;border-left:3px solid var(--mx-line);color:var(--mx-muted);font-size:14px;quotes:none}
.txMxReplyTo{margin-top:8px;font-size:13px;color:var(--mx-muted)}
.txMxQuick{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.txMxQuick button{padding:6px 14px;border:1px solid #bfe9e6;border-radius:999px;background:var(--mx-tint);color:var(--mx-teal-ink);font-weight:700;text-align:left;line-height:1.3}
.txMxQuick button:hover{background:#d9f4f2}
.txMx textarea#txMxReplyText{display:block;width:100%;box-sizing:border-box;min-height:150px;padding:12px 14px;border:1px solid #cfd8e3;border-radius:12px;font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--mx-text);resize:vertical}
.txMx textarea#txMxReplyText:focus{outline:3px solid rgba(16,183,180,.3);border-color:var(--mx-teal)}
.txMx .micWrap>textarea{padding-right:14px}
.txMxReplyActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.txMxSpacer{flex:1}
.txMxMicSlot{display:inline-flex;align-items:center;gap:8px}
.txMxMicSlot .micBtn{position:static;width:48px;height:48px;font-size:20px}
.txMxMicSlot .micState{font-size:13px;color:var(--mx-muted)}
.txMxAttachBtn{padding:0 16px}
.txMxSend{min-height:52px!important;min-width:150px;padding:0 28px;font-size:17px!important;font-weight:900;background:var(--mx-teal-ink);border-color:var(--mx-teal-ink)}
.txMxSentNote{margin-top:10px;padding:10px 12px;border-radius:10px;background:#ecfdf3;color:#067647;font-size:14px;font-weight:700}
.txMxSentNote[hidden]{display:none}
.txMxAttachList{margin-top:10px;padding:12px;border:1px solid var(--mx-line);border-radius:12px;background:#f8fafc}
.txMxAttachList[hidden]{display:none}
.txMxAttachHead{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--mx-navy)}
.txMxUpload{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--mx-line);border-radius:10px;background:#fff;color:var(--mx-teal-ink);font-size:14px;font-weight:800;cursor:pointer}
.txMxAttachDocs{display:grid;gap:6px;margin-top:10px;max-height:240px;overflow:auto}
.txMxAttachDocs label{display:flex;gap:10px;align-items:center;min-height:44px;padding:6px 10px;border:1px solid var(--mx-line);border-radius:10px;background:#fff;cursor:pointer}
.txMxAttachDocs input{width:20px;height:20px}
.txMxAttachDocs b,.txMxAttachDocs small{display:block}
.txMxAttachDocs b{font-size:14px}
.txMxAttachDocs small{font-size:13px;color:var(--mx-muted)}
.txMxAttachNote{margin-top:8px;font-size:13px;color:var(--mx-muted)}

/* ---- shared ---- */
.txMsgEmpty{display:flex;min-height:150px;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;color:#667085;font-size:14px}
.txMsgEmpty b{color:#082d63;font-size:15px}
.txMsgEmpty span{margin-top:5px;font-size:14px}
.txMsgError b{color:#b42318}

@container (max-width:520px){
 .txMxMsg.in{margin-right:0}.txMxMsg.out{margin-left:0}
 .txMxMsg.in.open{border-left:4px solid var(--mx-teal)}.txMxMsg.out.open{border-left:4px solid #6f9be6}
 .txMxFile{grid-template-columns:auto minmax(0,1fr)}
 .txMxFileActions{grid-column:1/-1}.txMxFileActions button{flex:1}
 .txMxSend{flex:1 1 100%}
 .txMxHead .rowActions{width:100%}.txMxHead .rowActions button{flex:1}
}

/* Build 252: live updates. The tab's unread count comes from data-unread (the tab text stays as is). */
#drawerContent [data-tx-messages][data-unread]::after{content:attr(data-unread);display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:#10b7b4;color:#fff;font-size:13px;font-weight:800;line-height:1;vertical-align:middle}
.txMxUpdated{align-self:center;font-size:13px;color:#667085;white-space:nowrap}
.txMxNotice{display:flex;align-items:stretch;gap:6px;margin:0 0 12px;border:1px solid #9fe0dd;border-radius:12px;background:#e9f9f8;overflow:hidden}
.txMxNoticeGo{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 14px;border:0;background:none;color:#082d63;font-size:15px;font-weight:800;text-align:left}
.txMxNoticeGo span{color:#087d7a;font-size:14px}
.txMxNoticeX{width:44px;border:0;background:none;color:#087d7a;font-size:22px}

/* Build 256: "No reply needed". The tab count is now emails that need a reply - shown red. */
#drawerContent [data-tx-messages][data-unread]::after{background:#d92d20}
.txMxTagDone{background:#ecfdf3;color:#067647}
.txMxReplyBar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.txMxNoReply{padding:0 16px;border:1px solid #cfd8e3;border-radius:10px;background:#fff;color:#344054;font-weight:700}
.txMxNoReply:hover{background:#f2f6fa}
.txMxUndo{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9000;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:10px 12px 10px 18px;border-radius:12px;background:#082d63;color:#fff;font-size:15px;box-shadow:0 12px 32px rgba(8,45,99,.3)}
.txMxUndo button{min-height:44px;padding:0 16px;border:0;border-radius:9px;background:#10b7b4;color:#fff;font-weight:800;font-size:15px}

/* Build 259: conversations. The list is one card per conversation; the pane shows only the chosen
   one (newest message open at the top, older ones as rows that open in place); the reply box starts
   as one bar. */
@container (min-width:760px){.txMxConvo{max-height:calc(100dvh - 300px)}}
.txMxRow .txMxSubject{order:-1}
.txMxConvoHead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:2px 4px 6px}
.txMxConvoHead h3{margin:0;font-size:18px;color:var(--mx-navy);overflow-wrap:anywhere}
.txMxConvoHead span{flex:none;font-size:13px;color:var(--mx-muted)}
.txMxMsg.open .txMxMsgHead{cursor:pointer}
.txMxMsg.isNew{box-shadow:inset 4px 0 0 var(--mx-teal)}
button.txMxMsg.isNew .txMxLine b::after{content:'New';margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--mx-tint);color:var(--mx-teal-ink);font-size:13px;font-weight:800}
.txMxEarlier{align-self:center;min-height:44px;padding:0 16px;border:1px dashed var(--mx-line);border-radius:999px;background:#fff;color:var(--mx-teal-ink);font-weight:800}
.txMxEarlier:hover{background:#f5fbfb}
/* Reply box: one bar until it is opened. */
.txMxReplyBar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.txMxWrite{flex:1 1 220px;min-height:48px;padding:0 16px;border:1px solid #cfd8e3;border-radius:12px;background:#fff;color:var(--mx-muted);font-size:16px;text-align:left;cursor:text}
.txMxWrite:hover{border-color:var(--mx-teal)}
.txMxReply:not(.collapsed) .txMxWrite{display:none}
.txMxReply.collapsed .txMxReplyBody{display:none}
.txMxReply.collapsed{padding:10px 12px;border-top-width:1px}
.txMxQuick[hidden]{display:none}
.txMxCloseReply{padding:0 16px}

/* Build 260: Forward in place; To / Cc / Bcc as chips with type-ahead; subject; add to deal contacts. */
.txMxRecips{display:grid;gap:6px;margin-top:10px}
.txMxRecipLine{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:start}
.txMxRecipLabel{padding-top:12px;font-size:13px;font-weight:800;color:var(--mx-muted)}
.txMxChips{position:relative;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:44px;padding:4px 6px;border:1px solid #cfd8e3;border-radius:12px;background:#fff}
.txMxChips:focus-within{border-color:var(--mx-teal);outline:3px solid rgba(16,183,180,.2)}
.txMxChip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 4px 4px 10px;border-radius:999px;background:var(--mx-tint);color:var(--mx-navy);font-size:14px}
.txMxChip b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txMxChip small{font-size:13px;color:var(--mx-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txMx .txMxChip button{min-height:44px;width:40px;margin:-6px -4px -6px -6px;padding:0;border:0;border-radius:50%;background:none;color:var(--mx-muted);font-size:15px}
.txMx .txMxChip button:hover{background:#fff;color:#b42318}
.txMxChipInput{flex:1 1 160px;min-width:120px;min-height:36px;border:0;outline:0;background:none;font:15px/1.4 inherit;color:var(--mx-text)}
.txMxSuggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;max-height:300px;overflow:auto;padding:6px;border:1px solid var(--mx-line);border-radius:12px;background:#fff;box-shadow:0 16px 40px rgba(8,45,99,.18)}
.txMxSuggest[hidden]{display:none}
.txMx .txMxSuggest button{display:block;width:100%;padding:6px 10px;border:0;border-radius:8px;background:none;text-align:left}
.txMxSuggest button b{display:block;font-size:14px;color:var(--mx-navy)}
.txMxSuggest button small{display:block;font-size:13px;color:var(--mx-muted)}
.txMxSuggest button.on,.txMxSuggest button:hover{background:var(--mx-tint)}
.txMxCcLink{justify-self:start;margin-left:52px;padding:0 10px;border:0;background:none;color:var(--mx-teal-ink);font-weight:800}
.txMxSubjectLine{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0;align-items:center;margin-top:6px}
.txMxSubjectLine span{font-size:13px;font-weight:800;color:var(--mx-muted)}
.txMxSubjectLine input{min-height:44px;padding:0 12px;border:1px solid #cfd8e3;border-radius:12px;font:15px/1.4 inherit;color:var(--mx-text)}
.txMxReply.forwarding:not(.collapsed){border-top-color:#2856a3}
.txMxReply.forwarding .txMxReplying small{color:#2856a3}
.txMxLatest{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--mx-tint);color:var(--mx-teal-ink);font-size:13px;font-style:normal;font-weight:800;vertical-align:middle}
.txMxAttachDocs .txMxDocSource{color:#475467}
.txMxAddContacts{margin-top:10px;padding:12px;border:1px solid var(--mx-line);border-radius:12px;background:#f8fafc}
.txMxAddContacts>b{display:block;margin-bottom:8px;color:var(--mx-navy);font-size:15px}
.txMxAddRow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr) auto auto;gap:8px;align-items:center;margin-top:6px}
.txMxAddWho{font-size:14px;color:var(--mx-text);overflow-wrap:anywhere}
.txMxAddRow input,.txMxAddRow select{min-height:44px;padding:0 10px;border:1px solid #cfd8e3;border-radius:10px;background:#fff;font:14px inherit}
.txMxAddRow button{padding:0 14px}
@container (max-width:620px){.txMxAddRow{grid-template-columns:1fr 1fr}.txMxAddWho{grid-column:1/-1}}
/* Build 261: who a reply goes to, as one line, until "Edit recipients". */
.txMxRecipSummary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:4px 2px;font-size:15px;color:var(--mx-text)}
.txMxRecipSummary b{color:var(--mx-muted);font-weight:800}
.txMxRecipSummary .txMxCcLink{margin-left:0}
/* Build 262: the message Reply / Reply all / Forward will answer. */
.txMxMsg.open.isTarget{box-shadow:0 0 0 2px var(--mx-teal),0 6px 20px rgba(8,45,99,.08)}
.txMxTargetTag{display:inline-block;margin-top:8px;padding:2px 10px;border-radius:999px;background:var(--mx-navy);color:#fff;font-size:13px;font-weight:800}

/* Attachment viewer (Build 281): View shows the file here instead of sending it to Downloads. */
.txMxViewerOverlay{z-index:calc(var(--deedlio-modal-layer,1900) + 50);padding:18px}
.txMxViewerModal{width:min(1100px,100%);height:calc(100dvh - 36px);display:flex;flex-direction:column;overflow:hidden;padding:0}
.txMxViewerHead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid #dde5ed;background:#fff}
.txMxViewerTitle{display:flex;flex-direction:column;min-width:0;flex:1}
.txMxViewerTitle b{color:#082d63;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txMxViewerTitle small{color:#5b6678;font-size:13px}
.txMxViewerBtns{display:flex;gap:8px;flex-wrap:wrap}
.txMxViewerBtns button{min-height:44px;padding:0 16px;font-size:14px}
.txMxViewerBody{flex:1;min-height:0;background:#f3f6f9;display:flex}
.txMxViewerFrame{flex:1;width:100%;height:100%;border:0;background:#fff}
.txMxViewerImg{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:16px}
.txMxViewerImg img{max-width:100%;height:auto;background:#fff;box-shadow:0 2px 10px rgba(8,45,99,.12)}
.txMxViewerText{flex:1;margin:0;padding:16px;overflow:auto;white-space:pre-wrap;font-size:14px;background:#fff}
.txMxViewerMsg{margin:auto;text-align:center;color:#17283d;font-size:15px;padding:24px}
.txMxViewerMsg button{min-height:44px;padding:0 18px;margin-top:8px}
@media(max-width:700px){.txMxViewerOverlay{padding:0}.txMxViewerModal{height:100dvh;border-radius:0}}
/* Build 383: this deal's email address under the heading */
.txMxAlias{margin-top:8px;font-size:12px;padding:6px 10px;cursor:pointer}
.txMxAlias .propertyEmailAliasText{white-space:normal;overflow-wrap:anywhere}