/* Overlay for translation input feedback */
#input-display {
    position: relative;
}

#input-display input#translate-input {
    position: relative;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(0,0,0,0.01); /* nearly invisible text to align caret */
    caret-color: black; /* Keep caret visible */
    z-index: 2;
    padding: 15px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.0em;
    letter-spacing: 8px;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
    width: 95%;
    max-width: 95%;
}

#input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.0em;
    letter-spacing: 8px;
    line-height: 1.2;
    padding: 15px;
    box-sizing: border-box;
    pointer-events: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;
    color: #4682B4;
    z-index: 1;
}

.incorrect-letter {
    color: red;
}

/* --- Keyboard Key Styling (REVISED for resizing) --- */
.key {
    /* Flex properties for resizing */
    flex: 1 1 0; /* Grow:1, Shrink:1, Basis:0 - Allow equal sharing */
    /* Removed aspect-ratio to allow more flexible sizing */
    /* Size constraints */
    min-width: 30px; /* Prevent collapsing */
    max-width: 55px; /* Prevent becoming too large */
    height: clamp(32px, 9vw, 55px); /* Consistent height */
    /* Display & Alignment */
    display: inline-flex; /* Allow flex alignment inside */
    justify-content: center;
    align-items: center;
    /* Visuals */
    padding: 5px; /* Adjust padding as needed */
    font-size: clamp(1rem, 3.5vw, 1.3rem); /* Responsive font size */
    border-radius: 38px; /* Consistent rounded corners */
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    font-weight: 600;
    /* Transitions & Interaction */
    cursor: pointer;
    transition: all 0.2s ease; /* Faster transition for keys */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    position: relative;
    top: 0;
    line-height: 1; /* Ensure text centers vertically */
    text-align: center;
    /* overflow: hidden; /* REMOVED: This was hiding the absolute positioned pop-up */
}

.key.special { /* Backspace */
    flex-grow: 1.8; /* Take up more space than regular keys */
    font-size: 15px;
    aspect-ratio: unset; /* Override: Not square */
    min-height: 30px; /* Match min-width of regular keys */
    /* Explicit height might be needed if content doesn't push it enough */
     height: clamp(32px, 9vw, 55px); /* Match height based on typical key size */
     /* background-color: #adb5bd; Color for special keys */
     /* color: white; */
    background-color: #87CEFA; color: #191970; /* Keeping original colors */
}

.key.vowel {
    background-color: #FFFACD; color: #FF8C00;
    border: 2px solid #FFD700; font-weight: bold;
}

.keyboard-label.vowel-label {
    font-size: 1em;
    color: floralwhite;
    /* margin-bottom: 5px; */
    margin-top: -5px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    letter-spacing: 3px;
}

/* --- Specific Key Styling --- */
.keyboard-row.punctuation-row .key.space-key {
    flex-grow: 20; /* Keep the wide size */
    aspect-ratio: unset; /* Keep it rectangular */
    height: clamp(32px, 9vw, 55px); /* Match height of other keys */
    border-radius: 10px; /* Make it less rounded */
    font-size: 1rem; /* Adjust font size for 'Space' label */
    background-color: #e0e0e0; /* Optional: Change background color */
    max-width: unset; /* Override max-width constraint */
}

.keyboard-row.punctuation-row .key.shift-key {
    flex-grow: 4; /* Make shift key slightly wider */
    aspect-ratio: unset; /* Make it rectangular */
    height: clamp(32px, 9vw, 55px); /* Match height of other keys */
    border-radius: 10px; /* Make it less rounded */
    font-size: 1rem; /* Adjust font size for 'Shift' label */
    background-color: #e0e0e0; /* Change background color */
    max-width: unset; /* Override max-width constraint */
}


/* --- Keyboard Container --- */
#keyboard {
     /* margin-top: 25px; Removed */
     user-select: none;
     /* width: 100%; Replaced by 100vw */
     /* max-width: 650px; Removed */
     /* padding: 10px 5px; Replaced */
     padding: 10px 10px; /* Adjusted padding */
     display: flex;
     flex-direction: column;
     align-items: center; /* Center rows within the keyboard container */
     position: fixed; /* Make it float */
     bottom: 0; /* Position at the bottom */
     left: 0; /* Position at the left */
     width: 100vw; /* Full viewport width */
     /* background-color: #f0f0f0; */ /* Add background */
     z-index: 1000; /* Ensure it's on top */
     box-sizing: border-box; /* Include padding in width */
}

#keyboard.hidden {
    display: none !important;
}
.keyboard-row {
    display: flex;
    justify-content: center; /* Center keys within the row */
    align-items: stretch; /* Make keys same height */
    width: 100%; /* Row takes full width of keyboard container */
    margin-bottom: 8px;
    gap: 5px; /* Spacing between keys */
    /* flex-wrap: nowrap; /* Default, explicitly set */
    /* overflow: hidden; /* Hide overflow instead of scrolling */
}

/* --- Disabled States --- */
/* Combined disabled state for keys */
.key:disabled,
#keyboard.disabled .key {
    opacity: 0.5;
    pointer-events: none;
    transform: none;
    box-shadow: none;
    filter: grayscale(80%);
    cursor: not-allowed; /* Add explicit cursor */
    background: #E0E0E0 !important; /* Match general disabled style */
    color: #999 !important; /* Match general disabled style */
}

/* --- Hover States (only if not disabled) --- */
.key:not(:disabled):hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0,0,0,0.2);
}

/* --- Active States (only if not disabled) --- */
.key:not(:disabled):active {
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    filter: brightness(0.95);
}

/* --- Key Pop-up Styling --- */
.key-popup {
    position: absolute;
    bottom: calc(100% + 5px); /* Position above the key with 5px gap */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(50, 50, 50, 0.9); /* Dark semi-transparent background */
    color: white;
    padding: 24px 36px; /* Increased padding (3x) */
    border-radius: 12px; /* Slightly larger radius */
    font-size: 4.2em; /* Increased font size (3x) */
    font-weight: bold;
    white-space: nowrap; /* Prevent wrapping */
    z-index: 10; /* Ensure it's above the key */
    pointer-events: none; /* Don't interfere with clicks */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    /* Optional: Add a small triangle */
    /* display: none; /* Initially hidden - handled by JS */
}

.key-popup::after {
    content: '';
    position: absolute;
    top: 100%; /* Position below the popup */
    left: 50%;
    transform: translateX(-50%);
    border-width: 15px; /* Increased triangle size (3x) */
    border-style: solid;
    border-color: rgba(50, 50, 50, 0.9) transparent transparent transparent; /* Triangle pointing down */
}


/* --- Responsive Layout Adjustments for Keyboard --- */
@media (min-width: 950px) {
    /* #keyboard rules removed as they conflict with fixed positioning */

    #keyboard.hidden {
        /* flex: 0 !important; Removed as flex is no longer relevant */
        display: none !important;
    }

    /* When keyboard is hidden, make main-content take full width */
    .app-container {
        display: flex;
    }
    #keyboard.hidden ~ * {
        flex: 1 1 100% !important;
    }

    .app-container.keyboard-hidden .main-content {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Increase max key size slightly on larger screens */
    .key { max-width: 60px; }
    .key.special { height: clamp(35px, 6vw, 60px); } /* Adjust special key height */
 }

 @media (max-width: 380px) {
     /* Further reduce min/max key size on smallest screens */
     .key { min-width: 26px; max-width: 48px; }
     .key.special { min-height: 26px; height: clamp(28px, 9vw, 48px); }
     #keyboard { gap: 4px; } /* Reduce gap */
     .keyboard-row { gap: 4px; }
 }