/* ---- Messages (mod/messages.js) — an instant messenger, AOL era ---- */

/* two panes: the list (conversations + buddy list) and the open thread */
.msgs{display:flex; flex:1; min-height:0; overflow:hidden;}
.msgs-side{flex:none; width:280px; display:flex; flex-direction:column; min-height:0;
  border-right:1px solid var(--line); background:var(--chrome); overflow-y:auto;
  -webkit-overflow-scrolling:touch;}
.msgs-main{flex:1; min-width:0; display:flex; flex-direction:column; min-height:0;
  background:var(--bg);}

/* section headings in the side pane */
.msgs .sh{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 12px 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600; position:sticky; top:0; background:var(--chrome); z-index:1;}
.msgs .sh button.small{min-height:28px; padding:3px 10px; font-size:12px; text-transform:none;
  letter-spacing:0; font-weight:600;}
.msgs .sh .legend{font-size:10.5px; letter-spacing:0; text-transform:none; font-weight:400;
  display:inline-flex; align-items:center; gap:4px;}
.msgs .mempty{padding:6px 12px 10px; margin:0; font-size:12.5px;}
.msgs .sub.pad{margin:0;}

/* a conversation row */
.msgs .crow{display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer;
  border-left:3px solid transparent;}
.msgs .crow:hover{background:var(--panel);}
.msgs .crow.on{background:var(--accent-dim); border-left-color:var(--accent);}
.msgs .crow .av{flex:none; width:34px; height:34px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700;
  font-family:var(--mono); background:var(--panel-2); border:1px solid var(--line);
  color:var(--text);}
.msgs .crow .av.grp{font-size:16px; font-family:var(--sans);}
.msgs .crow .ci{flex:1; min-width:0;}
.msgs .crow .cn{display:flex; align-items:baseline; gap:8px;}
.msgs .crow .cn b{flex:1; min-width:0; font-size:13.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.msgs .crow .ct{flex:none; font-size:10.5px; color:var(--muted); font-family:var(--mono);}
.msgs .crow .cp{font-size:12px; color:var(--muted); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.msgs .crow.unread .cn b{color:var(--text);}
.msgs .crow.unread .cp{color:var(--text);}
.msgs .crow .badge{flex:none;}

/* the buddy list */
.msgs .prow{display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer;}
.msgs .prow:hover{background:var(--panel);}
.msgs .prow .pi{flex:1; min-width:0;}
.msgs .prow .pi b{display:block; font-size:13.5px; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.msgs .prow .pi span{display:block; font-size:11px; color:var(--muted);}
/* the presence dot: hollow when not seen lately, solid green when recently active */
.msgs .ol{flex:none; width:9px; height:9px; border-radius:50%; display:inline-block;
  border:1.5px solid var(--muted); background:transparent; box-sizing:border-box;}
.msgs .ol.on{background:var(--good); border-color:var(--good);
  box-shadow:0 0 0 3px rgba(61,220,132,.18);}
.msgs .prow .ol{margin-left:11px; margin-right:1px;}

/* the thread */
.msgs .thead{flex:none; display:flex; align-items:center; gap:10px; padding:11px 16px;
  border-bottom:1px solid var(--line); background:var(--chrome);}
.msgs .thead .ti{flex:1; min-width:0;}
.msgs .thead .ti b{display:block; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.msgs .thead .ti span{display:block; font-size:11.5px; color:var(--muted); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.msgs .thead .tacts{display:flex; gap:6px; flex:none;}
.msgs .thead .tacts button.small{min-height:30px; padding:4px 10px; font-size:12.5px;}

.msgs .tlog{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 16px 8px; display:flex; flex-direction:column; gap:6px;}
.msgs .tlog .tempty{margin:auto;}
.msgs .day{align-self:center; margin:8px 0 4px; font-size:11px; color:var(--muted);
  font-family:var(--mono); letter-spacing:.04em;}
.msgs .day span{padding:2px 10px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--chrome);}

/* bubbles: theirs on the left in a panel, mine on the right in the accent */
.msgs .bub{max-width:min(78%, 560px); align-self:flex-start; padding:8px 12px;
  border-radius:14px 14px 14px 4px; background:var(--panel); border:1px solid var(--line);}
.msgs .bub.mine{align-self:flex-end; background:var(--accent-dim); border-color:var(--accent-line);
  border-radius:14px 14px 4px 14px;}
.msgs .bub.pending{opacity:.6;}
.msgs .bub .who{font-size:11.5px; font-weight:700; color:var(--accent); margin-bottom:2px;}
.msgs .bub .txt{font-size:14px; line-height:1.45; white-space:pre-wrap; word-break:break-word;}
.msgs .bub .meta{display:flex; align-items:center; gap:8px; margin-top:4px; justify-content:flex-end;}
.msgs .bub .when{font-size:10.5px; color:var(--muted); font-family:var(--mono);}
.msgs .bub.mine .when{color:var(--muted);}
/* the machine chip on a contractor's note (or any message about a machine) */
.msgs button.mchip{min-height:24px; padding:2px 9px; font-size:11.5px; font-family:var(--mono);
  border-radius:var(--r-pill); background:var(--chrome); border:1px solid var(--accent-line);
  color:var(--accent); width:auto; margin-right:auto;}
.msgs button.mchip:hover{background:var(--accent-dim);}

/* the composer */
.msgs .tcompose{flex:none; display:flex; gap:8px; align-items:flex-end; padding:10px 16px calc(10px + var(--sab));
  border-top:1px solid var(--line); background:var(--chrome);}
.msgs .tcompose textarea{flex:1; min-height:44px; max-height:140px; resize:none; line-height:1.4;
  padding:10px 12px;}
.msgs .tsend{display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none;}
.msgs .tsend button{min-height:44px; padding:10px 18px;}
.msgs .tsend .hint{font-size:10px; color:var(--muted); white-space:nowrap;}

/* nothing open yet */
.msgs .mwelcome{margin:auto; text-align:center; padding:24px; max-width:360px;}
.msgs .mwelcome .big{font-size:44px; margin-bottom:6px; opacity:.7;}
.msgs .mwelcome h2{margin-bottom:6px;}
.msgs .mwelcome .sub{margin:0;}

/* the members picker: a name and a role on one line */
.msgs-pick .permrow b{font-weight:600;}

/* ---- phones: the list fills the screen; opening a thread slides to it ---- */
@media (max-width:719px){
  .msgs-side{width:100%; border-right:0;}
  .msgs-main{display:none;}
  .msgs.open .msgs-side{display:none;}
  .msgs.open .msgs-main{display:flex;}
  .msgs .tsend .hint{display:none;}
  .msgs .bub{max-width:86%;}
}

/* ---- light mode: the same heavy outlines the rest of the app uses ---- */
html[data-theme="light"] .msgs-side{border-right:2px solid var(--line);}
html[data-theme="light"] .msgs .thead, html[data-theme="light"] .msgs .tcompose{border-color:var(--line); border-width:2px;}
html[data-theme="light"] .msgs .bub{border-width:1.5px;}
html[data-theme="light"] .msgs .bub.mine{background:var(--accent-dim); border-color:var(--accent);}
html[data-theme="light"] .msgs .crow.on{border-left-color:var(--accent);}
html[data-theme="light"] .msgs .crow .av{background:#e3e9f1; border-color:var(--line);}
html[data-theme="light"] .msgs button.mchip{border-width:1.5px; border-color:var(--accent);}