Mobile UI

ui/style.css

@@ -30,12 +30,63 @@ body {
     overflow: hidden;
 }
 
+@media (max-width: 768px) {
+    body {
+        height: auto;
+        overflow: auto;
+    }
+}
+
+/* Mobile Header */
+.mobile-header {
+    display: none;
+    background-color: var(--card);
+    border-bottom: 1px solid var(--border);
+    padding: 0.75rem 1rem;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.btn-icon {
+    background: transparent;
+    border: none;
+    color: var(--foreground);
+    cursor: pointer;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.desktop-only {
+    display: block;
+}
+
+@media (max-width: 768px) {
+    .mobile-header {
+        display: flex;
+    }
+    .desktop-only {
+        display: none;
+    }
+}
+
 .app-layout {
     display: flex;
     height: 100vh;
     width: 100vw;
 }
 
+@media (max-width: 768px) {
+    .app-layout {
+        flex-direction: column;
+        height: calc(100vh - 57px); /* Subtract header height */
+    }
+}
+
 /* Sidebar */
 .sidebar {
     width: 300px;
@@ -45,12 +96,63 @@ body {
     flex-direction: column;
     padding: 1.5rem;
     flex-shrink: 0;
+    transition: transform 0.3s ease-in-out;
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        position: fixed;
+        top: 57px;
+        left: 0;
+        width: 100%;
+        height: calc(100vh - 57px);
+        z-index: 90;
+        transform: translateX(-100%);
+        border-right: none;
+    }
+    .sidebar.open {
+        transform: translateX(0);
+    }
+}
+
+/* Floating Action Button for Suggestions */
+.btn-floating {
+    position: absolute;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 50%;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    display: none; /* Hidden by default, shown when suggestion exists */
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    transition: transform 0.2s, opacity 0.2s;
+}
+
+.btn-floating:active {
+    transform: scale(0.95);
+}
+
+.btn-floating.visible {
+    display: flex;
 }
 
 .sidebar-header {
     margin-bottom: 2.5rem;
 }
 
+@media (max-width: 768px) {
+    .sidebar-header {
+        margin-bottom: 1rem;
+    }
+}
+
 .brand-wrapper {
     display: flex;
     align-items: center;
@@ -77,6 +179,13 @@ body {
     flex-grow: 1;
 }
 
+@media (max-width: 768px) {
+    .settings {
+        gap: 1rem;
+        margin-bottom: 1rem;
+    }
+}
+
 .setting-item {
     display: flex;
     flex-direction: column;
@@ -180,6 +289,12 @@ label {
     border-top: 1px solid var(--border);
 }
 
+@media (max-width: 768px) {
+    .sidebar-footer {
+        display: none; /* Hide footer on mobile to save space */
+    }
+}
+
 .status-indicator {
     display: flex;
     align-items: center;
@@ -216,6 +331,14 @@ label {
     background-color: var(--background);
 }
 
+@media (max-width: 768px) {
+    .editor-main {
+        padding: 1rem;
+        height: 100%;
+        width: 100%;
+    }
+}
+
 .editor-container {
     width: 100%;
     max-width: 800px;
@@ -246,6 +369,13 @@ label {
     box-sizing: border-box;
 }
 
+@media (max-width: 768px) {
+    #editor, #suggestion-overlay {
+        padding: 1rem;
+        font-size: 1rem;
+    }
+}
+
 #editor {
     position: relative;
     z-index: 2;