.toolbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 20px;background:#fff;border-bottom:1px solid #eee;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
    flex-wrap:wrap;               
    gap:10px;                     
}
.title{
    display:flex;align-items:center;gap:12px;flex:1;min-width:0;  
}
.logo{height:30px;border-radius:4px;flex-shrink:0}
.title h1{margin:0;font-size:18px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-return{
    display:flex;align-items:center;gap:6px;color:#666;text-decoration:none;
    padding:6px 12px;border:1px solid #ddd;border-radius:4px;font-size:13px;
    transition:all .2s;white-space:nowrap;flex-shrink:0;
}
.btn-return:hover{background:#f5f5f5}
.btn-return svg{width:16px;height:16px;fill:currentColor}


.workspace{
    display:flex;
    height:calc(100vh - var(--toolbar-height, 60px));  
    position:relative;
}

#app{
    display:flex;
    flex-direction:column;
    height:100vh;height:100dvh;  
}
.toolbar{flex:0 0 auto}         
.workspace{flex:1 1 auto;overflow:hidden}  


.sidebar{
    width:180px;background:#f8f9fa;border-right:1px solid #eee;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;  
}
.main{flex:1;background:#fff;position:relative;overflow:hidden}
.main iframe{width:100%;height:100%;border:none}

/* ==================== 移动端 ==================== */
@media (max-width: 768px) {
    .toolbar { padding: 10px 15px; }
    .title h1 { font-size: 16px; }

    .workspace { flex-direction: column; }

    .sidebar {
        width: 100%;
        max-height: 120px;
        overflow-x: auto !important;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid #eee;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    .list {
        display: flex;
        width: max-content;           
        min-width: 100%;              
        padding: 8px 12px;
        gap: 0;
    }

    .site-item {
        min-width: 120px;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        border-bottom: none;
        border-right: 1px solid #eee;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .site-item:last-child { border-right: none; }

    .site-item img {
        width: 28px; height: 28px;
        margin: 0 8px 0 0 !important;
    }
    .site-text {
        flex-direction: row !important;
        justify-content: center;
        gap: 6px;
        flex: 1;
    }
    .site-name { font-size: 13px; font-weight: 500; }
    .site-link svg { width: 11px; height: 11px; }


    .sidebar::after {
        content: "";
        position: absolute;
        right: 0; top: 0; bottom: 0;
        width: 30px;
        background: linear-gradient(to left, #f8f9fa, transparent);
        pointer-events: none;
        z-index: 2;
    }
}


.site-item{display:flex;align-items:center;padding:12px 15px;cursor:pointer;transition:background .2s;border-bottom:1px solid #f0f0f0;position:relative}
.site-item:hover,.site-item.active{background:#e9ecef}
.site-item img{width:32px;height:32px;border-radius:4px;margin-right:10px;flex-shrink:0}
.site-text{flex:1;display:flex;align-items:center;justify-content:space-between}
.site-name{font-size:14px;color:#333;margin:0}
.site-link{display:flex;align-items:center;color:#666;text-decoration:none;font-size:12px}
.site-link svg{width:12px;height:12px;fill:currentColor}

.pane-body{flex:1;position:relative}
.skeleton-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;z-index:5}
.loading-icon-img,.loading-icon-fallback{width:48px;height:48px;opacity:0.6}
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:s 1.5s infinite;border-radius:4px}
@keyframes s{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-avatar{width:32px;height:32px}
.skeleton-line{height:14px}
.w-120{width:120px}.w-80{width:80px}

html,body,#app,.workspace,.main,.pane,.pane-body,.pane-body iframe{
    height:100%!important;
    height:100dvh!important;   /* 关键：兼容 iOS Safari 动态地址栏 */
    margin:0!important;padding:0!important;
}
iframe{border:none!important;overflow:hidden!important}

/* 防止某些主题加的 padding/margin */
body.iframe-plus-fullscreen *{
    box-sizing:border-box!important;
}
/* iframe-plus-style.css - 主要改动部分 */

/* ==================== 新的加载遮罩 ==================== */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.4s ease;
}

.loading-center {
    text-align: center;
}

.breathing-icon {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    object-fit: contain;
    animation: breathing 2.2s ease-in-out infinite;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.breathing-icon.fallback {
    width: 100px;
    height: 100px;
    padding: 10px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
}

@keyframes breathing {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.12); opacity: 1; }
}


.site-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.25s ease;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.site-item:hover {
    background: #f0f4f8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 1;
}

.site-item.active {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    font-weight: 600;
    color: #0d47a1;
}

.site-item img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    margin-right: 12px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.site-item:hover img {
    transform: scale(1.08);
}

/* shimmer 骨架屏（优化版） */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 加强 v-cloak */
[v-cloak],
[v-cloak] * {
    display: none !important;
}

/* PC 下拉菜单 */
.pc-dropdown {
    width: 100%;
    padding: 12px 40px 12px 16px;
    font-size: 15px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 16px center;
    background-size: 12px;
    margin: 12px 0;
    cursor: pointer;
    appearance: none;
}

/* PC 垂直列表 */
.pc-list {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}


.mobile-list-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-list {
    display: flex;
    width: max-content;
    min-width: 100%;
    padding: 8px 12px;
    gap: 0;
}

.mobile-list .site-item {
    min-width: 120px;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-bottom: none;
    border-right: 1px solid #eee;
    white-space: nowrap;
    flex-shrink: 0;
}

.mobile-list .site-item:last-child {
    border-right: none;
}

.mobile-list .site-item img {
    width: 32px;
    height: 32px;
    margin: 0 0 6px 0 !important;
}

.mobile-list .site-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
}

.mobile-list .site-name {
    font-size: 13px;
    font-weight: 500;
}

.mobile-list .site-link svg {
    width: 14px;
    height: 14px;
}


@media (min-width: 769px) {
    .mobile-list-wrapper {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .pc-dropdown,
    .pc-list {
        display: none !important;
    }
    
    .sidebar {
        max-height: 120px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid #eee;
    }
}

    .pc-dropdown,
    .pc-list {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .pc-dropdown {
        display: block;
    }
}
/* 桌面端强制隐藏移动端横向列表 */
@media (min-width: 769px) {
    .mobile-list-wrapper {
        display: none !important;
    }
    
    /* 确保下拉菜单显示 */
    .pc-dropdown {
        display: block !important;
    }
    
    /* 项目少时显示垂直列表 */
    .pc-list {
        display: block !important;
    }
}

/* 移动端强制隐藏 PC 部分 */
@media (max-width: 768px) {
    .pc-dropdown,
    .pc-list {
        display: none !important;
    }
    
    .mobile-list-wrapper {
        display: block !important;
    }
}