/* ── Keyboard toggle button ──────────────────────────────── */
.kb-toggle {
    min-width: auto !important;
    width: 44px; height: 44px; padding: 0;
    font-size: 1.15rem; border-radius: 999px;
    display: grid; place-items: center;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.kb-toggle.is-active {
    background: var(--accent); color: #021428; border-color: transparent;
    box-shadow: 0 4px 14px rgba(6,182,212,0.40);
}

/* ── On-screen keyboard ──────────────────────────────────── */
.keyboard {
    margin-top: 0; padding: 8px 8px 7px;
    background: var(--surface-strong); border-radius: 12px;
    border: 1px solid rgba(8,100,120,0.18);
    box-shadow: inset 0 2px 6px rgba(4, 16, 40, 0.20);
    direction: ltr;
    clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
}
.keyboard.is-open    { animation: kb-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; pointer-events: auto; }
.keyboard.is-closing { animation: kb-wipe-out 0.35s ease-in forwards; pointer-events: none; }

@keyframes kb-slide-in {
    from { clip-path: inset(0 0 100% 0); opacity: 0; margin-top: 0; }
    to   { clip-path: inset(0 0 0% 0);   opacity: 1; margin-top: 12px; }
}
@keyframes kb-wipe-out {
    from { clip-path: inset(0 0 0 0%);   opacity: 1; margin-top: 12px; }
    to   { clip-path: inset(0 0 0 100%); opacity: 0; margin-top: 0; }
}

.kb-row              { display: flex; gap: 4px; justify-content: center; margin-bottom: 4px; }
.kb-row:last-child   { margin-bottom: 0; }

.key {
    position: relative; flex: 1; min-width: 0; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border-radius: 5px;
    border: 1px solid rgba(8,100,120,0.24);
    box-shadow: 0 2px 0 rgba(4, 20, 55, 0.55);
    cursor: default; user-select: none;
}
.key-he { font-size: 0.82rem; font-weight: 700; color: var(--text); line-height: 1; }
.key-en { position: absolute; bottom: 2px; right: 3px; font-size: 0.46rem; font-weight: 500; color: var(--muted); line-height: 1; }

@keyframes key-press {
    0%   { transform: translateY(0)   scale(1);    background: var(--surface);     box-shadow: 0 2px 0 rgba(4, 20, 55, 0.55); }
    35%  { transform: translateY(2px) scale(0.91); background: var(--accent-soft); box-shadow: 0 0px 0 rgba(4, 20, 55, 0.55); }
    100% { transform: translateY(0)   scale(1);    background: var(--surface);     box-shadow: 0 2px 0 rgba(4, 20, 55, 0.55); }
}
.key.is-pressed { animation: key-press 0.18s ease-out; }