/* ============================================================
   mobile.css — 仅移动端生效（≤768px）
   由 HTML 以 <link media="screen and (max-width: 768px)"> 按需加载，
   文件内保留媒体查询作为兜底（直接引入本文件时同样生效）。
   加载顺序：base.css → pc.css → mobile.css
   ============================================================ */

/* ========== 移动端：列表页 / 聊天页全屏化 ========== */
@media screen and (max-width: 768px) {
    body, body.list-page, body.chat-page {
        background-color: #ececec;
    }

    .container, .chat-container {
        width: 100vw;
        height: 100vh;
        height: 100dvh; /* 无缝贴合移动端屏幕高 */
        max-width: 100%;
        max-height: 100%;
        border-radius: 0; /* 移动端取消圆角 */
        box-shadow: none;
    }

    /* 列表容器改纵向：列表在上、底部 TabBar 在下（rail 已隐藏） */
    .container {
        flex-direction: column;
    }

    /* 手机端去掉左侧功能栏，改用底部 TabBar（微信移动端形态） */
    .app-rail {
        display: none;
    }

    /* 底部 TabBar */
    .mobile-tabbar {
        display: flex;
        flex-shrink: 0;
        background: #f7f7f7;
        border-top: 1px solid #dcdcdc;
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
    }

    .tabbar-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        background: none;
        border: none;
        padding: 3px 0;
        font-size: 11px;
        color: #999;
        cursor: pointer;
    }

    .tabbar-btn .tabbar-icon {
        font-size: 22px;
        line-height: 1.2;
        font-style: normal;
    }

    .tabbar-btn.active {
        color: #07c160;
    }

    /* 「我」面板：个人信息 + 退出登录 */
    .me-panel {
        background: #fff;
        /* 纵向撑满列表区：内容贴顶，退出登录用 margin-top:auto 压到底部 */
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .me-profile {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 20px 15px;
        border-bottom: 8px solid #ededed;
        cursor: pointer;
    }

    .me-avatar {
        width: 56px;
        height: 56px;
        border-radius: 8px;
        object-fit: cover;
        background-color: #ddd;
        flex-shrink: 0;
    }

    .me-info {
        flex: 1;
        min-width: 0;
    }

    .me-nickname {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .me-account {
        font-size: 13px;
        color: #999;
        margin-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .me-arrow {
        font-size: 22px;
        color: #c8c8c8;
        flex-shrink: 0;
    }

    .me-actions {
        margin-top: auto; /* 退出登录固定在面板底部（TabBar 上方） */
        padding: 16px 15px calc(16px + env(safe-area-inset-bottom));
    }

    .me-logout-btn {
        width: 100%;
        padding: 12px 0;
        background: #fff;
        color: #ff4d4f;
        border: 1px solid #ff4d4f; /* 细红边框描边样式 */
        border-radius: 10px;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
    }

    .me-logout-btn:active {
        background: #f2f2f2;
    }

    /* 气泡放宽适配手机屏 */
    .msg-content {
        max-width: 80%;
    }

    /* 适配 iPhone 底部全面屏安全区（刘海屏/横条） */
    .input-area {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    /* 录音条移动端紧凑化：窄屏下按钮与状态不挤压 */
    .record-btn {
        padding: 10px 13px;
        font-size: 14px;
    }

    .record-status {
        gap: 8px;
        font-size: 14px;
    }

    /* 语音气泡在移动端稍微放宽 */
    .voice-bubble {
        gap: 7px;
    }
}

/* ========== 移动端：选中会话后聊天面板全屏覆盖列表 ========== */
@media screen and (max-width: 768px) {
    .list-right.chat-fullscreen {
        display: flex;
        /* 关键：必须指定纵向，否则默认 flex-direction:row 会把
           头部 / 消息列表 / 输入栏横向并排，导致移动端布局错乱 */
        flex-direction: column;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        z-index: 100;
        background: #f5f5f5;
        overflow: hidden;
    }

    .list-right.chat-fullscreen .inline-back {
        display: block;
    }

    /* 全屏会话时头部避让刘海 / 状态栏 */
    .list-right.chat-fullscreen .chat-header {
        padding-top: calc(15px + env(safe-area-inset-top));
    }
}

/* TabBar 图标红点：挂在图标右上角（图标相对定位规则在 base.css） */
.tabbar-icon .badge {
    top: -6px;
    right: -14px;
}