feat: implement interactive hover-to-reveal redaction styling and update line height

index.html

@@ -267,35 +267,83 @@
             border-radius: 12px;
             padding: 1.5rem;
             font-size: 1.05rem;
-            line-height: 1.9;
+            line-height: 2.2; /* Increased line-height to accommodate badges */
             white-space: pre-wrap;
             min-height: 100px;
         }
 
-        .entity {
-            display: inline-flex;
+        /* Redaction Styling */
+        .redacted {
+            position: relative;
+            display: inline-grid;
             align-items: center;
+            justify-items: center;
+            background-color: var(--bg);
             border-radius: 6px;
-            padding: 0.1rem 0.3rem 0.1rem 0.4rem;
             margin: 0 0.2rem;
-            font-weight: 500;
-            position: relative;
-            cursor: default;
-            transition: all 0.2s;
-            color: var(--text-primary);
+            padding: 0.1rem 0.5rem;
+            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>'), pointer;
+            overflow: hidden;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
+            vertical-align: middle;
+        }
+
+        .redacted::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: repeating-linear-gradient(
+                -45deg,
+                rgba(0,0,0,0.1) 0,
+                rgba(0,0,0,0.1) 4px,
+                rgba(0,0,0,0.2) 4px,
+                rgba(0,0,0,0.2) 8px
+            );
+            z-index: 1;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
         }
 
-        .entity:hover { filter: brightness(1.2); }
+        .redacted-text {
+            grid-area: 1 / 1;
+            opacity: 0;
+            filter: blur(4px);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            color: #fff;
+            font-weight: 500;
+        }
 
-        .entity-tag {
+        .redacted-label {
+            grid-area: 1 / 1;
             font-size: 0.65rem;
+            font-family: 'Outfit', sans-serif;
+            font-weight: 700;
+            color: #fff;
+            letter-spacing: 0.1em;
             text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-left: 0.4rem;
-            background: rgba(0,0,0,0.5);
-            padding: 0.15rem 0.35rem;
-            border-radius: 4px;
-            font-weight: 600;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 2;
+            text-shadow: 0 1px 3px rgba(0,0,0,0.6);
+        }
+
+        .redacted:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            box-shadow: inset 0 0 0 rgba(0,0,0,0);
+        }
+
+        .redacted:hover .redacted-text {
+            opacity: 1;
+            filter: blur(0);
+        }
+
+        .redacted:hover .redacted-label {
+            opacity: 0;
+            transform: scale(0.9);
+        }
+
+        .redacted:hover::before {
+            opacity: 0;
         }
 
         /* Footer Legend */
@@ -523,9 +571,9 @@
                     const color = entityColors[type] || '#888';
                     const label = type.replace('private_', '');
                     
-                    html += `<span class="entity" style="background-color: ${color}20; border-bottom: 2px solid ${color};">
-                        ${escapeHtml(text.substring(ent.start, ent.end))}
-                        <span class="entity-tag" style="color: ${color};">${label}</span>
+                    html += `<span class="redacted" style="--bg: ${color};">
+                        <span class="redacted-text">${escapeHtml(text.substring(ent.start, ent.end))}</span>
+                        <span class="redacted-label">${label}</span>
                     </span>`;
                     
                     lastIdx = ent.end;