@sync-in/server 1.5.2 → 1.6.1

package/static/assets/pdfjs/web/viewer.css

@@ -545,7 +545,7 @@
     --radio-border-color:ButtonText;
     --radio-checked-border-color:ButtonText;
 
-    --button-secondary-bg-color:HighlightText;
+    --button-secondary-bg-color:ButtonFace;
     --button-secondary-fg-color:ButtonText;
     --button-secondary-border-color:ButtonText;
     --button-secondary-active-bg-color:HighlightText;
@@ -558,7 +558,7 @@
     --button-secondary-disabled-border-color:GrayText;
 
     --button-primary-bg-color:ButtonText;
-    --button-primary-fg-color:HighlightText;
+    --button-primary-fg-color:ButtonFace;
     --button-primary-border-color:ButtonText;
     --button-primary-active-bg-color:SelectedItem;
     --button-primary-active-fg-color:HighlightText;
@@ -571,7 +571,7 @@
     --button-primary-disabled-border-color:GrayText;
     --button-disabled-opacity:1;
 
-    --input-text-bg-color:HighlightText;
+    --input-text-bg-color:Field;
     --input-text-fg-color:FieldText;
 }
   }
@@ -2920,80 +2920,22 @@
     height:16px !important;
   }
 
+.commentPopup,
 #commentManagerDialog{
-  --comment-actions-button-icon:url(images/comment-actionsButton.svg);
-  --comment-close-button-icon:url(images/comment-closeButton.svg);
-
-  --default-dialog-bg-color:#ffff98;
-  --dialog-base-color:var(--default-dialog-bg-color);
-  --dialog-bg-color:color-mix(in srgb, var(--dialog-base-color), white 30%);
-  --dialog-border-color:var(--dialog-base-color);
-
-  --menuitem-bg-color:transparent;
-  --menuitem-fg-color:black;
-  --menuitem-hover-bg-color:#3383e7;
-  --menuitem-hover-fg-color:white;
-
-  --comment-text-input-bg:white;
-  --comment-text-input-fg:black;
-  --comment-text-input-border:#0060df;
-  --comment-focus-outline-color:#0060df;
-
-  --hover-filter:brightness(0.9);
-  --text-primary-color:#15141a;
-
-  --button-secondary-bg-color:#f0f0f4;
-  --button-secondary-active-bg-color:color-mix(
-    in srgb,
-    var(--button-secondary-bg-color),
-    black 14%
-  );
-  --button-secondary-hover-bg-color:color-mix(
-    in srgb,
-    var(--button-secondary-bg-color),
-    black 7%
-  );
-
-  --button-primary-bg-color:#0060df;
-  --button-primary-fg-color:#fbfbfe;
-  --button-primary-active-bg-color:#0050c0;
-  --button-primary-hover-bg-color:#0250bb;
-
-  --menu-bg-color:rgb(253 250 244);
-  --menu-button-border-color:transparent;
-  --menu-button-focus-outline-color:var(--comment-text-input-border);
-}
-
-@media screen and (forced-colors: active){
-
-#commentManagerDialog{
-    --hover-filter:none;
-    --text-primary-color:CanvasText;
-    --button-secondary-bg-color:HighlightText;
-    --button-secondary-active-bg-color:HighlightText;
-    --button-secondary-hover-bg-color:HighlightText;
-    --button-primary-bg-color:ButtonText;
-    --button-primary-fg-color:HighlightText;
-    --button-primary-active-bg-color:SelectedItem;
-    --button-primary-hover-bg-color:SelectedItem;
+  width:360px;
+  max-width:100%;
+  min-width:200px;
+  position:absolute;
+  padding:8px 16px 16px;
+  margin-left:0;
+  margin-top:0;
+  box-sizing:border-box;
 
-    --menu-button-border-color:Canvas;
-    --menu-button-focus-outline-color:CanvasText;
+  border-radius:8px;
 }
-  }
 
 #commentManagerDialog{
-
-  width:308px;
-  padding:8px 16px 16px;
-  overflow:visible;
-  position:absolute;
-  margin:0;
-
-  border-radius:4px;
-  border:1px solid var(--dialog-border-color);
-  background:var(--dialog-bg-color);
-  box-shadow:0 2px 14px 0 rgb(58 57 68 / 0.2);
+  --comment-close-button-icon:url(images/comment-closeButton.svg);
 }
 
 #commentManagerDialog .mainContainer{
@@ -3005,15 +2947,11 @@
     gap:4px;
   }
 
-:is(#commentManagerDialog .mainContainer) *:focus-visible{
-      outline:2px solid var(--comment-focus-outline-color);
-      outline-offset:0;
-    }
-
 :is(#commentManagerDialog .mainContainer) #commentManagerToolbar{
       width:100%;
+      height:32px;
       display:flex;
-      justify-content:flex-end;
+      justify-content:flex-start;
       align-items:flex-start;
       gap:8px;
       align-self:stretch;
@@ -3021,157 +2959,19 @@
       cursor:move;
     }
 
-:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar)  > button{
-        --csstools-color-scheme--light:initial;
-        color-scheme:light;
-        width:24px;
-        height:24px;
-        padding:0;
-        border:none;
-
-        cursor:pointer;
-      }
-
-:is(:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar) > button)::before{
-          content:"";
-          display:inline-block;
-          width:100%;
-          height:100%;
-          -webkit-mask-repeat:no-repeat;
-                  mask-repeat:no-repeat;
-          -webkit-mask-position:center;
-                  mask-position:center;
-        }
-
-#commentActionsButton:is(:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar) > button)::before{
-          -webkit-mask-image:var(--comment-actions-button-icon);
-                  mask-image:var(--comment-actions-button-icon);
-        }
-
-#commentCloseButton:is(:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar) > button)::before{
-          -webkit-mask-image:var(--comment-close-button-icon);
-                  mask-image:var(--comment-close-button-icon);
-        }
-
-:is(:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar) > button)  > span{
-          display:inline-block;
-          width:0;
-          height:0;
-          overflow:hidden;
-        }
-
-:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar) menu{
-        width:-moz-max-content;
-        width:max-content;
-        min-width:90px;
-        display:flex;
-        flex-direction:column;
-        align-items:center;
-        gap:1px;
-        padding:5px 6px;
-        cursor:auto;
-        z-index:1;
-        margin:0;
-
-        position:absolute;
-        top:8px;
-        right:-6.5px;
-
-        border-radius:6px;
-        border:0.5px solid #b4b4b6;
-        background-color:var(--menu-bg-color);
-        box-shadow:1px -1px 0 0 #fff inset, -1px 1px 0 0 #fff inset, -1px -1px 0 0 #fff inset, 1px 1px 0 0 #fff inset, 0 0 15px 0 rgb(0 0 0 / 0.25);
-      }
-
-:is(:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar) menu) button{
-          background-color:var(--menuitem-bg-color);
-          width:100%;
-          height:24px;
-          padding:0;
-          box-sizing:border-box;
-          display:flex;
-          border:2px solid var(--menu-button-border-color);
-          color:var(--menuitem-fg-color);
-        }
-
-:is(:is(:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar) menu) button):hover{
-            background-color:var(--menuitem-hover-bg-color);
-            color:var(--menuitem-hover-fg-color);
-          }
-
-:is(:is(:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar) menu) button):is(:focus-visible,:focus){
-            outline:none;
-            border:2px solid var(--menu-button-focus-outline-color);
-          }
-
-:is(:is(:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar) menu) button):disabled{
-            opacity:0.5;
-            pointer-events:none;
-          }
-
-:is(:is(:is(:is(#commentManagerDialog .mainContainer) #commentManagerToolbar) menu) button) span{
-            align-content:center;
-            width:100%;
-            max-width:-moz-min-content;
-            max-width:min-content;
-            padding-inline:8px;
-            color:inherit;
-            text-align:start;
-            font:menu;
-            font-size:15px;
-            font-weight:400;
-            line-height:normal;
-          }
-
 :is(#commentManagerDialog .mainContainer) #commentManagerTextInput{
       width:100%;
       min-height:132px;
-      resize:none;
-      box-sizing:border-box;
       margin-bottom:12px;
-
-      border-radius:4px;
-      border:2px solid var(--comment-text-input-border);
-      background-color:var(--comment-text-input-bg);
-      color:var(--comment-text-input-fg);
-    }
-
-:is(#commentManagerDialog .mainContainer) #commentManagerTextView{
-      width:100%;
-      height:-moz-max-content;
-      height:max-content;
-      resize:none;
-      box-sizing:border-box;
-      margin-bottom:12px;
-
-      border:none;
-      background-color:transparent;
-      color:var(--comment-text-input-fg);
-    }
-
-:is(#commentManagerDialog .mainContainer) .dialogButtonsGroup{
-      gap:8px;
     }
 
-:is(:is(#commentManagerDialog .mainContainer) .dialogButtonsGroup) #commentManagerSaveButton:disabled{
-        background-color:color-mix(
-          in srgb,
-          var(--button-primary-disabled-bg-color),
-          transparent 50%
-        );
-        border-color:color-mix(
-          in srgb,
-          var(--button-primary-disabled-border-color),
-          transparent 50%
-        );
-        opacity:1;
-      }
-
-.annotationLayer.disabled .annotationCommentButton{
+.annotationLayer.disabled :is(.annotationCommentButton){
   display:none;
 }
 
 :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{
+    --csstools-color-scheme--light:initial;
+    color-scheme:light dark;
     --csstools-light-dark-toggle--75:var(--csstools-color-scheme--light) #1c1b22;
     --comment-button-bg:var(--csstools-light-dark-toggle--75, white);
     --csstools-light-dark-toggle--76:var(--csstools-color-scheme--light) #fbfbfe;
@@ -3261,16 +3061,25 @@
   }
 }
 
+@media (prefers-color-scheme: dark){
+
+:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{
+    --csstools-color-scheme--light:;
+  }
+}
+
 @media screen and (forced-colors: active){
 
 :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{
-      --comment-button-bg:Canvas;
-      --comment-button-fg:CanvasText;
-      --comment-button-hover-bg:Highlight;
-      --comment-button-hover-fg:ButtonFace;
-      --comment-button-active-bg:Highlight;
-      --comment-button-active-fg:ButtonFace;
+      --comment-button-bg:ButtonFace;
+      --comment-button-fg:ButtonText;
+      --comment-button-hover-bg:SelectedItemText;
+      --comment-button-hover-fg:SelectedItem;
+      --comment-button-active-bg:SelectedItemText;
+      --comment-button-active-fg:SelectedItem;
       --comment-button-border-color:ButtonBorder;
+      --comment-button-active-border-color:ButtonBorder;
+      --comment-button-hover-border-color:SelectedItem;
       --comment-button-box-shadow:none;
       --comment-button-focus-outline-color:CanvasText;
       --comment-button-selected-bg:ButtonBorder;
@@ -3349,18 +3158,25 @@
         background-color:var(--comment-button-selected-fg);
       }
 
-#editorCommentsSidebar{
+#editorCommentsSidebar,
+.commentPopup{
   --comment-close-button-icon:url(images/comment-closeButton.svg);
+  --comment-popup-edit-button-icon:url(images/comment-popup-editButton.svg);
+  --comment-popup-delete-button-icon:url(images/editor-toolbar-delete.svg);
 
   --csstools-light-dark-toggle--88:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69);
 
   --comment-date-fg-color:var(--csstools-light-dark-toggle--88, rgb(21 20 26 / 0.69));
   --csstools-light-dark-toggle--89:var(--csstools-color-scheme--light) #1c1b22;
   --comment-bg-color:var(--csstools-light-dark-toggle--89, #f9f9fb);
-  --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14);
-  --comment-hover-bg-color:var(--csstools-light-dark-toggle--90, rgb(21 20 26 / 0.14));
-  --csstools-light-dark-toggle--91:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21);
-  --comment-active-bg-color:var(--csstools-light-dark-toggle--91, rgb(21 20 26 / 0.21));
+  --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) #2c2b33;
+  --comment-hover-bg-color:var(--csstools-light-dark-toggle--90, #e0e0e6);
+  --csstools-light-dark-toggle--91:var(--csstools-color-scheme--light) #3a3944;
+  --comment-active-bg-color:var(--csstools-light-dark-toggle--91, #d1d1d9);
+  --comment-hover-brightness:0.89;
+  --comment-hover-filter:brightness(var(--comment-hover-brightness));
+  --comment-active-brightness:0.825;
+  --comment-active-filter:brightness(var(--comment-active-brightness));
   --csstools-light-dark-toggle--92:var(--csstools-color-scheme--light) #52525e;
   --comment-border-color:var(--csstools-light-dark-toggle--92, #f0f0f4);
   --csstools-light-dark-toggle--93:var(--csstools-color-scheme--light) #00cadb;
@@ -3371,16 +3187,34 @@
   --comment-count-bg-color:var(--csstools-light-dark-toggle--95, #e2f7ff);
   --csstools-light-dark-toggle--96:var(--csstools-color-scheme--light) #a6ecf4;
   --comment-indicator-active-fg-color:var(--csstools-light-dark-toggle--96, #0041a4);
+  --comment-indicator-active-filter:brightness(
+    calc(1 / var(--comment-active-brightness))
+  );
   --csstools-light-dark-toggle--97:var(--csstools-color-scheme--light) #fbfbfe;
   --comment-indicator-focus-fg-color:var(--csstools-light-dark-toggle--97, #5b5b66);
   --csstools-light-dark-toggle--98:var(--csstools-color-scheme--light) #61dce9;
   --comment-indicator-hover-fg-color:var(--csstools-light-dark-toggle--98, #0053cb);
+  --comment-indicator-hover-filter:brightness(
+    calc(1 / var(--comment-hover-brightness))
+  );
   --csstools-light-dark-toggle--99:var(--csstools-color-scheme--light) #00cadb;
   --comment-indicator-selected-fg-color:var(--csstools-light-dark-toggle--99, #0062fa);
+
+  --button-comment-bg:transparent;
+  --button-comment-color:var(--main-color);
+  --csstools-light-dark-toggle--100:var(--csstools-color-scheme--light) #5b5b66;
+  --button-comment-active-bg:var(--csstools-light-dark-toggle--100, #cfcfd8);
+  --button-comment-active-border:none;
+  --button-comment-active-color:var(--button-comment-color);
+  --button-comment-border:none;
+  --csstools-light-dark-toggle--101:var(--csstools-color-scheme--light) #52525e;
+  --button-comment-hover-bg:var(--csstools-light-dark-toggle--101, #e0e0e6);
+  --button-comment-hover-color:var(--button-comment-color);
 }
 
 @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){
-#editorCommentsSidebar{
+#editorCommentsSidebar,
+.commentPopup{
 
   --comment-date-fg-color:light-dark(
     rgb(21 20 26 / 0.69),
@@ -3390,26 +3224,11 @@
 }
 
 @supports (color: light-dark(red, red)){
-#editorCommentsSidebar{
+#editorCommentsSidebar,
+.commentPopup{
   --comment-bg-color:light-dark(#f9f9fb, #1c1b22);
-}
-}
-
-@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){
-#editorCommentsSidebar{
-  --comment-hover-bg-color:light-dark(
-    rgb(21 20 26 / 0.14),
-    rgb(251 251 254 / 0.14)
-  );
-  --comment-active-bg-color:light-dark(
-    rgb(21 20 26 / 0.21),
-    rgb(251 251 254 / 0.21)
-  );
-}
-}
-
-@supports (color: light-dark(red, red)){
-#editorCommentsSidebar{
+  --comment-hover-bg-color:light-dark(#e0e0e6, #2c2b33);
+  --comment-active-bg-color:light-dark(#d1d1d9, #3a3944);
   --comment-border-color:light-dark(#f0f0f4, #52525e);
   --comment-focus-outline-color:light-dark(#0062fa, #00cadb);
   --comment-fg-color:light-dark(#15141a, #fbfbfe);
@@ -3418,22 +3237,24 @@
   --comment-indicator-focus-fg-color:light-dark(#5b5b66, #fbfbfe);
   --comment-indicator-hover-fg-color:light-dark(#0053cb, #61dce9);
   --comment-indicator-selected-fg-color:light-dark(#0062fa, #00cadb);
+  --button-comment-active-bg:light-dark(#cfcfd8, #5b5b66);
+  --button-comment-hover-bg:light-dark(#e0e0e6, #52525e);
 }
 }
 
 @supports not (color: light-dark(tan, tan)){
 
-#editorCommentsSidebar *{
+:is(#editorCommentsSidebar,.commentPopup) *{
 
   --csstools-light-dark-toggle--88:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69);
 
   --comment-date-fg-color:var(--csstools-light-dark-toggle--88, rgb(21 20 26 / 0.69));
   --csstools-light-dark-toggle--89:var(--csstools-color-scheme--light) #1c1b22;
   --comment-bg-color:var(--csstools-light-dark-toggle--89, #f9f9fb);
-  --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14);
-  --comment-hover-bg-color:var(--csstools-light-dark-toggle--90, rgb(21 20 26 / 0.14));
-  --csstools-light-dark-toggle--91:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21);
-  --comment-active-bg-color:var(--csstools-light-dark-toggle--91, rgb(21 20 26 / 0.21));
+  --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) #2c2b33;
+  --comment-hover-bg-color:var(--csstools-light-dark-toggle--90, #e0e0e6);
+  --csstools-light-dark-toggle--91:var(--csstools-color-scheme--light) #3a3944;
+  --comment-active-bg-color:var(--csstools-light-dark-toggle--91, #d1d1d9);
   --csstools-light-dark-toggle--92:var(--csstools-color-scheme--light) #52525e;
   --comment-border-color:var(--csstools-light-dark-toggle--92, #f0f0f4);
   --csstools-light-dark-toggle--93:var(--csstools-color-scheme--light) #00cadb;
@@ -3450,16 +3271,23 @@
   --comment-indicator-hover-fg-color:var(--csstools-light-dark-toggle--98, #0053cb);
   --csstools-light-dark-toggle--99:var(--csstools-color-scheme--light) #00cadb;
   --comment-indicator-selected-fg-color:var(--csstools-light-dark-toggle--99, #0062fa);
+  --csstools-light-dark-toggle--100:var(--csstools-color-scheme--light) #5b5b66;
+  --button-comment-active-bg:var(--csstools-light-dark-toggle--100, #cfcfd8);
+  --csstools-light-dark-toggle--101:var(--csstools-color-scheme--light) #52525e;
+  --button-comment-hover-bg:var(--csstools-light-dark-toggle--101, #e0e0e6);
   }
 }
 
 @media screen and (forced-colors: active){
 
-#editorCommentsSidebar{
+#editorCommentsSidebar,
+.commentPopup{
     --comment-date-fg-color:CanvasText;
     --comment-bg-color:Canvas;
-    --comment-hover-bg-color:SelectedItemText;
-    --comment-active-bg-color:SelectedItemText;
+    --comment-hover-bg-color:Canvas;
+    --comment-hover-filter:none;
+    --comment-active-bg-color:Canvas;
+    --comment-active-filter:none;
     --comment-border-color:CanvasText;
     --comment-fg-color:CanvasText;
     --comment-count-bg-color:Canvas;
@@ -3467,16 +3295,19 @@
     --comment-indicator-focus-fg-color:CanvasText;
     --comment-indicator-hover-fg-color:CanvasText;
     --comment-indicator-selected-fg-color:SelectedItem;
+    --button-comment-bg:ButtonFace;
+    --button-comment-color:ButtonText;
+    --button-comment-active-bg:ButtonText;
+    --button-comment-active-color:HighlightText;
+    --button-comment-border:1px solid ButtonText;
+    --button-comment-hover-bg:Highlight;
+    --button-comment-hover-color:HighlightText;
 }
   }
 
 #editorCommentsSidebar{
-
   display:flex;
-  width:239px;
   height:auto;
-  min-width:180px;
-  max-width:632px;
   padding-bottom:16px;
   flex-direction:column;
   align-items:flex-start;
@@ -3528,6 +3359,7 @@
       width:32px;
       height:32px;
       padding:8px;
+      border-radius:4px;
       border:none;
       background:none;
       cursor:pointer;
@@ -3555,6 +3387,10 @@
         background-color:var(--comment-active-bg-color);
       }
 
+:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):focus-visible{
+        outline:var(--focus-ring-outline);
+      }
+
 :is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton)  > span{
         display:inline-block;
         width:0;
@@ -3562,124 +3398,376 @@
         overflow:hidden;
       }
 
-#editorCommentsSidebar #editorCommentsSidebarList{
-    display:flex;
-    width:auto;
-    padding:1px 16px 0;
-    gap:10px;
-    flex:1 0 0;
-    align-self:stretch;
-    align-items:flex-start;
-    flex-direction:column;
-    list-style-type:none;
+#editorCommentsSidebar #editorCommentsSidebarListContainer{
+    overflow:auto;
+    width:100%;
   }
 
-:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment{
+:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList{
       display:flex;
       width:auto;
-      padding:8px 16px 16px;
-      flex-direction:column;
+      padding:4px 16px;
+      gap:10px;
       align-items:flex-start;
-      align-self:stretch;
-      gap:4px;
-
-      border-radius:8px;
-      border:0.5px solid var(--comment-border-color);
-      background-color:var(--comment-bg-color);
+      flex-direction:column;
+      list-style-type:none;
     }
 
-:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover{
-          background-color:var(--comment-hover-bg-color);
-        }
+:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment{
+        display:flex;
+        width:auto;
+        padding:8px 16px 16px;
+        flex-direction:column;
+        align-items:flex-start;
+        align-self:stretch;
+        gap:4px;
 
-:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover time::after{
-            display:inline-block;
-            background-color:var(--comment-indicator-hover-fg-color);
+        border-radius:8px;
+        border:0.5px solid var(--comment-border-color);
+        background-color:var(--comment-bg-color);
+      }
+
+@media screen and (forced-colors: active){
+
+:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover{
+              background-color:var(--comment-hover-bg-color);
           }
+            }
 
-:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment):not(.noComments):active{
-          background-color:var(--comment-active-bg-color);
-        }
+:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover{
+            filter:var(--comment-hover-filter);
+          }
+
+:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover time::after{
+              display:inline-block;
+              background-color:var(--comment-indicator-hover-fg-color);
+              filter:var(--comment-indicator-hover-filter);
+            }
 
-:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment):not(.noComments):active time::after{
+@media screen and (forced-colors: active){
+
+:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active{
+              background-color:var(--comment-active-bg-color);
+          }
+            }
+
+:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active{
+            filter:var(--comment-active-filter);
+          }
+
+:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active time::after{
+              display:inline-block;
+              background-color:var(--comment-indicator-active-fg-color);
+              filter:var(--comment-indicator-active-filter);
+            }
+
+:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):is(:focus,:focus-visible) time::after{
             display:inline-block;
-            background-color:var(--comment-indicator-active-fg-color);
+            background-color:var(--comment-indicator-focus-fg-color);
           }
 
-:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment):not(.noComments):is(:focus,:focus-visible) time::after{
-          display:inline-block;
-          background-color:var(--comment-indicator-focus-fg-color);
-        }
+:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):focus-visible{
+            outline:2px solid var(--comment-focus-outline-color);
+            outline-offset:2px;
+          }
 
-:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment):not(.noComments):focus-visible{
-          outline:2px solid var(--comment-focus-outline-color);
-          outline-offset:2px;
+.selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) .sidebarCommentText{
+              max-height:-moz-fit-content;
+              max-height:fit-content;
+              -webkit-line-clamp:unset;
+            }
+
+.selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) time::after{
+              display:inline-block;
+              background-color:var(--comment-indicator-selected-fg-color);
+            }
+
+:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText{
+          font:menu;
+          font-style:normal;
+          font-weight:400;
+          line-height:normal;
+          font-size:15px;
+          width:100%;
+          height:-moz-fit-content;
+          height:fit-content;
+          max-height:80px;
+          display:-webkit-box;
+          -webkit-box-orient:vertical;
+          -webkit-line-clamp:2;
+          overflow:hidden;
+          overflow-wrap:break-word;
         }
 
-.selected:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment):not(.noComments) .sidebarCommentText{
+:is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText) .richText{
+            --total-scale-factor:1.5;
+          }
+
+.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText{
             max-height:-moz-fit-content;
             max-height:fit-content;
             -webkit-line-clamp:unset;
+            -webkit-user-select:none;
+               -moz-user-select:none;
+                    user-select:none;
           }
 
-.selected:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment):not(.noComments) time::after{
-            display:inline-block;
-            background-color:var(--comment-indicator-selected-fg-color);
+.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a{
+            font:menu;
+            font-style:normal;
+            font-weight:400;
+            line-height:normal;
+            font-size:15px;
+            width:100%;
+            height:auto;
+            overflow-wrap:break-word;
+            margin-block-start:15px;
           }
 
-:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText{
-        font:menu;
-        font-style:normal;
-        font-weight:400;
-        line-height:normal;
-        font-size:15px;
-        width:100%;
-        height:-moz-fit-content;
-        height:fit-content;
-        max-height:80px;
-        display:-webkit-box;
-        -webkit-box-orient:vertical;
-        -webkit-line-clamp:2;
-        overflow:hidden;
-        overflow-wrap:break-word;
-      }
+:is(.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a):focus-visible{
+              outline:var(--focus-ring-outline);
+            }
 
-.noComments:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText{
-        max-height:-moz-fit-content;
-        max-height:fit-content;
-        -webkit-line-clamp:unset;
-        -webkit-user-select:none;
-           -moz-user-select:none;
-                user-select:none;
-      }
+:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time{
+          width:100%;
+          display:inline-flex;
+          align-items:center;
+          justify-content:space-between;
 
-:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment) time{
-        width:100%;
-        display:inline-flex;
-        align-items:center;
-        justify-content:space-between;
+          font:menu;
+          font-style:normal;
+          font-weight:400;
+          line-height:normal;
+          font-size:13px;
+        }
 
-        font:menu;
-        font-style:normal;
-        font-weight:400;
-        line-height:normal;
-        font-size:13px;
+:is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time)::after{
+            content:"";
+            display:none;
+            width:16px;
+            height:16px;
+            -webkit-mask-repeat:no-repeat;
+                    mask-repeat:no-repeat;
+            -webkit-mask-position:center;
+                    mask-position:center;
+            -webkit-mask-image:var(--comment-edit-button-icon);
+                    mask-image:var(--comment-edit-button-icon);
+            transform:scaleX(var(--dir-factor));
+          }
+
+.commentPopup{
+  --csstools-color-scheme--light:initial;
+  color-scheme:light dark;
+
+  --csstools-light-dark-toggle--102:var(--csstools-color-scheme--light) #3a3944;
+
+  --divider-color:var(--csstools-light-dark-toggle--102, #cfcfd8);
+  --csstools-light-dark-toggle--103:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2);
+  --csstools-light-dark-toggle--104:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4);
+  --comment-shadow:0 0.5px 2px 0 var(--csstools-light-dark-toggle--103, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--104, rgb(0 0 0 / 0.1));
+}
+
+@supports (color: light-dark(red, red)){
+.commentPopup{
+
+  --divider-color:light-dark(#cfcfd8, #3a3944);
+}
+}
+
+@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){
+.commentPopup{
+  --comment-shadow:0 0.5px 2px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 4px 16px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
+}
+}
+
+@supports not (color: light-dark(tan, tan)){
+
+.commentPopup *{
+
+  --csstools-light-dark-toggle--102:var(--csstools-color-scheme--light) #3a3944;
+
+  --divider-color:var(--csstools-light-dark-toggle--102, #cfcfd8);
+  --csstools-light-dark-toggle--103:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2);
+  --csstools-light-dark-toggle--104:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4);
+  --comment-shadow:0 0.5px 2px 0 var(--csstools-light-dark-toggle--103, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--104, rgb(0 0 0 / 0.1));
+  }
+}
+
+@media (prefers-color-scheme: dark){
+
+.commentPopup{
+  --csstools-color-scheme--light:;
+}
+}
+
+@media screen and (forced-colors: active){
+
+.commentPopup{
+    --divider-color:CanvasText;
+    --comment-shadow:none;
+}
+  }
+
+.commentPopup{
+
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  gap:12px;
+  z-index:100001;
+  pointer-events:auto;
+  margin-top:2px;
+
+  border:0.5px solid var(--comment-border-color);
+  background:var(--comment-bg-color);
+  box-shadow:var(--comment-shadow);
+}
+
+.commentPopup:focus-visible{
+    outline:none;
+  }
+
+.commentPopup.dragging{
+    cursor:move !important;
+  }
+
+.commentPopup.dragging *{
+      cursor:move !important;
+    }
+
+.commentPopup.dragging button{
+      pointer-events:none !important;
+    }
+
+.commentPopup:not(.selected) .commentPopupButtons{
+    visibility:hidden !important;
+  }
+
+.commentPopup hr{
+    width:100%;
+    height:1px;
+    border:none;
+    border-top:1px solid var(--divider-color);
+    margin:0;
+    padding:0;
+  }
+
+.commentPopup .commentPopupTop{
+    display:flex;
+    width:100%;
+    height:auto;
+    padding-bottom:4px;
+    justify-content:space-between;
+    align-items:center;
+    align-self:stretch;
+    cursor:move;
+    -webkit-user-select:none;
+       -moz-user-select:none;
+            user-select:none;
+  }
+
+:is(.commentPopup .commentPopupTop) .commentPopupTime{
+      font:menu;
+      font-style:normal;
+      font-weight:400;
+      line-height:normal;
+      font-size:13px;
+      color:var(--comment-date-fg-color);
+    }
+
+:is(.commentPopup .commentPopupTop) .commentPopupButtons{
+      display:flex;
+      align-items:center;
+      gap:2px;
+      cursor:default;
+    }
+
+:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons)  > button{
+        width:32px;
+        height:32px;
+        padding:8px;
+        border:var(--button-comment-border);
+        border-radius:4px;
+        background-color:var(--button-comment-bg);
+        color:var(--button-comment-color);
       }
 
-:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarList) .sidebarComment) time)::after{
+:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover{
+          background-color:var(--button-comment-hover-bg);
+        }
+
+:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover::before{
+            background-color:var(--button-comment-hover-color);
+          }
+
+:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active{
+          border:var(--button-comment-active-border);
+          background-color:var(--button-comment-active-bg);
+          color:var(--button-comment-active-color);
+        }
+
+:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active::before{
+            background-color:var(--button-comment-active-color);
+          }
+
+:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):focus-visible{
+          background-color:var(--button-comment-hover-bg);
+          outline:2px solid var(--comment-focus-outline-color);
+          outline-offset:0;
+        }
+
+:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{
           content:"";
-          display:none;
-          width:16px;
-          height:16px;
+          display:inline-block;
+          width:100%;
+          height:100%;
           -webkit-mask-repeat:no-repeat;
                   mask-repeat:no-repeat;
           -webkit-mask-position:center;
                   mask-position:center;
-          -webkit-mask-image:var(--comment-edit-button-icon);
-                  mask-image:var(--comment-edit-button-icon);
-          transform:scaleX(var(--dir-factor));
         }
 
+.commentPopupEdit:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{
+          -webkit-mask-image:var(--comment-popup-edit-button-icon);
+                  mask-image:var(--comment-popup-edit-button-icon);
+        }
+
+.commentPopupDelete:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{
+          -webkit-mask-image:var(--comment-popup-delete-button-icon);
+                  mask-image:var(--comment-popup-delete-button-icon);
+        }
+
+.commentPopup .commentPopupText{
+    width:100%;
+    height:auto;
+
+    font:menu;
+    font-style:normal;
+    font-weight:400;
+    line-height:normal;
+    font-size:15px;
+    color:var(--comment-fg-color);
+  }
+
+.commentPopupText,
+.sidebarCommentText .richText{
+  margin-block:0;
+}
+
+:is(.commentPopupText,.sidebarCommentText .richText) p:first-of-type{
+    margin-block:0;
+  }
+
+:is(.commentPopupText,.sidebarCommentText .richText)  > *{
+    white-space:pre-wrap;
+    font-size:max(15px, calc(10px * var(--total-scale-factor)));
+    overflow-wrap:break-word;
+  }
+
+:is(.commentPopupText,.sidebarCommentText .richText) span{
+    color:var(--comment-fg-color) !important;
+  }
+
 :root{
   --editor-toolbar-vert-offset:6px;
   --outline-width:2px;
@@ -3725,6 +3813,13 @@
       cursor:var(--editorFreeHighlight-editing-cursor);
     }
 
+.page:has(.annotationEditorLayer.nonEditing)
+  .annotationLayer
+  .editorAnnotation{
+  position:absolute;
+  pointer-events:none;
+}
+
 :is(#viewerContainer.pdfPresentationMode:fullscreen,.annotationEditorLayer.disabled) .noAltTextBadge{
     display:none !important;
   }
@@ -3795,7 +3890,7 @@
   pointer-events:none;
 }
 
-.annotationEditorLayer.disabled.highlightEditing :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor){
+.annotationEditorLayer.disabled.highlightEditing :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor,.commentPopup){
     pointer-events:auto;
   }
 
@@ -3854,26 +3949,26 @@
 
 :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{
     --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg);
-    --csstools-light-dark-toggle--100:var(--csstools-color-scheme--light) #2b2a33;
-    --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--100, #f0f0f4);
+    --csstools-light-dark-toggle--105:var(--csstools-color-scheme--light) #2b2a33;
+    --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--105, #f0f0f4);
     --editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg);
-    --csstools-light-dark-toggle--101:var(--csstools-color-scheme--light) #fbfbfe;
-    --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--101, #2e2e56);
+    --csstools-light-dark-toggle--106:var(--csstools-color-scheme--light) #fbfbfe;
+    --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--106, #2e2e56);
     --editor-toolbar-border-color:#8f8f9d;
     --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color);
-    --csstools-light-dark-toggle--102:var(--csstools-color-scheme--light) #52525e;
-    --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--102, #e0e0e6);
+    --csstools-light-dark-toggle--107:var(--csstools-color-scheme--light) #52525e;
+    --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--107, #e0e0e6);
     --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color);
     --editor-toolbar-hover-outline:none;
-    --csstools-light-dark-toggle--103:var(--csstools-color-scheme--light) #0df;
-    --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--103, #0060df);
+    --csstools-light-dark-toggle--108:var(--csstools-color-scheme--light) #0df;
+    --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--108, #0060df);
     --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2);
     --editor-toolbar-height:28px;
     --editor-toolbar-padding:2px;
-    --csstools-light-dark-toggle--104:var(--csstools-color-scheme--light) #54ffbd;
-    --alt-text-done-color:var(--csstools-light-dark-toggle--104, #2ac3a2);
-    --csstools-light-dark-toggle--105:var(--csstools-color-scheme--light) #80ebff;
-    --alt-text-warning-color:var(--csstools-light-dark-toggle--105, #0090ed);
+    --csstools-light-dark-toggle--109:var(--csstools-color-scheme--light) #54ffbd;
+    --alt-text-done-color:var(--csstools-light-dark-toggle--109, #2ac3a2);
+    --csstools-light-dark-toggle--110:var(--csstools-color-scheme--light) #80ebff;
+    --alt-text-warning-color:var(--csstools-light-dark-toggle--110, #0090ed);
     --alt-text-hover-done-color:var(--alt-text-done-color);
     --alt-text-hover-warning-color:var(--alt-text-warning-color);
   }
@@ -3892,18 +3987,18 @@
 @supports not (color: light-dark(tan, tan)){
 
 :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) *{
-    --csstools-light-dark-toggle--100:var(--csstools-color-scheme--light) #2b2a33;
-    --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--100, #f0f0f4);
-    --csstools-light-dark-toggle--101:var(--csstools-color-scheme--light) #fbfbfe;
-    --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--101, #2e2e56);
-    --csstools-light-dark-toggle--102:var(--csstools-color-scheme--light) #52525e;
-    --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--102, #e0e0e6);
-    --csstools-light-dark-toggle--103:var(--csstools-color-scheme--light) #0df;
-    --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--103, #0060df);
-    --csstools-light-dark-toggle--104:var(--csstools-color-scheme--light) #54ffbd;
-    --alt-text-done-color:var(--csstools-light-dark-toggle--104, #2ac3a2);
-    --csstools-light-dark-toggle--105:var(--csstools-color-scheme--light) #80ebff;
-    --alt-text-warning-color:var(--csstools-light-dark-toggle--105, #0090ed);
+    --csstools-light-dark-toggle--105:var(--csstools-color-scheme--light) #2b2a33;
+    --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--105, #f0f0f4);
+    --csstools-light-dark-toggle--106:var(--csstools-color-scheme--light) #fbfbfe;
+    --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--106, #2e2e56);
+    --csstools-light-dark-toggle--107:var(--csstools-color-scheme--light) #52525e;
+    --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--107, #e0e0e6);
+    --csstools-light-dark-toggle--108:var(--csstools-color-scheme--light) #0df;
+    --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--108, #0060df);
+    --csstools-light-dark-toggle--109:var(--csstools-color-scheme--light) #54ffbd;
+    --alt-text-done-color:var(--csstools-light-dark-toggle--109, #2ac3a2);
+    --csstools-light-dark-toggle--110:var(--csstools-color-scheme--light) #80ebff;
+    --alt-text-warning-color:var(--csstools-light-dark-toggle--110, #0090ed);
   }
 }
 
@@ -4126,13 +4221,13 @@
         }
 
 .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){
-            --csstools-light-dark-toggle--106:var(--csstools-color-scheme--light) #1c1b22;
-            --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--106, #f0f0f4);
-            --csstools-light-dark-toggle--107:var(--csstools-color-scheme--light) #fbfbfe;
-            --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--107, #15141a);
+            --csstools-light-dark-toggle--111:var(--csstools-color-scheme--light) #1c1b22;
+            --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--111, #f0f0f4);
+            --csstools-light-dark-toggle--112:var(--csstools-color-scheme--light) #fbfbfe;
+            --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--112, #15141a);
             --alt-text-tooltip-border:#8f8f9d;
-            --csstools-light-dark-toggle--108:var(--csstools-color-scheme--light) #15141a;
-            --alt-text-tooltip-shadow:0 2px 6px 0 var(--csstools-light-dark-toggle--108, rgb(58 57 68 / 0.2));
+            --csstools-light-dark-toggle--113:var(--csstools-color-scheme--light) #15141a;
+            --alt-text-tooltip-shadow:0 2px 6px 0 var(--csstools-light-dark-toggle--113, rgb(58 57 68 / 0.2));
           }
 
 @supports (color: light-dark(red, red)){
@@ -4151,12 +4246,12 @@
 @supports not (color: light-dark(tan, tan)){
 
 .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip) *{
-            --csstools-light-dark-toggle--106:var(--csstools-color-scheme--light) #1c1b22;
-            --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--106, #f0f0f4);
-            --csstools-light-dark-toggle--107:var(--csstools-color-scheme--light) #fbfbfe;
-            --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--107, #15141a);
-            --csstools-light-dark-toggle--108:var(--csstools-color-scheme--light) #15141a;
-            --alt-text-tooltip-shadow:0 2px 6px 0 var(--csstools-light-dark-toggle--108, rgb(58 57 68 / 0.2));
+            --csstools-light-dark-toggle--111:var(--csstools-color-scheme--light) #1c1b22;
+            --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--111, #f0f0f4);
+            --csstools-light-dark-toggle--112:var(--csstools-color-scheme--light) #fbfbfe;
+            --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--112, #15141a);
+            --csstools-light-dark-toggle--113:var(--csstools-color-scheme--light) #15141a;
+            --alt-text-tooltip-shadow:0 2px 6px 0 var(--csstools-light-dark-toggle--113, rgb(58 57 68 / 0.2));
   }
 }
 
@@ -4291,12 +4386,12 @@
   }
 
 :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{
-    --csstools-light-dark-toggle--109:var(--csstools-color-scheme--light) #52525e;
-    --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--109, #f0f0f4);
-    --csstools-light-dark-toggle--110:var(--csstools-color-scheme--light) #fbfbfe;
-    --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--110, #cfcfd8);
-    --csstools-light-dark-toggle--111:var(--csstools-color-scheme--light) #15141a;
-    --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--111, #5b5b66);
+    --csstools-light-dark-toggle--114:var(--csstools-color-scheme--light) #52525e;
+    --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--114, #f0f0f4);
+    --csstools-light-dark-toggle--115:var(--csstools-color-scheme--light) #fbfbfe;
+    --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--115, #cfcfd8);
+    --csstools-light-dark-toggle--116:var(--csstools-color-scheme--light) #15141a;
+    --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--116, #5b5b66);
   }
 
 @supports (color: light-dark(red, red)){
@@ -4310,12 +4405,12 @@
 @supports not (color: light-dark(tan, tan)){
 
 :is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge) *{
-    --csstools-light-dark-toggle--109:var(--csstools-color-scheme--light) #52525e;
-    --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--109, #f0f0f4);
-    --csstools-light-dark-toggle--110:var(--csstools-color-scheme--light) #fbfbfe;
-    --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--110, #cfcfd8);
-    --csstools-light-dark-toggle--111:var(--csstools-color-scheme--light) #15141a;
-    --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--111, #5b5b66);
+    --csstools-light-dark-toggle--114:var(--csstools-color-scheme--light) #52525e;
+    --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--114, #f0f0f4);
+    --csstools-light-dark-toggle--115:var(--csstools-color-scheme--light) #fbfbfe;
+    --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--115, #cfcfd8);
+    --csstools-light-dark-toggle--116:var(--csstools-color-scheme--light) #15141a;
+    --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--116, #5b5b66);
   }
 }
 
@@ -4549,8 +4644,8 @@
 .dialog.newAltText{
   --new-alt-text-ai-disclaimer-icon:url(images/altText_disclaimer.svg);
   --new-alt-text-spinner-icon:url(images/altText_spinner.svg);
-  --csstools-light-dark-toggle--112:var(--csstools-color-scheme--light) #2b2a33;
-  --preview-image-bg-color:var(--csstools-light-dark-toggle--112, #f0f0f4);
+  --csstools-light-dark-toggle--117:var(--csstools-color-scheme--light) #2b2a33;
+  --preview-image-bg-color:var(--csstools-light-dark-toggle--117, #f0f0f4);
   --preview-image-border:none;
 }
 
@@ -4563,8 +4658,8 @@
 @supports not (color: light-dark(tan, tan)){
 
 .dialog.newAltText *{
-  --csstools-light-dark-toggle--112:var(--csstools-color-scheme--light) #2b2a33;
-  --preview-image-bg-color:var(--csstools-light-dark-toggle--112, #f0f0f4);
+  --csstools-light-dark-toggle--117:var(--csstools-color-scheme--light) #2b2a33;
+  --preview-image-bg-color:var(--csstools-light-dark-toggle--117, #f0f0f4);
   }
 }
 
@@ -4755,12 +4850,12 @@
         }
 
 .colorPicker{
-  --csstools-light-dark-toggle--113:var(--csstools-color-scheme--light) #80ebff;
-  --hover-outline-color:var(--csstools-light-dark-toggle--113, #0250bb);
-  --csstools-light-dark-toggle--114:var(--csstools-color-scheme--light) #aaf2ff;
-  --selected-outline-color:var(--csstools-light-dark-toggle--114, #0060df);
-  --csstools-light-dark-toggle--115:var(--csstools-color-scheme--light) #52525e;
-  --swatch-border-color:var(--csstools-light-dark-toggle--115, #cfcfd8);
+  --csstools-light-dark-toggle--118:var(--csstools-color-scheme--light) #80ebff;
+  --hover-outline-color:var(--csstools-light-dark-toggle--118, #0250bb);
+  --csstools-light-dark-toggle--119:var(--csstools-color-scheme--light) #aaf2ff;
+  --selected-outline-color:var(--csstools-light-dark-toggle--119, #0060df);
+  --csstools-light-dark-toggle--120:var(--csstools-color-scheme--light) #52525e;
+  --swatch-border-color:var(--csstools-light-dark-toggle--120, #cfcfd8);
 }
 
 @supports (color: light-dark(red, red)){
@@ -4774,12 +4869,12 @@
 @supports not (color: light-dark(tan, tan)){
 
 .colorPicker *{
-  --csstools-light-dark-toggle--113:var(--csstools-color-scheme--light) #80ebff;
-  --hover-outline-color:var(--csstools-light-dark-toggle--113, #0250bb);
-  --csstools-light-dark-toggle--114:var(--csstools-color-scheme--light) #aaf2ff;
-  --selected-outline-color:var(--csstools-light-dark-toggle--114, #0060df);
-  --csstools-light-dark-toggle--115:var(--csstools-color-scheme--light) #52525e;
-  --swatch-border-color:var(--csstools-light-dark-toggle--115, #cfcfd8);
+  --csstools-light-dark-toggle--118:var(--csstools-color-scheme--light) #80ebff;
+  --hover-outline-color:var(--csstools-light-dark-toggle--118, #0250bb);
+  --csstools-light-dark-toggle--119:var(--csstools-color-scheme--light) #aaf2ff;
+  --selected-outline-color:var(--csstools-light-dark-toggle--119, #0060df);
+  --csstools-light-dark-toggle--120:var(--csstools-color-scheme--light) #52525e;
+  --swatch-border-color:var(--csstools-light-dark-toggle--120, #cfcfd8);
   }
 }
 
@@ -5026,9 +5121,9 @@
       align-items:center;
       align-self:stretch;
 
-      --csstools-light-dark-toggle--116:var(--csstools-color-scheme--light) #80808e;
+      --csstools-light-dark-toggle--121:var(--csstools-color-scheme--light) #80808e;
 
-      --example-color:var(--csstools-light-dark-toggle--116, #bfbfc9);
+      --example-color:var(--csstools-light-dark-toggle--121, #bfbfc9);
     }
 
 @supports (color: light-dark(red, red)){
@@ -5042,9 +5137,9 @@
 
 :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) *{
 
-      --csstools-light-dark-toggle--116:var(--csstools-color-scheme--light) #80808e;
+      --csstools-light-dark-toggle--121:var(--csstools-color-scheme--light) #80808e;
 
-      --example-color:var(--csstools-light-dark-toggle--116, #bfbfc9);
+      --example-color:var(--csstools-light-dark-toggle--121, #bfbfc9);
   }
 }
 
@@ -5086,8 +5181,8 @@
   }
 
 :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{
-      --csstools-light-dark-toggle--117:var(--csstools-color-scheme--light) #8f8f9d;
-      --divider-color:var(--csstools-light-dark-toggle--117, #d7d7db);
+      --csstools-light-dark-toggle--122:var(--csstools-color-scheme--light) #8f8f9d;
+      --divider-color:var(--csstools-light-dark-toggle--122, #d7d7db);
     }
 
 @supports (color: light-dark(red, red)){
@@ -5099,8 +5194,8 @@
 @supports not (color: light-dark(tan, tan)){
 
 :is(:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider) *{
-      --csstools-light-dark-toggle--117:var(--csstools-color-scheme--light) #8f8f9d;
-      --divider-color:var(--csstools-light-dark-toggle--117, #d7d7db);
+      --csstools-light-dark-toggle--122:var(--csstools-color-scheme--light) #8f8f9d;
+      --divider-color:var(--csstools-light-dark-toggle--122, #d7d7db);
   }
 }
 
@@ -5181,13 +5276,21 @@
     }
 
 .sidebar{
-  --csstools-light-dark-toggle--118:var(--csstools-color-scheme--light) #23222b;
-  --sidebar-bg-color:var(--csstools-light-dark-toggle--118, #fff);
-  --csstools-light-dark-toggle--119:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1);
-  --sidebar-border-color:var(--csstools-light-dark-toggle--119, rgb(21 20 26 / 0.1));
-  --csstools-light-dark-toggle--120:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2);
-  --csstools-light-dark-toggle--121:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4);
-  --sidebar-box-shadow:0 0.25px 0.75px var(--csstools-light-dark-toggle--120, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--121, rgb(0 0 0 / 0.1));
+  --csstools-light-dark-toggle--123:var(--csstools-color-scheme--light) #23222b;
+  --sidebar-bg-color:var(--csstools-light-dark-toggle--123, #fff);
+  --csstools-light-dark-toggle--124:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1);
+  --sidebar-border-color:var(--csstools-light-dark-toggle--124, rgb(21 20 26 / 0.1));
+  --csstools-light-dark-toggle--125:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2);
+  --csstools-light-dark-toggle--126:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4);
+  --sidebar-box-shadow:0 0.25px 0.75px var(--csstools-light-dark-toggle--125, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--126, rgb(0 0 0 / 0.1));
+  --sidebar-border-radius:8px;
+  --sidebar-padding:5px;
+  --sidebar-min-width:180px;
+  --sidebar-max-width:632px;
+  --sidebar-width:239px;
+  --resizer-width:4px;
+  --csstools-light-dark-toggle--127:var(--csstools-color-scheme--light) #00cadb;
+  --resizer-hover-bg-color:var(--csstools-light-dark-toggle--127, #0062fa);
 }
 
 @supports (color: light-dark(red, red)){
@@ -5206,16 +5309,24 @@
 }
 }
 
+@supports (color: light-dark(red, red)){
+.sidebar{
+  --resizer-hover-bg-color:light-dark(#0062fa, #00cadb);
+}
+}
+
 @supports not (color: light-dark(tan, tan)){
 
 .sidebar *{
-  --csstools-light-dark-toggle--118:var(--csstools-color-scheme--light) #23222b;
-  --sidebar-bg-color:var(--csstools-light-dark-toggle--118, #fff);
-  --csstools-light-dark-toggle--119:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1);
-  --sidebar-border-color:var(--csstools-light-dark-toggle--119, rgb(21 20 26 / 0.1));
-  --csstools-light-dark-toggle--120:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2);
-  --csstools-light-dark-toggle--121:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4);
-  --sidebar-box-shadow:0 0.25px 0.75px var(--csstools-light-dark-toggle--120, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--121, rgb(0 0 0 / 0.1));
+  --csstools-light-dark-toggle--123:var(--csstools-color-scheme--light) #23222b;
+  --sidebar-bg-color:var(--csstools-light-dark-toggle--123, #fff);
+  --csstools-light-dark-toggle--124:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1);
+  --sidebar-border-color:var(--csstools-light-dark-toggle--124, rgb(21 20 26 / 0.1));
+  --csstools-light-dark-toggle--125:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2);
+  --csstools-light-dark-toggle--126:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4);
+  --sidebar-box-shadow:0 0.25px 0.75px var(--csstools-light-dark-toggle--125, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--126, rgb(0 0 0 / 0.1));
+  --csstools-light-dark-toggle--127:var(--csstools-color-scheme--light) #00cadb;
+  --resizer-hover-bg-color:var(--csstools-light-dark-toggle--127, #0062fa);
   }
 }
 
@@ -5225,18 +5336,53 @@
     --sidebar-bg-color:Canvas;
     --sidebar-border-color:CanvasText;
     --sidebar-box-shadow:none;
+    --resizer-hover-bg-color:CanvasText;
 }
   }
 
 .sidebar{
 
-  border-radius:8px;
+  border-radius:var(--sidebar-border-radius);
   box-shadow:var(--sidebar-box-shadow);
   border:1px solid var(--sidebar-border-color);
   background-color:var(--sidebar-bg-color);
   inset-block-start:calc(100% + var(--doorhanger-height) - 2px);
+  padding-block:var(--sidebar-padding);
+  width:var(--sidebar-width);
+  min-width:var(--sidebar-min-width);
+  max-width:var(--sidebar-max-width);
 }
 
+.sidebar .sidebarResizer{
+    width:var(--resizer-width);
+    background-color:transparent;
+    forced-color-adjust:none;
+    cursor:ew-resize;
+    position:absolute;
+    inset-block:calc(var(--sidebar-padding) + var(--sidebar-border-radius));
+    inset-inline-start:calc(0px - var(--resizer-width) / 2);
+    transition:background-color 0.5s ease-in-out;
+    box-sizing:border-box;
+    border:1px solid transparent;
+    border-block-width:0;
+    background-clip:content-box;
+  }
+
+:is(.sidebar .sidebarResizer):hover{
+      background-color:var(--resizer-hover-bg-color);
+    }
+
+.sidebar.resizing{
+    cursor:ew-resize;
+    -webkit-user-select:none;
+       -moz-user-select:none;
+            user-select:none;
+  }
+
+.sidebar.resizing :not(.sidebarResizer){
+      pointer-events:none;
+    }
+
 :root{
   --csstools-color-scheme--light:initial;
   color-scheme:light dark;
@@ -5247,8 +5393,8 @@
   --page-border:9px solid transparent;
   --spreadHorizontalWrapped-margin-LR:-3.5px;
   --loading-icon-delay:400ms;
-  --csstools-light-dark-toggle--122:var(--csstools-color-scheme--light) #0df;
-  --focus-ring-color:var(--csstools-light-dark-toggle--122, #0060df);
+  --csstools-light-dark-toggle--128:var(--csstools-color-scheme--light) #0df;
+  --focus-ring-color:var(--csstools-light-dark-toggle--128, #0060df);
   --focus-ring-outline:2px solid var(--focus-ring-color);
 }
 
@@ -5261,8 +5407,8 @@
 @supports not (color: light-dark(tan, tan)){
 
 :root *{
-  --csstools-light-dark-toggle--122:var(--csstools-color-scheme--light) #0df;
-  --focus-ring-color:var(--csstools-light-dark-toggle--122, #0060df);
+  --csstools-light-dark-toggle--128:var(--csstools-color-scheme--light) #0df;
+  --focus-ring-color:var(--csstools-light-dark-toggle--128, #0060df);
   }
 }
 
@@ -5346,6 +5492,10 @@
         contain:strict;
       }
 
+.detailView:is(:is(.pdfViewer .canvasWrapper) canvas){
+        image-rendering:pixelated;
+      }
+
 .pdfViewer .page{
   --user-unit:1;
   --total-scale-factor:calc(var(--scale-factor) * var(--user-unit));
@@ -6674,7 +6824,6 @@ dialog :link{
   }
 
 .toolbarButtonWithContainer .menuContainer{
-    width:100%;
     height:auto;
     max-height:calc(
       var(--viewer-container-height) - var(--toolbar-height) -