.virtual-keyboard {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 9999;
      background-color: #f8f9fa;
      border-top: 1px solid #ccc;
      padding: 15px 10px;
      box-shadow: 0 -4px 8px rgba(0,0,0,0.1);
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .virtual-keyboard.visible {
      visibility: visible;
      opacity: 1;
    }

    .keyboard-row {
      display: flex;
      justify-content: center;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .keyboard-key {
      min-width: 40px;
      height: 50px;
      margin: 5px;
      border-radius: 5px;
      background-color: #fff;
      border: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      cursor: pointer;
      user-select: none;
      transition: all 0.1s;
      flex: 1 0 40px;
      max-width: 60px;
    }

    .keyboard-key:hover {
      background-color: #e9ecef;
    }

    .keyboard-key:active {
      background-color: #dee2e6;
      transform: translateY(2px);
    }

    .keyboard-key.space {
      min-width: 60%;
      max-width: 80%;
    }

    .keyboard-key.shift, .keyboard-key.backspace, .keyboard-key.enter,
    .keyboard-key.special, .keyboard-key.caps {
      background-color: #e9ecef;
    }

    .keyboard-key.active {
      background-color: #0d6efd;
      color: white;
    }