Phase 6: Add comprehensive responsive design for ASCII frames

## Tablet Breakpoint (1024px)
- Simplify ASCII corners from heavy double (╔╗╚╝) to light single (┌┐└┘)
- Reduce corner font size from 1.5rem to 1.2rem
- Simplify section headers from ╠═══ to ├─
- Simplify dividers from ╞═══╡ to ├─┤
- Maintain visual hierarchy while reducing complexity

## Mobile Breakpoint (768px)
- Remove ALL ASCII corner decorations (::before, ::after, corner spans)
- Remove inner frame corner decorations
- Simplify section headers to simple "> " prefix
- Simplify subsection headers to "• " bullet point
- Remove all ASCII dividers completely
- Reduce padding: ascii-content to 0.5rem, ascii-frame-inner to 0.5rem
- Reduce border width to 1px on inner frames
- Font size reduction for section headers: 0.9rem
- Maintain functionality while maximizing screen space

## Very Small Mobile Breakpoint (480px)
- Remove ALL pseudo-element decorations globally
- Collapse nested frames to minimal borders (1px)
- Minimal padding everywhere (0.25rem)
- Section headers without decorations, normal text transform
- Simplified font sizes (0.85rem for headers)
- Re-enable only essential pseudo-elements (search prompt)
- Maximum compatibility for small screens

## Progressive Enhancement Strategy
- Desktop: Full elaborate ASCII decorations with heavy borders
- Tablet: Simplified single-line ASCII decorations
- Mobile: Minimal decorations, focus on content
- Very Small: No decorations, pure functionality

## Design Philosophy
- Maintain terminal aesthetic at all sizes
- Progressive simplification as screen shrinks
- Never sacrifice functionality for decoration
- Ensure readability on all devices
- Optimize for touch targets on mobile

## Files Modified
- assets/css/dashboard.css: Added ~140 lines of responsive rules
  * Enhanced existing 1024px breakpoint with ASCII frame rules
  * Enhanced existing 768px breakpoint with complete mobile simplification
  * Enhanced existing 480px breakpoint with minimal frame collapsing

## Testing Checklist
- [ ] Desktop (1920x1080): Full decorations visible
- [ ] Tablet (1024x768): Simplified single-line decorations
- [ ] Mobile (768x1024): No corners, simple headers
- [ ] Small Mobile (480x800): Minimal UI, maximum content
- [ ] Touch targets adequate on all mobile sizes
- [ ] All functionality preserved across breakpoints

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

assets/css/dashboard.css

@@ -1769,16 +1769,55 @@ body.dark-mode select option {
     .ascii-banner {
         font-size: 0.6rem !important;
     }
-    
+
     /* Reduce table padding */
     th, td {
         padding: 8px 12px;
     }
-    
+
     /* Stack bulk actions */
     .bulk-actions-buttons {
         flex-direction: column;
     }
+
+    /* Simplify ASCII corners - use single-line chars */
+    .ascii-frame-outer::before {
+        content: '┌';
+        font-size: 1.2rem;
+    }
+
+    .ascii-frame-outer::after {
+        content: '┐';
+        font-size: 1.2rem;
+    }
+
+    .bottom-left-corner {
+        content: '└';
+        font-size: 1.2rem;
+    }
+
+    .bottom-right-corner {
+        content: '┘';
+        font-size: 1.2rem;
+    }
+
+    /* Simplify section headers */
+    .ascii-section-header::before {
+        content: '├─ ';
+    }
+
+    .ascii-section-header::after {
+        content: ' ─┤';
+    }
+
+    /* Simplify dividers */
+    .ascii-divider::before {
+        content: '├';
+    }
+
+    .ascii-divider::after {
+        content: '┤';
+    }
 }
 
 /* Mobile */
@@ -1787,8 +1826,61 @@ body.dark-mode select option {
     .ascii-banner {
         font-size: 0.5rem !important;
     }
-    
+
-    /* Hide decorative ASCII corners on small screens */
+    /* Remove all ASCII corners for mobile */
+    .ascii-frame-outer::before,
+    .ascii-frame-outer::after,
+    .bottom-left-corner,
+    .bottom-right-corner {
+        display: none !important;
+    }
+
+    /* Simplify inner frames - remove corners */
+    .ascii-frame-inner::before,
+    .ascii-frame-inner::after {
+        display: none !important;
+    }
+
+    /* Keep section headers but simplify */
+    .ascii-section-header::before {
+        content: '> ';
+    }
+
+    .ascii-section-header::after {
+        content: '';
+    }
+
+    .ascii-section-header {
+        font-size: 0.9rem;
+        padding: 0.5rem 1rem;
+    }
+
+    /* Simplify subsection headers */
+    .ascii-subsection-header::before {
+        content: '• ';
+    }
+
+    .ascii-subsection-header::after {
+        content: '';
+    }
+
+    /* Remove dividers on mobile */
+    .ascii-divider {
+        display: none;
+    }
+
+    /* Reduce padding in ascii-content */
+    .ascii-content {
+        padding: 0.5rem;
+    }
+
+    .ascii-frame-inner {
+        padding: 0.5rem;
+        margin: 0.5rem;
+        border-width: 1px;
+    }
+
+    /* Hide decorative ASCII corners on small screens (legacy) */
     table::before,
     table::after,
     .ticket-container::before,
@@ -1797,22 +1889,22 @@ body.dark-mode select option {
     .settings-modal::after {
         display: none;
     }
-    
+
     /* Simplify borders */
     .ticket-header::before {
         display: none;
     }
-    
+
     /* Full-width hamburger menu */
     .hamburger-content {
         width: 100%;
         left: -100%;
     }
-    
+
     .hamburger-content.open {
         left: 0;
     }
-    
+
     /* Reduce padding everywhere */
     .ascii-box,
     .terminal-form-group,
@@ -1820,31 +1912,31 @@ body.dark-mode select option {
     .timeline-content {
         padding: 10px;
     }
-    
+
     /* Smaller glow effects */
     .glow-text,
     [class*="glow-"] {
         text-shadow: 0 0 3px currentColor;
     }
-    
+
     /* Stack buttons vertically */
     .btn,
     button {
         width: 100%;
         margin: 5px 0;
     }
-    
+
     /* Reduce font size slightly */
     body {
         font-size: 14px;
     }
-    
+
     /* Smaller table text */
     th, td {
         font-size: 0.85rem;
         padding: 6px 8px;
     }
-    
+
     /* Hide some table columns on mobile */
     th:nth-child(n+6),
     td:nth-child(n+6) {
@@ -1858,37 +1950,59 @@ body.dark-mode select option {
     .ascii-banner {
         font-size: 0.4rem !important;
     }
-    
+
-    /* Remove all pseudo-element decorations */
+    /* Remove all pseudo-element decorations except essential ones */
     *::before,
     *::after {
         content: none !important;
     }
-    
+
+    /* Collapse nested frames - minimal borders */
+    .ascii-frame-outer,
+    .ascii-frame-inner {
+        border-width: 1px;
+        padding: 0.25rem;
+        margin: 0.25rem;
+    }
+
+    /* Section headers without decorations */
+    .ascii-section-header,
+    .ascii-subsection-header {
+        font-size: 0.85rem;
+        padding: 0.4rem 0.5rem;
+        text-transform: none;
+        letter-spacing: normal;
+    }
+
+    /* Minimal content padding */
+    .ascii-content {
+        padding: 0.25rem;
+    }
+
     /* Re-enable essential pseudo-elements */
     .search-form::before {
         content: '$ ' !important;
     }
-    
+
     /* Simplify modals */
     .settings-modal,
     .modal-content {
         width: 95%;
         max-width: 95%;
     }
-    
+
     /* Reduce ticket container size */
     .ticket-container {
         width: 95%;
         min-width: unset;
         margin: 20px auto;
     }
-    
+
     /* Stack tabs vertically */
     .ticket-tabs {
         flex-direction: column;
     }
-    
+
     .tab-btn {
         width: 100%;
         margin-bottom: 5px;