/* __h5ver v47-1029143226 */
/* ============================================================
   加密聊天工作台 · H5 客户端样式 v16
   目标：只剩「房间 + 消息 + 输入框」，其它入口全部收掉
   v16 重点：彻底铲掉左边那条灰竖带
   ============================================================ */

/* ---------- 桌面预览：不再收成 480px 手机宽度 ----------
   （收窄后 Element 仍按窗口宽度排版，会把房间视图挤成 100px 宽） */
@media (min-width: 769px) {
    body { background: #eef1f5 !important; }
    #matrixchat {
        max-width: none !important;
        width: 100% !important;
        height: 100vh !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

/* ============================================================
   左侧栏：彻底移出布局（v16 根治方案）
   ------------------------------------------------------------
   历史教训：
     ① display:none 掉 .mx_LeftPanel → RoomView 是它的 flex 兄弟，
        容器一消失整个 MainSplit 塌掉 → 聊天记录一片白。
     ② 只锁 width/min-width/max-width + flex:0 0 0 → 桌面 OK，
        但微信 X5 对内联轴 flex-basis 与 box-sizing 的处理和 Chrome 不同，
        容器仍会露出约 20-24px 的窄列（用户截图里的灰竖带）。
     ③ h5-mobile.css 还给 .mx_LeftPanel 加了 padding-top: env(safe-area-inset-top)，
        content-box 下 width:0 + padding 依然会撑出宽度 → 加剧问题。

   所以 v16 改为：**把左栏从文档流里整个抽出来**
     position: absolute + width:0 + overflow:hidden + box-sizing:border-box
   绝对定位后它不再是 flex item，无论内核怎么算 flex 都不占位；
   RoomView 自然拿到 100% 宽度。仍保留元素本身在 DOM 里，
   避免依赖它的 Element 代码报错。 */
.mx_LeftPanel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}
.mx_LeftPanel > * { display: none !important; }

/* 左栏外层包装（Element 有时会再包一层）同样不占位 */
.mx_LeftPanel_wrapper,
.mx_LeftPanel_outerWrapper,
.mx_LeftPanel_container {
    position: absolute !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ============================================================
   ★ 灰竖带 + 黑竖条的真凶：左栏容器的滚动条
   ------------------------------------------------------------
   像素级分析用户真机截图（1080x2400 @3x，逻辑 360x800）：
     · x=0~48  纯白  ← 滚动条轨道
     · x=49~58 深黑 (28,28,28)，纵向 y=433~1848  ← 滚动条滑块
     · x=60+   浅灰  ← 聊天区背景
   即：**在最左侧渲染出了一根异常粗的原生滚动条**（约 18px 逻辑宽）。

   来源：第一个 .mx_LeftPanel_panel（宽 0 但高度满屏 + overflow:auto）。
   宽度为 0 时，滚动条不会被裁掉，而是**贴着 x=0 渲染**，
   于是形成"左边一条白框 + 黑条"，看起来就像关不掉的遮挡物。
   （桌面 Chrome 用了 overlay 滚动条所以看不出来，微信 X5 用经典滚动条就暴露了。）

   解决：① 干掉左栏所有滚动容器的 overflow；
        ② 全局把滚动条压细，兜底其它容器。 */
.mx_LeftPanel_panel,
.mx_LeftPanel_outerWrapper,
.mx_LeftPanel_wrapper,
.mx_LeftPanel {
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.mx_LeftPanel_panel::-webkit-scrollbar,
.mx_LeftPanel_outerWrapper::-webkit-scrollbar,
.mx_LeftPanel_wrapper::-webkit-scrollbar,
.mx_LeftPanel::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* 全局：滚动条一律压细（微信 X5 用经典滚动条，默认会占 15-18px） */
* { scrollbar-width: thin !important; }
::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18) !important;
    border-radius: 2px !important;
}
/* 消息区：干脆不要滚动条，手机上本来也是手势滚动 */
.mx_RoomView_messageListWrapper,
.mx_RoomView_MessageList,
.mx_AutoHideScrollbar,
.mx_ScrollPan { scrollbar-width: none !important; }
.mx_RoomView_messageListWrapper::-webkit-scrollbar,
.mx_RoomView_MessageList::-webkit-scrollbar,
.mx_AutoHideScrollbar::-webkit-scrollbar,
.mx_ScrollPan::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* ============================================================
   ★ 重要：不要碰 .mx_LeftPanel_panel 本身！
   ------------------------------------------------------------
   实测 DOM：存在两个 .mx_LeftPanel_panel
     · 第 1 个 w=0，里面是 mx_LeftPanel_outerWrapper（收起状态）→ 是左栏
     · 第 2 个 w=414，里面是 mx_RoomView_wrapper → **这是聊天区的合法容器**
   Element 复用了同一个类名做左右两个面板槽位。
   所以只能靠**后代选择器**精确打第一个（含 LeftPanel 子节点的那个），
   绝不能用 .mx_LeftPanel_panel 通配，否则会把聊天区一起干掉。 */
.mx_LeftPanel_panel > .mx_LeftPanel_outerWrapper,
.mx_LeftPanel_panel > .mx_LeftPanel_wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background: transparent !important;
}

.mx_SpacePanel,
.mx_SpacePanel_toggleCollapse,
.mx_ThreadsActivityCentreButton,
.mx_QuickSettingsButton,
[class*="chat-filter"],
.mx_RoomSearch,
.mx_RoomSearch_results,
.mx_RoomList,
.mx_RoomListHeader,
.mx_UserMenuButton,
.mx_LeftPanel_quickSettings,
.mx_LeftPanel_userHeader,
.mx_SearchBox,
.mx_ThreadPanel,
.mx_ThreadView { display: none !important; }

/* 房间视图：占满整个宽度，别再被左栏挤
   ⚠️ X5 的 flex 支持是碎片化的：子项只写 `flex: 1` 会宽 0。
   必须四重声明 + 配对对齐属性（见下方 Mixin 说明），这里补齐 flex 前缀。 */
.mx_RoomView_wrapper,
.mx_RoomView {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* MainSplit：只允许 RoomView 参与横排，其余一律不占位 */
.mx_MainSplit {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100% !important;
}
.mx_MainSplit > .mx_LeftPanel,
.mx_MainSplit > .mx_SpacePanel { display: none !important; }

/* 消息列表：X5 下 flex 子项同样需要前缀兜底 */
.mx_RoomView_timeline,
.mx_RoomView_messageListWrapper,
.mx_RoomView_MessageList {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ============================================================
   ★★ 头号元凶：Element 在祖先上加了 `contain: strict`
   ------------------------------------------------------------
   实测祖先链：`.mx_RoomView_wrapper` 和 `.notranslate` 都带 `contain: strict`。
   contain:strict = size + layout + paint + style，两条都会致命：

     · size containment  → 元素尺寸不再由内容决定；
                           若没有显式高度，它直接**塌成 0 高**，
                           子容器全部没高度 → 聊天记录"一片白/被遮"。
     · paint containment → 该元素成为后代 `position: fixed` 的**包含块**，
                           于是我们的遮罩层不再相对视口铺满，
                           而是相对这个（可能高度为 0 的）盒子定位
                           → 遮罩只盖住一条 / 一块，怎么点都关不掉。

   桌面 Chrome 下容器刚好满屏所以看不出问题；
   微信 X5 对 contain 的实现与 Chrome 不同，这个坑就暴露了。
   解法：直接把祖先链上的 contain 干掉，并显式给高度。 */
.mx_RoomView_wrapper,
.mx_RoomView,
.notranslate,
.mx_MatrixChat,
.mx_MatrixChat_wrapper,
.mx_MainSplit,
.mx_RoomView_body {
    contain: none !important;
}

/* 房间内：只留消息 + 输入 */
.mx_RoomHeader_infoWrapper { pointer-events: none !important; }
.mx_RoomHeader_info { background: transparent !important; border: none !important; box-shadow: none !important; }
/* 原生输入框整个换成我们自己的极简版 */
.mx_MessageComposer { display: none !important; }
.mx_RoomView_messageListWrapper { padding-bottom: 78px !important; }

.mx_FacePile,
.mx_MessageComposerFormatBar,
.mx_EmojiButton,
.mx_MessageComposer_button,
.mx_MessageComposer_stickers,
.mx_MessageActionBar,
.mx_EventTile_buttonBar,
.mx_RightPanel,
.mx_RoomView_auxPanel,
.mx_RoomView_statusArea,
.mx_MiniAvatarUploader { display: none !important; }

/* ============================================================
   ★★ 头号遮挡物：Element 的「房间预览条」.mx_RoomPreviewBar
   ------------------------------------------------------------
   真机（微信 X5，390x844）全量 DOM 扫描实测抓到：
     cls : mx_RoomPreviewBar mx_RoomPreviewBar_ViewingRoom mx_RoomPreviewBar_dial
     w   : 440   ← 视口只有 390，它**超宽 50px**
     y   : 347（屏幕正中）h:150
     文案: "暂无预览，是否加入？" + 「加入讨论」按钮

   而后端 room-info 明确返回 joined: true（人已经在房间里）。
   也就是说 Element 的客户端状态没同步，仍然弹这个预览条，
   而它是 Element 原生 UI —— 用户**没有任何关闭入口**，
   表现就是「一块白色、像侧边栏、盖在聊天框上、怎么都撤不回去」。

   无条件隐藏：加入与否都由我们自己的 #h5JoinCard 处理，
   Element 这个条是多余且冲突的。
   （用属性选择器前缀匹配，覆盖所有变体类名，防 Element 改后缀） */
.mx_RoomPreviewBar,
[class*="RoomPreviewBar"],
.mx_RoomPreviewBar_dialog,
.mx_RoomPreviewBar_ViewingRoom,
.mx_RoomPreviewBar_dial {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* 兜底：任何超出视口宽度的 Element 浮层一律裁掉，防止再冒出"超宽白块" */
.mx_RoomView {
    overflow: hidden !important;
}
.mx_RoomView > * {
    max-width: 100% !important;
}

/* ============================================================
   ★ 房间时间线里「没必要」的原生内容，一律收掉
   ------------------------------------------------------------
   客户进房只该看到：消息 + 图片 + 文件。以下都是 Element 的房间元信息：

   · .mx_NewRoomIntro —— 房间介绍大卡片
       含「歌曲《海屿岛》接待群」大标题 / "You created this room… /
       Add a topic 添加主题 / Invite to this room 邀请加入此房间」大按钮
   · .mx_GenericEventListSummary —— 状态事件摘要
       含「yg1 创建并配置了此房间」「kehu1 与另外3人 已被邀请」「xxx 加入了房间」
   · .mx_cryptoEvent —— 「加密已启用/端到端加密」气泡（EventTileBubble 样式）
   · .mx_EventTileBubble —— 其它气泡式状态提示（房间升级等）

   用属性选择器做前缀匹配，覆盖所有后缀变体，防 Element 改类名。
   ============================================================ */
[class*="NewRoomIntro"],
[class*="GenericEventListSummary"],
[class*="cryptoEvent"],
[class*="EventTileBubble"],
/* 每条消息尾巴上的「已加密」小锁图标 —— 顶栏已统一标注「已加密」，重复且碍眼 */
[class*="E2ePadlock"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ★ 加密时期的历史消息（无法解密）不再整条隐藏 ——
   由 JS 把 Element 的英文提示换成中文说明（「🔒 加密时期的历史消息…」），
   让用户知道这里原本有消息，而不是一片莫名其妙的空白。 */
[class*="DecryptionFailure"] {
    pointer-events: none !important;
    font-size: 12.5px !important;
    color: #909399 !important;
    line-height: 1.5 !important;
    padding: 2px 0 !important;
}
[class*="DecryptionFailure"] * {
    pointer-events: none !important;
}

/* 顶部原生头：整条隐藏（我们有自己的 #h5TopBar），
   同时把它从 flex 流里摘掉但保留占位高度，避免消息区顶部被压 */
.mx_RoomHeader {
    padding-right: 132px !important;
    height: 56px !important;
    min-height: 56px !important;
    /* ★ 原生头整条透明：杜绝深色/浅色残条（我们有自己的 #h5TopBar） */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   ★★ 点击消息头像会弹出 Element 的「用户信息」右侧面板
   ------------------------------------------------------------
   那个面板在手机上会盖住整个聊天区，而且关闭入口很难点（用户反馈
   「点了头像就出现一个关不掉的右侧边栏」）。客户只需要聊天，不需要
   用户资料面板，所以两层保险：
   ① 让消息里的头像**彻底不可点击**（pointer-events: none）—— 从源头断掉；
   ② 万一通过别的路径（成员列表、@提及等）弹出来，也直接隐藏整个面板。
   ============================================================ */
.mx_EventTile [class*="slotAvatar"],
.mx_EventTile [class*="avatarWrapper"],
.mx_EventTile [class*="EventTile_avatar"],
.mx_EventTile [class*="EventTile_sender"],
.mx_EventTile [class*="sender">img],
.mx_EventTile > img {
    pointer-events: none !important;
    cursor: default !important;
}

/* 用户信息 / 成员信息 / 任意右侧面板：一律不显示（我们的成员入口在顶栏「成员」里）。
   注意不要用 .mx_BaseCard —— 那是 Element 的通用卡片基类，会误伤消息内容。 */
[class*="RightPanel"],
[class*="UserInfo"],
[class*="MemberInfo"],
[class*="DevicesPanel"],
[class*="RoomSummaryCard"],
[class*="PinnedMessageBanner"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.mx_RoomHeader_buttons,
.mx_RoomHeader_iconButtons,
.mx_RoomHeader_settingsButton,
.mx_RoomHeader_videoCallButton,
.mx_RoomHeader_voiceCallButton,
.mx_RoomHeader_searchButton,
.mx_RoomHeader_pinButton,
.mx_RoomHeader_forgetButton,
.mx_RoomHeader_facePileWrapper { display: none !important; }
/* ★ 一刀切：隐藏原生头里所有子孙（房间名/头像/空间胶囊/橙色拉起按钮等），
   无论 Element 后续怎么改 class 名都不再透出，彻底解决"最上面没藏住" */
.mx_RoomHeader *,
.mx_RoomHeader::before,
.mx_RoomHeader::after { display: none !important; }

/* 消息区：给 fixed 顶栏和底部输入框留出空间 */
.mx_RoomView_timeline { padding-top: 0 !important; }
.mx_RoomView_messageListWrapper { padding-bottom: 78px !important; }

/* 顶栏与消息区之间的原生分隔线/日期分隔条定位修正 */
.mx_RoomView_MessageList > .mx_DateSeparator:first-child,
.mx_DateSeparator { margin-top: 4px !important; }

/* 加密标识保留，但缩小一点别抢戏 */
.mx_MessageComposer_e2eIconWrapper { opacity: .7; }

/* ---------- 顶栏自定义按钮组（房间名 + 房间 + 成员） ----------
   用 fixed 独立层，不依赖 Element 头部结构，桌面/手机一致。
   房间名单独一块放左边，按钮靠右，互不遮挡。 */
#h5TopBar {
    position: fixed; top: 0; right: 0; left: 0; z-index: 200;
    height: 56px;
    /* ★ 刘海屏：顶栏整体下沉到安全区之下，避免房间名被状态栏压住 */
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
    display: none; align-items: center; gap: 8px;
    padding-left: 10px; padding-right: 10px; box-sizing: border-box;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #ebeef5;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
    pointer-events: none;
}
#h5TopBar.show { display: flex; }
#h5TopBar .h5tb-info {
    /* ★ X5 加固层会把 #h5TopBar 的内联 height 写大过 CSS 高度，
       若父级 align-items:center 就会把文本垂直居中到屏幕正中间
       （表现为"屏幕中间一块白"）。用 align-self 把内容钉在顶部，从根上免疫。 */
    align-self: flex-start;
    flex: 1; min-width: 0; pointer-events: auto;
    display: flex; flex-direction: column; justify-content: center;
    height: 100%; line-height: 1.25; overflow: hidden;
}
#h5TopBar .h5tb-btns { align-self: flex-start; }
#h5TopBar .h5tb-name {
    font-size: 15px; font-weight: 600; color: #303133;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#h5TopBar .h5tb-sub {
    font-size: 12px; color: #909399;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#h5TopBar .h5tb-sub .h5tb-enc { color: #67c23a; }
#h5TopBar .h5tb-sub .h5tb-plain { color: #e6a23c; }

/* ============================================================
   ★ 房间置顶公告
   ------------------------------------------------------------
   固定挂在顶栏下方（56px），最多显示 2 行，点一下看全文。
   打开时给房间消息区留出空间（body.h5ann-on）。
   ============================================================ */
#h5Announce {
    position: fixed; left: 0; right: 0; top: calc(56px + env(safe-area-inset-top)); z-index: 190;
    display: none; align-items: flex-start; gap: 7px;
    padding: 7px 12px; box-sizing: border-box;
    background: rgba(255, 250, 238, .98);
    border-bottom: 1px solid #f2ddb4;
    box-shadow: 0 2px 8px rgba(176, 138, 60, .10);
    max-height: 48px; overflow: hidden;
    cursor: pointer;
}
#h5Announce.show { display: flex; }
#h5Announce .h5ann-ico { flex: none; font-size: 13px; line-height: 17px; }
#h5Announce .h5ann-t {
    flex: 1; min-width: 0;
    font-size: 12.5px; line-height: 17px; color: #8a5a00;
    white-space: pre-line;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* 公告打开时：给消息区让位（普通浏览器走这条；微信 X5 由加固层按像素补） */
body.h5ann-on .mx_RoomView_body { margin-top: 48px !important; }

/* 公告全文弹窗 */
#h5AnnDlg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10600; display: none; }
#h5AnnDlg.show { display: block; }
#h5AnnDlg .h5ad-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.35); }
#h5AnnDlg .h5ad-box {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(340px, calc(100vw - 40px)); max-height: 70%;
    background: #fff; border-radius: 14px;
    padding: 18px 16px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.22);
    display: flex; flex-direction: column;
}
#h5AnnDlg .h5ad-h { font-size: 15px; font-weight: 700; color: #8a5a00; margin-bottom: 10px; flex: none; }
#h5AnnDlg .h5ad-body {
    font-size: 14px; line-height: 1.7; color: #303133;
    white-space: pre-wrap; word-break: break-word;
    overflow-y: auto; flex: 1; min-height: 40px;
    background: #fffaf0; border: 1px solid #f5e3c4; border-radius: 10px;
    padding: 10px 12px;
}
#h5AnnDlg .h5ad-ok {
    flex: none; margin-top: 12px; height: 42px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #4c8dff 0%, #3b6fe0 100%);
    color: #fff; font-size: 15px; font-weight: 600;
}

/* 成员面板里的公告编辑区 */
#h5SidePanel .h5sp-annTa {
    width: 100%; min-height: 74px; max-height: 160px; box-sizing: border-box;
    padding: 9px 11px; font-size: 14px; line-height: 1.55; color: #303133;
    border: 1px solid #dcdfe6; border-radius: 9px; outline: none;
    background: #fff; resize: vertical;
}
#h5SidePanel .h5sp-annTa:focus { border-color: #409eff; }
#h5SidePanel .h5sp-annRow { display: flex; gap: 8px; margin-top: 8px; }
#h5SidePanel .h5sp-annSave {
    flex: 1; height: 38px; border: none; border-radius: 9px;
    background: linear-gradient(135deg, #4c8dff 0%, #3b6fe0 100%);
    color: #fff; font-size: 14px; font-weight: 600;
}
#h5SidePanel .h5sp-annClear {
    flex: none; height: 38px; padding: 0 14px; border: 1px solid #f0c9c4; border-radius: 9px;
    background: #fff; color: #d9483b; font-size: 14px;
}

#h5TopBar .h5tb-btns { display: flex; align-items: center; gap: 6px; pointer-events: auto; flex: none; height: 100%; }

#h5TopBar .h5tb-btn, #h5RoomBtn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: 32px; padding: 0 11px; margin: 0;
    border: 1px solid #dcdfe6; border-radius: 16px; background: #fff;
    color: #303133; font-size: 13px; line-height: 1; cursor: pointer;
    font-family: inherit; white-space: nowrap;
}
#h5TopBar .h5tb-btn:active, #h5RoomBtn:active { background: #f2f3f5; }
#h5TopBar .h5tb-btn.h5tb-icon { padding: 0 10px; }
#h5TopBar .h5tb-btn svg { width: 16px; height: 16px; fill: currentColor; }
#h5TopBar .h5tb-b {
    display: none; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: #f56c6c; color: #fff;
    font-size: 11px; line-height: 17px; text-align: center;
}
#h5TopBar .h5tb-b.show { display: inline-block; }

/* 给 Element 原生头部留出我们顶栏的高度，避免重叠 */
.mx_RoomHeader { min-height: 56px !important; }

/* ---------- Element 原生 Toast / 通知横幅 ----------
   房间内不需要任何 Element 自己的弹层（桌面通知权限、备份提醒…），
   它们会盖在聊天记录上方，就是"关不掉的浮层"观感。无条件收掉。 */
.mx_ToastContainer,
.mx_Toast_toast,
.mx_Toast,
.mx_NotificationPanel,
.mx_Toast_toast_icon,
[class*="ToastContainer"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ---------- 员工：新建房间 ---------- */
#h5NewRoom { padding: 8px 12px 4px; }
#h5NewRoomBtn {
    width: 100%; height: 36px; border: 1px dashed #409eff; border-radius: 8px;
    background: #ecf5ff; color: #409eff; font-size: 14px; font-family: inherit;
    cursor: pointer;
}
#h5NewRoomBtn:active { background: #d9ecff; }

/* ★ 层级铁律：#h5Home 首页是 9999（要压过 Element 的弹层），
   所以所有自建弹层必须 > 9999，否则会被首页盖住 —— 表现为「点了按钮没反应」。
   顺序（越大越上）：JoinCard 10050 < SidePanel 10060 < RoomList 10070
                  < NewRoomDlg 10100 < RoomLinkDlg 10200 < InviteDlg 10300 */
#h5NewRoomDlg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 10100; }
#h5NewRoomDlg .h5nr-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.35); }
#h5NewRoomDlg .h5nr-box {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(340px, calc(100vw - 40px)); background: #fff; border-radius: 12px;
    padding: 20px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
#h5NewRoomDlg .h5nr-h { font-size: 16px; font-weight: 600; margin-bottom: 14px; color: #303133; }
#h5NewRoomDlg input[type="text"], #h5NewRoomDlg #h5nrName {
    width: 100%; height: 42px; padding: 0 12px; font-size: 16px;
    border: 1px solid #dcdfe6; border-radius: 8px; outline: none; box-sizing: border-box;
}
#h5NewRoomDlg #h5nrName:focus { border-color: #409eff; }
#h5NewRoomDlg .h5nr-chk {
    display: flex; align-items: center; gap: 6px; margin: 12px 0 4px;
    font-size: 14px; color: #606266;
}
#h5NewRoomDlg .h5nr-hint {
    font-size: 12px; color: #97a3b2; line-height: 1.55; margin: 0 0 16px;
}
#h5NewRoomDlg .h5nr-btns { display: flex; gap: 10px; }
#h5NewRoomDlg .h5nr-cancel, #h5NewRoomDlg .h5nr-ok {
    flex: 1; height: 42px; border-radius: 8px; font-size: 15px; font-family: inherit; cursor: pointer;
    border: 1px solid #dcdfe6; background: #fff; color: #606266;
}
#h5NewRoomDlg .h5nr-ok { background: #409eff; border-color: #409eff; color: #fff; }
#h5NewRoomDlg .h5nr-ok:disabled { opacity: .6; }

/* ---------- 侧滑面板 ---------- */
#h5SidePanel {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 10060;
    pointer-events: none; visibility: hidden;
}
#h5SidePanel.open { pointer-events: auto; visibility: visible; }
#h5SidePanel .h5sp-mask {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.32);
    opacity: 0; transition: opacity .22s;
}
#h5SidePanel.open .h5sp-mask { opacity: 1; }
#h5SidePanel .h5sp-box {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(360px, 88vw); background: #fff;
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .24s ease;
    box-shadow: -6px 0 24px rgba(0,0,0,.16);
}
#h5SidePanel.open .h5sp-box { transform: translateX(0); }
#h5SidePanel .h5sp-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #ebeef5;
    font-size: 16px; color: #303133; flex: none;
}
#h5SidePanel .h5sp-x {
    width: 30px; height: 30px; border: none; background: transparent;
    font-size: 17px; color: #909399; cursor: pointer;
}
#h5SidePanel .h5sp-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 20px;
}
#h5SidePanel .h5sp-sec { padding: 10px 16px 14px; border-bottom: 1px solid #f5f6f8; }
#h5SidePanel .h5sp-h { font-size: 13px; color: #909399; margin-bottom: 8px; }
#h5SidePanel .h5sp-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
#h5SidePanel .h5sp-av {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    background: #409eff; color: #fff; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}
#h5SidePanel .h5sp-info { flex: 1; min-width: 0; font-size: 14px; color: #303133; }
#h5SidePanel .h5sp-info b { font-weight: 500; word-break: break-all; }
#h5SidePanel .h5sp-info span { display: block; font-size: 12px; color: #909399; }
#h5SidePanel .h5sp-tag {
    display: inline-block; margin-left: 6px; padding: 0 6px; height: 18px; line-height: 18px;
    border-radius: 9px; background: #f0f2f5; color: #909399; font-size: 11px; font-style: normal;
}
#h5SidePanel .h5sp-tag.staff { background: #ecf5ff; color: #409eff; }
#h5SidePanel .h5sp-tag.adm { background: #f3eeff; color: #7a4ddb; }
#h5SidePanel .h5sp-ok, #h5SidePanel .h5sp-no {
    flex: none; height: 30px; padding: 0 12px; border-radius: 6px;
    font-size: 13px; font-family: inherit; cursor: pointer;
    border: 1px solid #dcdfe6; background: #fff; color: #606266;
}
#h5SidePanel .h5sp-ok { background: #409eff; border-color: #409eff; color: #fff; }
#h5SidePanel .h5sp-ok:disabled, #h5SidePanel .h5sp-no:disabled { opacity: .6; }
#h5SidePanel .h5sp-empty { font-size: 13px; color: #c0c4cc; padding: 6px 0; }
#h5SidePanel .h5sp-loading { font-size: 13px; color: #909399; padding: 18px 16px; }
#h5SidePanel .h5sp-invite { display: flex; gap: 8px; }
#h5SidePanel .h5sp-invite input {
    flex: 1; min-width: 0; height: 38px; padding: 0 10px; font-size: 16px;
    border: 1px solid #dcdfe6; border-radius: 6px; outline: none; box-sizing: border-box;
}
#h5SidePanel .h5sp-invite input:focus { border-color: #409eff; }
/* 「从已注册账号里选人」——比手打用户名省事 */
#h5SidePanel .h5sp-pick {
    width: 100%; height: 40px; margin-bottom: 10px; border-radius: 8px;
    border: 1.5px dashed #bcd2f7; background: #f7faff; color: #3b6fe0;
    font-size: 14px; font-family: inherit; cursor: pointer;
}
#h5SidePanel .h5sp-pick:active { background: #eaf2ff; }
#h5SidePanel .h5sp-tip { font-size: 12px; color: #c0c4cc; margin-top: 8px; }
#h5SidePanel .h5sp-leave {
    width: 100%; height: 42px; border: 1px solid #fbc4c4; border-radius: 8px;
    background: #fff; color: #f56c6c; font-size: 15px; font-family: inherit; cursor: pointer;
}
#h5SidePanel .h5sp-leave:active { background: #fef0f0; }

/* ---------- 未加入房间：申请卡片 ---------- */
#h5JoinCard {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; z-index: 10050; background: #f5f7fa;
    display: none; align-items: center; justify-content: center; padding: 24px;
}
#h5JoinCard.show { display: flex; }
#h5JoinCard .h5jc-box {
    width: min(340px, 100%); background: #fff; border-radius: 14px;
    padding: 30px 22px 22px; text-align: center;
    box-shadow: 0 10px 34px rgba(0,0,0,.1);
}
#h5JoinCard .h5jc-ico { font-size: 34px; margin-bottom: 10px; }
#h5JoinCard .h5jc-name { font-size: 17px; font-weight: 600; color: #303133; margin-bottom: 8px; word-break: break-all; }
#h5JoinCard .h5jc-tip { font-size: 13px; color: #909399; margin-bottom: 20px; line-height: 1.6; }
#h5JoinCard .h5jc-btn {
    width: 100%; height: 44px; border: none; border-radius: 8px;
    background: #409eff; color: #fff; font-size: 15px; font-family: inherit; cursor: pointer;
}
#h5JoinCard .h5jc-btn:disabled { background: #c8d9ec; }
#h5JoinCard .h5jc-home {
    display: inline-block; margin-top: 14px; font-size: 13px; color: #909399; text-decoration: none;
}

/* ============================================================
   ★ 客户首页：输入房间 ID / 链接 → 申请加入
   ------------------------------------------------------------
   直接打开域名（URL 里没有 #/room/xxx）时显示，
   用来顶掉 Element 原生的「欢迎 xx / 发送私聊 / 创建群聊」。
   那一页是 Element 内置的 HomePage，客户不该看到，
   因为按产品定义：客户只能被邀请进房聊天，不能私聊、不能建群。
   ============================================================ */
#h5Home {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    /* 层级要压过 Element 的弹层容器（首次登录的「验证此设备」等 modal 会盖上来） */
    z-index: 9999;
    /* 不用纯白/纯灰：一条很淡的蓝 → 白 渐变，干净但有纵深 */
    background: linear-gradient(168deg, #eaf2ff 0%, #f4f8ff 38%, #ffffff 78%);
    display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#h5Home.show { display: block; }
/* 首页自己的顶栏：标题 + 侧边栏开关 */
#h5Home .h5hm-top {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    height: 52px; padding: 0 14px;
    background: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(226,232,240,.7);
}
#h5Home .h5hm-topT { font-size: 16px; font-weight: 600; color: #1f2d3d; }
#h5Home .h5hm-menu {
    position: absolute; right: 12px; top: 10px;
    width: 34px; height: 34px; border: none; border-radius: 10px;
    background: rgba(240,244,250,.9); color: #3b6fe0; font-size: 17px;
    line-height: 1; cursor: pointer;
}
#h5Home .h5hm-menu:active { background: #e3ebfa; }
#h5Home .h5hm-wrap {
    max-width: 420px; margin: 0 auto; padding: 26px 20px 36px; box-sizing: border-box;
}
#h5Home .h5hm-head { text-align: center; margin-bottom: 22px; }
#h5Home .h5hm-avatar {
    width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 19px;
    background: linear-gradient(135deg, #5b93ff 0%, #3b6fe0 100%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(59,111,224,.28);
}
#h5Home .h5hm-avatar svg { width: 30px; height: 30px; }
#h5Home .h5hm-title {
    font-size: 22px; font-weight: 700; color: #1f2d3d;
    letter-spacing: .5px; margin-bottom: 5px;
}
#h5Home .h5hm-sub { font-size: 13px; color: #97a3b2; }

/* ★ 被邀请卡片：醒目的渐变边，点一下直接进房 */
#h5Home .h5hm-inv {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #eef5ff 0%, #e6f0ff 100%);
    border: 1.5px solid #bcd2f7; border-radius: 14px;
    padding: 14px 14px; margin-bottom: 12px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(59,111,224,.10);
}
#h5Home .h5hm-inv:active { background: #e0ebff; }
#h5Home .h5hm-invIco { font-size: 22px; flex: none; }
#h5Home .h5hm-invBody { flex: 1; min-width: 0; }
#h5Home .h5hm-invT { font-size: 12px; color: #6b8fd6; }
#h5Home .h5hm-invN {
    font-size: 16px; font-weight: 700; color: #1f2d3d; margin: 2px 0 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#h5Home .h5hm-invS { font-size: 12px; color: #97a3b2; }
#h5Home .h5hm-invGo {
    flex: none; font-size: 13px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, #4c8dff 0%, #3b6fe0 100%);
    padding: 7px 14px; border-radius: 16px;
}

/* ★ 已过期的邀请提示卡（警告色，无操作按钮） */
#h5Home .h5hm-exp {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fffaf0; border: 1.5px solid #f5d9a8; border-radius: 13px;
    padding: 12px 14px; margin-bottom: 10px;
}
#h5Home .h5hm-expIco { font-size: 18px; flex: none; line-height: 1.3; }
#h5Home .h5hm-expBody { flex: 1; min-width: 0; }
#h5Home .h5hm-expN { font-size: 14px; font-weight: 600; color: #8a5a00; }
#h5Home .h5hm-expS { font-size: 12px; color: #b08243; margin-top: 3px; line-height: 1.5; }

/* ★ 我的房间列表 */
#h5Home .h5hm-room {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid rgba(226,232,240,.9);
    border-radius: 13px; padding: 12px 14px; margin-bottom: 10px;
    cursor: pointer;
}
#h5Home .h5hm-room:active { background: #f6f9ff; }
#h5Home .h5hm-rAv {
    width: 40px; height: 40px; border-radius: 12px; flex: none;
    background: linear-gradient(135deg, #5b93ff 0%, #3b6fe0 100%);
    color: #fff; font-size: 17px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
#h5Home .h5hm-rInfo { flex: 1; min-width: 0; }
#h5Home .h5hm-rInfo b {
    display: block; font-size: 15.5px; font-weight: 600; color: #1f2d3d;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#h5Home .h5hm-rInfo span { font-size: 12px; color: #97a3b2; }
#h5Home .h5hm-rGo { flex: none; font-size: 20px; color: #c3cede; }
#h5Home .h5hm-cnt2 {
    min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px;
    background: #eaf2ff; color: #3b6fe0; font-size: 11px; line-height: 18px;
    text-align: center; font-weight: 600;
}
/* 一个房间都没有 */
#h5Home .h5hm-empty {
    text-align: center; padding: 38px 20px;
    background: rgba(255,255,255,.7); border: 1px dashed #d8e2f0;
    border-radius: 14px;
}
#h5Home .h5hm-emptyIco { font-size: 34px; margin-bottom: 10px; opacity: .8; }
#h5Home .h5hm-emptyT { font-size: 15px; font-weight: 600; color: #4e5b6c; }
#h5Home .h5hm-emptyS { font-size: 13px; color: #97a3b2; margin-top: 5px; }
/* 主卡片 */
#h5Home .h5hm-card {
    background: rgba(255,255,255,.92);
    border-radius: 16px; padding: 20px 18px 16px;
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 12px 32px rgba(31,45,61,.07);
}
#h5Home .h5hm-lb { font-size: 13px; font-weight: 600; color: #4e5b6c; margin-bottom: 8px; }
#h5Home .h5hm-inp {
    width: 100%; height: 48px; box-sizing: border-box; padding: 0 14px;
    border: 1.5px solid #e4e9f0; border-radius: 12px; outline: none;
    font-size: 15px; font-family: inherit; color: #1f2d3d; background: #f8fafd;
    -webkit-appearance: none; appearance: none;
    transition: border-color .15s, background .15s;
}
#h5Home .h5hm-inp:focus { border-color: #4c8dff; background: #fff; }
#h5Home .h5hm-err { color: #f04438; font-size: 12px; min-height: 18px; margin: 7px 0 0; line-height: 1.4; }
#h5Home .h5hm-btn {
    width: 100%; height: 48px; margin-top: 4px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #4c8dff 0%, #3b6fe0 100%);
    color: #fff; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer;
    box-shadow: 0 6px 16px rgba(59,111,224,.25);
}
#h5Home .h5hm-btn:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(59,111,224,.22); }
#h5Home .h5hm-btn:disabled { background: #b8cdf0; box-shadow: none; }
#h5Home .h5hm-tip { font-size: 12px; color: #97a3b2; line-height: 1.7; margin-top: 14px; }
/* 员工专属：新建房间（首页最上方的主按钮） */
#h5Home .h5hm-nr {
    width: 100%; height: 46px; border: 1.5px dashed #bcd2f7; border-radius: 12px;
    background: rgba(255,255,255,.7); color: #3b6fe0;
    font-size: 15px; font-weight: 500; font-family: inherit; cursor: pointer;
}
#h5Home .h5hm-nr:active { background: #eaf2ff; }
/* ★ 员工首页的主按钮：创建新房间（员工的核心动作，必须第一眼看到） */
#h5Home #h5hmNewRoomSec { margin: 0 0 16px; }
#h5Home .h5hm-create {
    width: 100%; height: 50px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #4c8dff 0%, #3b6fe0 100%);
    color: #fff; font-size: 16.5px; font-weight: 600; font-family: inherit;
    cursor: pointer; box-shadow: 0 6px 16px rgba(59,111,224,.25);
}
#h5Home .h5hm-create:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(59,111,224,.22); }
#h5Home .h5hm-createTip {
    font-size: 12px; color: #97a3b2; line-height: 1.6;
    margin: 8px 2px 0; text-align: center;
}
/* 分区 */
#h5Home .h5hm-sec { margin-top: 22px; }
#h5Home .h5hm-secT {
    font-size: 13px; font-weight: 600; color: #7a8699; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
#h5Home .h5hm-cnt {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #f04438; color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
#h5Home .h5hm-row {
    background: #fff; border-radius: 12px; padding: 13px 15px; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px solid rgba(226,232,240,.8);
}
#h5Home .h5hm-rowA { align-items: center; }
#h5Home .h5hm-rl { min-width: 0; }
#h5Home .h5hm-rn {
    font-size: 15px; color: #1f2d3d; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#h5Home .h5hm-rd { font-size: 12px; color: #97a3b2; margin-top: 3px; }
/* 状态做成小胶囊 */
#h5Home .h5hm-rs {
    font-size: 12px; flex: none; padding: 3px 10px; border-radius: 11px; line-height: 1.5;
}
#h5Home .h5hm-rs.wait { color: #b7791f; background: #fdf3df; }
#h5Home .h5hm-rs.ok   { color: #2f9e44; background: #e6f6ea; }
#h5Home .h5hm-rs.no   { color: #d64541; background: #fdeaea; }
#h5Home .h5hm-go { font-size: 13px; color: #3b6fe0; text-decoration: none; flex: none; font-weight: 500; }
#h5Home .h5hm-acts { display: flex; gap: 8px; flex: none; }
#h5Home .h5hm-ok, #h5Home .h5hm-no {
    height: 34px; padding: 0 16px; border-radius: 17px; font-size: 13px;
    font-family: inherit; cursor: pointer; border: 1px solid transparent;
}
#h5Home .h5hm-ok { background: linear-gradient(135deg, #4c8dff 0%, #3b6fe0 100%); color: #fff; }
#h5Home .h5hm-no { background: #fff; color: #d64541; border-color: #f3c6c3; }
#h5Home .h5hm-ok:disabled, #h5Home .h5hm-no:disabled { opacity: .6; }
#h5Home .h5hm-foot { text-align: center; margin-top: 30px; }
#h5Home .h5hm-out { font-size: 13px; color: #97a3b2; text-decoration: none; }

/* 首页显示时，把 Element 原生首页（欢迎 / 发送私聊 / 创建群聊）彻底挡掉。
   万一我们的 #h5Home 还没建出来，这一步也不会让原生页露脸。 */
html[data-h5home="1"] .mx_HomePage,
html[data-h5home="1"] .mx_HomePage_container,
html[data-h5home="1"] .mx_HomePage_buttons { display: none !important; }

/* 首页显示时也收掉 Element 的弹层容器 —— 首次登录会弹「验证此设备」/
   「完成安全设置」，客户在首页上不需要这些，也不该被它们挡住。 */
html[data-h5home="1"] #mx_Dialog_Container,
html[data-h5home="1"] #mx_Dialog_StaticContainer,
html[data-h5home="1"] .mx_Dialog_border,
html[data-h5home="1"] .mx_CompleteSecurityBody {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ---------- 极简输入框 ---------- */
#h5Composer {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid #ebeef5; box-sizing: border-box;
}
#h5Attach {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    color: #8d97a5; flex: none; background: #f7f8fa;
}
#h5Attach:active { background: #eceef1; }
#h5Attach svg { width: 22px; height: 22px; fill: currentColor; }
#h5Input {
    flex: 1; min-width: 0; min-height: 40px; max-height: 120px; overflow-y: auto;
    padding: 10px 14px; border: 1px solid #e4e7ed; border-radius: 20px;
    background: #f7f8fa; outline: none;
    font-size: 16px; line-height: 1.4; color: #303133;
    word-break: break-word; white-space: pre-wrap;
    font-family: inherit;
}
#h5Input:focus { border-color: #409eff; background: #fff; }
#h5Input:empty::before {
    content: attr(data-ph);
    color: #a8b0bd; pointer-events: none;
}
#h5Send {
    flex: none; height: 40px; padding: 0 18px; border: none; border-radius: 20px;
    background: #409eff; color: #fff; font-size: 15px; font-family: inherit; cursor: pointer;
}
#h5Send:active { background: #3a8ee6; }

/* ---------- 手机端细节 ---------- */
@media (max-width: 768px) {
    #h5TopBar {
        height: calc(52px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 8px 0;  /* 顶部安全区 + 左右 8px */
        gap: 6px;
    }
    #h5TopBar .h5tb-name { font-size: 14px; }
    #h5TopBar .h5tb-sub { font-size: 11px; }
    #h5TopBar .h5tb-btn, #h5RoomBtn { height: 30px; padding: 0 9px; font-size: 12px; }
    #h5TopBar .h5tb-btn.h5tb-icon { padding: 0 8px; }
    #h5SidePanel .h5sp-box { width: 92vw; }
    #h5JoinCard .h5jc-box { padding: 26px 18px 20px; }
}

/* ---------- 房间切换弹层 ---------- */
#h5RoomList {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; z-index: 10070;
    pointer-events: none; visibility: hidden;
}
#h5RoomList.open { pointer-events: auto; visibility: visible; }
#h5RoomList .h5rl-mask {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,.32); opacity: 0; transition: opacity .22s;
}
#h5RoomList.open .h5rl-mask { opacity: 1; }
#h5RoomList .h5rl-box {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(340px, 88vw); background: #fff;
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .24s ease;
    box-shadow: -6px 0 24px rgba(0,0,0,.16);
}
#h5RoomList.open .h5rl-box { transform: translateX(0); }
#h5RoomList .h5rl-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #ebeef5;
    font-size: 16px; color: #303133; flex: none;
}
#h5RoomList .h5rl-x {
    width: 30px; height: 30px; border: none; background: transparent;
    font-size: 17px; color: #909399; cursor: pointer;
}
#h5RoomList .h5rl-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 20px; }
#h5RoomList .h5rl-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f7f8fa;
}
#h5RoomList .h5rl-item:active { background: #f5f7fa; }
#h5RoomList .h5rl-item.cur { background: #ecf5ff; }
#h5RoomList .h5rl-av {
    width: 38px; height: 38px; border-radius: 10px; flex: none;
    background: #409eff; color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
#h5RoomList .h5rl-info { flex: 1; min-width: 0; }
#h5RoomList .h5rl-n {
    font-size: 14px; color: #303133; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#h5RoomList .h5rl-s { font-size: 12px; color: #909399; margin-top: 2px; }
#h5RoomList .h5rl-cur { font-size: 12px; color: #409eff; flex: none; }
/* 房间列表里的「复制链接」（10 位短码链接，可发客户） */
#h5RoomList .h5rl-copy {
    flex: none; height: 30px; padding: 0 10px; border-radius: 15px;
    border: 1px solid #bcd2f7; background: #fff; color: #3b6fe0;
    font-size: 12px; font-family: inherit; cursor: pointer;
}
#h5RoomList .h5rl-copy:active { background: #eaf2ff; }

/* ---------- ★ 房间短链接弹层（建完房展示，一键复制） ---------- */
#h5RoomLinkDlg {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; z-index: 10200;
    display: flex; align-items: center; justify-content: center; padding: 22px;
    box-sizing: border-box;
}
#h5RoomLinkDlg .h5rlk-mask {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; background: rgba(15,23,42,.45);
}
#h5RoomLinkDlg .h5rlk-box {
    position: relative; width: 100%; max-width: 330px;
    background: #fff; border-radius: 16px; padding: 22px 18px 18px;
    text-align: center; box-shadow: 0 18px 48px rgba(15,23,42,.25);
}
#h5RoomLinkDlg .h5rlk-h { font-size: 17px; font-weight: 700; color: #1f2d3d; }
#h5RoomLinkDlg .h5rlk-name { font-size: 13px; color: #4e5b6c; margin-top: 6px; }
#h5RoomLinkDlg .h5rlk-lb { font-size: 12px; color: #97a3b2; margin: 14px 0 8px; }
#h5RoomLinkDlg .h5rlk-url {
    font-size: 13px; color: #3b6fe0; background: #f3f7ff;
    border: 1px dashed #bcd2f7; border-radius: 10px;
    padding: 10px 12px; word-break: break-all; line-height: 1.5;
    user-select: text; -webkit-user-select: text;
}
#h5RoomLinkDlg .h5rlk-btns { display: flex; gap: 10px; margin-top: 16px; }
#h5RoomLinkDlg .h5rlk-copy, #h5RoomLinkDlg .h5rlk-go {
    flex: 1; height: 44px; border-radius: 12px; font-size: 15px;
    font-family: inherit; cursor: pointer; border: none;
}
#h5RoomLinkDlg .h5rlk-copy {
    background: linear-gradient(135deg, #4c8dff 0%, #3b6fe0 100%); color: #fff;
}
#h5RoomLinkDlg .h5rlk-go { background: #f3f7ff; color: #3b6fe0; }
#h5RoomLinkDlg .h5rlk-copy:active, #h5RoomLinkDlg .h5rlk-go:active { opacity: .85; }
/* 建房后直接邀请成员（次要按钮，整宽） */
#h5RoomLinkDlg .h5rlk-invite {
    width: 100%; height: 42px; margin-top: 10px; border-radius: 12px;
    border: 1.5px dashed #bcd2f7; background: rgba(243,247,255,.7); color: #3b6fe0;
    font-size: 14px; font-family: inherit; cursor: pointer;
}
#h5RoomLinkDlg .h5rlk-invite:active { background: #eaf2ff; }

/* ---------- ★ 邀请成员：从已注册账号列表挑人 ---------- */
#h5InviteDlg {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; z-index: 10300;
    display: none; align-items: center; justify-content: center; padding: 20px;
    box-sizing: border-box;
}
#h5InviteDlg.show { display: flex; }
#h5InviteDlg .h5iv-mask {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; background: rgba(15,23,42,.45);
}
#h5InviteDlg .h5iv-box {
    position: relative; width: 100%; max-width: 360px; max-height: 80%;
    background: #fff; border-radius: 16px; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 18px 48px rgba(15,23,42,.25);
}
#h5InviteDlg .h5iv-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 10px; font-size: 16px; color: #1f2d3d;
}
#h5InviteDlg .h5iv-x {
    border: none; background: #f4f4f5; color: #7a8699; width: 30px; height: 30px;
    border-radius: 50%; font-size: 15px; cursor: pointer; line-height: 1;
}
#h5InviteDlg .h5iv-sub { font-size: 12px; color: #97a3b2; padding: 0 18px 10px; }
#h5InviteDlg .h5iv-search {
    margin: 0 18px 10px; height: 42px; padding: 0 13px; box-sizing: border-box;
    border: 1.5px solid #e4e9f0; border-radius: 11px; outline: none;
    font-size: 14px; font-family: inherit; color: #1f2d3d; background: #f8fafd;
    -webkit-appearance: none; appearance: none;
}
#h5InviteDlg .h5iv-search:focus { border-color: #4c8dff; background: #fff; }
#h5InviteDlg .h5iv-list { flex: 1; overflow-y: auto; padding: 0 10px 14px; }
#h5InviteDlg .h5iv-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 8px;
    border-bottom: 1px solid #f4f6f9;
}
#h5InviteDlg .h5iv-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
#h5InviteDlg .h5iv-info b {
    font-size: 14px; font-weight: 500; color: #1f2d3d;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#h5InviteDlg .h5iv-go {
    flex: none; height: 32px; padding: 0 15px; border-radius: 16px; border: none;
    background: linear-gradient(135deg, #4c8dff 0%, #3b6fe0 100%); color: #fff;
    font-size: 13px; font-family: inherit; cursor: pointer;
}
#h5InviteDlg .h5iv-go:disabled { opacity: .6; }
#h5InviteDlg .h5iv-in { flex: none; font-size: 12px; color: #2f9e44; }
#h5InviteDlg .h5iv-wait { flex: none; font-size: 12px; color: #b7791f; }
#h5InviteDlg .h5iv-empty { padding: 34px 10px; text-align: center; color: #97a3b2; font-size: 13px; }

/* ============================================================
   ★ 首页侧边栏（加入房间 / 创建房间）
   ============================================================ */
#h5HomeSider {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; z-index: 10500;
    display: none; pointer-events: none;
}
#h5HomeSider.show { display: block; pointer-events: auto; }
#h5HomeSider .h5sd-mask {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; background: rgba(15,23,42,.42);
    opacity: 0; transition: opacity .22s;
}
#h5HomeSider.show .h5sd-mask { opacity: 1; }
#h5HomeSider .h5sd-box {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 74%; max-width: 280px; background: #fff;
    box-shadow: -8px 0 30px rgba(15,23,42,.18);
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    transform: translateX(100%); transition: transform .24s ease;
}
#h5HomeSider.show .h5sd-box { transform: translateX(0); }
#h5HomeSider .h5sd-h {
    font-size: 15px; font-weight: 600; color: #1f2d3d;
    padding: 4px 2px 14px; border-bottom: 1px solid #f1f4f9; margin-bottom: 12px;
}
#h5HomeSider .h5sd-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; height: 50px; margin-bottom: 10px;
    border: 1px solid #e4e9f0; border-radius: 12px; background: #fff;
    color: #1f2d3d; font-size: 15.5px; font-weight: 500; font-family: inherit;
    cursor: pointer; text-align: left; padding: 0 16px;
}
#h5HomeSider .h5sd-item:active { background: #f2f7ff; border-color: #bcd2f7; }
#h5HomeSider .h5sd-ico {
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    background: #eaf2ff; color: #3b6fe0; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}
#h5HomeSider .h5sd-tip {
    font-size: 12px; color: #97a3b2; line-height: 1.7; margin-top: 14px; padding: 0 2px;
}

/* ============================================================
   ★ 加入房间弹层（从侧边栏进）
   ============================================================ */
#h5JoinDlg {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; z-index: 10550;
    display: none; align-items: center; justify-content: center; padding: 20px;
    box-sizing: border-box;
}
#h5JoinDlg.show { display: flex; }
#h5JoinDlg .h5jd-mask {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; background: rgba(15,23,42,.45);
}
#h5JoinDlg .h5jd-box {
    position: relative; width: 100%; max-width: 330px;
    background: #fff; border-radius: 16px; padding: 22px 18px 18px;
    box-shadow: 0 18px 48px rgba(15,23,42,.25);
}
#h5JoinDlg .h5jd-h { font-size: 17px; font-weight: 700; color: #1f2d3d; }
#h5JoinDlg .h5jd-tip { font-size: 12px; color: #97a3b2; margin: 6px 0 14px; }
#h5JoinDlg .h5jd-inp {
    width: 100%; height: 46px; box-sizing: border-box; padding: 0 13px;
    border: 1.5px solid #e4e9f0; border-radius: 12px; outline: none;
    font-size: 15px; font-family: inherit; color: #1f2d3d; background: #f8fafd;
    -webkit-appearance: none; appearance: none;
}
#h5JoinDlg .h5jd-inp:focus { border-color: #4c8dff; background: #fff; }
#h5JoinDlg .h5jd-err { color: #f04438; font-size: 12px; min-height: 18px; margin: 7px 0 0; }
#h5JoinDlg .h5jd-btns { display: flex; gap: 10px; margin-top: 6px; }
#h5JoinDlg .h5jd-cancel, #h5JoinDlg .h5jd-ok {
    flex: 1; height: 46px; border-radius: 12px; font-size: 15px;
    font-family: inherit; cursor: pointer; border: none;
}
#h5JoinDlg .h5jd-cancel { background: #f3f5f8; color: #6b7a8d; }
#h5JoinDlg .h5jd-ok {
    background: linear-gradient(135deg, #4c8dff 0%, #3b6fe0 100%); color: #fff;
    font-weight: 600;
}
#h5JoinDlg .h5jd-ok:disabled { opacity: .6; }

/* 成员列表里的「房主」标签 */
#h5SidePanel .h5sp-tag.owner { background: #fdf3df; color: #b7791f; }

/* ★ 解散房间（房主专属，危险操作）：比「退出房间」更重、更醒目 */
#h5SidePanel .h5sp-dismiss {
    width: 100%; height: 44px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #f04438 0%, #d92d20 100%);
    color: #fff; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
    box-shadow: 0 4px 12px rgba(217,45,32,.25);
}
#h5SidePanel .h5sp-dismiss:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(217,45,32,.22); }
#h5SidePanel .h5sp-dismiss:disabled { opacity: .6; }

/* ★ 「我的群昵称」编辑区（成员面板顶部） */
#h5SidePanel .h5sp-name { display: flex; gap: 8px; }
#h5SidePanel .h5sp-name input {
    flex: 1; min-width: 0; height: 40px; padding: 0 11px; font-size: 16px;
    border: 1.5px solid #e4e9f0; border-radius: 9px; outline: none;
    box-sizing: border-box; background: #f8fafd; color: #1f2d3d;
}
#h5SidePanel .h5sp-name input:focus { border-color: #4c8dff; background: #fff; }