/* view styles: Conversations (views/conversations.js, the envelope's list in js/pm.js; pm-), Members and Online now
   (views/members.js; mb-) and the base of What's new's rows (views/whatsnew.js; wn-, laid out in v-forum.css). One
   layer on app.css's tokens: groupboxes, wells, "label ■ value" pairs, the accent cap on what is unread or open. */

/* ---------------------------------------------------------------- conversations: the list | thread split
   The list is a groupbox of rows on the left; the open conversation (or the placeholder on the bare inbox) fills the
   rest. On a thread the list sticks under the shell and scrolls on its own, and the docked reply box moves over to sit
   under the thread only. */
.pm-page, .pane:has(> .pm-split) { --pm-w: 344px; --pm-top: calc(2px + var(--hdr-h) + var(--sub-h) + var(--sp-4) + var(--in-t)); }
.pm-split { display: grid; grid-template-columns: var(--pm-w) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.pane.docked > .scroll.pm-split > * { margin-bottom: 0; }
.pm-list.side, .pm-pick { position: sticky; top: var(--pm-top); }
.pm-list.side > .card-b { max-height: calc(100vh - var(--pm-top) - var(--cap-h) - var(--foot-stick) - 48px); overflow-y: auto; overscroll-behavior: contain; }
.pane.docked > .dock.pm-dock { margin-left: calc(var(--pm-w) + var(--gap)); }
.pm-list .card-h .aside .btn.icon { margin-right: -6px; color: var(--tx-3); }
.pm-list .card-h .aside .btn.icon:hover:not(:disabled) { color: var(--tx); }

/* a row: the faces with the unread square on their corner, the title and its time, the last message, who is in it */
.pm-irow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px var(--g-r) 10px var(--g-l);
  cursor: pointer; transition: background var(--hover); }
.pm-irow + .pm-irow { border-top: 1px solid var(--e-hair); }
.pm-irow:hover { background: var(--s-hover); }
.pm-irow:focus-visible { outline: 0; background: var(--row-fc); box-shadow: inset 0 0 0 1px var(--ac-line); }
.pm-irow.unread { box-shadow: inset 2px 0 0 var(--ac); }
.pm-irow.on { background: linear-gradient(90deg, rgba(85,69,109,.6), rgba(50,48,77,.22) 75%, transparent); box-shadow: inset 2px 0 0 var(--ac-pink); }
.pm-fw { position: relative; display: block; margin-top: 2px; }
.pm-fw > .dot { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; margin: 0; background: transparent; }
.pm-irow.unread .pm-fw > .dot { background: var(--ac-pink); box-shadow: 0 0 0 1px #000; }
.pm-irow:not(.unread):not(.on) .pm-faces > .av { filter: saturate(.55) brightness(.85); }
.pm-irow .main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pm-irow .tt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pm-irow .nm { flex: 1; min-width: 0; font: 400 var(--fs-base)/19px var(--ui); color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--hover); }
.pm-irow.unread .nm { color: var(--tx); font-weight: 700; }
.pm-irow:hover .nm, .pm-irow.on .nm { color: var(--tx); }
.pm-irow .when { flex: none; }
.pm-irow .when .mono { font-size: var(--fs-sm); color: var(--tx-4); }
.pm-irow.unread .when .mono { color: var(--ac-hi); }
.pm-irow .last { font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-irow .last b { font-weight: 400; color: var(--tx-2); }
.pm-irow.unread .last { color: var(--tx-2); }
.pm-irow .with { font-size: var(--fs-sm); line-height: 16px; color: var(--tx-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-irow .with .t2 { color: var(--tx-3); }
.pm-irow .with .dotsep { margin: 0 7px; vertical-align: middle; }
/* the open one: its quiet lines a step up, so they keep 4.5:1 on the lit row */
.pm-irow.on .last, .pm-irow.on .with .t2 { color: var(--tx-2); }
.pm-irow.on .with, .pm-irow.on:not(.unread) .when .mono { color: var(--tx-3); }
.pm-irow.skel { cursor: default; pointer-events: none; }
.pm-irow.skel .sk.faces { width: 32px; height: 32px; margin-top: 2px; }
.pm-irow.skel .main { gap: 8px; padding-top: 4px; }
/* faces: square tiles in a black ring, the next tucked under the first */
.pm-faces { position: relative; display: inline-flex; flex: none; }
.pm-faces > .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--s-box); }
.pm-faces > .av + .av { margin-left: -12px; }
.popup .pm-faces > .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--s-pop); }
/* the list's foot: the pager (the inbox) or the way to the whole list (beside a thread) */
.pm-lfoot { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 8px 0 var(--g-l); font-size: var(--fs-md);
  border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); background: #101013; }
.pm-lfoot .pager .btn { height: 22px; width: 22px; }
.pm-lfoot a.out { display: inline-flex; align-items: center; gap: 4px; color: var(--tx-3); }
.pm-lfoot a.out:hover { color: var(--ac-hi); }

/* ---------------------------------------------------------------- one conversation: who is in it as chips in a strip,
   the messages as the forum's post boxes (your own with the bright cap), "is typing" under them */
.pm-main .fv-post { grid-template-columns: 200px minmax(0, 1fr); }
.pm-people { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px var(--g-r) 8px var(--g-l); background: var(--s-box);
  border: 1px solid var(--e-line); border-top-color: var(--g-edge-t); border-bottom-color: var(--g-edge-b); box-shadow: var(--el-1); }
.pm-people > .cap { margin-right: 6px; }
.pm-p { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 2px; font-size: var(--fs-md); white-space: nowrap;
  background: var(--s-well); border: 1px solid #000; box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 var(--bev-hi); }
.pm-p > .av { width: 20px !important; height: 20px !important; }
.pm-p > .av .mono-l { font-size: var(--fs-xs); }
.pm-p .chip.op { height: 16px; padding: 0 5px; font-size: var(--fs-xs); }
.pm-p.left { opacity: .5; }
.fv-post.pm-msg.own .phd::before { opacity: 1; background: linear-gradient(180deg, var(--ac-pink), var(--ac)); }
.fv-post.pm-msg.own > .side { background: linear-gradient(180deg, #1A1722, #121116 180px); }
.fv-post.pm-msg .pft:not(:has(.btn)) { display: none; }
.pm-typing { display: flex; align-items: center; gap: 10px; min-height: 24px; padding: 0 2px; color: var(--tx-3); font-size: var(--fs-md); animation: fade var(--panel); }
.pm-dots { display: inline-flex; gap: 3px; padding: 6px 7px; background: var(--s-box); border: 1px solid #000; }
.pm-dots i { width: 4px; height: 4px; background: var(--tx-3); animation: pm-dot 1.2s ease-in-out infinite; }
.pm-dots i:nth-child(2) { animation-delay: .15s; }
.pm-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pm-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* the envelope's list (js/pm.js miniRow): the bell's rows with faces and the last message */
.pm-pop .al-row > .pm-faces { margin-top: 1px; }
.pm-pop .al-s .al-tt { color: var(--tx); }
.pm-pop .al-row:not(.new) .al-s .al-tt { color: var(--tx-2); font-weight: 400; }
.pm-sn { font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-sn b { font-weight: 400; color: var(--tx-2); }
.al-row.new .pm-sn { color: var(--tx-2); }
/* the recipient field (Start conversation, Invite): names as small wells inside the field */
.inp.pm-to { height: auto; min-height: 40px; flex-wrap: wrap; gap: 6px; padding: 6px 10px; cursor: text; }
.inp.pm-to > svg { color: var(--tx-4); }
.inp.pm-to > input { flex: 1; min-width: 120px; height: 26px; }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 22px; padding: 0 2px; font-size: var(--fs-md); background: var(--s-raise); border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04); animation: pop-in var(--panel); }
.pm-chip > .av { width: 16px !important; height: 16px !important; }
.pm-chip .x { width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--tx-3); }
.pm-chip .x:hover { background: rgba(255,255,255,.08); color: var(--tx); }
.pm-new { display: flex; flex-direction: column; gap: 14px; }
.pm-new > * { margin-bottom: 0 !important; }

/* ---------------------------------------------------------------- members: the sort beside the page title, one
   groupbox (the name search in its title bar) of tiles meeting on hairlines; each tile the face, name and role, and a
   well along its foot with the numbers, the sorted one lit */
.mb-page > .ph { margin-bottom: var(--sp-4); }
.mb-card .card-h .aside .mb-search { width: 220px; height: 22px; }
.mb-card .card-h .aside .mb-search input { font-size: var(--fs-md); }
.mb-search input::-webkit-search-cancel-button { display: none; }
.mb-gw { overflow: hidden; }
.mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); width: calc(100% + 1px); margin-bottom: -1px; }
.mb-grid.none { display: block; width: auto; margin: 0; }
.mb-tile { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; align-items: center; min-width: 0;
  padding: 14px var(--g-r) 14px var(--g-l); border-right: 1px solid var(--e-hair); border-bottom: 1px solid var(--e-hair); cursor: pointer; transition: background var(--hover); }
.mb-tile:hover { background: var(--s-hover); }
.mb-tile:focus-visible { outline: 0; background: var(--row-fc); box-shadow: inset 0 0 0 1px var(--ac-line); }
.mb-av { position: relative; flex: none; width: 40px; height: 40px; }
.mb-av > .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--e-line-2); }
.mb-dot { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; background: linear-gradient(180deg, var(--ok), #446F3E); box-shadow: 0 0 0 1px #000; }
.mb-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-nm { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 var(--fs-base)/19px var(--ui); }
.mb-nm > a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-rank { margin-left: auto; height: 18px; padding: 0 6px; font-size: var(--fs-xs); color: var(--tx-3); }
.mb-rank.r1 { background: #2C2414; color: var(--warn); }
.mb-role { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); line-height: 16px; white-space: nowrap; }
.mb-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-width: 0; height: 26px; padding: 0 8px; overflow: hidden; font-size: var(--fs-sm);
  background: var(--s-well); border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 var(--bev-hi); }
.mb-foot > .pair:first-child { min-width: 64px; }
.mb-foot > .pair:last-child { flex-shrink: 1; }
.mb-foot .pair > .pv { color: var(--tx-2); }
.mb-foot .pair.on > .pk { color: var(--tx-3); }
.mb-foot .pair.on > .pv { color: var(--ac-hi); font-weight: 700; }
.mb-foot.act { gap: 8px; }
.mb-act { font-size: var(--fs-md); line-height: 17px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-foot .mb-act { font-size: var(--fs-sm); }
.mb-act b, .mb-act .uc-at { color: var(--tx-2); font-weight: 400; }
.mb-tile.skel { cursor: default; pointer-events: none; }
.mb-tile.skel .sk.av { width: 40px; height: 40px; margin: 0; }
.mb-tile.skel .mb-id .sk + .sk { margin-top: 6px; }
.mb-tile.skel .mb-foot .sk { height: 8px; }

/* ---------------------------------------------------------------- online now: one row each, the guests and the role
   legend on the box's foot */
.mb-orow { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px var(--g-r) 8px var(--g-l); transition: background var(--hover); }
.mb-orow + .mb-orow { border-top: 1px solid var(--e-hair); }
.mb-orow:hover { background: var(--s-hover); }
.mb-orow > .av { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--e-line-2); }
.mb-orow .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mb-orow.skel .sk.av { width: 32px; height: 32px; margin: 0; }
.mb-orow.skel .grow { gap: 8px; }
.mb-on { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 var(--fs-base)/19px var(--ui); }
.mb-orow > .mono { flex: none; font-size: var(--fs-sm); }
.mb-guests { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-height: 30px; padding: 6px var(--g-r) 6px var(--g-l); font-size: var(--fs-md); color: var(--tx-3);
  border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--e-hair); background: #101013; }
.mb-guests b { color: var(--tx); font-size: var(--fs-md); }
.mb-guests .legend { margin: 0; padding: 0; border: 0; box-shadow: none; }

/* ---------------------------------------------------------------- what's new: the rows' base (v-forum.css lays them
   out under .wn-page) */
.wn-card .card-h { flex-wrap: wrap; }
.wn-list { display: flex; flex-direction: column; }
.wn-av { position: relative; flex: none; }
.wn-k > svg { width: 11px; height: 11px; }
.wn-reaction .wn-k { color: var(--warn); }
.wn-member .wn-k { color: var(--ok); }
.wn-topic .wn-k { color: var(--ac-hi); }
.wn-row .grow { display: flex; flex-direction: column; gap: 3px; }
.wn-l { color: var(--tx-2); overflow-wrap: anywhere; }
.wn-l .who { font-weight: 700; }
.wn-tt { color: var(--tx); }
.wn-tt:hover { color: var(--ac-hi); }
.wn-rx { display: inline-flex; align-items: center; gap: 4px; vertical-align: -3px; color: var(--tx); }
.wn-snip { color: var(--tx-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  .pm-page, .pane:has(> .pm-split) { --pm-w: 312px; }
}
@media (max-width: 1100px) {
  .pm-main .fv-post { grid-template-columns: 196px minmax(0, 1fr); }
}
/* the list and the thread are pages of their own again (the one list | detail fold, with tickets, admin, settings) */
@media (max-width: 1000px) {
  .pm-split { grid-template-columns: minmax(0, 1fr); }
  .pm-split > .pm-pick, .pm-split.thread > .pm-list { display: none; }
  .pane.docked > .dock.pm-dock { margin-left: 0; }
}
@media (max-width: 840px) {
  .pm-main .fv-post { grid-template-columns: minmax(0, 1fr); }
  .pm-irow .with { display: none; }
  .mb-page .ph .acts .mb-tabs { width: 100%; }
  .mb-page .ph .acts .mb-tabs > button { flex: 1 0 auto; justify-content: center; padding: 0 8px; }
  .mb-card .card-h { flex-wrap: wrap; }
  .mb-card .card-h .aside { flex: 1 0 100%; margin: 0 0 8px; }
  .mb-card .card-h .aside .mb-search { width: 100%; height: 34px; }
  .mb-tile { padding: 12px var(--g-r) 10px var(--g-l); }
  .mb-foot { height: 30px; }
}
@media (max-width: 480px) {
  .mb-page .ph .acts .mb-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-page .ph .acts .mb-tabs > button + button::before { display: none; }
  .mb-page .ph .acts .mb-tabs > button { height: 28px; }
}