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;
    overflow: hidden;
    position: relative;
}

.cm-editor {
    height: 100%;
}

.cm-scroller {
    font-family: 'Fira Code', monospace;
}


#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;
    transition: background-color 0.1s, transform 0.05s;
}

.key:active, #toggle-keyboard:active, #undo-button:active, #redo-button:active {
    background-color: #888;
    transform: scale(0.95);
}

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

.key.modifier.active:active {
    background-color: #005a9e;
    transform: scale(0.95);
}

#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: 5px;
    height: 30px;
    background-color: #1e1e1e;
    color: #888;
    border: 1px solid #333;
    border-radius: 3px;
    font-size: 10px;
}

#paste-code, #copy-code, #save-code, #download-code, #clear-code {
    height: 30px;
    background-color: #007acc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 0 5px;
    font-size: 12px;
    flex: 1;
    margin: 0 1px;
    min-width: 0; /* Allow buttons to shrink below content width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.1s, transform 0.05s;
}

#paste-code:active, #copy-code:active, #save-code:active, #download-code:active {
    background-color: #005a9e;
    transform: scale(0.95);
}

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

#clear-code:active {
    background-color: #990000;
    transform: scale(0.95);
}