@richscripts/richtexteditor 2.4.0 → 2.4.2

package/richtexteditor/rte_theme_default.css

@@ -1,6 +1,6 @@
 
 /* ===== Design tokens =====
-   Override these CSS custom properties to retheme the editor chrome �� the
+   Override these CSS custom properties to retheme the editor chrome �� the
    same architecture CKEditor 5 documents for its --ck-* variables. Icons in
    rte-config.js use fill/stroke="currentColor" and follow --rte-icon-color.
    The built-in dark mode (end of this file) is pure token overrides. */
@@ -52,6 +52,11 @@ rte-toolbar-button, rte-toolbar-splitbutton, rte-toolbar-dropdown, rte-toolbar-a
         max-width: none !important;
         max-height: none !important;
         border-radius: 0px !important;
+        /* Force a dedicated compositing layer: without this, Chromium can fail to
+           repaint the element over sticky/fixed page content (e.g. a sticky header)
+           when position and z-index change together, leaving stale pixels on screen. */
+        transform: translateZ(0) !important;
+        will-change: transform !important;
     }
 
         .richtexteditor.rte-fullpage rte-toolbar {
@@ -182,7 +187,7 @@ rte-codebox {
     }
 }
 
-/* 2026-05-19 Reading mode �� hides toolbars + status, leaves only the editing
+/* 2026-05-19 Reading mode �� hides toolbars + status, leaves only the editing
    surface for distraction-free writing. Toggle via editor.toggleReadingMode(). */
 .richtexteditor.rte-reading-mode rte-toolbar,
 .richtexteditor.rte-reading-mode rte-subtoolbar,
@@ -190,35 +195,35 @@ rte-codebox {
 .richtexteditor.rte-reading-mode rte-plusbtn {
     display: none !important;
 }
-.richtexteditor.rte-reading-mode {
-    border: 0 !important;
-    box-shadow: none !important;
-    background: #fff !important;
-}
-.richtexteditor .rte-reading-mode-exit {
-    display: none;
-}
-.richtexteditor.rte-reading-mode .rte-reading-mode-exit {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    z-index: 12;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 7px 10px;
-    border: 1px solid rgba(15, 23, 42, .16);
-    border-radius: 8px;
-    background: rgba(255, 255, 255, .94);
-    color: #172033;
-    box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
-    font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    cursor: pointer;
-}
-.richtexteditor.rte-reading-mode .rte-reading-mode-exit:hover {
-    background: #f8fafc;
-    border-color: rgba(37, 99, 235, .35);
-}
+.richtexteditor.rte-reading-mode {
+    border: 0 !important;
+    box-shadow: none !important;
+    background: #fff !important;
+}
+.richtexteditor .rte-reading-mode-exit {
+    display: none;
+}
+.richtexteditor.rte-reading-mode .rte-reading-mode-exit {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 12;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 10px;
+    border: 1px solid rgba(15, 23, 42, .16);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, .94);
+    color: #172033;
+    box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
+    font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    cursor: pointer;
+}
+.richtexteditor.rte-reading-mode .rte-reading-mode-exit:hover {
+    background: #f8fafc;
+    border-color: rgba(37, 99, 235, .35);
+}
 
 /* 2026-05-11 Block drag handles (Notion-style ?? on left edge of blocks).
    Activated via config.blockDragHandles = true. */
@@ -273,14 +278,20 @@ rte-codebox {
     border-radius: 0px;
 }
 
-.richtexteditor.rte-modern {
-    /* Token-driven so the border themes correctly (dark mode -> #334155);
-       previously hardcoded #d5d5d5 stayed light-gray on the dark surface. */
-    border: 1px solid var(--rte-border, #d5d5d5);
-    border-radius: 10px;
-    overflow: hidden;
-    background-clip: padding-box;
-}
+.richtexteditor.rte-modern {
+    /* Token-driven so the border themes correctly (dark mode -> #334155);
+       previously hardcoded #d5d5d5 stayed light-gray on the dark surface. */
+    border: 1px solid var(--rte-border, #d5d5d5);
+    border-radius: 10px;
+    /* Deliberately NOT overflow:hidden. Toolbar dropdown panels
+       (rte-dropdown-panel) are absolutely positioned children of this element,
+       so clipping here cut off any panel anchored near the right edge: Line
+       Height rendered only the "1" of "100%", Paragraphs and Document Outline
+       lost 91px. Corner rounding does not depend on this clip - the toolbar and
+       status bar round their own corners (see the rule below). */
+    overflow: visible;
+    background-clip: padding-box;
+}
 
 /* Round the toolbar's top corners and the status bar's bottom corners to follow
    the editor's rounded border (inner radius = outer 10px - 1px border). Without
@@ -402,9 +413,9 @@ rte-resizecorner {
 }
 
 
-/* Compact selection float toolbar - sized like Google Docs/Notion (~31px tall).
-   Was: 5px padding + 30px buttons = 45px tall; keep the floating glyphs
-   smaller than the main toolbar so selection actions do not feel oversized. */
+/* Compact selection float toolbar - sized like Google Docs/Notion (~31px tall).
+   Was: 5px padding + 30px buttons = 45px tall; keep the floating glyphs
+   smaller than the main toolbar so selection actions do not feel oversized. */
 rte-control-toolbar {
     display: inline-flex;
     align-items: center;
@@ -419,7 +430,7 @@ rte-control-toolbar {
     animation: rteFloatToolbarIn 130ms ease-out;
 }
 
-/* The generic rte-toolbar-group adds 2px padding �� remove it here so the
+/* The generic rte-toolbar-group adds 2px padding �� remove it here so the
    buttons fill the bar (smaller chrome, larger-feeling icons). */
 .rte-modern rte-control-toolbar rte-toolbar-group {
     padding: 0;
@@ -432,47 +443,47 @@ rte-control-toolbar {
         box-shadow: 0 22px 54px rgba(15,23,42,.2), 0 6px 18px rgba(37,99,235,.1), inset 0 1px 0 rgba(255,255,255,.95);
     }
 
-.rte-modern rte-control-toolbar rte-toolbar-button, .rte-modern rte-control-toolbar rte-toolbar-splitbutton, .rte-modern rte-control-toolbar rte-toolbar-dropdown {
-    margin: 0;
-    border-radius: 6px;
-    width: 26px;
-    height: 25px;
-    padding: 0;
-    color: #334155;
-    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
-}
+.rte-modern rte-control-toolbar rte-toolbar-button, .rte-modern rte-control-toolbar rte-toolbar-splitbutton, .rte-modern rte-control-toolbar rte-toolbar-dropdown {
+    margin: 0;
+    border-radius: 6px;
+    width: 26px;
+    height: 25px;
+    padding: 0;
+    color: #334155;
+    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
+}
 
 .rte-modern rte-control-toolbar rte-toolbar-button svg,
-.rte-modern rte-control-toolbar rte-toolbar-splitbutton svg,
-.rte-modern rte-control-toolbar rte-toolbar-dropdown svg,
-.rte-modern rte-control-toolbar rte-toolbar-arrowbutton svg {
-    width: 16px !important;
-    height: 16px !important;
-}
+.rte-modern rte-control-toolbar rte-toolbar-splitbutton svg,
+.rte-modern rte-control-toolbar rte-toolbar-dropdown svg,
+.rte-modern rte-control-toolbar rte-toolbar-arrowbutton svg {
+    width: 16px !important;
+    height: 16px !important;
+}
 
 /* The global rte-line-spliter rule carries `margin: 10px auto !important`,
-   which inflates the float toolbar's row height �� neutralize it here. */
-.rte-modern rte-control-toolbar rte-line-spliter {
-    margin: 0 2px !important;
-    height: 14px;
-}
-
-.rte-modern rte-control-toolbar rte-toolbar-arrowbutton {
-    margin: 0;
-    border-radius: 6px;
-    height: 25px;
-    width: 35px;
-    padding-right: 10px;
-    background-position: 23px 7px;
-    background-size: 10px 10px;
-}
-
-.rte-modern rte-control-toolbar rte-line-break {
-    width: 1px;
-    height: 14px;
-    margin: 0 3px;
-    background: rgba(148,163,184,.35);
-}
+   which inflates the float toolbar's row height �� neutralize it here. */
+.rte-modern rte-control-toolbar rte-line-spliter {
+    margin: 0 2px !important;
+    height: 14px;
+}
+
+.rte-modern rte-control-toolbar rte-toolbar-arrowbutton {
+    margin: 0;
+    border-radius: 6px;
+    height: 25px;
+    width: 35px;
+    padding-right: 10px;
+    background-position: 23px 7px;
+    background-size: 10px 10px;
+}
+
+.rte-modern rte-control-toolbar rte-line-break {
+    width: 1px;
+    height: 14px;
+    margin: 0 3px;
+    background: rgba(148,163,184,.35);
+}
 
 .rte-modern rte-control-toolbar rte-toolbar-button:hover,
 .rte-modern rte-control-toolbar rte-toolbar-splitbutton:hover,
@@ -493,8 +504,8 @@ rte-control-toolbar {
     box-shadow: inset 0 0 0 1px rgba(37,99,235,.22);
 }
 
-rte-control-toolbar .rte-link-url-preview {
-    min-height: 28px;
+rte-control-toolbar .rte-link-url-preview {
+    min-height: 28px;
     border-radius: 999px;
     background: #f1f7ff;
     border: 1px solid rgba(29,103,186,.16);
@@ -706,26 +717,26 @@ rte-dropdown-menuitem rte-toolbar-splitbutton-dropdown {
     padding: 1px;
 }
 
-rte-toolbar-splitbutton-direct {
-    display: inline-flex;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 100%;
-    min-height: 18px;
-}
-
-rte-toolbar-splitbutton-dropdown {
-    border-left: solid 1px transparent;
-    width: 14px;
-    height: 100%;
-    min-height: 18px;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtYW5nbGUtZG93biBmYS13LTEwIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNDMgMzUyLjNMNyAyMTYuM2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlsMjIuNi0yMi42YzkuNC05LjQgMjQuNi05LjQgMzMuOSAwbDk2LjQgOTYuNCA5Ni40LTk2LjRjOS40LTkuNCAyNC42LTkuNCAzMy45IDBsMjIuNiAyMi42YzkuNCA5LjQgOS40IDI0LjYgMCAzMy45bC0xMzYgMTM2Yy05LjIgOS40LTI0LjQgOS40LTMzLjggMHoiIGNsYXNzPSIiPjwvcGF0aD48L3N2Zz4=');
-    background-position: 1px center;
-    background-repeat: no-repeat;
-    background-size: 12px 12px;
-}
+rte-toolbar-splitbutton-direct {
+    display: inline-flex;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 100%;
+    min-height: 18px;
+}
+
+rte-toolbar-splitbutton-dropdown {
+    border-left: solid 1px transparent;
+    width: 14px;
+    height: 100%;
+    min-height: 18px;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtYW5nbGUtZG93biBmYS13LTEwIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNDMgMzUyLjNMNyAyMTYuM2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlsMjIuNi0yMi42YzkuNC05LjQgMjQuNi05LjQgMzMuOSAwbDk2LjQgOTYuNCA5Ni40LTk2LjRjOS40LTkuNCAyNC42LTkuNCAzMy45IDBsMjIuNiAyMi42YzkuNCA5LjQgOS40IDI0LjYgMCAzMy45bC0xMzYgMTM2Yy05LjIgOS40LTI0LjQgOS40LTMzLjggMHoiIGNsYXNzPSIiPjwvcGF0aD48L3N2Zz4=');
+    background-position: 1px center;
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+}
 
 rte-color-button-mask {
     position: absolute;
@@ -773,7 +784,7 @@ rte-color-button-mask {
 }
 
 
-/* Rounded interactive states for the desktop toolbar �� matches the selection
+/* Rounded interactive states for the desktop toolbar �� matches the selection
    float toolbar (7px) and modern editors (Google Docs/Notion). Previously the
    main toolbar's hover/active/focus highlights were hard squares. */
 .rte-modern rte-toolbar-button,
@@ -831,7 +842,7 @@ rte-color-button-mask {
         height: 36px;
         margin-bottom: -4px;
         background-position: 23px 8px;
-        /* Open dropdown reads as a tab connected to its panel �� square the
+        /* Open dropdown reads as a tab connected to its panel �� square the
            bottom corners so the rounded button doesn't detach from the panel. */
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
@@ -1565,6 +1576,14 @@ rte-dropdown-panel.rte-panel-backcolor rte-dialog-item-color[rte-tooltip]:hover
     border-color: rgba(0,0,0,.08) !important;
 }
 
+rte-dropdown-panel.rte-panel-forecolor rte-dialog-item-color[role="menuitem"]:focus-visible,
+rte-dropdown-panel.rte-panel-backcolor rte-dialog-item-color[role="menuitem"]:focus-visible {
+    outline: 2px solid #1a73e8 !important;
+    outline-offset: 2px !important;
+    transform: scale(1.15) !important;
+    position: relative !important;
+    z-index: 2 !important;
+}
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto,
 rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto,
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more,
@@ -1586,6 +1605,14 @@ rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-more:hover {
     border: 0 !important;
 }
 
+rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto:focus-visible,
+rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto:focus-visible,
+rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more:focus-visible,
+rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-more:focus-visible {
+    outline: 2px solid #1a73e8 !important;
+    outline-offset: 1px !important;
+    background: #f1f5f9 !important;
+}
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-auto rte-dialog-item-label,
 rte-dropdown-panel.rte-panel-backcolor rte-dialog-line-auto rte-dialog-item-label,
 rte-dropdown-panel.rte-panel-forecolor rte-dialog-line-more rte-dialog-item-label,
@@ -1965,6 +1992,21 @@ rte-menuspliter {
     margin: 3px 0px 3px 28px;
 }
 
+/* The panel is shrink-to-fit, so its width is decided by its widest preview —
+   "Headline 1" at 32px — and measured 187px of text inside 187px of space:
+   ZERO tolerance. Whenever the font used at layout time is a hair narrower than
+   the one finally painted (a fallback still in place during a webfont swap, a
+   different platform's metrics), the label overflows and the last character is
+   cut off. Reported from the wild with "Headline 1" clipped.
+
+   A min-width gives the panel slack that does not depend on font metrics
+   matching to the pixel; the previews are nowrap, so slack is the only thing
+   that can absorb the variance. */
+.rte-dropdown-panel.rte_command_paragraphs,
+rte-dropdown-panel.rte_command_paragraphs {
+    min-width: 292px;
+}
+
 .rte_command_paragraphs rte-toolbar-dropdown-item div {
     font-size: 15px;
     margin: 0px;
@@ -2063,86 +2105,86 @@ rte-floatpanel {
             opacity: 1;
         }
 
-        rte-floatpanel rte-toolbar-button:hover {
-            background: #eef5ff;
-            fill: #1559d6;
-            color: #1559d6;
-            box-shadow: inset 0 0 0 1px rgba(37,99,235,.14);
-            transform: translateY(-1px);
-        }
-
-/* 2026-07-03 paragraph rail icon polish */
-rte-floatpanel.rte-floatpanel-paragraphop {
-    width: 28px !important;
-    padding: 9px 3px 4px !important;
-    border-color: rgba(148,163,184,.34) !important;
-    border-radius: 11px !important;
-    background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,250,252,.91) 100%) !important;
-    box-shadow: 0 8px 20px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.9) !important;
-    opacity: .86 !important;
-}
-
-    rte-floatpanel.rte-floatpanel-paragraphop::before {
-        top: 4px;
-        width: 10px;
-        height: 3px;
-        background: radial-gradient(circle, #94a3b8 .9px, transparent 1.3px) 0 0 / 4px 3px;
-        opacity: .62;
-    }
-
-    rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-group {
-        padding: 0;
-    }
-
-    rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button {
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 20px !important;
-        height: 20px !important;
-        min-width: 20px !important;
-        min-height: 20px !important;
-        margin: 1px 0;
-        border-radius: 6px;
-        color: #6b7280;
-        opacity: .8;
-    }
-
-        rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button:hover {
-            background: rgba(37,99,235,.08);
-            color: #1559d6;
-            box-shadow: inset 0 0 0 1px rgba(37,99,235,.1);
-            opacity: 1;
-            transform: translateY(-.5px);
-        }
-
-        rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button svg {
-            display: block !important;
-            width: 13px !important;
-            height: 13px !important;
-            margin: 0 !important;
-            color: currentColor;
-            pointer-events: none;
-        }
-
-        rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button svg,
-        rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button svg * {
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            stroke-width: 1.35 !important;
-        }
-
-        rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button.rte_command_pmore svg {
-            width: 12px !important;
-            height: 12px !important;
-            opacity: .72;
-        }
-
-
-.rte-current-item {
-    background-color: #eef2f7;
-}
+        rte-floatpanel rte-toolbar-button:hover {
+            background: #eef5ff;
+            fill: #1559d6;
+            color: #1559d6;
+            box-shadow: inset 0 0 0 1px rgba(37,99,235,.14);
+            transform: translateY(-1px);
+        }
+
+/* 2026-07-03 paragraph rail icon polish */
+rte-floatpanel.rte-floatpanel-paragraphop {
+    width: 28px !important;
+    padding: 9px 3px 4px !important;
+    border-color: rgba(148,163,184,.34) !important;
+    border-radius: 11px !important;
+    background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,250,252,.91) 100%) !important;
+    box-shadow: 0 8px 20px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.9) !important;
+    opacity: .86 !important;
+}
+
+    rte-floatpanel.rte-floatpanel-paragraphop::before {
+        top: 4px;
+        width: 10px;
+        height: 3px;
+        background: radial-gradient(circle, #94a3b8 .9px, transparent 1.3px) 0 0 / 4px 3px;
+        opacity: .62;
+    }
+
+    rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-group {
+        padding: 0;
+    }
+
+    rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px !important;
+        height: 20px !important;
+        min-width: 20px !important;
+        min-height: 20px !important;
+        margin: 1px 0;
+        border-radius: 6px;
+        color: #6b7280;
+        opacity: .8;
+    }
+
+        rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button:hover {
+            background: rgba(37,99,235,.08);
+            color: #1559d6;
+            box-shadow: inset 0 0 0 1px rgba(37,99,235,.1);
+            opacity: 1;
+            transform: translateY(-.5px);
+        }
+
+        rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button svg {
+            display: block !important;
+            width: 13px !important;
+            height: 13px !important;
+            margin: 0 !important;
+            color: currentColor;
+            pointer-events: none;
+        }
+
+        rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button svg,
+        rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button svg * {
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 1.35 !important;
+        }
+
+        rte-floatpanel.rte-floatpanel-paragraphop rte-toolbar-button.rte_command_pmore svg {
+            width: 12px !important;
+            height: 12px !important;
+            opacity: .72;
+        }
+
+
+.rte-current-item {
+    background-color: #eef2f7;
+}
 
 /* Optional development toggles for hiding editor chrome can live here. */
 
@@ -2538,6 +2580,25 @@ rte-content::-webkit-scrollbar-thumb:hover {
     flex-wrap: wrap;
 }
 
+/* The toolbar is a flex row whose children are these two groups. Without a
+   display on the groups themselves the buttons stack vertically and the row
+   collapses to the width of its widest label -- which is exactly what shipped
+   when these rules went missing. */
+.rte-gallery-browser-toolbar-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+}
+
+.rte-gallery-browser-toolbar-group-right {
+    flex: 0 1 auto;
+    justify-content: flex-end;
+    margin-left: auto;
+}
+
 .rte-gallery-browser-button {
     border: 1px solid rgba(116, 135, 162, 0.28);
     border-radius: 999px;
@@ -2672,6 +2733,44 @@ rte-content::-webkit-scrollbar-thumb:hover {
     overflow: hidden;
 }
 
+/* Folders sit in their own container above the image listbox, so the two are
+   separated by a rule rather than running together in one grid. */
+.rte-gallery-browser-grid-folders {
+    margin-bottom: 14px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid rgba(116, 135, 162, 0.16);
+}
+
+/* Folder tiles have no image to show, so the icon is drawn in CSS. The plugin
+   emits an empty div for it -- with no rule here the tile renders blank. */
+.rte-gallery-browser-thumbnail-folder {
+    background: linear-gradient(180deg, #fffaea 0%, #fdeec4 100%);
+    border-color: rgba(197, 158, 61, 0.32);
+}
+
+.rte-gallery-browser-folder-icon {
+    position: relative;
+    width: 60px;
+    height: 42px;
+    border: 1px solid rgba(178, 138, 45, 0.7);
+    border-radius: 7px;
+    background: linear-gradient(180deg, #ffe6a1 0%, #f3c957 100%);
+    box-shadow: 0 8px 16px rgba(140, 100, 20, 0.18);
+}
+
+.rte-gallery-browser-folder-icon:before {
+    content: "";
+    position: absolute;
+    left: 7px;
+    top: -9px;
+    width: 25px;
+    height: 13px;
+    border: 1px solid rgba(178, 138, 45, 0.7);
+    border-bottom: 0;
+    border-radius: 6px 6px 0 0;
+    background: linear-gradient(180deg, #fff1c4 0%, #f8d97c 100%);
+}
+
 .rte-gallery-browser-thumbnail-image {
     max-width: 100%;
     max-height: 100%;
@@ -2887,13 +2986,13 @@ rte-dropdown-panel.rte-panel-insertdocument .rte-dialog-button.rte-button-type-c
 }
 
 /* ===========================================================================
- * 2026-05-08 dialog polish layer �� applies to every editor dialog (insert
+ * 2026-05-08 dialog polish layer �� applies to every editor dialog (insert
  * video / link / image / code / table / find / template / gallery / etc.)
  *
  * Until this layer landed, every dialog inherited `min-width: 300px` from
  * the base `rte-dialog-inner` rule above. That worked for two-button
  * confirmations but felt cramped for URL fields, code editors, and any
- * dialog with a textarea �� the input was about 270 px wide once you
+ * dialog with a textarea �� the input was about 270 px wide once you
  * subtracted the 12 px margin on each side.
  *
  * The rules below set sensible per-dialog defaults, modernise the input
@@ -2970,7 +3069,7 @@ rte-dialog-outer .rte-dialog-line-input textarea:focus {
     box-shadow: 0 0 0 3px rgba(21, 89, 214, 0.16);
 }
 
-/* The label that floats above the input (Url / Width / etc.) �� modern
+/* The label that floats above the input (Url / Width / etc.) �� modern
    feel: smaller, less shouty colour. */
 rte-dialog-outer .rte-dialog-line-input rte-dialog-input-label {
     font-size: 11px;
@@ -3002,7 +3101,7 @@ rte-dialog-outer rte-dialog-button {
 
 /* === Per-dialog width hints === */
 
-/* Insert video: just a URL textarea �� bigger so users can paste long
+/* Insert video: just a URL textarea �� bigger so users can paste long
    YouTube / Vimeo links without horizontal scroll. */
 rte-dialog-outer.rte-dialog-insertvideo rte-dialog-inner {
     min-width: 520px;
@@ -3015,7 +3114,7 @@ rte-dialog-outer .rte-dialog-line-url textarea {
     word-break: break-all;
 }
 
-/* Insert link / image-by-url: same family �� bigger than the default, but
+/* Insert link / image-by-url: same family �� bigger than the default, but
    not as wide as the code editor. */
 rte-dialog-outer.rte-dialog-insertlink rte-dialog-inner,
 rte-dialog-outer.rte-panel-insertimage-byurl rte-dialog-inner,
@@ -3029,13 +3128,13 @@ rte-dialog-outer.rte-dialog-insertcode rte-dialog-inner {
     max-width: min(880px, calc(100vw - 32px));
 }
 
-/* Insert table / find / general �� keep a consistent 460 px floor. */
+/* Insert table / find / general �� keep a consistent 460 px floor. */
 rte-dialog-outer.rte-panel-find rte-dialog-inner,
 rte-dialog-outer.rte-panel-general rte-dialog-inner {
     min-width: 460px;
 }
 
-/* Insert gallery / template / paste cleanup �� comfortable wide layouts
+/* Insert gallery / template / paste cleanup �� comfortable wide layouts
    for picking from a grid. */
 rte-dialog-outer.rte-dialog-insertgallery rte-dialog-inner,
 rte-dialog-outer.rte-dialog-inserttemplate rte-dialog-inner,
@@ -3045,7 +3144,7 @@ rte-dialog-outer.rte-dialog-pasteword rte-dialog-inner {
     max-width: min(960px, calc(100vw - 32px));
 }
 
-/* Image editor / HTML2PDF �� full creative surface. */
+/* Image editor / HTML2PDF �� full creative surface. */
 rte-dialog-outer.rte-dialog-imageeditor rte-dialog-inner,
 rte-dialog-outer.rte-dialog-html2pdf rte-dialog-inner {
     min-width: 760px;
@@ -3561,7 +3660,7 @@ rte-toolbar-dropdown-item:focus-visible {
     box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
 }
 
-/* Dark-mode hover for toolbar dropdown items �� the light-blue gradient above is
+/* Dark-mode hover for toolbar dropdown items �� the light-blue gradient above is
    light-only; without this it renders washed-out (light gradient + dark-blue
    text) over the dark panel. */
 .rte-dark rte-toolbar-dropdown-item:hover,
@@ -4429,7 +4528,7 @@ rte-dropdown-panel .rte-dialog-button:active {
 }
 
 /* ============================================================ */
-/* Dark mode (UI chrome only �� the document canvas stays white, */
+/* Dark mode (UI chrome only �� the document canvas stays white, */
 /* like Google Docs' dark UI, so authored content isn't harmed).*/
 /* Explicit dark mode by default; add rte-auto-dark to      */
 /* follow prefers-color-scheme; force on with rte-dark.      */
@@ -4502,7 +4601,7 @@ rte-dropdown-panel .rte-dialog-button:active {
 }
 
 /* ============================================================ */
-/* Dark mode �� dialog & dropdown panel interiors.              */
+/* Dark mode �� dialog & dropdown panel interiors.              */
 /* The dialog surface itself is token-driven (var(--rte-       */
 /* surface-raised)); these rules cover the text/inputs/borders */
 /* that don't inherit, so dialogs aren't black-text-on-dark.   */
@@ -4597,7 +4696,7 @@ rte-dropdown-panel .rte-dialog-button:active {
     }
 }
 
-/* Dark mode �� floating selection toolbar (rte-control-toolbar). Inside the
+/* Dark mode �� floating selection toolbar (rte-control-toolbar). Inside the
    editor container, so both the explicit class and the media query reach it. */
 .rte-dark rte-control-toolbar {
     background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
@@ -4617,10 +4716,10 @@ rte-dropdown-panel .rte-dialog-button:active {
 }
 .rte-dark rte-link-url-preview, .rte-dark rte-link-url-preview a { color: #60a5fa; }
 
-@media (prefers-color-scheme: dark) {
-    .richtexteditor.rte-auto-dark:not(.rte-light) rte-control-toolbar {
-        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
-        border-color: #334155;
+@media (prefers-color-scheme: dark) {
+    .richtexteditor.rte-auto-dark:not(.rte-light) rte-control-toolbar {
+        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
+        border-color: #334155;
     }
     .richtexteditor.rte-auto-dark:not(.rte-light) rte-control-toolbar rte-toolbar-button,
     .richtexteditor.rte-auto-dark:not(.rte-light) rte-control-toolbar rte-toolbar-splitbutton,
@@ -4631,189 +4730,189 @@ rte-dropdown-panel .rte-dialog-button:active {
     .richtexteditor.rte-auto-dark:not(.rte-light) rte-control-toolbar rte-toolbar-button:hover,
     .richtexteditor.rte-auto-dark:not(.rte-light) rte-control-toolbar rte-toolbar-splitbutton:hover,
     .richtexteditor.rte-auto-dark:not(.rte-light) rte-control-toolbar rte-toolbar-dropdown:hover {
-        background: #334155;
-    }
-}
-
-/* 2026-07-02 toolbar icon polish.
-   Keep this after the token-driven chrome rules so the modern toolbar retains
-   its quiet selected state instead of inheriting the older solid accent fill. */
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-direct,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-dropdown {
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--rte-icon-color, #5f6368);
-    background-clip: padding-box;
-    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
-}
-
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button svg,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton svg,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton svg {
-    display: block !important;
-    flex: 0 0 auto;
-    width: 18px !important;
-    height: 18px !important;
-    margin: 0 !important;
-    align-self: center !important;
-    color: currentColor;
-    pointer-events: none;
-}
-
-.rte-modern rte-control-toolbar rte-toolbar-button svg,
-.rte-modern rte-control-toolbar rte-toolbar-splitbutton svg,
-.rte-modern rte-control-toolbar rte-toolbar-arrowbutton svg,
-.rte-modern rte-dropdown-panel rte-toolbar-button svg {
-    display: block !important;
-    margin: 0 !important;
-    align-self: center !important;
-    color: currentColor;
-    pointer-events: none;
-}
-
+        background: #334155;
+    }
+}
+
+/* 2026-07-02 toolbar icon polish.
+   Keep this after the token-driven chrome rules so the modern toolbar retains
+   its quiet selected state instead of inheriting the older solid accent fill. */
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-direct,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-dropdown {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--rte-icon-color, #5f6368);
+    background-clip: padding-box;
+    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+}
+
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button svg,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton svg,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton svg {
+    display: block !important;
+    flex: 0 0 auto;
+    width: 20px !important;
+    height: 20px !important;
+    margin: 0 !important;
+    align-self: center !important;
+    color: currentColor;
+    pointer-events: none;
+}
+
+.rte-modern rte-control-toolbar rte-toolbar-button svg,
+.rte-modern rte-control-toolbar rte-toolbar-splitbutton svg,
+.rte-modern rte-control-toolbar rte-toolbar-arrowbutton svg,
+.rte-modern rte-dropdown-panel rte-toolbar-button svg {
+    display: block !important;
+    margin: 0 !important;
+    align-self: center !important;
+    color: currentColor;
+    pointer-events: none;
+}
+
 .rte-modern rte-dropdown-panel rte-toolbar-button svg {
-    width: 18px !important;
-    height: 18px !important;
-}
-
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button:hover,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton:hover,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton:hover {
-    color: #1559d6;
-    background-color: #f3f8ff;
-    border-color: rgba(37,99,235,.14);
-}
-
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button.rte-command-active,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton.rte-command-active,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton.rte-command-active,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-dropdown.rte-command-active {
-    color: #1559d6;
-    fill: currentColor;
-    background-color: #edf6ff;
-    border-color: rgba(37,99,235,.22);
-    box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
-}
-
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button.rte-command-disabled,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton.rte-command-disabled,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton.rte-command-disabled {
-    color: #9aa0a6;
-    opacity: .62;
-}
-
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button.rte-command-disabled:hover,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton.rte-command-disabled:hover,
-.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton.rte-command-disabled:hover {
-    color: #9aa0a6;
-    background-color: transparent;
-    border-color: transparent;
-    box-shadow: none;
-}
-
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button,
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton,
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton,
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-direct,
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-dropdown {
-    color: var(--rte-icon-color, #cbd5e1);
-}
-
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button:hover,
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton:hover,
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton:hover {
-    color: #e2e8f0;
-    background-color: #334155;
-    border-color: #475569;
-}
-
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button.rte-command-active,
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton.rte-command-active,
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton.rte-command-active,
-.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-dropdown.rte-command-active {
-    color: #bfdbfe;
-    background-color: #1e3a5f;
-    border-color: rgba(96,165,250,.46);
-    box-shadow: inset 0 0 0 1px rgba(96,165,250,.24);
-}
-
-@media (prefers-color-scheme: dark) {
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-button,
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton,
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton,
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-direct,
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-dropdown {
-        color: var(--rte-icon-color, #cbd5e1);
-    }
-
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-button:hover,
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton:hover,
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton:hover {
-        color: #e2e8f0;
-        background-color: #334155;
-        border-color: #475569;
-    }
-
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-button.rte-command-active,
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton.rte-command-active,
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton.rte-command-active,
-    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-dropdown.rte-command-active {
-        color: #bfdbfe;
-        background-color: #1e3a5f;
-        border-color: rgba(96,165,250,.46);
-        box-shadow: inset 0 0 0 1px rgba(96,165,250,.24);
-    }
-}
-
-/* 2026-07-03 dialog top-chrome guard.
-   Dialogs must clear host sticky menus and also sit above editor dropdown
-   panels, which use a higher default z-index than config.zIndexDialog. */
-rte-dialog-outer,
-rte-dialog-float,
-.rte-alt-editor-popup,
-.rte-find-replace-dialog,
-.rte-ai-context-menu,
-.rte-image-quickbar {
-    --rte-dialog-effective-top-chrome: max(var(--rte-ai-sticky-top-offset, 0px), var(--rte-dialog-detected-top-chrome, 0px));
-}
-
-rte-dialog-outer {
-    top: max(0px, var(--rte-dialog-effective-top-chrome)) !important;
-    box-sizing: border-box;
-    padding: 12px;
-    overflow: auto;
-    overscroll-behavior: contain;
-    z-index: 2147483646 !important;
-}
-
-rte-dialog-outer rte-dialog-inner {
-    max-height: min(88vh, 760px, calc(100vh - max(32px, calc(var(--rte-dialog-effective-top-chrome) + 32px)))) !important;
-}
-
-rte-dialog-float {
-    top: max(12px, calc(var(--rte-dialog-effective-top-chrome) + 12px));
-    max-height: calc(100vh - max(32px, calc(var(--rte-dialog-effective-top-chrome) + 32px)));
-    z-index: 2147483646 !important;
-}
-
-rte-dialog-float rte-dialog-inner {
-    max-height: inherit;
-    overflow: auto;
-}
-
-.rte-alt-editor-popup,
-.rte-find-replace-dialog,
-.rte-ai-context-menu {
-    z-index: 2147483646 !important;
-}
-
-.rte-find-replace-dialog {
-    top: max(80px, calc(var(--rte-dialog-effective-top-chrome) + 12px)) !important;
-    max-height: calc(100vh - max(104px, calc(var(--rte-dialog-effective-top-chrome) + 32px)));
-    overflow: auto;
+    width: 20px !important;
+    height: 20px !important;
 }
+
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button:hover,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton:hover,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton:hover {
+    color: #1559d6;
+    background-color: #f3f8ff;
+    border-color: rgba(37,99,235,.14);
+}
+
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button.rte-command-active,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton.rte-command-active,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton.rte-command-active,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-dropdown.rte-command-active {
+    color: #1559d6;
+    fill: currentColor;
+    background-color: #edf6ff;
+    border-color: rgba(37,99,235,.22);
+    box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
+}
+
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button.rte-command-disabled,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton.rte-command-disabled,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton.rte-command-disabled {
+    color: #9aa0a6;
+    opacity: .62;
+}
+
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button.rte-command-disabled:hover,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton.rte-command-disabled:hover,
+.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton.rte-command-disabled:hover {
+    color: #9aa0a6;
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+}
+
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button,
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton,
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton,
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-direct,
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-dropdown {
+    color: var(--rte-icon-color, #cbd5e1);
+}
+
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button:hover,
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton:hover,
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton:hover {
+    color: #e2e8f0;
+    background-color: #334155;
+    border-color: #475569;
+}
+
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-button.rte-command-active,
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton.rte-command-active,
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton.rte-command-active,
+.rte-dark.richtexteditor.rte-modern.rte-desktop rte-toolbar.rte-toolbar-desktop rte-toolbar-dropdown.rte-command-active {
+    color: #bfdbfe;
+    background-color: #1e3a5f;
+    border-color: rgba(96,165,250,.46);
+    box-shadow: inset 0 0 0 1px rgba(96,165,250,.24);
+}
+
+@media (prefers-color-scheme: dark) {
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-button,
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton,
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton,
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-direct,
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton-dropdown {
+        color: var(--rte-icon-color, #cbd5e1);
+    }
+
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-button:hover,
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton:hover,
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton:hover {
+        color: #e2e8f0;
+        background-color: #334155;
+        border-color: #475569;
+    }
+
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-button.rte-command-active,
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-arrowbutton.rte-command-active,
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-splitbutton.rte-command-active,
+    .richtexteditor.rte-auto-dark.rte-modern.rte-desktop:not(.rte-light) rte-toolbar.rte-toolbar-desktop rte-toolbar-dropdown.rte-command-active {
+        color: #bfdbfe;
+        background-color: #1e3a5f;
+        border-color: rgba(96,165,250,.46);
+        box-shadow: inset 0 0 0 1px rgba(96,165,250,.24);
+    }
+}
+
+/* 2026-07-03 dialog top-chrome guard.
+   Dialogs must clear host sticky menus and also sit above editor dropdown
+   panels, which use a higher default z-index than config.zIndexDialog. */
+rte-dialog-outer,
+rte-dialog-float,
+.rte-alt-editor-popup,
+.rte-find-replace-dialog,
+.rte-ai-context-menu,
+.rte-image-quickbar {
+    --rte-dialog-effective-top-chrome: max(var(--rte-ai-sticky-top-offset, 0px), var(--rte-dialog-detected-top-chrome, 0px));
+}
+
+rte-dialog-outer {
+    top: max(0px, var(--rte-dialog-effective-top-chrome)) !important;
+    box-sizing: border-box;
+    padding: 12px;
+    overflow: auto;
+    overscroll-behavior: contain;
+    z-index: 2147483646 !important;
+}
+
+rte-dialog-outer rte-dialog-inner {
+    max-height: min(88vh, 760px, calc(100vh - max(32px, calc(var(--rte-dialog-effective-top-chrome) + 32px)))) !important;
+}
+
+rte-dialog-float {
+    top: max(12px, calc(var(--rte-dialog-effective-top-chrome) + 12px));
+    max-height: calc(100vh - max(32px, calc(var(--rte-dialog-effective-top-chrome) + 32px)));
+    z-index: 2147483646 !important;
+}
+
+rte-dialog-float rte-dialog-inner {
+    max-height: inherit;
+    overflow: auto;
+}
+
+.rte-alt-editor-popup,
+.rte-find-replace-dialog,
+.rte-ai-context-menu {
+    z-index: 2147483646 !important;
+}
+
+.rte-find-replace-dialog {
+    top: max(80px, calc(var(--rte-dialog-effective-top-chrome) + 12px)) !important;
+    max-height: calc(100vh - max(104px, calc(var(--rte-dialog-effective-top-chrome) + 32px)));
+    overflow: auto;
+}