Savestate: Fix mask-image clipping in Safari using translateZ and move fold out of masked parent

index.html

@@ -74,7 +74,7 @@
 </head>
 <body class="dark-theme in-chat-view">
   
-  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.255</div>
+  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.256</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/styles/global.css

@@ -3821,9 +3821,12 @@ body.in-chat-view .tts-player-container {
   background: #ffffff;
   box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
   
+  /* Force hardware acceleration so Safari actually clips absolute children correctly */
+  transform: translateZ(0);
+  
   /* Mask out the top right corner exactly */
-  -webkit-mask-image: linear-gradient(225deg, transparent 21px, black 21.5px);
-  mask-image: linear-gradient(225deg, transparent 21px, black 21.5px);
+  -webkit-mask-image: linear-gradient(to bottom left, transparent 21px, black 21px);
+  mask-image: linear-gradient(to bottom left, transparent 21px, black 21px);
   
   display: flex;
   flex-direction: column;
@@ -3837,10 +3840,10 @@ body.in-chat-view .tts-player-container {
   right: 0;
   width: 32px;
   height: 32px;
-  /* Overshoot the transparency so the parent mask creates the perfect edge */
-  background: linear-gradient(225deg, transparent 18px, #fbfbfb 19px, #e6e6e6 100%);
+  /* Use the EXACT same gradient angle and distance as the mask to prevent any gaps */
+  background: linear-gradient(to bottom left, transparent 21px, #fbfbfb 21px, #e6e6e6 100%);
   border-bottom-left-radius: 10px;
-  filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.1));
+  filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.12));
   z-index: 10;
 }
 

src/views/documents/documents-view.js

@@ -275,9 +275,6 @@ export class DocumentsView {
     return `
       <div class="vault-file vault-item-enter" style="--delay: ${delay}ms" data-name="${f.name}" data-isdir="false" data-path="${path}" title="${f.name}">
         <div class="vault-file-body vault-file-body-${ext}">
-          <!-- The beautiful Apple-style folded corner -->
-          <div class="vault-file-fold"></div>
-          
           <!-- The realistic invoice skeleton -->
           <div class="vault-file-invoice">
             <div class="vault-file-invoice-header">BMW Financial Services</div>
@@ -317,7 +314,11 @@ export class DocumentsView {
           <div id="preview-${path.replace(/[^a-zA-Z0-9]/g, '_')}" class="vault-file-preview-slot">
           </div>
         </div>
-        <!-- <div class="vault-file-name">${f.name}</div> -->
+        
+        <!-- The beautiful Apple-style folded corner is now OUTSIDE the body so it doesn't get masked -->
+        <div class="vault-file-fold"></div>
+        
+        <!-- To match Apple Files timeline reference, no names or sizes are shown under the documents -->
         <!-- ${sizeStr ? `<div class="vault-file-size">${sizeStr}</div>` : ''} -->
         <button class="vault-item-delete" title="Löschen" data-name="${f.name}" data-isdir="false">
           <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>