/* ========== 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;
}


/* ========== 子页面适配（帖子详情、用户主页等） ========== */
.ig-sub-page,
.ig-detail-page,
.ig-profile-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.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 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.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;
}