* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container {
    display: grid;
    width: 100%;
    height: 100%;
    /* Default grid for wide screens: 2x2 layout */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "chat viewer"
        "controls editor";
}

/* Panel sizing and positioning */
.chat-section {
    grid-area: chat;
    height: 100%;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.three-section {
    grid-area: viewer;
    height: 100%;
    border-bottom: 1px solid #444;
}

.controls-section {
    grid-area: controls;
    height: 100%;
}

.editor-section {
    grid-area: editor;
    height: 100%;
    border-left: 1px solid #444;
}

/* Responsive layout for narrow screens (mobile) */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "chat"
            "viewer"
            "controls"
            "editor";
    }
    
    .chat-section,
    .three-section,
    .controls-section,
    .editor-section {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ccc;
    }
    
    /* Adjust heights for mobile */
    .chat-section {
        height: 30vh;
    }
    
    .three-section {
        height: 30vh;
    }
    
    .controls-section {
        height: 15vh;
    }
    
    .editor-section {
        height: 25vh;
    }
}

/* TODO: Add theme support (light/dark mode) */
/* TODO: Add accessibility improvements */