.app-kb-target {
    caret-color: transparent;
    touch-action: none;
    -ms-touch-action: none;
    -ms-touch-select: none;
}

.form-control.app-kb-target[readonly],
.custom-select.app-kb-target[readonly] {
    background-color: var(--field-bg);
    color: var(--text-color);
}

.app-kb {
    --vk-deck-bg: var(--gray-200);
    --vk-deck-border: var(--border-color);

    --vk-key-bg: var(--field-bg);
    --vk-key-text: var(--text-color);
    --vk-key-shadow: var(--shadow-card);

    --vk-func-bg: var(--gray-100);
    --vk-func-text: var(--text-muted);

    --vk-active-bg: var(--accent);
    --vk-active-text: var(--text-on-accent);

    --vk-accept-bg: var(--accent);
    --vk-accept-bg-active: var(--accent-dark);
    --vk-accept-text: var(--text-on-accent);

    --vk-readout-bg: color-mix(in srgb, var(--accent) 8%, var(--field-bg));
    --vk-readout-label: var(--text-muted);
    --vk-readout-text: var(--text-color);
    --vk-caret: var(--accent);

    --vk-radius-deck: 18px;
    --vk-radius-key: 8px;
    --vk-key-min-h: clamp(44px, 6.4vh, 54px);
    --vk-key-min-w: clamp(38px, 4.4vw, 50px);
    --vk-gap: clamp(5px, 0.6vw, 8px);
    --vk-pad: clamp(12px, 1.6vw, 18px);
    --vk-font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    --vk-stagger: clamp(10px, 1.8vw, 22px);

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20000;
    box-sizing: border-box;
    width: 100%;
    max-height: 58vh;
    overflow-y: auto;
    margin: 0;
    padding: var(--vk-pad) var(--vk-pad) calc(var(--vk-pad) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--vk-deck-border);
    border-radius: var(--vk-radius-deck) var(--vk-radius-deck) 0 0;
    background: var(--vk-deck-bg);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
    font-family: var(--font-sans);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    animation: app-kb-slide-up 0.18s ease-out;

    &[hidden] {
        display: none;
    }
}

.app-kb__toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(10px, 1.4vw, 16px);
    margin-bottom: calc(var(--vk-pad) * 0.75);
}

.app-kb__preview {
    display: flex;
    grid-column: 2;
    justify-self: center;
    align-items: center;
    gap: clamp(10px, 1.4vw, 16px);
    box-sizing: border-box;
    width: clamp(14rem, 42vw, 28rem);
    max-width: 100%;
    padding: clamp(8px, 1.4vh, 12px) clamp(16px, 2vw, 20px);
    border-radius: var(--vk-radius-key);
    background: var(--vk-readout-bg);
}

.app-kb__preview-label {
    flex: 0 0 auto;
    font-size: clamp(0.7rem, 0.95vw, 0.8rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vk-readout-label);
}

.app-kb__preview--invalid {
    box-shadow: 0 0 0 2px var(--danger);
}

.app-kb__error {
    margin: 0 0 calc(var(--vk-pad) * 0.5);
    color: var(--danger);
    font-size: clamp(0.8rem, 1.3vw, 0.95rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;

    &[hidden] {
        display: none;
    }
}

.app-kb__preview-text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 1.3em;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--vk-readout-text);
    touch-action: none;
}

.app-kb__preview-text::-webkit-scrollbar {
    display: none;
}

.app-kb__caret-marker {
    position: relative;
    display: inline-block;
    width: 0;
    height: 1em;
    vertical-align: -0.15em;
    pointer-events: none;
}

.app-kb__caret-bar {
    position: absolute;
    left: -1px;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--vk-caret);
    animation: app-kb-caret 1s step-end infinite;
}

.app-kb--caret-dragging .app-kb__caret-bar,
.app-kb--space-drag .app-kb__caret-bar {
    animation: none;
    opacity: 1;
}

.app-kb__caret-handle {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-inline-start: -10px;
    margin-top: 4px;
    border-radius: 0 50% 50% 50%;
    background: var(--vk-caret);
    transform: rotate(45deg);
    touch-action: none;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.app-kb--caret-dragging .app-kb__caret-handle {
    opacity: 1;
    cursor: grabbing;
}

.app-kb__actions {
    display: flex;
    grid-column: 3;
    justify-self: end;
    align-items: center;
    gap: clamp(6px, 0.9vw, 10px);
}

.app-kb__action {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-height: clamp(38px, 5.4vh, 46px);
    padding: 0 clamp(16px, 2vw, 22px);
    border: none;
    border-radius: var(--vk-radius-key);
    font-family: var(--font-sans);
    font-size: clamp(0.85rem, 1.3vw, 0.98rem);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.04s ease, transform 0.03s ease;

    &[hidden] {
        display: none;
    }
}

.app-kb__action--dismiss {
    background: var(--vk-func-bg);
    color: var(--vk-func-text);
}

.app-kb__action--dismiss.app-kb__key--touched {
    transform: scale(0.96);
}

.app-kb__action--primary {
    background: var(--vk-accept-bg);
    color: var(--vk-accept-text);

    &:disabled {
        opacity: 0.45;
        cursor: default;
        transform: none;
    }
}

.app-kb__action--primary.app-kb__key--touched:not(:disabled) {
    background: var(--vk-accept-bg-active);
    transform: scale(0.96);
}

.app-kb__rows {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vk-gap);
}

.app-kb__row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--vk-gap);
    width: 100%;
}

.app-kb:not(.app-kb--numeric) .app-kb__row:nth-of-type(2) {
    margin-inline-start: calc(var(--vk-stagger) * 0.5);
}

.app-kb:not(.app-kb--numeric) .app-kb__row:nth-of-type(3) {
    margin-inline-start: var(--vk-stagger);
}

.app-kb__key {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vk-key-min-h);
    min-width: var(--vk-key-min-w);
    padding: 0 clamp(8px, 1vw, 14px);
    border: none;
    border-radius: var(--vk-radius-key);
    background: var(--vk-key-bg);
    color: var(--vk-key-text);
    font-family: var(--font-sans);
    font-size: var(--vk-font-size);
    font-weight: 600;
    box-shadow: 0 1px 0 var(--vk-key-shadow);
    cursor: pointer;
    transition: background 0.04s ease, transform 0.03s ease;

    &:focus-visible {
        outline: 2px solid var(--accent-light);
        outline-offset: 2px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .app-kb__key:hover {
        background: color-mix(in srgb, var(--vk-key-bg) 80%, white 20%);
    }
}

.app-kb__key--touched {
    transform: scale(0.94);
    background: color-mix(in srgb, var(--vk-key-bg) 70%, black 30%);
}

.app-kb__key--func {
    background: var(--vk-func-bg);
    color: var(--vk-func-text);
}

@media (hover: hover) and (pointer: fine) {
    .app-kb__key--func:hover {
        background: color-mix(in srgb, var(--vk-func-bg) 80%, white 20%);
    }
}

.app-kb__key--func.app-kb__key--touched {
    background: color-mix(in srgb, var(--vk-func-bg) 70%, black 30%);
}

.app-kb__key--backspace i {
    font-size: 1.1em;
    color: color-mix(in srgb, var(--danger) 65%, var(--vk-func-text));
}

.app-kb__key--backspace.app-kb__key--touched i {
    color: var(--text-on-accent);
}

.app-kb__key--active {
    background: var(--vk-active-bg);
    color: var(--vk-active-text);
}

.app-kb__key--space {
    flex: 0 0 auto;
    width: clamp(160px, 20vw, 240px);
    touch-action: none;
}

.app-kb--space-drag .app-kb__key {
    color: transparent;
    transition: color 0.08s ease;
}

.app-kb--space-drag .app-kb__key--backspace i {
    color: transparent;
}

.app-kb__spacer {
    flex: 0 0 auto;
    min-width: var(--vk-key-min-w);
    min-height: var(--vk-key-min-h);
    visibility: hidden;
}

.app-kb--numeric {
    --vk-key-min-h: clamp(58px, 8.4vh, 76px);
    --vk-key-min-w: clamp(84px, 11vw, 116px);
    --vk-gap: clamp(8px, 1vw, 12px);
    --vk-font-size: clamp(1.3rem, 2.4vw, 1.55rem);
    --vk-radius-key: 10px;
}

.app-kb--numeric .app-kb__key {
    width: var(--vk-key-min-w);
}

@keyframes app-kb-slide-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes app-kb-caret {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-kb {
        animation: none;
    }

    .app-kb__caret-bar {
        animation: none;
    }
}