body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: sans-serif;
    background-color: #1e1e1e;
    color: #d4d4d4;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent body scroll */
}

#editor-container {
    width: 100%;
    flex-grow: 1; /* Allow editor to take available space */
    overflow: hidden; /* Monaco editor handles its own scrolling */
}

#extra-keys {
    width: 100%;
    height: 100px; /* Increased height for better touch targets */
    background-color: #333;
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    flex-shrink: 0; /* Prevent shrinking */
}

.key-row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px; /* Increased row height */
    padding-left: 5px;
}

.key, #toggle-keyboard, #language-select, #undo-button, #redo-button {
    height: 40px; /* Larger touch targets */
    background-color: #555;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px; /* Larger text */
    touch-action: manipulation;
    flex: 1;
    text-align: center;
    margin: 0 2px;
}

.key.modifier.active {
    background-color: #007acc;
}

#file-io {
    width: 100%;
    height: 40px; /* Fixed height for file I/O bar */
    background-color: #252526;
    display: flex;
    align-items: center;
    padding: 0 10px;
    flex-shrink: 0; /* Prevent shrinking */
}

#log-output {
    flex: 2;
    margin-right: 10px;
    height: 30px;
}

#code-input {
    flex: 2;
    margin-right: 10px;
    height: 30px;
}

#load-code, #copy-code, #clear-code {
    height: 30px;
    background-color: #007acc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 0 10px; /* Ensure consistent padding */
    flex: 1; /* Allow buttons to share space */
    margin: 0 2px;
}

#clear-code {
    background-color: #cc0000;
}