/**
 * 主页框架样式
 * 独立的主页布局框架，确保不被其他样式影响
 * 符合项目工程框架规范
 * 
 * 注意：本文件包含所有主页框架相关样式，使用高优先级选择器确保样式独立性
 * 其他文件（layout.css、style.css）中的框架样式已迁移到本文件
 */

/* ==================== 主页容器框架 ==================== */

/**
 * 主容器：去掉边距，保留 margin/padding 重置（缩放已还原为 100%，无需 overflow/height 限制）
 */
html:has(body > .container),
body:has(> .container) {
    margin: 0;
    padding: 0;
}

/**
 * 主容器：默认 100% 缩放，无 transform/zoom
 */
body > .container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: var(--spacing-sm);
    background: var(--bg-primary, #0a0a0a);
    border-radius: 0;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: none;
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
    isolation: isolate;
}

/**
 * 主内容区域
 * 用 flex:1 填满容器剩余高度，避免用 100vh 锁定导致缩放后底部留黑（原 100vh 与容器实际高度不一致）
 */
body > .container > main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0; /* flex 子项可收缩 */
    overflow: hidden;
    position: relative;
}

/* ==================== 头部区域框架 ==================== */

/**
 * 搜索/头部区域
 * 整合了 style.css 中的 .search-section 样式
 */
body > .container > main > .search-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
    position: relative;
    z-index: 10002;
    gap: var(--spacing-sm);
    padding: 4px 0;
}

/**
 * Logo区域
 * 整合了 style.css 中的 .header-logo 样式
 */
body > .container > main > .search-section > .header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: var(--spacing-md);
}

body > .container > main > .search-section > .header-logo > .header-logo-img {
    height: 40px;
    width: auto;
    max-height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

/**
 * 右侧操作区域
 * 整合了 style.css 中的 .header-right-section 样式
 */
body > .container > main > .search-section > .header-right-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
    flex-shrink: 0;
}

/* ==================== 主布局框架 ==================== */

/**
 * 主布局容器
 * 包含导航栏和面板容器
 */
body > .container > main > .main-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* ==================== 导航栏框架 ==================== */

/**
 * 顶部 Dock 导航栏（Logo 右侧，参与头部 flex 布局）
 * 具体尺寸与样式由 sidebar.css 控制
 */
body > .container > main > .search-section > .sidebar-navigation {
    flex-shrink: 0;
    z-index: 100;
}

/* ==================== 面板容器框架 ==================== */

/**
 * 面板容器区域
 * 所有面板的父容器
 */
body > .container > main > .main-layout > .panel-container {
    flex: 1;
    width: 100%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: var(--bg-primary, #0a0a0a);
    display: flex;
    flex-direction: column;
}

/**
 * 面板内容
 * 单个面板的基础样式
 */
body > .container > main > .main-layout > .panel-container > .panel-content {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/**
 * 激活的面板
 */
body > .container > main > .main-layout > .panel-container > .panel-content.active {
    display: flex;
    z-index: 1;
}

/**
 * 占位面板样式
 */
body > .container > main > .main-layout > .panel-container > .panel-content.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #b3b3b3);
    font-size: 16px;
}

/* 移动端/平板响应式已移除（项目仅支持 Windows 桌面端） */

/* ==================== 样式隔离 ==================== */

/**
 * 使用CSS变量确保样式可配置
 * 这些变量应该在base.css中定义
 */
body > .container {
    /* 确保主页框架样式优先级 */
    --main-frame-bg-primary: var(--bg-primary, #0a0a0a);
    --main-frame-bg-secondary: var(--bg-secondary, #1a1a1a);
    --main-frame-border: var(--border-primary, #333333);
    --main-frame-text: var(--text-primary, #ffffff);
}

/**
 * 防止其他样式影响主页框架
 * 使用高优先级选择器
 */
body > .container > main > .main-layout > .panel-container > .panel-content {
    /* 重置可能的外部样式 */
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

/* ==================== 性能优化 ==================== */

/**
 * 使用will-change优化动画性能
 */
body > .container > main > .main-layout > .panel-container > .panel-content {
    will-change: display, z-index;
}

/**
 * 使用contain优化渲染性能
 */
body > .container > main > .main-layout > .panel-container {
    contain: layout style paint;
}

body > .container > main > .main-layout > .sidebar-navigation {
    contain: layout style paint;
}