/*
 * Neighbors and messages (hrhs-communities 0.25.0). Loaded only by the
 * portal's Neighbors tab and its Messages screens. Reads the host's
 * hrhs-system tokens (--ink, --go, --line…) and changes nothing the host
 * draws. Comp: connect-comp.html frames "Neighbors", "Request", "Messages",
 * "At five". Bubbles to the system: yours navy, theirs white on a hairline,
 * green on Send and nowhere else.
 */

/* ── The roster's button, four states ────────────────────────────── */
.nbr__a{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
.nbr .nbr__cx,.nbr .nbr__cx:visited{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-right:2px}
.nbr .nbr__cx:hover{color:var(--go)}
a.ov{display:block}
a.sh__x{display:grid;place-items:center;text-decoration:none;color:var(--ink-2);font-size:18px;line-height:1}

/* ── Two panes: the list, and what is open ───────────────────────── */
.chatwrap{display:grid;grid-template-columns:350px minmax(0,1fr);gap:20px;align-items:start}
.clist__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 12px;border-bottom:1px solid var(--line-soft)}
.clist__hd .sec__t{font-size:18px}
.clist .conv{border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink)}
.clist__empty{margin:0;padding:18px;font-size:13.5px;color:var(--muted);line-height:1.55}
.clist__ft{padding:14px 18px;font-size:12.5px;color:var(--muted);line-height:1.5}
/* A thread's faces: two, overlapping on the diagonal inside one 42px
 * square, so a group row is the same height as a one-to-one row. */
.cstack{position:relative;display:block;flex:0 0 auto;width:42px;height:42px}
.cstack .conv__av{position:absolute;box-sizing:border-box;border:2px solid var(--card)}
.cstack .conv__av:nth-child(1){left:0;top:0}
.cstack .conv__av:nth-child(2){right:0;bottom:0}
.cstack .conv__av:only-child{left:6px;top:6px}

.cpane{min-height:420px;display:flex;flex-direction:column}
.cpane__quiet{margin:auto;padding:48px 24px;text-align:center;display:grid;gap:8px;justify-items:center;max-width:380px}
.cpane__quiet b{font-size:16px;font-weight:700}
.cpane__quiet span{font-size:13.5px;color:var(--muted);line-height:1.55}
.cpane__hd{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.cpane__t{flex:1;min-width:0}
.cpane__t b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.cpane__t span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpane .cback,.cpane .cback:visited{display:none;text-decoration:none;color:var(--muted);font-size:18px}

/* ── A thread ────────────────────────────────────────────────────── */
.cmsgs{flex:1;padding:16px 18px;display:flex;flex-direction:column;gap:12px;max-height:62vh;overflow-y:auto}
.cmsgs__day{align-self:center;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:6px 0 2px}
.cmsg{display:flex;gap:9px;align-items:flex-end;max-width:78%}
.cmsg .conv__av{flex:0 0 auto}
.cmsg__meta{font-size:11.5px;color:var(--muted);margin:0 4px 3px}
.cmsg__meta b{color:var(--ink-2);font-weight:600}
.cmsg__t{background:var(--card);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:9px 13px;font-size:14.5px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.cmsg--me{align-self:flex-end;flex-direction:row-reverse}
.cmsg--me .cmsg__meta{text-align:right}
.cmsg--me .cmsg__t{background:var(--ink);border-color:var(--ink);color:#fff;border-radius:16px 16px 4px 16px}

.ccompose{display:flex;gap:10px;align-items:flex-end;padding:12px 18px 16px;border-top:1px solid var(--line)}
.ccompose .in{flex:1;min-height:44px;resize:vertical}
.ccompose--off{display:block;font-size:13.5px;color:var(--muted);background:var(--tint)}

/* ── A new thread ────────────────────────────────────────────────── */
.cnew__bd{padding:18px}
.cpick{display:grid;gap:6px;max-height:300px;overflow-y:auto}
.cpick__it{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--card)}
.cpick__it:has(input:checked){border-color:#BFE7D2;background:var(--go-bed)}
.cpick__it input{width:18px;height:18px;accent-color:var(--go);flex:0 0 auto}
.cpick__it b{display:block;font-size:14px;font-weight:600}
.cpick__it span span{display:block;font-size:12px;color:var(--muted)}

/* ── The people sheet ────────────────────────────────────────────── */
.cppl{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.cppl__n{flex:1;min-width:0;font-size:14px;font-weight:600}
.cppl__in{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cppl--off{opacity:.5}
.cppl__h{margin:16px 0 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.capnote{margin:14px 0 6px;padding:12px 14px;border-radius:12px;background:var(--tint);border:1px solid var(--line)}
.capnote b{display:block;font-size:14px}
.capnote span{display:block;font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.5}

/* ── Phone: one pane at a time ───────────────────────────────────── */
@media (max-width:860px){
  .chatwrap{grid-template-columns:1fr}
  .chatwrap--thread .clist,.chatwrap--new .clist{display:none}
  .chatwrap--list .cpane{display:none}
  .cpane .cback,.cpane .cback:visited{display:inline-block}
  .cmsgs{max-height:none}
  .cmsg{max-width:88%}
}