/**
 * VYRO AI-Ready Shopping Intent & Assistant Stylesheet
 *
 * Styles for natural-language shopping command bar, assistant workspace panel,
 * refinement chips, and match reasoning indicators.
 *
 * @package Vyro
 * @since   1.0.0 (Phase 13)
 */

/* ==========================================================================
   1. SHOPPING INTENT COMMAND BAR
   ========================================================================== */
.vyro-shopping-intent {
	position: relative;
	background-color: var(--vyro-color-surface);
	border-radius: var(--vyro-radius-lg);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	transition: box-shadow var(--vyro-motion-normal);
}

.vyro-shopping-intent:hover {
	box-shadow: 0 12px 40px rgba(124, 58, 237, 0.08);
}

.vyro-shopping-intent__input {
	background-color: var(--vyro-color-surface-soft);
	border: 1px solid var(--vyro-color-border);
	color: var(--vyro-color-text);
	transition: border-color var(--vyro-motion-fast), box-shadow var(--vyro-motion-fast);
}

.vyro-shopping-intent__input:focus {
	border-color: var(--vyro-color-accent);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.vyro-intent-example-chip {
	transition: background-color var(--vyro-motion-fast), border-color var(--vyro-motion-fast), transform var(--vyro-motion-fast);
}

.vyro-intent-example-chip:hover {
	background-color: var(--vyro-color-surface-elevated);
	border-color: var(--vyro-color-accent);
	transform: translateY(-1px);
}

/* ==========================================================================
   2. ASSISTANT WORKSPACE PANEL
   ========================================================================== */
.vyro-intent-panel {
	border: 1px solid var(--vyro-color-border);
	border-radius: var(--vyro-radius-xl, 20px);
	background-color: var(--vyro-color-surface-elevated);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.vyro-intent-refine-chip {
	transition: background-color var(--vyro-motion-fast), color var(--vyro-motion-fast), border-color var(--vyro-motion-fast);
}

.vyro-intent-refine-chip.is-active {
	background-color: var(--vyro-color-accent);
	color: #FFFFFF;
	border-color: var(--vyro-color-accent);
}

/* ==========================================================================
   3. LOADING STATE
   ========================================================================== */
.vyro-intent-panel.is-loading {
	opacity: 0.6;
	pointer-events: none;
	position: relative;
}

/* ==========================================================================
   4. REDUCED MOTION SAFEGUARDS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.vyro-shopping-intent,
	.vyro-intent-panel,
	.vyro-intent-example-chip {
		transition: none !important;
		transform: none !important;
	}
}