fix: nudge flash layout, Lucide icons, hover bar spacing

inject.js

@@ -776,16 +776,30 @@ function setSubtitleNudgeEnabledForVideo(video, enabled) {
   return normalizedEnabled;
 }
 
+function subtitleNudgeIconMarkup(isEnabled) {
+  var action = isEnabled ? "subtitleNudgeOn" : "subtitleNudgeOff";
+  if (typeof vscIconSvgString !== "function") {
+    return isEnabled ? "✓" : "×";
+  }
+  var svg = vscIconSvgString(action, 14);
+  if (!svg) {
+    return isEnabled ? "✓" : "×";
+  }
+  return (
+    '<span class="vsc-btn-icon" aria-hidden="true">' + svg + "</span>"
+  );
+}
+
 function updateSubtitleNudgeIndicator(video) {
   if (!video || !video.vsc) return;
 
   var isEnabled = isSubtitleNudgeEnabledForVideo(video);
-  var label = isEnabled ? "✓" : "×";
   var title = isEnabled ? "Subtitle nudge enabled" : "Subtitle nudge disabled";
+  var mark = subtitleNudgeIconMarkup(isEnabled);
 
   var indicator = video.vsc.subtitleNudgeIndicator;
   if (indicator) {
-    indicator.textContent = label;
+    indicator.innerHTML = mark;
     indicator.dataset.enabled = isEnabled ? "true" : "false";
     indicator.dataset.supported = "true";
     indicator.title = title;
@@ -794,9 +808,10 @@ function updateSubtitleNudgeIndicator(video) {
 
   var flashEl = video.vsc.nudgeFlashIndicator;
   if (flashEl) {
-    flashEl.textContent = label;
+    flashEl.innerHTML = mark;
     flashEl.dataset.enabled = isEnabled ? "true" : "false";
     flashEl.dataset.supported = "true";
+    flashEl.setAttribute("aria-label", title);
   }
 }
 
@@ -1898,8 +1913,9 @@ function defineVideoController() {
     nudgeFlashIndicator.setAttribute("aria-hidden", "true");
 
     controller.appendChild(dragHandle);
-    controller.appendChild(nudgeFlashIndicator);
     controller.appendChild(controls);
+    /* Flash sits after #controls so it never inserts space between speed and buttons. */
+    controller.appendChild(nudgeFlashIndicator);
     shadow.appendChild(controller);
 
     this.speedIndicator = dragHandle;

shadow.css

@@ -47,8 +47,9 @@
   opacity: 0.7;
 }
 
+/* Space between speed readout and hover buttons — tweak this value (px) as you like */
 #controller:hover > .draggable {
-  margin-right: 0.8em;
+  margin-right: 5px;
 }
 
 /* Center presets: midpoint between left- and right-preset inset lines; center bar on that X. */
@@ -71,16 +72,21 @@
   max-width: none;
 }
 
-/* Standalone flash indicator next to speed text — hidden by default,
-   briefly shown when nudge is toggled via N key or click */
+/* Standalone flash next to speed when N is pressed — hidden = no layout footprint */
 #nudge-flash-indicator {
   display: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  width: 0;
+  min-width: 0;
+  max-width: 0;
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
   vertical-align: middle;
   align-items: center;
   justify-content: center;
-  margin-left: 0.3em;
-  padding: 3px 6px;
-  border-radius: 5px;
   font-size: 14px;
   line-height: 14px;
   font-weight: bold;
@@ -88,8 +94,27 @@
   box-sizing: border-box;
 }
 
+/* Same 24×24 footprint as #controls button */
 #nudge-flash-indicator.visible {
   display: inline-flex;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  max-width: 24px;
+  max-height: 24px;
+  margin-left: 5px;
+  padding: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+  align-items: center;
+  justify-content: center;
+  font-size: 0;
+  line-height: 0;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 
 /* Hide flash indicator when hovering — the one in #controls is visible instead */
@@ -107,50 +132,73 @@
 #nudge-flash-indicator[data-enabled="true"] {
   color: #fff;
   background: #4b9135;
-  border: 1px solid #6ec754;
+  border-color: #6ec754;
 }
 
 #nudge-flash-indicator[data-enabled="false"] {
   color: #fff;
   background: #943e3e;
-  border: 1px solid #c06060;
+  border-color: #c06060;
 }
 
+/* Same 24×24 chip as control buttons (Lucide check / x inside) */
 #nudge-indicator {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 3px 6px;
-  border-radius: 5px;
-  font-size: 14px;
-  line-height: 14px;
-  font-weight: bold;
-  font-family: "Lucida Console", Monaco, monospace;
   box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  max-height: 24px;
+  padding: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+  font-size: 0;
+  line-height: 0;
   cursor: pointer;
   margin: 0;
   flex-shrink: 0;
+  overflow: hidden;
 }
 
 #nudge-indicator[data-enabled="true"] {
   color: #fff;
   background: #4b9135;
-  border: 1px solid #6ec754;
+  border-color: #6ec754;
 }
 
 #nudge-indicator[data-enabled="false"] {
   color: #fff;
   background: #943e3e;
-  border: 1px solid #c06060;
+  border-color: #c06060;
 }
 
 #nudge-indicator[data-supported="false"] {
   opacity: 0.6;
 }
 
-#controller #nudge-indicator,
-#controller #nudge-flash-indicator {
-  line-height: 14px;
+#nudge-flash-indicator.visible .vsc-btn-icon,
+#nudge-indicator .vsc-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+}
+
+#nudge-flash-indicator.visible .vsc-btn-icon svg,
+#nudge-indicator .vsc-btn-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  transform: translateY(0.5px);
 }
 
 #controller.dragging {

ui-icons.js

@@ -27,7 +27,12 @@ var vscUiIconPaths = {
   mark: '<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>',
   jump:
     '<polyline points="9 10 4 15 9 20"/><path d="M20 4v7a4 4 0 0 1-4 4H4"/>',
-  nudge: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>'
+  nudge: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
+  /** Lucide check — subtitle nudge on */
+  subtitleNudgeOn: '<path d="M20 6 9 17l-5-5"/>',
+  /** Lucide x — subtitle nudge off */
+  subtitleNudgeOff:
+    '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>'
 };
 
 /**