/* ============================================================
   内部聊天 - 手机端样式总表
   1. 只做手机端：PC 上以 480px 手机宽度居中呈现
   2. 适配 iPhone（刘海/底部横条）、小米、华为、OPPO/vivo 等全面屏
   3. 适配微信内置浏览器（iOS WKWebView / 安卓 X5 内核）
   ============================================================ */

/* ---------- 基础重置 ---------- */
html, body {
    overscroll-behavior: none;          /* 禁止橡皮筋影响固定元素 */
    -webkit-text-size-adjust: 100%;     /* 防微信/系统字体放大导致布局错乱 */
    text-size-adjust: 100%;
}
* { -webkit-tap-highlight-color: transparent; }

/* ---------- 只做手机端：宽屏时收成手机宽度居中 ---------- */
@media (min-width: 769px) {
    body { background: #e9edf2; }
    #matrixchat {
        max-width: 480px !important;
        margin: 0 auto !important;
        box-shadow: 0 0 24px rgba(0, 0, 0, .18);
        height: calc(100vh - 32px) !important;
        margin-top: 16px !important;
        border-radius: 12px;
        overflow: hidden;
    }
}

/* ---------- 视口高度：用 JS 写入的真实可视高度，解决微信/iOS 工具栏遮挡 ---------- */
#matrixchat { height: var(--app-height, 100dvh) !important; }

/* ---------- 刘海屏 / 底部横条安全区 ---------- */
.mx_RoomHeader,
.mx_RoomListPanel,
.mx_LeftPanel,
.mx_HomePage {
    padding-top: env(safe-area-inset-top);
}
.mx_MessageComposer,
.mx_RoomView_statusArea {
    padding-bottom: env(safe-area-inset-bottom);
}
.mx_MessageComposer {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ============================================================
   手机端（<=768px）
   ============================================================ */
@media (max-width: 768px) {
    /* ---------- 输入区：防 iOS 聚焦缩放 + 触摸目标 ---------- */
    .mx_MessageComposer input,
    .mx_MessageComposer textarea,
    .mx_MessageComposer [contenteditable="true"],
    .mx_SpotlightDialog input,
    .mx_InviteDialog input,
    .mx_InviteDialog textarea,
    .mx_InviteDialog [contenteditable="true"] {
        font-size: 16px !important;     /* < 16px 时 iOS 会自动放大页面 */
        line-height: 1.5;
    }
    .mx_MessageComposer button,
    .mx_MessageComposer .mx_AccessibleButton,
    .mx_MessageComposer [role="button"],
    .mx_RoomHeader .mx_AccessibleButton,
    .mx_RoomHeader button {
        min-width: 44px;                /* 触摸目标 ≥44px */
        min-height: 44px;
    }

    /* ---------- 消息气泡：更适合手机阅读 ---------- */
    .mx_EventTile_body,
    .mx_EventTile_content .mx_MTextBody {
        font-size: 15.5px;
        line-height: 1.62;
    }
    .mx_EventTile_senderDetails { font-size: 13px; }
    .mx_RoomTile_name { font-size: 15px; }
    .mx_RoomTile_messagePreview,
    .mx_RoomTile_timestamp { font-size: 12.5px; }
    .mx_RoomHeader_heading { font-size: 16px; }

    /* ---------- 滚动：惯性 + 不带动整页 ---------- */
    .mx_RoomView_messagePanel,
    .mx_RoomView_MessageList,
    .mx_RoomList,
    .mx_Scrollable {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* ---------- 房间头部：留出更大的点击区 ---------- */
    .mx_RoomHeader { min-height: 56px; }
    .mx_RoomHeader_avatar { width: 34px; height: 34px; }

    /* ---------- 隐藏桌面端才有意义的悬浮元素 ---------- */
    .mx_EventTile_line .mx_EventTile_msgOption { opacity: .55; }

    /* ---------- 顶部/底部固定区域不跟着页面滚动抖动 ---------- */
    .mx_RoomHeader,
    .mx_MessageComposer {
        position: relative;
        z-index: 2;
    }
}

/* ============================================================
   精简模式：只留 会话列表 + 消息 + 输入框
   ============================================================ */
.mx_SpacePanel                  { display: none !important; }  /* 空间栏 */
.mx_ThreadsActivityCentreButton { display: none !important; }  /* 线程通知中心 */
.mx_QuickSettingsButton         { display: none !important; }  /* 快速设置齿轮 */
[aria-label="浏览房间"]          { display: none !important; }  /* 浏览公开房间 */
._iconButton_kikqh_27,
._list_kikqh_17                 { display: none !important; }  /* 房间列表筛选器 */
.mx_MiniAvatarUploader          { display: none !important; }  /* 头像上传提示 */
.mx_Separator                   { display: none !important; }  /* 拖动分隔条 */
.mx_HomePage_default_buttons > *:nth-child(2) { display: none !important; } /* 主页「浏览公共房间」 */

/* ============================================================
   登录页：卡片居中 + 去掉服务器地址
   ============================================================ */
.mx_AuthFooter        { display: none !important; }  /* 底部 Blog/Mastodon/GitHub 外链 */
.mx_Login_forgot      { display: none !important; }  /* 忘记密码（服务器未配邮箱重置） */
.mx_MobileGuideToast  { display: none !important; }  /* 下载 App 引导横幅 */
.mx_AuthPage          { justify-content: center !important; }
.mx_AuthPage_modal {
    width: min(360px, calc(100vw - 48px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
}
.mx_AuthPage_modalContent { width: 100% !important; max-width: none !important; flex-direction: column !important; }
.mx_AuthBody              { width: 100% !important; max-width: none !important; }
.mx_ServerPicker h2,
.mx_ServerPicker .mx_ServerPicker_server { display: none !important; }
.mx_ServerPicker::after {
    content: "没有账户？请联系管理员添加";
    display: block;
    font-size: 13px;
    color: #737d8c;
    text-align: center;
    padding: 2px 0 6px;
}

/* 登录页底部备案号（合规展示） */
.mx_AuthPage::after {
    content: "蜀ICP备2024103887号-2";
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(10px + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 12px;
    color: #8b98a9;
    letter-spacing: .3px;
    z-index: 5;
    pointer-events: none;
}

/* ============================================================
   邀请 / 添加聊天：只需输入 @用户名
   ============================================================ */
.mx_InviteDialog_helpText_userId { display: none !important; }
.mx_InviteDialog_helpText::after {
    content: "直接输入 @用户名 即可，例如 @zhangsan";
    display: block;
    font-size: 12px;
    color: #737d8c;
    margin-top: 4px;
}