/* Messages (messages.js, 2026-11-12). Every class starts with dm; colors are the portal's --u2 variables.
   Avatar circles are .mpAv from map.css (the same faces as the map and the Community). */
.dmIc{flex:none;vertical-align:-3px}
.dmSr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- the top-bar button (computers only for now) */
.dmWrap{position:relative;flex:none}
.dmWrap[hidden]{display:none}
.dmBtn{position:relative;width:44px;height:44px;border-radius:50%;border:0;background:none;color:var(--text);display:grid;place-items:center;cursor:pointer}
.dmBtn:hover,.dmBtn[aria-expanded="true"]{background:var(--u2-surf)}
.dmBtn:focus-visible{outline:3px solid #CE3D1C;outline-offset:2px}
.dmN{position:absolute;top:3px;right:1px;min-width:18px;height:18px;border-radius:999px;background:#C93C18;color:#fff;font:700 11px/18px Poppins,sans-serif;
  text-align:center;padding:0 4px;border:2px solid var(--bg);box-sizing:content-box}
.dmN[hidden]{display:none}
.dmDD{position:absolute;right:-6px;top:52px;width:390px;max-width:calc(100vw - 24px);z-index:60;background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--u2-shadow);overflow:hidden;font-family:Poppins,sans-serif}
.dmDDHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 14px 8px 16px}
.dmDDHead b{font:700 16px Poppins,sans-serif}
.dmDDNew{display:inline-flex;align-items:center;gap:6px;font:600 13.5px Poppins,sans-serif;color:var(--u2-link);text-decoration:none;padding:7px 9px;border-radius:9px}
.dmDDNew:hover{background:var(--u2-active)}
.dmDDList{list-style:none;margin:0;padding:0 6px 6px;max-height:min(440px,65vh);overflow-y:auto}
.dmDDEmpty{margin:0;padding:6px 16px 16px;font-size:14px;line-height:1.5;color:var(--muted);display:flex;flex-direction:column;gap:2px}
.dmDDEmpty b{color:var(--text)}
.dmDDEmpty a,.dmPick a{color:var(--u2-link);font-weight:600}
.dmDDAll{display:block;text-align:center;padding:12px;border-top:1px solid var(--border);font:600 14px Poppins,sans-serif;color:var(--u2-link);text-decoration:none}
.dmDDAll:hover{background:var(--u2-active)}
@media (max-width:899px){ .dmWrap{display:none!important} }

/* ---------------------------------------------------------------- a conversation row (dropdown + page list) */
.dmRow{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;color:var(--text);text-decoration:none}
.dmRow:hover{background:var(--u2-active)}
.dmRow.on{background:var(--u2-raised)}
.dmRow:focus-visible{outline:2px solid var(--u2-link);outline-offset:-2px}
.dmRowTx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dmRowTop{display:flex;align-items:baseline;gap:8px}
.dmRowTop b{flex:1;min-width:0;font:600 15px/1.3 Poppins,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmRowTop time{flex:none;font-size:12px;color:var(--muted)}
.dmRowSnip{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmRow.unread .dmRowTop b{font-weight:700}
.dmRow.unread .dmRowSnip{color:var(--text);font-weight:600}
.dmDot{flex:none;width:10px;height:10px;border-radius:50%;background:#C93C18}
.dmFace{flex:none;position:relative;display:inline-flex}
.dmFace.two .mpAv{position:absolute;box-shadow:0 0 0 2px var(--surface)}
.dmFace.two .mpAv:first-child{top:0;left:0}
.dmFace.two .mpAv:last-child{right:0;bottom:0}

/* ---------------------------------------------------------------- the page */
.dmRoot{color:var(--text)}
.dmTop{margin-bottom:14px}
.dmPage{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);height:max(520px,calc(100vh - var(--hdrH,80px) - 190px));
  border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--surface)}
.dmSide{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border)}
.dmSideHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 14px 8px 16px}
.dmSideHead h2{margin:0;font:700 17px Poppins,sans-serif}
.dmNewB{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.dmListBox{flex:1;min-height:0;overflow-y:auto;padding:0 6px 6px}
.dmList{list-style:none;margin:0;padding:0}
.dmPrefs{border-top:1px solid var(--border);padding:10px 14px}
.dmSwitch{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.45;color:var(--muted);cursor:pointer}
.dmSwitch input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:#CE3D1C}
.dmPane{display:flex;flex-direction:column;min-width:0;min-height:0}
.dmPaneHead{border-bottom:1px solid var(--border)}
.dmHeadRow{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:64px;box-sizing:border-box}
.dmHeadTx{flex:1;min-width:0;display:flex;flex-direction:column}
.dmHeadTx b{font:700 16px/1.3 Poppins,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmHeadTx span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmBack{display:none;align-items:center;gap:4px;color:var(--text);text-decoration:none;font:600 14px Poppins,sans-serif;padding:8px 6px;border-radius:10px;flex:none}
.dmBack:hover{background:var(--u2-active)}
.dmIconB{flex:none;width:40px;height:40px;border-radius:10px;border:0;background:none;color:var(--text);display:grid;place-items:center;cursor:pointer}
.dmIconB:hover{background:var(--u2-active)}
.dmIconB:focus-visible,.dmSendB:focus-visible{outline:2px solid var(--u2-link);outline-offset:2px}
.dmMenuWrap{position:relative;flex:none}
.dmMenu{position:absolute;right:0;top:44px;z-index:20;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--u2-shadow);padding:6px;display:flex;flex-direction:column}
.dmMenu button{text-align:left;border:0;background:none;padding:10px 12px;border-radius:8px;font:500 14px Poppins,sans-serif;color:var(--text);cursor:pointer}
.dmMenu button:hover{background:var(--u2-active)}
.dmMenuPeople{display:flex;flex-direction:column;gap:3px;padding:8px 12px 10px;margin-bottom:4px;border-bottom:1px solid var(--border);font-size:13.5px}
.dmMenuPeople b{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dmConfirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;background:var(--u2-surf);font-size:14px;line-height:1.5}
.dmConfirm > span{flex:1;min-width:220px}
.dmConfirmBtns{display:flex;gap:8px}
.dmConfirm .dmErrTx{flex-basis:100%;margin:0}
.dmMsgs{flex:1;min-height:0;overflow-y:auto;padding:12px 18px 16px;display:flex;flex-direction:column}
.dmMsgs:focus-visible{outline:2px solid var(--u2-link);outline-offset:-2px}
.dmOlder{text-align:center;margin:4px 0 10px}
.dmDay{display:flex;align-items:center;gap:10px;margin:14px 0 6px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.dmDay::before,.dmDay::after{content:"";flex:1;height:1px;background:var(--border)}
.dmSys{text-align:center;font-size:13px;color:var(--muted);margin:10px 0}
.dmMsg{display:flex;align-items:flex-end;gap:8px;max-width:78%;margin-top:3px}
.dmMsg.start{margin-top:10px}
.dmMsg.mine{align-self:flex-end;flex-direction:row-reverse}
.dmMsgAv{flex:none;width:30px;display:flex}
.dmMsgCol{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.dmMsg.mine .dmMsgCol{align-items:flex-end}
.dmMeta{font-size:12px;color:var(--muted);margin:0 6px 3px}
.dmMeta b{color:var(--text);font-weight:600}
.dmBubble{padding:9px 13px;border-radius:16px;background:var(--u2-surf);color:var(--text);font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.dmMsg:not(.mine) .dmBubble{border-bottom-left-radius:6px}
.dmMsg.mine .dmBubble{background:var(--u2-chipOn);color:var(--u2-chipOnText);border-bottom-right-radius:6px}
.dmBubble a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.dmFoot{border-top:1px solid var(--border);padding:10px 14px 12px}
.dmReply{display:flex;align-items:flex-end;gap:8px}
textarea.dmText{flex:1;resize:none;min-height:46px;max-height:200px;padding:11px 14px;border-radius:14px;border:1.5px solid var(--border);background:var(--bg);
  color:var(--text);font:400 15.5px/1.45 Poppins,sans-serif;box-sizing:border-box}
textarea.dmText:focus{outline:2px solid var(--u2-link);outline-offset:1px}
.dmSendB{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--u2-btn,#CE3D1C);color:#fff;display:grid;place-items:center;cursor:pointer}
.dmSendB:hover{background:var(--u2-btnHover,#B33518)}
.dmSendB:disabled{opacity:.45;cursor:not-allowed}
.dmReplyHint{margin:6px 2px 0;font-size:12.5px;color:var(--muted)}
.dmCant{margin:0;padding:10px 4px;font-size:14px;color:var(--muted);text-align:center}
.dmEmpty{margin:0;padding:24px 16px;font-size:14px;color:var(--muted);text-align:center}
.dmErrTx{color:var(--psych,#CE3D1C);font-weight:600}
.dmPick{margin:auto;max-width:380px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--muted);font-size:14.5px;line-height:1.5}
.dmPick b{font:700 18px Poppins,sans-serif;color:var(--text)}
.dmPick > .dmIc{color:var(--u2-link)}
.dmPick .u2Btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;margin-top:6px}
.dmNewBox{padding:18px 22px;overflow-y:auto;flex:1;min-height:0;max-width:640px;box-sizing:border-box;width:100%}
@media (min-width:900px){ .dmNewHead{display:none} }

/* ---------------------------------------------------------------- the "To + message" box */
.dmCmp{display:flex;flex-direction:column;gap:10px}
.dmCmpHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dmCmpHead h2{margin:0;font:700 18px Poppins,sans-serif;color:var(--text)}
.dmTo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border:1.5px solid var(--border);border-radius:14px;background:var(--bg);min-height:48px;box-sizing:border-box}
.dmTo:focus-within{outline:2px solid var(--u2-link);outline-offset:1px}
.dmToLbl{font:600 14px Poppins,sans-serif;color:var(--muted);padding:0 4px}
.dmChips{display:contents;list-style:none;margin:0;padding:0}
.dmChip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 3px 3px 3px;border-radius:999px;background:var(--u2-surf);font:600 13.5px Poppins,sans-serif;color:var(--text)}
.dmChip > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmChip button{flex:none;width:26px;height:26px;border-radius:50%;border:0;background:none;color:var(--text);display:grid;place-items:center;cursor:pointer}
.dmChip button:hover{background:var(--u2-active)}
input.dmToIn{flex:1;min-width:130px;border:0;background:none;color:var(--text);font:400 15px Poppins,sans-serif;padding:7px 4px;outline:none}
.dmSug{list-style:none;margin:-4px 0 0;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--u2-shadow);max-height:300px;overflow-y:auto}
.dmSug[hidden]{display:none}
.dmSugB{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px;border-radius:8px;text-align:left;cursor:pointer;color:var(--text);font:inherit}
.dmSugB:hover,.dmSugB.hi{background:var(--u2-active)}
.dmSugB > span{display:flex;flex-direction:column;min-width:0}
.dmSugB b{font:600 14.5px Poppins,sans-serif}
.dmSugB span span{font-size:12.5px;color:var(--muted)}
.dmSugNone{padding:10px;font-size:14px;color:var(--muted)}
.dmHint{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.dmGroupNote{display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:10px;background:var(--u2-surf);font-size:13.5px;line-height:1.45}
.dmGroupNote[hidden]{display:none}
textarea.dmBody{width:100%;box-sizing:border-box;min-height:120px;resize:vertical;padding:12px 14px;border-radius:14px;border:1.5px solid var(--border);
  background:var(--bg);color:var(--text);font:400 16px/1.5 Poppins,sans-serif}
textarea.dmBody:focus{outline:2px solid var(--u2-link);outline-offset:1px}
.dmCount{align-self:flex-end;font-size:12.5px;color:var(--muted);margin-top:-6px}
.dmCmp .dmErrTx{margin:0;font-size:14px}
.dmCmp .dmErrTx[hidden]{display:none}
.dmCmpBtns{display:flex;gap:8px;flex-wrap:wrap}
.dmCmp .u2Btn:disabled{opacity:.45;cursor:not-allowed}
.dmSent{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:6px 0}
.dmSent > .dmIc{color:#2F6F5E}
.dmSent h2{margin:0;font:700 22px/1.2 Poppins,sans-serif}
.dmSent p{margin:0 0 6px;font-size:15px;line-height:1.55}

/* ---------------------------------------------------------------- phones and narrow windows: one pane at a time */
@media (max-width:899px){
  .dmPage{grid-template-columns:1fr;height:max(440px,calc(100dvh - var(--hdrH,64px) - 210px))}
  .dmPage .dmPane{display:none}
  .dmPage.open .dmSide{display:none}
  .dmPage.open .dmPane{display:flex}
  .dmBack{display:inline-flex}
  .dmMsg{max-width:88%}
  .dmMsgs{padding:10px 12px 14px}
  .dmNewBox{padding:14px 16px}
}
@media (max-width:480px){ .dmHeadRow .dmBack span{display:none} .dmHeadRow{gap:8px;padding:8px 10px} }