/* AIWriteX 主样式文件 - 核心变量和布局 */    
:root {    
    /* 统一的布局变量 */    
    --sidebar-width: 200px;    
    --header-height: 60px;    
    --footer-height: 40px;
    --content-bottom-padding: 20px; 
    --sidebar-bottom-padding: 0;
}    
    
/* 基础重置 */    
* {    
    margin: 0;    
    padding: 0;    
    box-sizing: border-box;    
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;    
}    
    
body {    
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;    
    background-color: var(--background-color);    
    color: var(--text-primary);    
    line-height: 1.6;    
    overflow: hidden;    
}    
    
/* 应用容器 */    
.app-container {    
    display: grid;    
    grid-template-rows: var(--header-height) 1fr var(--footer-height);    
    grid-template-columns: var(--sidebar-width) 1fr;    
    grid-template-areas:    
        "header header"    
        "sidebar main"    
        "footer footer";    
    height: 100vh;    
    width: 100vw;    
    transition: all 0.3s ease;    
}    
    
/* 主内容区样式 */  
.app-main {  
    grid-area: main;  
    background: var(--background-color);  
    overflow: hidden;  
    position: relative;  
    transition: all 0.3s ease;  
}  
  
.view-content {  
    height: 100%;  
    padding: 10px;  
    overflow-y: auto;  
    opacity: 0;  
    transform: translateX(10px);  
    transition: opacity 0.2s ease, transform 0.2s ease;  
    display: none;  
}  

#config-manager-view.view-content {  
    overflow: hidden;  
    padding: 0;
    content-visibility: auto;  
    contain-intrinsic-size: 0 800px;   
} 

#template-manager-view.view-content {  
    overflow: hidden;  
    padding: 0;  
    content-visibility: auto;  
    contain-intrinsic-size: 0 800px;  
}

#article-manager-view.view-content {  
    overflow: hidden;  
    padding: 0;  
    content-visibility: auto;  
    contain-intrinsic-size: 0 800px;  
}  

#creative-workshop-view.view-content {  
    overflow: hidden;  
    padding: 0;  
    content-visibility: auto;  
    contain-intrinsic-size: 0 800px;  
}

.view-content.show {  
    display: block;  
}  
  
.view-content.active {  
    opacity: 1;  
    transform: translateX(0);  
}   
    
/* 滚动条样式 */    
::-webkit-scrollbar {    
    width: 6px;    
    height: 6px;    
}    
    
::-webkit-scrollbar-track {    
    background: var(--background-color);    
}    
    
::-webkit-scrollbar-thumb {    
    background: var(--border-color);    
    border-radius: 3px;    
}    
    
::-webkit-scrollbar-thumb:hover {    
    background: var(--secondary-color);    
}    
    
/* 模式切换动画 */    
.app-container,    
.sidebar,    
.app-main {    
    transition: all 0.3s ease;    
}