feat: enhance responsive design for glass panel and configurator section

src/components/ConfiguratorSection.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useUrlSync } from '@/hooks/useUrlSync';
 import { RobotCanvas } from '@/components/RobotCanvas';
@@ -10,6 +11,7 @@ import { CheckoutOverlay } from '@/components/CheckoutOverlay';
 export function ConfiguratorSection() {
   const { isHydrated } = useUrlSync();
   const { t } = useTranslation();
+  const [panelExpanded, setPanelExpanded] = useState(false);
 
   return (
     <section
@@ -23,7 +25,7 @@ export function ConfiguratorSection() {
       }}
     >
       <div
-        className="layout-container"
+        className={`layout-container${panelExpanded ? ' layout-expanded' : ''}`}
         style={{
           display: 'flex',
           width: '100%',
@@ -32,9 +34,8 @@ export function ConfiguratorSection() {
         }}
       >
         <aside
-          className="glass-panel-responsive"
+          className={`glass-panel-responsive${panelExpanded ? ' panel-expanded' : ''}`}
           style={{
-            order: -1,
             width: '420px',
             height: '100%',
             background: 'rgba(255, 255, 255, 0.9)',
@@ -45,28 +46,39 @@ export function ConfiguratorSection() {
             display: 'flex',
             flexDirection: 'column',
             position: 'relative',
-            overflow: 'hidden',
+            overflowX: 'hidden',
+            overflowY: 'auto',
           }}
           role="complementary"
           aria-label={t('panel.title')}
         >
           <div
             className="mobile-handle"
+            onClick={() => setPanelExpanded((v) => !v)}
+            role="button"
+            tabIndex={0}
+            aria-label={panelExpanded ? 'Collapse panel' : 'Expand panel'}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setPanelExpanded((v) => !v); } }}
             style={{
               padding: '0.75rem',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
+              position: 'relative',
+              cursor: 'pointer',
+              userSelect: 'none',
             }}
-            aria-hidden="true"
           >
+            {/* Drag indicator – tap to expand/collapse */}
             <div
               style={{
                 width: '40px',
                 height: '4px',
                 backgroundColor: '#e2e8f0',
                 borderRadius: '2px',
+                transition: 'width 0.2s, background-color 0.2s',
               }}
+              aria-hidden="true"
             />
           </div>
 
@@ -94,7 +106,7 @@ export function ConfiguratorSection() {
             style={{
               flex: 1,
               padding: '1.5rem',
-              overflowY: 'auto',
+              overflowY: 'visible',
               position: 'relative',
               zIndex: 1,
             }}
@@ -106,6 +118,7 @@ export function ConfiguratorSection() {
         </aside>
 
         <main
+          className="canvas-area"
           style={{
             flex: 1,
             display: 'flex',