/* Custom keyboard styles */

.keyboard {
    user-select: none;
    -webkit-user-select: none;
    width: 100%;
    max-width: 500px;
    margin-top: auto;
    background: #D1D5DB;
    padding: 6px 4px;
    border-radius: 0;
}

.keyboard-keys {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 4px;
}

/* Base key style */
.keyboard-key {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    border-radius: 5px;
    background: #E5E7EB;
    color: #1F2937;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}

.keyboard-key.active,
.keyboard-key:active {
    background: #C5C9D0;
    transform: scale(0.96);
}

/* Accent row (top) */
.keyboard-accent {
    background: #F3F4F6;
    font-size: 1rem;
}

/* Diacritic keys (^ ¨) */
.keyboard-diacritic {
    background: #F3F4F6;
}

.keyboard-diacritic-active {
    background: #93C5FD;
    color: #1E3A5F;
}

/* Shift key (Aa) */
.keyboard-shift {
    flex: 1.3;
    background: #D1D5DB;
    font-size: 0.9rem;
    font-weight: 600;
}

.keyboard-shift-active {
    background: #93C5FD;
    color: #1E3A5F;
}

/* Delete key (⌫) - orange */
.keyboard-delete {
    flex: 1.5;
    background: #F97316;
    color: white;
    font-size: 1.2rem;
}

.keyboard-delete.active,
.keyboard-delete:active {
    background: #EA580C;
}

/* Submit key (↵) - blue */
.keyboard-submit {
    flex: 1.5;
    background: #6366F1;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
}

.keyboard-submit.active,
.keyboard-submit:active {
    background: #4F46E5;
}

/* Space bar */
.keyboard-space {
    flex: 5;
    background: #E5E7EB;
    min-height: 44px;
}

/* Mode key (123 / abc) */
.keyboard-mode {
    flex: 1.3;
    background: #D1D5DB;
    font-size: 0.85rem;
    font-weight: 600;
}