CSS improvements and fixes

- Add missing CSS variables (--terminal-green-dim, --terminal-red)
- Add global box-sizing: border-box for consistent layouts
- Fix duplicate keyframe animations (blink-cursor, pulse-glow)
- Replace hardcoded hex colors with CSS variables
- Fix textarea width calculations (remove calc workarounds)
- Add responsive thread depth for mobile
- Add accessibility improvements:
  - Visible focus outlines for keyboard navigation
  - prefers-reduced-motion support
- Fix duplicate transition property in .tab-btn
- Update slider checked color to use terminal-green

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

assets/css/ticket.css

@@ -295,14 +295,7 @@ textarea[data-field="description"]:not(:disabled)::after {
     margin-left: 2px;
 }
 
-@keyframes blink-cursor {
-    0%, 50% {
-        opacity: 1;
-    }
-    51%, 100% {
-        opacity: 0;
-    }
-}
+/* blink-cursor keyframes defined in dashboard.css */
 
 /* Mobile: Stack metadata fields */
 @media (max-width: 768px) {
@@ -458,7 +451,7 @@ textarea[data-field="description"]:not(:disabled)::after {
 }
 
 .title-input[contenteditable="true"]:hover {
-    border-color: #3b82f6;
+    border-color: var(--terminal-amber);
 }
 
 .title-input[contenteditable="false"] {
@@ -518,17 +511,15 @@ textarea[data-field="description"]:not(:disabled)::after {
 }
 
 input.editable {
-    width: calc(100% - 20px);
-    box-sizing: border-box;
+    width: 100%;
 }
 
 textarea.editable {
-    width: calc(100% - 20px);
+    width: 100%;
     min-height: 800px !important;
     height: auto !important;
-    box-sizing: border-box;
     white-space: pre;
-    font-family: monospace;
+    font-family: var(--font-mono);
     line-height: 1.2;
 }
 
@@ -557,13 +548,15 @@ textarea.editable {
 }
 
 .btn.primary {
-    background: #3b82f6;
-    color: white;
+    background: var(--terminal-amber);
+    color: var(--bg-primary);
+    border-color: var(--terminal-amber);
 }
 
 .btn.active {
-    background: #3b82f6;
-    color: white;
+    background: var(--terminal-green);
+    color: var(--bg-primary);
+    border-color: var(--terminal-green);
 }
 
 .btn:hover {
@@ -608,7 +601,7 @@ textarea.editable {
 }
 
 .comment-form textarea {
-    width: calc(100% - 20px);
+    width: 100%;
     min-height: 100px;
     margin-bottom: 10px;
     padding: 10px;
@@ -617,6 +610,7 @@ textarea.editable {
     background: var(--bg-primary);
     color: var(--terminal-green);
     font-family: var(--font-mono);
+    box-sizing: border-box;
 }
 
 .comment-form textarea::placeholder {
@@ -807,6 +801,7 @@ textarea.editable {
     font-family: var(--font-mono);
     font-size: 0.9rem;
     resize: vertical;
+    box-sizing: border-box;
 }
 
 .comment-edit-textarea:focus {
@@ -864,6 +859,21 @@ textarea.editable {
     margin-left: 6rem;
 }
 
+/* Reduce thread indentation on mobile */
+@media (max-width: 768px) {
+    .comment.thread-depth-1 {
+        margin-left: 1rem;
+    }
+
+    .comment.thread-depth-2 {
+        margin-left: 1.5rem;
+    }
+
+    .comment.thread-depth-3 {
+        margin-left: 2rem;
+    }
+}
+
 /* Reply styling */
 .comment.comment-reply {
     position: relative;
@@ -967,6 +977,7 @@ textarea.editable {
     font-size: 0.9rem;
     resize: vertical;
     margin-bottom: 0.75rem;
+    box-sizing: border-box;
 }
 
 .reply-form-container textarea:focus {
@@ -1047,7 +1058,6 @@ textarea.editable {
     transition: all 0.3s ease;
     position: relative;
     margin-right: -2px;
-    transition: all 0.3s ease;
 }
 
 .tab-btn::before {
@@ -1168,7 +1178,7 @@ textarea.editable {
 }
 
 input:checked + .slider {
-    background-color: #3b82f6;
+    background-color: var(--terminal-green);
 }
 
 input:checked + .slider:before {