/* Virtual Keyboard Styles */
.keyboard-container.disabled {
    pointer-events: none;
}

.keyboard-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--bg-canvas-subtle);
	border-top: 1px solid var(--border-default);
	padding: 10px;
	z-index: 100;
	/* Prevent double-tap zoom on iOS */
	touch-action: manipulation;
}

.keyboard-layout {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Prevent double-tap zoom on iOS */
	touch-action: manipulation;
}

.keyboard-row {
	display: flex;
	justify-content: center;
	gap: 7px;
	align-items: center;
	/* Prevent double-tap zoom on iOS */
	touch-action: manipulation;
}

.key-button {
	background-color: var(--btn-default-bg);
	color: var(--fg-default);
	border: 1px solid var(--border-default);
	border-radius: 6px;
	padding: 12px;
	min-width: 36px;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Prevent double-tap zoom on iOS */
	touch-action: manipulation;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.key-button:hover {
	background-color: var(--btn-default-hover-bg);
	border-color: var(--fg-muted);
}

.key-button:disabled {
	color: var(--fg-muted);
	border-color: var(--border-muted);
	cursor: default;
}

/* Additional styles for disabled letter keys */
.key-button.disabled {
	color: var(--fg-muted);
	border-color: var(--border-muted);
	background-color: var(--bg-canvas-inset);
	cursor: default;
	opacity: 0.5;
}

.key-button.disabled:hover {
	background-color: var(--bg-canvas-inset);
	border-color: var(--border-muted);
	transform: none;
}

.key-button.disabled:active {
	background-color: var(--bg-canvas-inset);
	transform: none;
}

/* .key-button:focus {
    outline: 2px solid rgb(121, 192, 255);
    outline-offset: 2px;
} */

.key-button:active {
	background-color: var(--accent-emphasis);
	transform: translateY(1px);
}

.special-button {
	background-color: var(--btn-default-bg);
	color: var(--fg-default);
	border: 1px solid var(--border-default);
	border-radius: 6px;
	padding: 12px;
	min-width: 80px;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Prevent double-tap zoom on iOS */
	touch-action: manipulation;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.special-button:hover {
	background-color: var(--btn-default-hover-bg);
	border-color: var(--fg-muted);
}

/*
.special-button:focus {
    outline: 2px solid rgb(121, 192, 255);
    outline-offset: 2px;
} */

.special-button:active {
	background-color: var(--accent-emphasis);
	transform: translateY(1px);
}

/* Keep special buttons (backspace and enter) enabled even when letter keys are disabled */
.special-button:not(.disabled) {
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-fg);
	border-color: var(--btn-primary-border);
	cursor: pointer;
	opacity: 1;
}

.special-button:not(.disabled):hover {
	background-color: var(--btn-primary-hover-bg);
	border-color: var(--btn-primary-border);
}

.special-button:not(.disabled):active {
	background-color: var(--btn-primary-active-bg);
	transform: translateY(1px);
}

/* Responsive Design */
@media (max-width: 640px) {
	.key-button {
		padding: 8px;
		min-width: 28px;
		font-size: 14px;
	}

	.special-button {
		padding: 8px;
		min-width: 60px;
		font-size: 14px;
	}

	.keyboard-container {
		padding: 6px;
	}

	.keyboard-layout {
		gap: 4px;
	}

	.keyboard-row {
		gap: 4px;
	}
}

/* Responsive Design */
@media (max-width: 346px) {
	.key-button {
		padding: 8px;
		min-width: 25px;
		font-size: 14px;
	}

	.special-button {
		padding: 8px;
		min-width: 52px;
		font-size: 14px;
	}

	.keyboard-container {
		padding: 6px;
	}

	.keyboard-layout {
		gap: 4px;
	}

	.keyboard-row {
		gap: 4px;
	}
}
/* High contrast mode support */
@media (prefers-contrast: high) {

	.key-button,
	.special-button {
		border-width: 2px;
	}

	.key-button:focus,
	.special-button:focus {
		outline-width: 3px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

	.key-button,
	.special-button {
		transition: none;
	}

	.key-button:active,
	.special-button:active {
		transform: none;
	}
}

/* Dark mode support (already dark by default) */
@media (prefers-color-scheme: light) {
	/* Keep dark theme as it's the design requirement */
}

/* Focus visible for better keyboard navigation */
.key-button:focus-visible,
.special-button:focus-visible {
	outline: 2px solid var(--accent-fg);
	outline-offset: 2px;
}