feat: add responsive breakpoints and mobile support

- Update main breakpoint from 1100px to 1000px for split/stacked layout
- Add dedicated mobile breakpoint at 600px with optimizations
  - Reduced padding and spacing for compact mobile layout
  - Smaller header and logo for mobile screens
  - Adjusted button and panel padding for better mobile UX
  - Optimized status footer for mobile view

- Update landing page breakpoint to 1000px for consistency
- Applied changes to both web and desktop apps

Author: kccarlos

apps/desktop/src/App.css

@@ -417,7 +417,7 @@ a.hint:active {
   align-items: start;
 }
 
-@media (max-width: 920px) {
+@media (max-width: 1000px) {
   .landing-grid {
     grid-template-columns: 1fr;
   }
@@ -744,7 +744,7 @@ button {
 
 /* ---------- Responsiveness ---------- */
 /* Stack columns on narrower screens; hide the resizer */
-@media (max-width: 1100px) {
+@media (max-width: 1000px) {
   .app-container {
     grid-template-areas:
       'header'
@@ -761,14 +761,40 @@ button {
   .left-panel, .right-panel { padding: 0; }
 }
 
-/* Tighten padding and let header wrap nicely on small devices */
-@media (max-width: 700px) {
+/* Mobile optimizations for small screens */
+@media (max-width: 600px) {
   .app-container {
-    padding: var(--space-4);
-    padding-bottom: 4.5rem;
+    padding: var(--space-3);
+    padding-bottom: 4rem;
+    gap: var(--space-4);
+  }
+
+  .header {
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    padding: var(--space-3) 0;
+  }
+
+  .header h1 {
+    font-size: 1.5rem;
+  }
+
+  .header img[alt="GitContext"] {
+    height: 36px;
+  }
+
+  .panel-section {
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .btn, .gc-button {
+    padding: var(--space-3);
+    font-size: var(--text-sm);
+  }
+
+  .status-footer-fixed {
+    padding: var(--space-2) var(--space-3);
   }
-  .header { flex-wrap: wrap; gap: var(--space-2); }
-  .header img[alt="GitContext"] { height: 40px; }
 }
 
 /* Selected Files: rows wrap on small screens; token count drops under filename */

apps/desktop/src/index.css

@@ -52,7 +52,7 @@ body,
 }
 
 /* Allow scrolling on narrow screens when content exceeds viewport */
-@media (max-width: 1100px) {
+@media (max-width: 1000px) {
   html,
   body,
   #root {

apps/web/src/App.css

@@ -208,7 +208,7 @@ a.hint:active {
   align-items: start;
 }
 
-@media (max-width: 920px) {
+@media (max-width: 1000px) {
   .landing-grid {
     grid-template-columns: 1fr;
   }
@@ -535,7 +535,7 @@ button {
 
 /* ---------- Responsiveness ---------- */
 /* Stack columns on narrower screens; hide the resizer */
-@media (max-width: 1100px) {
+@media (max-width: 1000px) {
   .app-container {
     grid-template-areas:
       'header'
@@ -552,14 +552,40 @@ button {
   .left-panel, .right-panel { padding: 0; }
 }
 
-/* Tighten padding and let header wrap nicely on small devices */
-@media (max-width: 700px) {
+/* Mobile optimizations for small screens */
+@media (max-width: 600px) {
   .app-container {
-    padding: var(--space-4);
-    padding-bottom: 4.5rem;
+    padding: var(--space-3);
+    padding-bottom: 4rem;
+    gap: var(--space-4);
+  }
+
+  .header {
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    padding: var(--space-3) 0;
+  }
+
+  .header h1 {
+    font-size: 1.5rem;
+  }
+
+  .header img[alt="GitContext"] {
+    height: 36px;
+  }
+
+  .panel-section {
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .btn, .gc-button {
+    padding: var(--space-3);
+    font-size: var(--text-sm);
+  }
+
+  .status-footer-fixed {
+    padding: var(--space-2) var(--space-3);
   }
-  .header { flex-wrap: wrap; gap: var(--space-2); }
-  .header img[alt="GitContext"] { height: 40px; }
 }
 
 /* Selected Files: rows wrap on small screens; token count drops under filename */

apps/web/src/index.css

@@ -52,7 +52,7 @@ body,
 }
 
 /* Allow scrolling on narrow screens when content exceeds viewport */
-@media (max-width: 1100px) {
+@media (max-width: 1000px) {
   html,
   body,
   #root {