/**
 * SwiftFind — Responsive del shell (espejo 1:1 del legacy VOLT, sin cambios visuales).
 * Colapsa el header, convierte la sidebar en drawer y reduce el grid.
 */

@layer wvn-components {
	@media (max-width: 1100px) {
		.wvn-main { grid-template-columns: 260px 1fr; }
	}

	@media (max-width: 900px) {
		.wvn-header {
			grid-template-columns: auto minmax(0, 1fr) auto;
			padding: var(--wvn-space-4) var(--wvn-space-5);
			gap: 10px;
		}
		.wvn-header > * { min-width: 0; }
		/* El botón Cerrar se reduce a icono ✕ en móvil para ganar ancho. */
		.wvn-close { padding: 0; width: 36px; height: 36px; border-radius: 50%; justify-content: center; font-size: 0; }
		.wvn-close .wvn-kbd { display: none; }
		.wvn-close::before { content: "✕"; font-size: 15px; }
		.wvn-logo { font-size: 18px; }
		.wvn-logo span:not(.wvn-logo__bolt) { display: none; }
		.wvn-search { height: 42px; padding: 0 2px 0 var(--wvn-space-4); gap: 0; }
		/* Voz oculta en móvil para ganar ancho del input. */
		.wvn-search__voice,
		.wvn-search__divider { display: none; }
		.wvn-search__input { font-size: 14px; padding: 0 var(--wvn-space-3); }
		.wvn-search__ai { padding: 0 8px; height: 28px; font-size: 10px; }
		.wvn-search__clear { width: 30px; height: 30px; }
		.wvn-search__voice { width: 30px; height: 30px; }

		.wvn-main {
			grid-template-columns: minmax(0, 1fr);
			position: relative;
		}
		/* Items de grid/flex no deben expandir por su contenido (fix overflow). */
		.wvn-results,
		.wvn-results__content { min-width: 0; }

		/* Sidebar como drawer (oculto por defecto, abre con .wvn-is-open). */
		.wvn-sidebar {
			display: none;
			position: fixed;
			inset: 0;
			z-index: 50;
			background: var(--wvn-color-surface);
			padding: 20px;
			box-shadow: -16px 0 40px -20px rgba(0, 0, 0, .3);
		}
		.wvn-sidebar.wvn-is-open {
			display: flex;
			z-index: 60;
			background: var(--wvn-color-surface);
			animation: wvn-drawer-in .2s ease;
		}
		@keyframes wvn-drawer-in { from { transform: translateX(-12px); opacity: 0; } }
		.wvn-sidebar__close {
			display: inline-flex;
			position: absolute;
			top: 14px;
			right: 14px;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: var(--wvn-color-bg);
			border: none;
			align-items: center;
			justify-content: center;
		}
		.wvn-filter-toggle { display: inline-flex; margin-left: auto; }

		.wvn-filter-bar { display: flex; }
		.wvn-results__content { padding: var(--wvn-space-5); gap: var(--wvn-space-6); }
		.wvn-footer { padding: 10px var(--wvn-space-5); }
		.wvn-footer__kbds { display: none; }
	}
}