/* 微信移动端全屏 UI 架构 */
#pm-modal { display: none; position: fixed; inset: 0; background: #333; z-index: 1000000; justify-content: center; align-items: center; }





#pm-container { position: relative; width: 100%; max-width: 500px; height: 100%; height: 100vh; height: 100dvh; background: #ededed; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); }




/* 统一顶部导航 (✨ 终极锁死版：绝对居中 + 边缘安全距离) */
.pm-header { position: relative; height: 50px; background: #ededed; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #d1d1d1; z-index: 20; flex-shrink: 0; }

/* 标题绝对居中，无视左右两侧的按钮，就算天塌下来它也在正中间 */
.pm-header-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #111; pointer-events: none; white-space: nowrap; }

/* 左右两侧操作区锁死在屏幕边缘，并加上手机屏幕的安全内边距 */
.pm-header-left { position: absolute; left: 0; height: 100%; display: flex; align-items: center; padding-left: 15px; }
.pm-header-right { position: absolute; right: 0; height: 100%; display: flex; align-items: center; padding-right: 15px; }


/* 微信原生返回键 (✨ 修复版：强化线条，向右移动避开手机黑边) */
.pm-back-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: 10px 20px 10px 10px; height: 100%; -webkit-tap-highlight-color: transparent; }
.pm-back-btn::before { content: ""; display: block; width: 12px; height: 12px; border-top: 2.5px solid #111; border-left: 2.5px solid #111; transform: rotate(-45deg); }




/* 右上角加号与悬浮菜单 (✨ 终极微信原生精修版) */
.pm-add-btn { display: flex; align-items: center; justify-content: center; color: #111; cursor: pointer; border: none; background: none; padding: 0 10px; height: 100%; -webkit-tap-highlight-color: transparent; }
#pm-add-menu { display: none; position: absolute; top: 45px; right: 10px; background: #4c4c4c; border-radius: 6px; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.2); min-width: 130px; }
#pm-add-menu::before { content: ''; position: absolute; top: -6px; right: 12px; border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent #4c4c4c transparent; }
#pm-add-menu div { padding: 12px 15px; color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; white-space: nowrap; }
#pm-add-menu div:active { background: #3a3a3a; border-radius: 6px; }


/* 主体内容区 */
#pm-body { flex: 1; overflow-y: auto; position: relative; }
.pm-tab-content { display: none; height: 100%; }
.pm-tab-content.active { display: block; animation: fadeIn 0.2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* 列表与左滑删除 */
.pm-list-item { background: #fff; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; position: relative; overflow: hidden; }
.pm-list-item-content { width: 100%; display: flex; padding: 12px 15px; position: relative; z-index: 2; background: #fff; transition: transform 0.2s; cursor: pointer; box-sizing: border-box; }
.pm-delete-bg { position: absolute; right: 0; top: 0; bottom: 0; width: 80px; background: #ff3b30; color: white; display: flex; justify-content: center; align-items: center; font-size: 16px; z-index: 1; cursor: pointer; }
.pm-avatar { width: 48px; height: 48px; background: #10b981; color: #fff; border-radius: 6px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: bold; flex-shrink: 0; position: relative; }
.pm-info { flex: 1; overflow: hidden; margin-left: 12px; display: flex; flex-direction: column; justify-content: center; }
.pm-info-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pm-name { font-size: 16px; color: #111; }
.pm-time { font-size: 12px; color: #b2b2b2; }
.pm-msg-preview { font-size: 14px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 独立页面 (聊天室 / 添加好友) */
.pm-sub-page { display: none; position: absolute; inset: 0; background: #ededed; z-index: 50; flex-direction: column; }
#pm-chat-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 15px; display: flex; flex-direction: column; gap: 15px; background: #ededed; box-sizing: border-box; }
.pm-time-stamp { text-align: center; font-size: 12px; color: #999; margin: 10px 0; }
.pm-msg-row { display: flex; width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.pm-msg-row.me { justify-content: flex-end; padding-right: 15px; }
.pm-msg-bubble { 
    max-width: 65%; 
    padding: 10px 14px; 
    border-radius: 8px; 
    font-size: 15px; 
    line-height: 1.5; 
    word-wrap: break-word; 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.pm-msg-row.other .pm-msg-bubble { background: #fff; color: #111; border: 1px solid #e0e0e0; border-radius: 2px 8px 8px 8px; }
.pm-msg-row.me .pm-msg-bubble { background: #95ec69; color: #111; border-radius: 8px 2px 8px 8px; }
#pm-chat-input-area { min-height: 55px; background: #f7f7f7; border-top: 1px solid #d1d1d1; display: flex; align-items: center; padding: 0 10px; padding-bottom: env(safe-area-inset-bottom); flex-shrink: 0; box-sizing: content-box; }
#pm-textarea { flex: 1; height: 36px; border: none; outline: none; background: #fff; border-radius: 4px; padding: 0 10px; font-size: 15px; }
.pm-btn-send { background: #07c160; color: #fff; border: none; padding: 0 15px; height: 36px; border-radius: 4px; margin-left: 10px; font-size: 14px; cursor: pointer; }
/* 底部导航四大金刚 */
#pm-bottom-nav { min-height: 55px; background: #f7f7f7; border-top: 1px solid #d1d1d1; display: flex; z-index: 20; padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }
.pm-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #111; cursor: pointer; }
.pm-nav-item.active { color: #07c160; }
.pm-nav-icon { font-size: 22px; margin-bottom: 2px; position: relative; display: inline-block; }
.pm-nav-item span { font-size: 11px; }


/* 红点公共样式 */
/* 红点公共样式 (✨ 微信原生红点：单数字正圆，多数字胶囊) */
.pm-unread-dot {
    position: absolute; top: -4px; right: -8px;
    background: #ff3b30; color: white; font-size: 11px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 16px; font-weight: bold; border: 1px solid #ededed;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; line-height: 1; z-index: 10;
}
.menu-red-dot { background: #ff3b30; color: white; font-size: 11px; padding: 2px 6px; border-radius: 10px; margin-left: 5px; display: none; }


/* --- 终极强制消除横向滚动条补丁 --- */
#pm-chat-messages {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}
.pm-msg-row {
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}