made emulator.html full responsive

views/styles/emulator.css

@@ -3,8 +3,8 @@
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
     height: calc(100vh - var(--header-height));
-    padding: 1rem 2rem 2rem 2rem;
-    overflow: auto;
+    padding: 1rem 2rem 2rem;
+    overflow: hidden;
 }
 
 .editor-pane,
@@ -207,11 +207,68 @@ pre {
 @media (max-width: 767px) {
     .emulator-container {
         grid-template-columns: 1fr;
-        grid-template-rows: minmax(250px, 40vh) minmax(400px, 1fr);
+        grid-template-rows: minmax(220px, 35vh) 1fr;
         gap: 1rem;
-        padding: 1rem;
+        padding: 0.75rem;
         height: auto;
-        overflow-y: auto;
+        min-height: calc(100vh - var(--header-height));
+        overflow: visible;
+    }
+
+    #mobile-controls-toggle {
+        display: block !important;
+        width: 100%;
+    }
+
+    #desktop-controls {
+        display: none;
+    }
+
+    .control-bar {
+        padding: 0.75rem;
+        justify-content: center;
+    }
+
+    .tabs {
+        flex-shrink: 0;
+    }
+
+    #visual-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: 0.75rem;
+        padding: 0.5rem 0;
+    }
+
+    .visual-card {
+        width: calc(50% - 0.375rem);
+        max-width: 180px;
+        margin: 0;
+    }
+
+    .visual-card img {
+        height: 220px;
+    }
+
+    .visual-card .title {
+        font-size: 0.8rem;
+        padding: 0.45rem;
+    }
+
+    .visual-chapter {
+        padding: 0.85rem 0.75rem;
+        font-size: 0.95rem;
+    }
+
+    #console-content,
+    #json-content pre {
+        font-size: 0.82rem;
+        line-height: 1.4;
+    }
+
+    .loading-state {
+        font-size: 1rem;
     }
 
     .editor-pane,
@@ -230,14 +287,22 @@ pre {
     .preview-pane {
         display: flex;
         flex-direction: column;
-        overflow: visible;
+        height: auto;
+        min-height: 0;
+    }
+
+    .preview-pane > div:nth-child(2) {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
     }
 
     .code-editor {
+        min-height: 200px;
+        max-height: 40vh;
         font-size: 13px;
         padding: 0.75rem;
-        min-height: 200px;
-        max-height: 35vh;
     }
 
     .control-bar {
@@ -288,9 +353,10 @@ pre {
     }
 
     .output-area {
-        padding: 0.75rem;
+        flex: 1;
+        overflow-y: auto !important;
         min-height: 300px;
-        overflow: auto;
+        padding: 0.75rem;
     }
 
     .visual-card {
@@ -367,4 +433,60 @@ pre {
     .visual-card img {
         height: 180px;
     }
+}
+
+.control-group-wrapper {
+    display: flex;
+    gap: 0.5rem;
+    align-items: end;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+#mobile-controls-drawer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--bg-surface);
+    border-top: 1px solid var(--border);
+    border-radius: var(--radius-md) var(--radius-md) 0 0;
+    padding: 1rem;
+    transform: translateY(100%);
+    transition: transform 0.25s ease;
+    z-index: 1000;
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
+}
+
+#mobile-controls-drawer.open {
+    transform: translateY(0);
+}
+
+#mobile-controls-drawer .control-group-wrapper {
+    flex-direction: column;
+    gap: 1rem;
+}
+
+#mobile-controls-drawer .control-group {
+    min-width: 0;
+}
+
+#mobile-controls-drawer .btn-run {
+    width: 100%;
+    margin-top: 0.5rem;
+}
+
+#mobile-controls-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s;
+    z-index: 999;
+}
+
+#mobile-controls-overlay.open {
+    opacity: 1;
+    pointer-events: auto;
 }