Enhance mobile responsiveness: Add styles for very skinny screens and implement mobile keyboard detection

website/styles.css

@@ -439,6 +439,56 @@ body {
     }
 }
 
+/* Very skinny screens - no border at all */
+@media (max-width: 350px) {
+    .crt-border-overlay {
+        display: none;
+    }
+    
+    .container,
+    .boot-screen {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 0;
+        border: none;
+    }
+    
+    .terminal-header {
+        border-bottom: 1px solid #0f0;
+    }
+    
+    .status-bar {
+        border-top: 1px solid #0f0;
+    }
+}
+
+/* Keyboard open on mobile - detected via JS */
+body.keyboard-open .crt-border-overlay {
+    display: none;
+}
+
+body.keyboard-open .container,
+body.keyboard-open .boot-screen {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 0;
+    border: none;
+}
+
+body.keyboard-open .terminal-header {
+    border-bottom: 1px solid #0f0;
+    padding: 3px 8px;
+}
+
+body.keyboard-open .status-bar {
+    border-top: 1px solid #0f0;
+    padding: 3px 8px;
+}
+
 /* Scrollbar styling */
 ::-webkit-scrollbar {
     width: 8px;

website/terminal.js

@@ -125,6 +125,40 @@ window.addEventListener('resize', () => {
     adjustFontSize();
 });
 
+// Mobile keyboard detection using Visual Viewport API
+let initialViewportHeight = window.innerHeight;
+
+/**
+ * Detect if mobile keyboard is open based on viewport height reduction
+ */
+function checkKeyboardState() {
+    if (window.visualViewport) {
+        const viewportHeight = window.visualViewport.height;
+        const heightReduction = initialViewportHeight - viewportHeight;
+        // If viewport shrank by more than 150px, keyboard is likely open
+        if (heightReduction > 150) {
+            document.body.classList.add('keyboard-open');
+        } else {
+            document.body.classList.remove('keyboard-open');
+        }
+    }
+}
+
+if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', () => {
+        checkKeyboardState();
+        adjustFontSize();
+        setTimeout(positionInlineInput, 50);
+    });
+}
+
+// Update initial height on orientation change
+window.addEventListener('orientationchange', () => {
+    setTimeout(() => {
+        initialViewportHeight = window.innerHeight;
+    }, 300);
+});
+
 // Update system time
 function updateTime() {
     const now = new Date();
@@ -970,10 +1004,6 @@ const welcomeBannerFull = [
     ' ███████╗██║   ██║██╗██║  ██║╚██████╔╝ ╚████╔╝██╗╚███╔███╔╝   ██║   ██║     ',
     ' ╚══════╝╚═╝   ╚═╝╚═╝╚═╝  ╚═╝ ╚═════╝   ╚═══╝ ╚═╝ ╚══╝╚══╝    ╚═╝   ╚═╝     ',
     '',
-    ' ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓',
-    ' ░░  TERMINAL v' + VERSION + '  ·  EST 2024  ·  LITRUV  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░',
-    ' ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓',
-    '',
     '  Type "help" for available commands.',
     '  Use ↑/↓ arrows to navigate command history.',
     ''