:root {
    --keyboard-shell-bg: color-mix(in srgb, var(--white) 96%, var(--accent-tint-light));
    --keyboard-shell-border: color-mix(in srgb, var(--border-color) 70%, transparent);
    --keyboard-shell-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
    --keyboard-shell-radius: 14px;
    --keyboard-shell-gap: 6px;
    --keyboard-shell-padding: 6px;
    --keyboard-key-bg: var(--white);
    --keyboard-key-border: color-mix(in srgb, var(--border-color) 80%, transparent);
    --keyboard-key-text: var(--text-color);
    --keyboard-key-radius: 12px;
    --keyboard-key-height: 44px;
    --keyboard-key-shadow: none;
    --keyboard-key-shadow-pressed: none;
    --keyboard-key-bg-hover: color-mix(in srgb, var(--accent-tint-light) 16%, var(--white));
    --keyboard-key-accent-bg: color-mix(in srgb, var(--accent-tint-light) 45%, var(--white));
    --keyboard-key-accent-text: var(--accent-dark);
    --keyboard-focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.app-keyboard-theme {
    &.ui-keyboard {
        display: inline-grid;
        grid-auto-flow: row;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        max-width: calc(100vw - 24px);
        margin: 0 auto;
        padding: var(--keyboard-shell-padding);
        gap: var(--keyboard-shell-gap);
        border: 1px solid var(--keyboard-shell-border);
        border-radius: var(--keyboard-shell-radius);
        background: var(--keyboard-shell-bg);
        box-shadow: var(--keyboard-shell-shadow);
    }

    .ui-keyboard-keyset {
        width: auto;
    }

    .ui-keyboard-button-endrow {
        margin-right: 0;
    }

    .ui-keyboard-button {
        min-height: var(--keyboard-key-height);
        min-width: 44px;
        padding: 0 10px;
        border-radius: var(--keyboard-key-radius);
        border: 1px solid var(--keyboard-key-border);
        background: var(--keyboard-key-bg);
        color: var(--keyboard-key-text);
        box-shadow: var(--keyboard-key-shadow);
        font-weight: 600;
        transition: background-color 0.14s ease, transform 0.08s ease, box-shadow 0.12s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .ui-keyboard-button:hover {
        background: var(--keyboard-key-bg-hover);
    }

    .ui-keyboard-button.ui-state-active,
    .ui-keyboard-button:active {
        transform: translateY(1px);
        box-shadow: var(--keyboard-key-shadow-pressed);
    }

    .ui-keyboard-button:focus-visible {
        outline: none;
        box-shadow: var(--keyboard-key-shadow), var(--keyboard-focus-ring);
    }

    .ui-keyboard-actionkey,
    .ui-keyboard-accept {
        border-color: var(--keyboard-key-border);
        background: var(--keyboard-key-accent-bg);
        color: var(--keyboard-key-accent-text);
        box-shadow: none;
    }

    .ui-keyboard-bksp {
        border-color: color-mix(in srgb, var(--accent) 40%, var(--keyboard-key-border));
        background: var(--keyboard-key-bg);
        color: var(--accent-dark);
        box-shadow: none;

        .ui-keyboard-button {
            box-shadow: none;
        }
    }

    .ui-keyboard-accept.ui-keyboard-button:has(+ br.ui-keyboard-button-endrow) {
        display: block;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border-radius: var(--keyboard-key-radius);
        box-shadow: none;

        span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 0 10px;
        }
    }
}

.app-keyboard-theme--login {
    &.ui-keyboard {
        z-index: 12000;
        -webkit-animation: keyboard-in 0.16s ease-out;
                animation: keyboard-in 0.16s ease-out;
        cursor: move;
    }
}

@media (max-width: 767px) {
    .app-keyboard-theme {
        &.ui-keyboard {
            --keyboard-shell-padding: 6px;
            --keyboard-shell-gap: 6px;
            max-width: calc(100vw - 14px);
            border-radius: 12px;
        }

        .ui-keyboard-button {
            min-height: 46px;
            min-width: 44px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
        }
    }

}

@-webkit-keyframes keyboard-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes keyboard-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}