Better suggestion accept on mobile and word wrap offset fix

ui/style.css

@@ -117,44 +117,6 @@ body {
     }
 }
 
-/* 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);
-}
-
-@media (max-width: 768px) {
-    .btn-floating.visible {
-        display: flex;
-    }
-}
-
-@media (min-width: 769px) {
-    .btn-floating.visible {
-        display: none;
-    }
-}
-
 .sidebar-header {
     margin-bottom: 2.5rem;
 }
@@ -376,7 +338,7 @@ label {
 #suggestion-overlay {
     width: 100%;
     height: 100%;
-    padding: 2rem;
+    padding: 2rem 2rem 10rem 2rem;
     font-family: "SF Mono", "Fira Code", monospace;
     font-size: 1.1rem;
     line-height: 1.8;
@@ -391,7 +353,7 @@ label {
 @media (max-width: 768px) {
     #editor,
     #suggestion-overlay {
-        padding: 1rem;
+        padding: 1rem 1rem 10rem 1rem;
         font-size: 1rem;
     }
 }
@@ -402,16 +364,59 @@ label {
     color: var(--foreground);
     outline: none;
     resize: none;
-    overflow-y: auto;
+    overflow-y: scroll;
+}
+
+#editor::-webkit-scrollbar {
+    width: 16px;
+}
+
+#editor::-webkit-scrollbar-thumb {
+    background-color: var(--muted);
+    border: 4px solid var(--card);
+    border-radius: 8px;
+}
+
+#editor::-webkit-scrollbar-track {
+    background-color: transparent;
 }
 
 #suggestion-overlay {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 1;
-    color: var(--muted-foreground);
+    z-index: 3;
+    color: transparent;
     pointer-events: none;
     opacity: 0.5;
     overflow: hidden;
+    overflow-y: scroll;
+}
+
+#suggestion-overlay::-webkit-scrollbar {
+    width: 16px; /* Width must match standard scrollbar width to align text */
+    background: transparent;
+}
+
+#suggestion-overlay::-webkit-scrollbar-thumb {
+    background: transparent;
+}
+
+.suggestion-highlight {
+    color: var(--muted-foreground);
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+.tab-icon {
+    display: inline-block;
+    width: 1.8em;
+    height: 1.2em;
+    vertical-align: middle;
+    margin-left: 0.5em;
+    opacity: 0.8;
+    border: 1px solid var(--muted-foreground);
+    border-radius: 4px;
+    padding: 2px;
+    pointer-events: none;
 }