/* assets/css/components/panel.css (自适应修正版) */

/* --- 4. 面板通用样式 --- */
.side-panel, .main-panel { 
    background: var(--panel-bg); 
    border: 1px solid var(--panel-border); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    padding: 25px; 
    position: relative; 
    clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); 
    animation: panel-fade-in 0.8s backwards; 
    
    /* [关键修正] 使用flex布局管理面板内部的垂直空间 */
    display: flex; 
    flex-direction: column; 
    
    flex-shrink: 0; 
}

/* [关键修正] 使用 flexbox 的 grow, shrink, basis 定义面板宽度 */
.left-panel {
    flex-basis: 300px; /* 基础宽度为300px */
    flex-shrink: 0; /* 不允许收缩 */
    animation-delay: 0.2s; 
}
.main-panel {
    flex-grow: 1; /* [核心] 占据所有剩余的可用空间 */
    animation-delay: 0.4s; 
    overflow: hidden; 
    min-width: 0; 
}
.right-panel {
    flex-basis: 300px; /* 基础宽度为300px */
    flex-shrink: 0; /* 不允许收缩 */
    animation-delay: 0.6s;
}

/* ... 面板hover效果等不变 ... */
@keyframes panel-fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.side-panel::before, .main-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; box-shadow: 0 0 15px var(--primary-glow); opacity: 0; transition: opacity 0.3s ease; clip-path: inherit; }
.side-panel:hover::before, .main-panel:hover::before { opacity: 0.5; }

.panel-title { 
    font-family: var(--font-secondary); 
    font-size: 1.2rem; 
    color: var(--primary-glow); 
    text-shadow: 0 0 5px var(--primary-glow); 
    margin-bottom: 25px; 
    letter-spacing: 2px; 
    flex-shrink: 0; /* 标题高度固定，不参与flex空间计算 */
}

.view-container { 
    display: none; 
    flex-direction: column; 
    width: 100%; 
    height: 100%; 
    flex-grow: 1; 
    min-height: 0; /* [关键修正] flexbox hack，允许子元素正确计算滚动 */
}
.view-container.active { 
    display: flex; 
}

/* --- 9. 内容页面通用样式 (部分) --- */
/* [关键修正] 这是实现内部滚动的核心 */
.scrollable-content { 
    flex-grow: 1; /* 占据 view-container 内所有剩余的垂直空间 */
    overflow-y: auto; /* 当内容超出时，自动显示垂直滚动条 */
    min-height: 0; /* [关键修正] flexbox hack，确保在内容过多时可以收缩并出现滚动条 */
}

.full-panel-loader { 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    gap: 15px; padding: 50px; color: var(--primary-glow); font-family: var(--font-secondary); 
    flex-grow: 1; 
}
.empty-state, .error-state { padding: 40px; text-align: center; color: var(--text-dim); }
.error-state { color: var(--secondary-glow); }