/* ============================================
   BakalAI - Layout only, all widgets from 98.css
   ============================================ */

body {
    background: #008080;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Desktop area */
.desktop {
    min-height: 100vh;
    padding: 20px;
    padding-bottom: 44px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.desktop-center {
    min-height: 100vh;
    padding: 20px;
    padding-bottom: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Window widths */
.window-sm { width: 400px; max-width: 100%; }
.window-md { width: 640px; max-width: 100%; }
.window-lg { width: 960px; max-width: 100%; }

/* Modal overlay (no 98.css equivalent — just positioning) */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 900;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-window { width: 540px; max-width: 95vw; max-height: 85vh; }
.modal-window .window-body { overflow-y: auto; max-height: calc(85vh - 30px); }

/* Tab panel toggling — hidden attribute enforced */
[role="tabpanel"][hidden] { display: none !important; }

/* Utility */
.hidden { display: none !important; }

/* Responsive */
@media (max-width: 640px) {
    .desktop, .desktop-center { padding: 8px; padding-bottom: 44px; }
}