Audiobook: row remove button, voice chip with arrow + name label, subtler lines, wider page

index.html

@@ -284,6 +284,7 @@ body {
 }
 
 .content-inner { width: 100%; max-width: 720px; }
+.content-inner:has(#page-audiobook.active) { max-width: 960px; }
 
 .page { display: none; }
 .page.active { display: block; }
@@ -369,22 +370,38 @@ body {
   padding: 8px 14px; border: 1px solid var(--border); border-top: none;
   border-radius: 0 0 12px 12px; background: var(--surface2); margin-bottom: 16px;
 }
-.ab-row { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; position: relative; }
+.ab-row { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; position: relative; }
 .ab-chip {
-  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border);
-  background: var(--surface3); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
-  display: flex; align-items: center; justify-content: center; margin-top: 1px; padding: 0;
-  position: relative;
+  flex: none; width: 56px; background: none; border: none; cursor: pointer; padding: 0;
+  display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 1px;
+}
+.ab-chip-av {
+  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border);
+  color: #fff; font-size: 12px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center; gap: 1px; position: relative;
+}
+.ab-chip-av svg { width: 9px; height: 9px; opacity: 0.85; }
+.ab-chip.overridden .ab-chip-av { box-shadow: 0 0 0 2px var(--accent); }
+.ab-chip-name {
+  font-size: 10px; font-weight: 600; color: var(--text-muted); max-width: 56px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2;
 }
-.ab-chip.overridden { box-shadow: 0 0 0 2px var(--accent); }
+.ab-chip:hover .ab-chip-name { color: var(--text-secondary); }
 .ab-para {
-  flex: 1; font-size: 15px; line-height: 1.55; color: var(--text); padding: 3px 6px;
-  border-radius: 6px; background: rgba(255, 251, 5, 0.16); outline: none; min-height: 1.55em;
+  flex: 1; font-size: 15px; line-height: 1.55; color: var(--text); padding: 4px 8px;
+  border-radius: 6px; background: transparent; outline: none; min-height: 1.55em;
   white-space: pre-wrap; word-break: break-word;
 }
-.ab-para:focus { background: rgba(255, 251, 5, 0.28); }
+.ab-para:hover { background: var(--surface2); }
+.ab-para:focus { background: var(--surface2); }
 .ab-para:empty::before { content: "Type or paste a paragraph… (Enter starts a new line, each line is its own voice)"; color: var(--text-muted); pointer-events: none; }
 .ab-row-side { flex: none; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
+.ab-row-del {
+  width: 24px; height: 24px; border-radius: 6px; border: 1px solid transparent;
+  background: none; color: var(--text-muted); cursor: pointer; padding: 0;
+  display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
+}
+.ab-row-del:hover { color: #dc2626; border-color: var(--border); background: var(--surface3); }
 .ab-play-one {
   width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border);
   background: var(--surface3); color: var(--text-secondary); cursor: pointer; padding: 0;
@@ -3793,8 +3810,14 @@ function renderAbRows() {
     chip.type = "button";
     chip.className = "ab-chip" + (s.voiceId ? " overridden" : "");
     const eff = abEffectiveVoice(s.voiceId);
-    chip.style.background = eff.color;
-    chip.textContent = eff.initial;
+    const av = document.createElement("span");
+    av.className = "ab-chip-av";
+    av.style.background = eff.color;
+    av.innerHTML = `<span>${eff.initial}</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="6 9 12 15 18 9"/></svg>`;
+    const nm = document.createElement("span");
+    nm.className = "ab-chip-name";
+    nm.textContent = eff.label;
+    chip.appendChild(av); chip.appendChild(nm);
     chip.title = `Voice: ${eff.label}${s.voiceId ? " (override)" : " (default)"} — click to change`;
     chip.onmousedown = (e) => e.preventDefault();
     chip.onclick = (e) => abOpenVoiceMenu(e, i);
@@ -3818,7 +3841,10 @@ function renderAbRows() {
     const st = document.createElement("span");
     st.className = "ab-row-status " + (s.status === "idle" ? "" : s.status);
     st.textContent = s.status === "done" ? "✓" : s.status === "error" ? "✕" : s.status === "active" ? "…" : "";
-    side.appendChild(play); side.appendChild(st);
+    const del = document.createElement("button");
+    del.type = "button"; del.className = "ab-row-del"; del.title = "Remove line"; del.textContent = "✕";
+    del.onclick = () => abRemoveRow(i);
+    side.appendChild(play); side.appendChild(st); side.appendChild(del);
 
     row.appendChild(chip); row.appendChild(para); row.appendChild(side);
     doc.appendChild(row);
@@ -3886,6 +3912,18 @@ function abParaPaste(e, i) {
   }
 }
 
+window.abRemoveRow = function(i) {
+  if (abSegments.length <= 1) {
+    abSegments = [{ text: "", voiceId: "", status: "idle", url: null }];
+    renderAbRows();
+    abFocusRow(0, 0);
+    return;
+  }
+  abSegments.splice(i, 1);
+  renderAbRows();
+  abFocusRow(Math.max(0, i - 1), abSegments[Math.max(0, i - 1)].text.length);
+};
+
 window.abClearDoc = function() {
   abSegments = [{ text: "", voiceId: "", status: "idle", url: null }];
   renderAbRows();