/* Virtual keyboard */
.virtual-keyboard { background: var(--color-surface-primary); border-radius: 0.5rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid var(--color-gray-200); padding: 0.5rem; margin: 0.5rem auto; max-width: 100%; width: 100%; position: relative; transition: all 0.3s ease; overflow-x: auto; }
.virtual-keyboard.hidden .keyboard-container, .virtual-keyboard.hidden .finger-guide { display: none; }
.virtual-keyboard.hidden { padding: 0.25rem; margin: 0.5rem auto; min-height: auto; display: flex; align-items: center; justify-content: center; }
.virtual-keyboard.completed { display: none; }

.virtual-keyboard:not(.hidden) .keyboard-hide-btn-virtual { display: none; }
.virtual-keyboard.hidden .keyboard-hide-btn-virtual { display: flex; position: static; margin: 0 auto; }

body.keyboard-hidden .typing-finger-controls { display: none; }

.keyboard-hide-btn { background: var(--color-primary-50); border: 1px solid var(--color-primary-200); border-radius: 0.25rem; padding: 0.25rem 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 500; color: var(--color-primary-600); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.keyboard-hide-btn:hover { background: var(--color-primary-100); color: var(--color-primary-700); border-color: var(--color-primary-300); transform: scale(1.05); }
.keyboard-hide-btn:active { transform: scale(0.95); }

.keyboard-container { background: var(--color-surface-tertiary); border-radius: 0.375rem; padding: 0.375rem; margin-bottom: 0.375rem; min-width: fit-content; }
.keyboard-row { display: flex; gap: 0.125rem; margin-bottom: 0.125rem; justify-content: center; }

.key { background: var(--color-surface-primary); border: 1px solid var(--color-gray-200); border-radius: 0.25rem; padding: 0.125rem; min-width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 500; color: var(--color-gray-700); cursor: default; transition: all 0.15s ease; box-shadow: 0 1px 0 var(--color-gray-300); position: relative; top: 0; }
.key-backspace { min-width: 3.5rem; font-size: 0.5625rem; }
.key-tab { min-width: 2.5rem; font-size: 0.5625rem; }
.key-caps { min-width: 2.75rem; font-size: 0.5625rem; }
.key-enter { min-width: 3.25rem; font-size: 0.5625rem; }
.key-shift { min-width: 3.5rem; font-size: 0.5625rem; }
.key-shift-left { min-width: 4rem; font-size: 0.5625rem; }
.key-shift-right { min-width: 4rem; font-size: 0.5625rem; }
.key-space { min-width: 12rem; font-size: 0.5625rem; }
.key-backslash { min-width: 2.25rem; font-size: 0.5625rem; }

.key.active { background-color: var(--color-primary-500) !important; color: #ffffff; border-color: var(--color-primary-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 30%, transparent); transform: translateY(2px); top: 2px; }
.key.next-key { animation: pulse 1s infinite; border-width: 2px; transform: scale(1.05); }

.key.next-key[data-finger="left-pinky"] { background-color: var(--finger-left-pinky) !important; border-color: #1d4ed8 !important; box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.5); }
.key.next-key[data-finger="left-ring"] { background-color: var(--finger-left-ring) !important; border-color: #000000 !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5); }
.key.next-key[data-finger="left-middle"] { background-color: var(--finger-left-middle) !important; border-color: #92400e !important; box-shadow: 0 0 0 2px rgba(146, 64, 14, 0.5); }
.key.next-key[data-finger="left-index"] { background-color: var(--finger-left-index) !important; border-color: #eab308 !important; box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.5); }
.key.next-key[data-finger="thumb"] { background-color: var(--finger-thumb) !important; border-color: #6b7280 !important; box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.5); }
.key.next-key[data-finger="right-index"] { background-color: var(--finger-right-index) !important; border-color: #7c3aed !important; box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.5); }
.key.next-key[data-finger="right-middle"] { background-color: var(--finger-right-middle) !important; border-color: #ea580c !important; box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.5); }
.key.next-key[data-finger="right-ring"] { background-color: var(--finger-right-ring) !important; border-color: #ec4899 !important; box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.5); }
.key.next-key[data-finger="right-pinky"] { background-color: var(--finger-right-pinky) !important; border-color: #d97706 !important; box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.5); }

.key.next-key.cross-hand-shift { background-color: var(--finger-left-pinky) !important; border-color: #1d4ed8 !important; box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.5); }
.key.next-key.cross-hand-shift.right-shift { background-color: var(--finger-right-pinky) !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }

@keyframes pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }

.finger-guide { text-align: center; padding: 0.375rem; background: var(--color-surface-tertiary); border-radius: 0.25rem; }
.finger-guide-title { font-size: 0.6875rem; font-weight: 600; color: var(--color-gray-600); margin-bottom: 0.25rem; }
.finger-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 0.25rem; justify-content: center; max-width: 100%; }
.finger-color { padding: 0.125rem 0.25rem; border-radius: 0.1875rem; font-size: 0.5625rem; font-weight: 500; color: var(--color-gray-700); border: 1px solid var(--color-gray-300); text-align: center; white-space: nowrap; }
.finger-color.left-pinky { background-color: #1d4ed8; color: white; }
.finger-color.left-ring { background-color: #000000; color: white; }
.finger-color.left-middle { background-color: #92400e; color: white; }
.finger-color.left-index { background-color: #eab308; color: black; }
.finger-color.thumb { background-color: #6b7280; color: white; }
.finger-color.right-index { background-color: #7c3aed; color: white; }
.finger-color.right-middle { background-color: #ea580c; color: white; }
.finger-color.right-ring { background-color: #ec4899; color: white; }
.finger-color.right-pinky { background-color: #d97706; color: white; }