/* css/pages/viewer-page.css */

:root {
    --header-height: 65px;
}

/* --- THEME SUPPORT --- */
body.dark-mode {
    --primary-text: #E2E8F0; --secondary-text: #A0AEC0; --subtle-text: #718096;
    --accent-blue: #63B3ED; --accent-blue-light: #2A4365; --accent-blue-border: #4A5568;
    --background-color: #1A202C; --surface-color: #2D3748; --border-color: #4A5568;
}
body, .side-panel-container, .mobile-side-panel-container { transition: background-color 0.3s, border-color 0.3s; }
.mobile-side-panel-container { transition-property: background-color, border-color, height; transition-duration: 0.3s, 0.3s, 0.4s; }


/* --- Base Layout --- */
.viewer-container { display: flex; height: calc(100vh - var(--header-height) - 1px); }
.main-text-panel { flex: 1; overflow-y: auto; scroll-behavior: smooth; }

/* Resizer */
.resizer { flex-basis: 6px; flex-shrink: 0; background: transparent; cursor: col-resize; z-index: 10; transition: background-color 0.2s ease-out; position: relative; }
.resizer:hover, .resizer.is-resizing { background-color: var(--accent-blue); }
.resizer::before { content: ''; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; }


/* --- Mobile Layout --- */
.mobile-side-panel-container { display: none; }

@media (max-width: 800px) {
    .viewer-container { display: block; } 
    .side-panel-container, .resizer { display: none !important; }
    
    .main-text-panel { height: 100%; padding-bottom: 80px; box-sizing: border-box; }
    
    .mobile-side-panel-container { display: flex; flex-direction: column; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 60px; max-height: 85vh; background-color: var(--surface-color); box-shadow: 0 -5px 20px rgba(0,0,0,0.1); border-radius: 16px 16px 0 0; z-index: 500; }
    
    /* Removed obsolete .panel-handle and .panel-content-scroller styles */
}