/* ========== Instagram 全屏适配修复 ========== */

/* 容器全屏定位 - 参照同人墙做法 */
#instagramApp {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    height: 100dvh; /* 动态视口高度 */
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

/* 兼容不支持 dvh 的浏览器 */
@supports not (height: 100dvh) {
    #instagramApp {
        height: auto;
        height: -webkit-fill-available;
    }
}

/* 主容器 flex 布局 */
.instagram-app {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* 顶部导航栏 - 固定高度不压缩 */
.ig-header {
    flex-shrink: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid #efefef;
    /* iOS 安全区域 - 刘海适配 */
    padding-top: env(safe-area-inset-top, 0);
    padding-top: constant(safe-area-inset-top, 0); /* iOS < 11.2 */
}

/* 如果有刘海增加顶部高度 */
@supports (padding-top: env(safe-area-inset-top)) {
    .ig-header {
        height: calc(44px + env(safe-area-inset-top, 0));
    }
}

/* 内容区 - 自适应填充 + 内部滚动 */
.ig-content,
.ig-feed,
.ig-page {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
    overscroll-behavior: contain; /* 防止滚动穿透 */
}

/* 内容区底部留白避免被导航栏遮挡 */
.ig-content,
.ig-feed {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 20px));
}

/* ========== 底部导航栏统一修复 ========== */
/* 统一所有底部导航选择器 */
.ig-nav,
.ig-bottom-nav,
.ig-nav-bar {
    position: fixed !important;           /* 固定定位不随内容滚动 */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-shrink: 0;
    min-height: 50px;                     /* 最小高度 */
    height: auto;                         /* 自动高度适应安全区 */
    background: #fff;
    border-top: 1px solid #efefef;
    justify-content: space-around;
    align-items: center;
    z-index: 9999 !important;             /* 确保在最上层 */

    /* iOS 安全区域 - 用 padding 撑开而非改 height */
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-bottom: constant(safe-area-inset-bottom, 0);
}

/* 内容区底部留白 - 必须大于导航栏实际高度 */
.ig-content,
.ig-feed,
.ig-tab-page {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 20px)) !important;
}

/* 帖子列表额外留白 */
.ig-post-list,
.ig-search-grid {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 20px)) !important;
}


/* ========== 子页面适配（帖子详情、用户主页等） ========== */



/* 修改后：强行拉满无视父级 padding */
.ig-sub-page,
.ig-detail-page,
.ig-profile-page {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    /* 核心修改：强制让底部对齐屏幕边缘而不是容器边缘 */
    bottom: 0 !important;

    width: 100vw !important; /* 强制屏幕宽度 */

    /* 核心修改：使用 auto 配合 top/bottom 拉伸或者强行覆盖高度 */
    height: auto !important;
    height: 100dvh !important;

    background: #fff !important;
    z-index: 20000 !important;

    /* 消除基础文件可能带来的内边距影响 */
    padding: 0 !important;
    margin: 0 !important;

    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}



.ig-sub-header {
    flex-shrink: 0;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid #efefef;
    padding-top: env(safe-area-inset-top, 0);
}

@supports (padding-top: env(safe-area-inset-top)) {
    .ig-sub-header {
        height: calc(44px + env(safe-area-inset-top, 0));
    }
}

.ig-sub-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* ========== Stories 区域适配 ========== */
.ig-stories {
    flex-shrink: 0;
    height: 100px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-bottom: 1px solid #efefef;
    -webkit-overflow-scrolling: touch;
}

/* ========== 模态框适配 ========== */
.ig-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ig-modal-content {
    width: 100%;
    max-height: 90%;
    background: #fff;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* ========== 修复滚动问题 ========== */
/* 防止 iOS Safari 橡皮筋效果导致的布局问题 */
#instagramApp {
    position: fixed; /* 重复声明确保优先级 */
    touch-action: pan-y;
}

/* 帖子列表容器 */
.ig-post-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 20px;
}

/* ========== 横屏适配 ========== */
@media (orientation: landscape) {
    .ig-nav,
    .ig-bottom-nav {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }
}

/* Instagram App Styles */
.instagram-app {
    background-color: #fff;
    color: #262626;
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ig-header {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #dbdbdb;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}

.ig-logo {
    font-family: 'Gaegu', cursive; /* Using Gaegu as a placeholder for script font */
    font-size: 24px;
    font-weight: bold;
}

.ig-header-actions {
    display: flex;
    gap: 20px;
    font-size: 22px;
}

.ig-content {
    flex: 1;
    overflow-y: auto;
}

.ig-tab-page {
    display: none;
}

.ig-tab-page.active {
    display: block;
}

/* Post Item */
.ig-post {
    margin-bottom: 15px;
    border-bottom: 1px solid #efefef;
}

.ig-post-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
}

.ig-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #eee;
    margin-right: 10px;
    background-size: cover;
    background-position: center;
    border: 1px solid #dbdbdb;
}

.ig-username {
    font-weight: 600;
    font-size: 14px;
    flex: 1;
}



.ig-post-img {
    width: 100%;
    min-height: 300px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fafafa;        /* 浅灰色背景不是黑色 */
    position: relative;
}





.ig-post-actions {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    font-size: 24px;
}

.ig-action-left {
    display: flex;
    gap: 15px;
}

.ig-likes {
    padding: 0 15px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}

.ig-caption {
    padding: 0 15px;
    font-size: 14px;
    margin-bottom: 5px;
}

.ig-caption span {
    font-weight: 600;
    margin-right: 5px;
}

.ig-time {
    padding: 0 15px 10px;
    font-size: 10px;
    color: #8e8e8e;
    text-transform: uppercase;
}

/* Search Grid */
.ig-search-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding-bottom: 100px; /* Add padding for bottom nav */
}

.ig-grid-item {
    width: 100%;
    aspect-ratio: 1;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* Profile */
.ig-profile-header {
    padding: 20px 15px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.ig-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    border: 1px solid #dbdbdb;
}

.ig-profile-stats {
    flex: 1;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.ig-stat-num {
    font-weight: 600;
    font-size: 16px;
    display: block;
}

.ig-stat-label {
    font-size: 12px;
    color: #262626;
}

.ig-profile-bio {
    padding: 0 15px 15px;
    font-size: 14px;
}

.ig-profile-name {
    font-weight: 600;
}

.ig-edit-profile {
    margin: 0 15px 15px;
    padding: 5px;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

/* Bottom Nav */
.ig-nav-bar {
    height: 48px;
    border-top: 1px solid #dbdbdb;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    font-size: 24px;
}

.ig-nav-item {
    cursor: pointer;
}

.ig-nav-item.active {
    color: #000;
}

/* Create Post Modal */
.ig-create-modal
 {
    position: fixed !important;       /* 强制固定定位 */
    top: 0
;
    left: 0
;
    width: 100%
;
    height: 100%
;
    z-index: 10001 !important;        /* 层级必须极高盖住导航栏的9999 */
    background: #fff;                 /* 必须有背景色不然是透明的 */
    display
: flex;
    flex-direction
: column;
    overflow: hidden;                 /* 防止内部撑开 */
}

.ig-create-header {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #dbdbdb;
    font-weight: 600;
}

.ig-create-preview {
    width: 100%;
    aspect-ratio: unset;                      /* 移除固定宽高比 */
    height: calc(100vh - 44px - 48px - 100px); /* 视口高度 减去 header高度 减去 底部导航高度 减去 输入区域预估高度 */
    background-color: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8e8e8e;
    font-size: 40px;
    cursor: pointer;
    background-size: cover;
    background-position: center;
}


.ig-create-caption {
    padding: 15px;
    border: none;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    flex: 1;
    outline: none;
}

/* Text Post Mode */

/* Text Post Mode */
.ig-text-mode {
    width: 100%;
    min-height: 300px;
    max-height: 600px;
    display: flex;
    justify-content: center;
    align-items: flex-start;        /* 改成顶部对齐防止上下溢出 */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 40px 20px;             /* 上下留足空间 */
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: break-word;
    overflow-y: auto;               /* 内容太多时可滚动 */
    line-height: 1.5;
}


/* New Styles */
#igFilters {
    scrollbar-width: none;
}
#igFilters::-webkit-scrollbar {
    display: none;
}
/* ========== 终极修复：智能隐藏导航栏 ========== */
/*
   原理：不再尝试覆盖而是检测到子页面显示时，
   直接把底部导航栏“变没”。
*/

/* 检测：如果 IG 容器内有任何显示的子页面 */
#instagramApp:has(.ig-detail-page[style*="flex"]),
#instagramApp:has(.ig-detail-page[style*="block"]),
#instagramApp:has(.ig-sub-page[style*="flex"]),
#instagramApp:has(.ig-sub-page[style*="block"]),
#instagramApp:has(.ig-profile-page[style*="flex"]),
#instagramApp:has(.ig-profile-page[style*="block"]),
/* 兼容 body 级别的检测 */
body:has(.ig-detail-page[style*="flex"]),
body:has(.ig-sub-page[style*="flex"]) {

    /* 动作：让底下所有的导航栏全部隐藏 */
    .ig-nav,
    .ig-bottom-nav,
    .ig-nav-bar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
}
/* ========== 核心修复：解除层级陷阱 + 智能隐藏 ========== */

/* 1. 拆掉笼子：强制清除所有可能导致“子页面被困住”的父级属性 */
#instagramApp,
.instagram-app,
.ig-content,
.ig-feed,
.ig-page {
    /* 核心：这几个属性会改变 fixed 的基准点必须清除！ */
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    contain: none !important;
    will-change: auto !important;
}

/* 2. 增强雷达：只要检测到子页面处于“非隐藏”状态立马干掉导航栏 */
/* 兼容各种显示方式：flex, block, active类, 或者干脆就是 visible */
body:has(.ig-detail-page:not([style*="none"])),
body:has(.ig-sub-page:not([style*="none"])),
body:has(.ig-profile-page:not([style*="none"])),
body:has(.ig-detail-page.active),
body:has(.ig-sub-page.active),
body:has(.ig-detail-page[style*="flex"]),
body:has(.ig-detail-page[style*="block"]) {

    /* 找到导航栏强制隐藏 */
    .ig-nav,
    .ig-bottom-nav,
    .ig-nav-bar {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: -1 !important;

        /* 双保险：如果在某些结构下 display 失效就把原本的高度吞掉 */
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
}