/* assets/css/mobile.css - 终极修复版 (无重叠 + 视口适配) */

:root {
    --mobile-bg: #000;
    --mobile-text: #fff;
    --tiktok-red: #ff0050;
    --tiktok-blue: #00f2ea;
    /* JS 加载前的默认值 */
    --app-height: 100vh; 
}

@media screen and (max-width: 768px) {
    
    /* === 1. 全局容器控制 (沙盒模式) === */
    body, html {
        background-color: var(--mobile-bg);
        margin: 0; padding: 0;
        overflow: hidden; /* 禁止全局滚动 */
        width: 100%;
        /* 核心修复：使用 JS 计算的真实高度变量 */
        height: var(--app-height);
    }

    /* 隐藏 PC 端元素 */
    .aether-layout, .feed-header, .creator-fab, .right-sidebar, .left-nav-module {
        display: none !important;
    }

    /* 移动端主容器 */
    .mobile-layout-container {
        display: block; 
        width: 100%; 
        /* 核心：填满 body 的高度 */
        height: 100%; 
        position: relative; 
        background: #000;
        overflow: hidden;
        height: var(--app-height, 100vh);
    }

    /* 滚动区域 */
    .mobile-feed-container {
        width: 100%; 
        height: 100%; 
        overflow-y: scroll;
        scroll-snap-type: y mandatory; 
        scrollbar-width: none;
        position: relative;
        z-index: 1; 
    }
    .mobile-feed-container::-webkit-scrollbar { display: none; }

    /* 单个卡片 (作为定位基准) */
    .mobile-feed-item {
        width: 100%; 
        height: 100%; 
        scroll-snap-align: start; 
        scroll-snap-stop: always;
        /* 关键：相对定位，让内部内容跟随卡片 */
        position: relative; 
        background: #111; 
        overflow: hidden;
    }

    /* === 2. 视觉层 === */
    .mobile-media-layer {
        width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;
    }
    .mobile-placeholder-content {
        width: 100%; height: 100%; background-size: cover; background-position: center;
        filter: brightness(0.85);
    }
    .mobile-gradient-overlay {
        position: absolute; bottom: 0; left: 0; width: 100%; height: 40%;
        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); 
        pointer-events: none;
        z-index: 1;
    }

    /* === 3. 顶部导航 (Absolute - 顶部固定) === */
    .mobile-top-bar {
        position: absolute; /* 相对于容器顶部 */
        top: 0; left: 0; width: 100%;
        padding: 15px 20px; display: grid;
        grid-template-columns: 40px 1fr 40px; align-items: center;
        z-index: 100; color: rgba(255,255,255,0.6);
        box-sizing: border-box;
        pointer-events: none;
    }
    .mobile-nav-trigger, .mobile-search-icon, .mobile-tabs { pointer-events: auto; }
    
    .mobile-nav-trigger { text-align: left; font-size: 24px; color: #fff; }
    .mobile-search-icon { text-align: right; font-size: 24px; color: #fff; }

    .mobile-tabs { display: flex; justify-content: center; gap: 20px; }
    .mobile-tabs .tab-item { font-weight: 600; font-size: 16px; position: relative; transition: 0.3s; }
    .mobile-tabs .tab-item.active { color: #fff; font-size: 17px; }
    .mobile-tabs .tab-item.active::after {
        content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
        width: 24px; height: 3px; background: #fff; border-radius: 2px;
    }

    /* 下拉菜单 */
    .mobile-menu-drawer {
        position: absolute; top: 0; left: 0; width: 100%; 
        background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(10px);
        padding: 60px 20px 20px; z-index: 99; 
        transform: translateY(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
        box-sizing: border-box;
    }
    .mobile-menu-drawer.active { transform: translateY(0); }
    
    .menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; text-align: center; margin-top:10px;}
    .menu-item { display: flex; flex-direction: column; align-items: center; color: #ccc; gap: 8px; }
    .menu-item i { font-size: 28px; background: rgba(255,255,255,0.1); width: 50px; height: 50px; line-height: 50px; border-radius: 12px; }
    .menu-item span { font-size: 12px; }

    /* === 4. 右侧操作栏 (ABSOLUTE - 跟随卡片滚动) === */
    /* 核心修复：必须是 absolute，相对于 feed-item 定位 */
    .mobile-sidebar-right {
        position: absolute; 
        right: 10px; 
        bottom: 85px; /* 位于底部导航上方 */
        display: flex; flex-direction: column; align-items: center;
        z-index: 20; gap: 16px;
    }
    
    .action-item {
        display: flex; flex-direction: column; align-items: center; text-align: center;
        color: #fff; opacity: 0.95;
    }
    .action-item i { 
        font-size: 28px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); margin-bottom: -4px; 
    }
    .count-text { 
        font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.5); 
    }

    .avatar-wrapper { position: relative; width: 50px; height: 50px; margin-bottom: 10px; }
    .mobile-avatar { 
        width: 100%; height: 100%; border-radius: 50%; 
        border: 2px solid #fff; background: #333; box-sizing: border-box;
    }
    .follow-plus {
        position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
        width: 22px; height: 22px; background: #ec4899; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; z-index: 2;
    }
    .follow-plus i { font-size: 12px; color: white; margin: 0; font-weight: bold; }

    /* Remix 按钮 */
    .remix-wrapper { margin-top: 10px; }
    .remix-disc {
        width: 45px; height: 45px; border-radius: 50%;
        background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        display: flex; justify-content: center; align-items: center;
        box-sizing: border-box;
    }
    .remix-disc i {
        font-size: 22px !important; color: #fff; margin: 0 !important;
        filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
    }

    /* === 5. 底部信息层 (ABSOLUTE - 跟随卡片滚动) === */
    /* 核心修复：必须是 absolute */
    .mobile-info-layer {
        position: absolute; 
        left: 0; 
        width: 75%;
        bottom: 60px; /* 位于底部导航上方 */
        padding: 15px; color: #fff; z-index: 10;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        pointer-events: none;
        box-sizing: border-box;
    }
    .mobile-info-layer .post-desc {
        font-size: 14px;
        line-height: 1.5; /* 设置合理的行高 */
        color: rgba(255,255,255,0.9); 
        pointer-events: auto; /* 允许点击 (为了后续展开交互) */
        margin-bottom: 0; /* 移除多余间距 */
        
        /* === 核心：限制显示 2 行 === */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 这里控制行数，写2就是只显2行 */
        overflow: hidden;
        text-overflow: ellipsis; /* 超出部分显示省略号 ... */
        
        /* 可选：添加过渡动画，方便做展开效果 */
        transition: max-height 0.3s ease;
    }
    
    /* 可选：添加展开状态样式 (配合JS点击展开) */
    .mobile-info-layer .post-desc.expanded {
        -webkit-line-clamp: unset; /* 取消行数限制 */
        overflow: visible;
    }

    /* === 6. 底部导航 (ABSOLUTE - 钉在容器底部) === */
    /* 核心修复：absolute 定位在计算好高度的容器底部 */
    .mobile-bottom-nav {
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: 55px;
        background: #000; 
        border-top: 1px solid rgba(255,255,255,0.1);
        display: flex; justify-content: space-between; align-items: center;
        z-index: 1000; 
        padding: 0 10px;
        box-sizing: content-box;
    }
    .mobile-bottom-nav .nav-item {
        flex: 1; height: 100%; display: flex; align-items: center; justify-content: center;
        color: #aaa; text-decoration: none; font-size: 15px; font-weight: 600;
    }
    .mobile-bottom-nav .nav-item.active { color: #fff; }

    /* 创作按钮 */
    .create-wrapper {
        display: flex; align-items: center; justify-content: center; height: 100%;
    }
    #mobile-create-btn {
        display: flex !important; 
    }
    .create-btn-tiktok {
        position: relative;
        width: 45px !important; height: 30px !important; min-width: 45px;
        background: linear-gradient(90deg, #00f2ea 0%, #ff0050 100%);
        border-radius: 8px;
        display: flex; justify-content: center; align-items: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }
    .create-btn-tiktok::after {
        content: ''; display: block; position: absolute;
        left: 3px; right: 3px; top: 0; bottom: 0;
        background: #ffffff !important; border-radius: 6px;
        z-index: 1;
    }
    .create-btn-tiktok i {
        position: relative; z-index: 10;
        color: #000000 !important; font-weight: 900;
        font-size: 20px; margin: 0; line-height: 1;
    }
}