.pm-badge {
  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px;
  font-size: 11px; line-height: 16px; font-weight: 700; text-align: center;
  background: #c0392b; color: #fff; border-radius: 9px; vertical-align: middle;
}
.pm-badge[hidden] { display: none; }
.pm-navlink { white-space: nowrap; }

.pm-wrap { max-width: 760px; margin: 0 auto; }
.pm-h { margin: 0 0 12px; }
.pm-error { background: rgba(192,57,43,.12); border: 1px solid rgba(192,57,43,.4); padding: 8px 10px; border-radius: 5px; }
.pm-empty { padding: 16px 4px; }

.pm-compose { margin-bottom: 16px; }
.pm-compose-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-compose .pm-to { width: 150px; }
.pm-compose .pm-newbody { flex: 1; min-width: 180px; }
.pm-compose input { padding: 8px 10px; }

.pm-list { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(127,127,127,.22); border-radius: 6px; overflow: hidden; }
.pm-item + .pm-item { border-top: 1px solid rgba(127,127,127,.16); }
.pm-item-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-decoration: none; color: inherit; }
.pm-item-link:hover { background: rgba(127,127,127,.08); }
.pm-ava { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; background: rgba(127,127,127,.15); }
.pm-item-main { flex: 1; min-width: 0; }
.pm-item-top { display: flex; justify-content: space-between; gap: 8px; }
.pm-name { font-weight: 600; }
.pm-time { font-size: 11px; opacity: .6; white-space: nowrap; }
.pm-snippet { display: block; font-size: 13px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-item.pm-unread .pm-name, .pm-item.pm-unread .pm-snippet { font-weight: 700; opacity: 1; }

.pm-convo-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pm-back { font-size: 13px; }
.pm-with { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: inherit; }

.pm-thread { border: 1px solid rgba(127,127,127,.22); border-radius: 6px; padding: 12px; height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.pm-msg { max-width: 78%; align-self: flex-start; }
.pm-msg.pm-mine { align-self: flex-end; }
.pm-bubble { padding: 8px 11px; border-radius: 12px; background: rgba(127,127,127,.16); overflow-wrap: anywhere; }
.pm-msg.pm-mine .pm-bubble { background: #2f6fb3; color: #fff; }
.pm-msg-time { font-size: 10px; opacity: .55; margin-top: 2px; padding: 0 4px; }
.pm-msg.pm-mine .pm-msg-time { text-align: right; }

.pm-reply { display: flex; gap: 8px; margin-top: 10px; }
.pm-reply .pm-replybody { flex: 1; padding: 9px 11px; }