.virtual-keyboard {
    --vk-search-scale: var(--map-search-chrome-scale, 1);
    --vk-key-size: calc(2.75rem * var(--vk-search-scale));
    --vk-key-gap: calc(0.35rem * var(--vk-search-scale));

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vk-key-gap);
    width: fit-content;
    max-width: calc(100% - 1.2rem);
    margin: 0 auto;
    padding: calc(0.5rem * var(--vk-search-scale)) calc(0.6rem * var(--vk-search-scale)) calc(0.5rem * var(--vk-search-scale) + env(safe-area-inset-bottom, 0));
    background: rgba(12, 18, 24, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.75rem 0.75rem 0 0;
    box-sizing: border-box;
}

.virtual-keyboard-row {
    display: flex;
    justify-content: center;
    gap: var(--vk-key-gap);
}

.virtual-keyboard-row--numbers {
    --vk-key-size: calc(2.35rem * var(--vk-search-scale));
}

.virtual-keyboard-key {
    appearance: none;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--vk-key-size);
    height: var(--vk-key-size);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: calc(1.05rem * var(--vk-search-scale));
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
}

.virtual-keyboard-key:active {
    background: rgba(255, 255, 255, 0.24);
}

.virtual-keyboard-key--wide {
    width: calc(var(--vk-key-size) * 5 + var(--vk-key-gap) * 4);
}

.virtual-keyboard-key--backspace {
    width: calc(var(--vk-key-size) * 2 + var(--vk-key-gap));
    font-size: calc(1.25rem * var(--vk-search-scale));
}

.virtual-keyboard-key--enter {
    width: calc(var(--vk-key-size) * 3 + var(--vk-key-gap) * 2);
    font-size: calc(0.95rem * var(--vk-search-scale));
    background: rgba(44, 130, 201, 0.55);
    border-color: rgba(120, 180, 240, 0.45);
}