/* ============================================================
   chatWS — pms.css  (additions for js/pms.js; base PM layout
   stays in social.css)
============================================================ */

/* Inbox */
.pmx-head-actions { display:flex; gap:2px; }
.pmRow { position:relative; }
.pmRow .pmName { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.pmx-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pmx-time { flex:0 0 auto; font-size:10.5px; color:#737373; font-weight:500; }
.pmRow .pm-unread-badge { position:absolute; right:36px; top:50%; transform:translateY(-50%); }
.pmRow.unread .pmx-name { color:#fff; }
.pmRow.unread .pmPreview { color:#d4d4d4; }
.pmx-row-x {
    flex:0 0 auto; width:26px; height:26px; margin-left:4px; border:none; border-radius:50%;
    background:transparent; color:#737373; cursor:pointer; opacity:0; transition:opacity .12s, background .12s;
}
.pmRow:hover .pmx-row-x { opacity:1; }
.pmx-row-x:hover { background:rgba(248,113,113,.15); color:#f87171; }
@media (hover:none) { .pmx-row-x { opacity:.6; } }

/* Chat header */
.pm-box-user { cursor:pointer; min-width:0; }
.pmx-av-wrap { position:relative; flex:0 0 32px; width:32px; height:32px; }
.pmx-av { width:32px; height:32px; border-radius:50%; object-fit:cover; display:block; background:#202020; }
.pmx-av-wrap .pm-status-dot { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border:2px solid #1a1a1a; }
.pmx-who { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.pmx-who .pm-box-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pmBox.pmx-typing .pm-box-status { color:#d4b26a; font-style:italic; }

.pmx-menu-wrap { position:relative; }
.pmx-menu {
    position:absolute; right:0; top:calc(100% + 4px); z-index:5; min-width:200px; padding:6px;
    background:#1f1f1f; border:1px solid rgba(255,255,255,.1); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.pmx-menu[hidden] { display:none; }
.pmx-menu button {
    display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:none; border-radius:7px;
    background:transparent; color:#e5e5e5; font-size:13px; text-align:left; cursor:pointer; font-family:inherit;
}
.pmx-menu button:hover { background:rgba(255,255,255,.06); }
.pmx-menu button i { width:16px; text-align:center; color:#a3a3a3; }
.pmx-menu button.danger, .pmx-menu button.danger i { color:#f87171; }

/* Messages */
#pmMessages { position:relative; }
.pmx-bubble-row { display:flex; align-items:center; gap:4px; max-width:100%; }
.pm-msg .pm-msg-text { max-width:100%; word-break:break-word; }
.pm-msg-text a { color:inherit; text-decoration:underline; }
.pmx-quote {
    margin:-2px -4px 6px; padding:5px 8px; border-left:3px solid rgba(255,255,255,.45); border-radius:6px;
    background:rgba(0,0,0,.18); font-size:12px; opacity:.9; cursor:pointer; overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.pmx-quote b { display:block; font-size:11px; }
.pmx-actions { display:flex; gap:2px; opacity:0; transition:opacity .12s; }
.pm-msg:hover .pmx-actions { opacity:1; }
@media (hover:none) { .pmx-actions { opacity:.55; } }
.pmx-actions button {
    width:24px; height:24px; border:none; border-radius:50%; background:transparent; color:#737373; cursor:pointer; font-size:11px;
}
.pmx-actions button:hover { background:rgba(255,255,255,.08); color:#e5e5e5; }
.pmx-actions button[data-a="delete"]:hover { color:#f87171; }
.pmx-pending { opacity:.55; }
.pmx-ghost .pm-msg-text { opacity:.6; border:1px dashed rgba(255,255,255,.3); }
.pmx-seen { font-size:10px; color:#d4b26a; margin-top:1px; }
.pmx-flash .pm-msg-text { box-shadow:0 0 0 2px #d4b26a; transition:box-shadow .3s; }
.pmx-new-below {
    position:absolute; left:50%; bottom:64px; transform:translateX(-50%); z-index:3;
    padding:5px 12px; border:none; border-radius:99px; background:#b8964f; color:#fff; font-size:12px; cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.pmx-new-below[hidden] { display:none; }
#pmBox { position:fixed; }

/* Locked / reply */
.pmx-locked { padding:12px 14px; font-size:12.5px; color:#fbbf24; background:rgba(251,191,36,.08); border-top:1px solid rgba(255,255,255,.06); }
.pmx-locked[hidden] { display:none; }
.pmx-reply {
    display:flex; align-items:center; gap:10px; padding:8px 10px 8px 14px;
    border-top:1px solid rgba(255,255,255,.06); background:rgba(184,150,79,.08); color:#e6cf98; font-size:12px;
}
.pmx-reply[hidden] { display:none; }
.pmx-reply-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.pmx-reply-body b { color:#e6cf98; font-size:11.5px; }
.pmx-reply-body span { color:#a3a3a3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#pmInput { resize:none; max-height:120px; overflow-y:auto; }
#pmBox.collapsed .pmx-locked, #pmBox.collapsed .pmx-reply, #pmBox.collapsed .pmx-new-below { display:none; }

/* Tablet / desktop: the floating PM box used to sit 12px from the bottom, right on top of
   the room's message box (hiding its Send button). Start it above the composer + footer,
   and next to the users panel when that is docked. Phones keep the full-screen box. */
@media (min-width: 768px) {
    #pmBox { bottom: calc(var(--footer-h, 48px) + 96px); max-height: calc(100vh - var(--footer-h, 48px) - 150px); }
    body.rpanel-open #pmBox { right: calc(var(--rpanel-w, 320px) + 12px); }
    body.rpanel-open .pm-dock { right: calc(var(--rpanel-w, 320px) + 14px); }
}
/* Touch screens: PM header / row buttons were ~26px — hard to hit */
@media (hover: none) {
    .pm-close-btn, .pmx-row-x { min-width: 36px; min-height: 36px; }
}