react-dockable-desktop 3.2.0 → 4.1.0

package/dist/styles.css

@@ -67,6 +67,27 @@
   --panel-card-border: rgba(255, 255, 255, 0.1);
   --panel-text: var(--text-primary);
   --panel-title-color: var(--accent-color, #38bdf8);
+  /* ── Panel Overlay — Toolbar ── */
+  --panel-toolbar-padding: 8px;
+  --panel-toolbar-gap: 4px;
+  --panel-toolbar-btn-size: 32px;
+  --panel-toolbar-btn-radius: 6px;
+  --panel-toolbar-fg: rgba(255, 255, 255, 0.65);
+  --panel-toolbar-fg-hover: rgba(255, 255, 255, 0.95);
+  --panel-toolbar-btn-hover-bg: var(--toolbar-btn-hover-bg, rgba(255, 255, 255, 0.08));
+  --panel-toolbar-btn-active-bg: var(--toolbar-btn-radio-active-bg, rgba(56, 189, 248, 0.14));
+  --panel-toolbar-btn-active-color: var(--tab-icon-active, #38bdf8);
+  --panel-toolbar-separator-color: var(--toolbar-separator-color, rgba(255, 255, 255, 0.09));
+  /* ── Panel Overlay — Floating Window ── */
+  --panel-float-bg: rgba(22, 24, 34, 0.92);
+  --panel-float-border: rgba(255, 255, 255, 0.1);
+  --panel-float-radius: 8px;
+  --panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+  --panel-float-shadow-active: 0 8px 28px rgba(0, 0, 0, 0.55);
+  --panel-float-header-bg: var(--window-header-bg, rgba(0, 0, 0, 0.25));
+  --panel-float-header-bg-active: var(--window-header-bg, rgba(0, 0, 0, 0.25));
+  --panel-float-title-color: var(--window-text, #f8f9fa);
+  --panel-float-title-color-active: var(--window-text, #f8f9fa);
 }
 
 html,
@@ -652,26 +673,6 @@ body.resizing-col-active * {
   box-shadow: none;
 }
 
-/* Anchor Button Icon Rotations - Base line sits at the bottom in default 0deg state */
-.anchor-icon {
-  transition: transform 0.2s ease, color 0.2s ease;
-}
-.anchor-sticky-right {
-  /* Rotates -90deg so the bottom flat line sits on the right-hand side */
-  transform: rotate(-90deg);
-  color: var(--accent-color, #38bdf8);
-}
-.anchor-sticky-bottom {
-  /* No rotation: the bottom flat line stays on the bottom */
-  transform: rotate(0deg);
-  color: var(--accent-color, #38bdf8);
-}
-.anchor-sticky-both {
-  /* Rotates -45deg so the bottom flat line sits on the bottom-right corner */
-  transform: rotate(-45deg);
-  color: var(--accent-color, #38bdf8);
-  filter: drop-shadow(0 0 4px var(--accent-glow));
-}
 
 .floating-window-titlebar {
   padding: 8px 14px;
@@ -705,57 +706,145 @@ body.resizing-col-active * {
   cursor: grabbing;
 }
 
-/* VS Code-style context menu */
-.react-contexify {
-  background-color: #1e1e1e !important;
-  border: 1px solid #454545 !important;
-  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
-  border-radius: 5px !important;
-  padding: 4px 0 !important;
-  min-width: 220px !important;
-  z-index: 99999 !important;
+/* ==========================================================================
+   CONTEXT MENU (.dw-context-menu)
+   ========================================================================== */
+
+/* Icon slot used by both context menu items and toolbar flyout items.
+   Fixed width keeps text columns aligned regardless of SVG size. */
+.wm-menu-icon {
+  width: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-.react-contexify .react-contexify__item__content {
-  color: #cccccc !important;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
-  font-size: 13px !important;
-  padding: 5px 22px 5px 10px !important;
-  letter-spacing: 0.01em !important;
+.dw-context-menu {
+  position: fixed;
+  z-index: 9500;
+  background: var(--sidebar-bg, #1e2024);
+  border: 1px solid var(--sidebar-border, rgba(255, 255, 255, 0.08));
+  border-radius: 6px;
+  padding: 4px 0;
+  min-width: 220px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 13px;
+  animation: dw-context-menu-in 0.1s cubic-bezier(0.16, 1, 0.3, 1);
+  outline: none;
 }
 
-.react-contexify .react-contexify__item:not(.react-contexify__item--disabled):hover > .react-contexify__item__content {
-  background-color: #094771 !important;
-  color: #ffffff !important;
+@keyframes dw-context-menu-in {
+  from { opacity: 0; transform: scale(0.97); }
+  to   { opacity: 1; transform: scale(1); }
 }
 
-.react-contexify .react-contexify__separator {
-  background-color: #454545 !important;
-  margin: 4px 0 !important;
+.dw-context-menu--submenu {
+  z-index: 9501;
 }
 
-.react-contexify .react-contexify__item-row {
-  gap: 10px !important;
+.dw-context-menu__separator {
+  height: 1px;
+  background: var(--sidebar-border, rgba(255, 255, 255, 0.08));
+  margin: 4px 8px;
+  border: none;
 }
 
-/* Let the wrapper class own the column width — library container defers to it */
-.react-contexify .react-contexify__item-icon {
-  width: auto !important;
-  flex-shrink: 0 !important;
+.dw-context-menu__item {
+  display: flex;
+  align-items: center;
+  width: calc(100% - 8px);
+  margin: 0 4px;
+  padding: 5px 8px;
+  gap: 8px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--sidebar-text-title, #cccccc);
+  cursor: pointer;
+  text-align: start;
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+  box-sizing: border-box;
+  font-size: inherit;
+  font-family: inherit;
 }
 
-/* Icon slot: fixed width so all text aligns regardless of SVG size.
-   Override this class to change the icon column width globally. */
-.wm-menu-icon {
-  width: 14px;
+.dw-context-menu__item:hover:not(:disabled):not(.dw-context-menu__item--disabled) {
+  background-color: var(--toolbar-btn-hover-bg, rgba(255, 255, 255, 0.07));
+  color: var(--sidebar-text-title, #f8f9fa);
+}
+
+.dw-context-menu__item:disabled,
+.dw-context-menu__item--disabled {
+  opacity: 0.38;
+  cursor: default;
+  pointer-events: none;
+}
+
+.dw-context-menu__item--has-submenu.dw-context-menu__item--submenu-open {
+  background-color: var(--toolbar-btn-radio-active-bg, rgba(9, 71, 113, 0.35));
+}
+
+.dw-context-menu__icon {
+  width: 16px;
+  min-width: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  color: inherit;
+  opacity: 0.85;
+}
+
+.dw-context-menu__label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dw-context-menu__chevron {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding-left: 12px;
+  font-size: 14px;
+  line-height: 1;
+  opacity: 0.6;
 }
 
-.react-contexify .react-contexify__item-label {
-  text-align: left !important;
+[dir="rtl"] .dw-context-menu__chevron {
+  margin-left: 0;
+  margin-right: auto;
+  padding-left: 0;
+  padding-right: 12px;
+  transform: scaleX(-1);
+}
+
+[dir="rtl"] .dw-context-menu__checkbox {
+  margin-left: 0;
+  margin-right: auto;
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+.dw-context-menu__checkbox {
+  width: 14px;
+  min-width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-left: auto;
+  padding-left: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--tab-icon-active, #38bdf8);
+  box-sizing: content-box;
+  opacity: 0.6;
+}
+
+.dw-context-menu__checkbox--checked {
+  opacity: 1;
 }
 
 /* Drag split target drop zone overlays */
@@ -1008,6 +1097,16 @@ body.resizing-col-active * {
   --panel-card-border: rgba(0, 0, 0, 0.08);
   --panel-text: #212529;
   --panel-title-color: #0066cc;
+  /* ── Panel Overlay — Toolbar (light) ── */
+  --panel-toolbar-fg: rgba(0, 0, 0, 0.55);
+  --panel-toolbar-fg-hover: rgba(0, 0, 0, 0.85);
+  --panel-toolbar-btn-hover-bg: rgba(0, 0, 0, 0.08);
+  --panel-toolbar-separator-color: rgba(0, 0, 0, 0.1);
+  /* ── Panel Overlay — Floating Window (light) ── */
+  --panel-float-bg: rgba(255, 255, 255, 0.96);
+  --panel-float-border: rgba(0, 0, 0, 0.1);
+  --panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --panel-float-shadow-active: 0 8px 28px rgba(0, 0, 0, 0.2);
 }
 
 /* ==========================================================================
@@ -1114,23 +1213,20 @@ body.resizing-col-active * {
   position: relative !important;
 }
 [data-workspace-skin="macos"] .floating-window-titlebar .floating-window-title {
-  position: absolute !important;
-  left: 0 !important;
-  right: 0 !important;
-  text-align: center !important;
   pointer-events: none !important;
   margin: 0 !important;
-  justify-content: center !important;
+  margin-inline-start: 0.5rem !important;
+  flex: 1 !important;
+  min-width: 0 !important;
+  justify-content: flex-end !important;
 }
 [data-workspace-skin="macos"] .floating-window-titlebar .floating-window-title > * {
   pointer-events: auto;
 }
 [data-workspace-skin="macos"] .floating-window-titlebar .fw-titlebar-actions {
   flex-direction: row-reverse !important;
-  position: relative !important;
-  z-index: 1 !important;
 }
-[data-workspace-skin="macos"] .custom-tab-btn:not(.btn-anchor-tab) svg {
+[data-workspace-skin="macos"] .custom-tab-btn svg {
   display: none !important;
 }
 [data-workspace-skin="macos"] .btn-close-tab {
@@ -1142,39 +1238,6 @@ body.resizing-col-active * {
 [data-workspace-skin="macos"] .btn-maximize-tab {
   background-color: #27c93f !important; /* Green (Maximize) */
 }
-[data-workspace-skin="macos"] .btn-anchor-tab {
-  /* Default: Neutral Graphite/Slate dot when inactive */
-  background-color: #8e8e93 !important;
-}
-/* When inactive (no sticky values) - show as a neutral grey macOS dot */
-[data-workspace-skin="macos"] .btn-anchor-tab:not(:has(.anchor-sticky-right)):not(:has(.anchor-sticky-bottom)):not(:has(.anchor-sticky-both)) {
-  background-color: #8e8e93 !important;
-}
-[data-workspace-skin="macos"][data-color-scheme="light"] .btn-anchor-tab:not(:has(.anchor-sticky-right)):not(:has(.anchor-sticky-bottom)):not(:has(.anchor-sticky-both)) {
-  background-color: #a4a4a8 !important;
-}
-
-/* macOS Active Snapped Dot State: Solid active blue with high-contrast yellow icon */
-[data-workspace-skin="macos"] .btn-anchor-tab:has(.anchor-sticky-right),
-[data-workspace-skin="macos"] .btn-anchor-tab:has(.anchor-sticky-bottom),
-[data-workspace-skin="macos"] .btn-anchor-tab:has(.anchor-sticky-both) {
-  background-color: #007aff !important;
-  border: 1px solid rgba(0,0,0,0.15) !important;
-}
-
-/* Ensure the anchor icon displays cleanly and is centered inside the macOS dot */
-[data-workspace-skin="macos"] .btn-anchor-tab {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-[data-workspace-skin="macos"] .btn-anchor-tab svg {
-  display: block !important;
-  color: #ffbd2e !important; /* Premium macOS system yellow */
-  width: 9px !important;
-  height: 9px !important;
-  flex-shrink: 0;
-}
 
 /* Panel Icon Styling and Alignment */
 .workspace-tab-icon,
@@ -1185,7 +1248,7 @@ body.resizing-col-active * {
   flex-shrink: 0;
   vertical-align: middle;
   line-height: 1;
-  margin-right: 4px !important; /* Forces the gap between the icon and the text title */
+  margin-inline-end: 4px !important; /* Forces the gap between the icon and the text title */
 }
 
 .workspace-tab-icon svg,
@@ -1514,27 +1577,18 @@ body.resizing-col-active * {
    ========================================================================== */
 
 /* --------------------------------------------------------------------------
-   vscode — Accent Bar (2 px, rounded chip, near-zero fill)
+   vscode — Accent Bar (2 px bar, fully transparent fill — faithful to VS Code)
    -------------------------------------------------------------------------- */
 [data-workspace-skin="vscode"] {
-  --tab-btn-active-bg: rgba(255, 255, 255, 0.07);
-  --tab-btn-active-radius: 6px;
+  --tab-btn-active-bg: transparent;
   --tab-accent-bar-width: 2px;
-  --toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.07);
+  --toolbar-btn-radio-active-bg: transparent;
   --toolbar-accent-bar-width: 2px;
 }
 [data-workspace-skin="vscode"] .sidebar-tab-btn.active {
   border-top: 1px solid transparent !important;
   border-bottom: 1px solid transparent !important;
 }
-[data-workspace-skin="vscode"] .toolbar-strip .toolbar-btn-radio.active,
-[data-workspace-skin="vscode"] .toolbar-strip .toolbar-btn-group.active {
-  border-radius: 6px !important;
-}
-[data-workspace-skin="vscode"][data-color-scheme="light"] {
-  --tab-btn-active-bg: rgba(0, 0, 0, 0.06);
-  --toolbar-btn-radio-active-bg: rgba(0, 0, 0, 0.06);
-}
 
 /* --------------------------------------------------------------------------
    chrome — Tab Shape (sidebar bridge, toolbar accent-tinted)
@@ -1569,6 +1623,7 @@ body.resizing-col-active * {
 [data-workspace-skin="slate"] .sidebar-tab-btn.active {
   border-top: 1px solid transparent !important;
   border-bottom: 1px solid transparent !important;
+  margin: 0 !important;
 }
 [data-workspace-skin="slate"] .toolbar-strip .toolbar-btn-radio.active,
 [data-workspace-skin="slate"] .toolbar-strip .toolbar-btn-group.active {
@@ -1580,7 +1635,7 @@ body.resizing-col-active * {
 }
 
 /* --------------------------------------------------------------------------
-   nord — Nordic Dot (zero fill, zero bar, 4 px accent dot via ::after)
+   nord — Nordic Line (zero fill, zero bar, 16×2 px accent line via ::after)
    -------------------------------------------------------------------------- */
 [data-workspace-skin="nord"] {
   --tab-btn-active-bg: transparent;
@@ -1602,9 +1657,9 @@ body.resizing-col-active * {
   bottom: 5px;
   left: 50%;
   transform: translateX(-50%);
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
+  width: 16px;
+  height: 2px;
+  border-radius: 1px;
   background-color: var(--tab-icon-active);
 }
 [data-workspace-skin="nord"] .toolbar-strip .toolbar-btn-radio.active,
@@ -1625,9 +1680,9 @@ body.resizing-col-active * {
   bottom: 4px;
   left: 50%;
   transform: translateX(-50%);
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
+  width: 14px;
+  height: 2px;
+  border-radius: 1px;
   background-color: var(--tab-icon-active);
 }
 [data-workspace-skin="nord"] .toolbar-strip.bottom .toolbar-btn-radio.active::after,
@@ -1637,9 +1692,9 @@ body.resizing-col-active * {
   top: 4px;
   left: 50%;
   transform: translateX(-50%);
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
+  width: 14px;
+  height: 2px;
+  border-radius: 1px;
   background-color: var(--tab-icon-active);
 }
 
@@ -1722,57 +1777,34 @@ body.resizing-col-active * {
 }
 
 /* --------------------------------------------------------------------------
-   macos — Glass Merge (frosted glass, rounded outer corners, no bar)
+   macos — Glass Chip (full-round floating chip, accent fill + white ring)
+   Inspired by macOS app icon strip conventions: Xcode, Logic Pro, System Settings.
+   A contained chip that floats inside the strip — not an edge-connecting bridge.
    -------------------------------------------------------------------------- */
 [data-workspace-skin="macos"] {
-  --tab-btn-active-bg: rgba(255, 255, 255, 0.16);
+  --tab-btn-active-bg: rgba(56, 189, 248, 0.2);
+  --tab-btn-active-width: 36px;
+  --tab-btn-active-radius: 10px;
+  --tab-btn-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
   --tab-accent-bar-width: 0px;
-  --toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.16);
+  --toolbar-btn-radio-active-bg: rgba(56, 189, 248, 0.2);
+  --toolbar-btn-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
   --toolbar-accent-bar-width: 0px;
 }
-[data-workspace-skin="macos"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
-  border-radius: 0 10px 10px 0 !important;
-  backdrop-filter: blur(8px) saturate(160%);
-  -webkit-backdrop-filter: blur(8px) saturate(160%);
-  border-left: none !important;
-}
-[data-workspace-skin="macos"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
-  border-radius: 10px 0 0 10px !important;
-  backdrop-filter: blur(8px) saturate(160%);
-  -webkit-backdrop-filter: blur(8px) saturate(160%);
-  border-right: none !important;
-}
-[data-workspace-skin="macos"] .toolbar-strip.left .toolbar-btn-radio.active,
-[data-workspace-skin="macos"] .toolbar-strip.left .toolbar-btn-group.active {
-  border-radius: 0 10px 10px 0 !important;
-  border-left: none !important;
-  backdrop-filter: blur(8px) saturate(160%);
-  -webkit-backdrop-filter: blur(8px) saturate(160%);
-}
-[data-workspace-skin="macos"] .toolbar-strip.right .toolbar-btn-radio.active,
-[data-workspace-skin="macos"] .toolbar-strip.right .toolbar-btn-group.active {
-  border-radius: 10px 0 0 10px !important;
-  border-right: none !important;
-  backdrop-filter: blur(8px) saturate(160%);
-  -webkit-backdrop-filter: blur(8px) saturate(160%);
-}
-[data-workspace-skin="macos"] .toolbar-strip.top .toolbar-btn-radio.active,
-[data-workspace-skin="macos"] .toolbar-strip.top .toolbar-btn-group.active {
-  border-radius: 0 0 10px 10px !important;
-  border-bottom: none !important;
-  backdrop-filter: blur(8px) saturate(160%);
-  -webkit-backdrop-filter: blur(8px) saturate(160%);
+[data-workspace-skin="macos"] .sidebar-tab-btn.active {
+  border-top: 1px solid transparent !important;
+  border-bottom: 1px solid transparent !important;
+  margin: 0 !important;
 }
-[data-workspace-skin="macos"] .toolbar-strip.bottom .toolbar-btn-radio.active,
-[data-workspace-skin="macos"] .toolbar-strip.bottom .toolbar-btn-group.active {
-  border-radius: 10px 10px 0 0 !important;
-  border-top: none !important;
-  backdrop-filter: blur(8px) saturate(160%);
-  -webkit-backdrop-filter: blur(8px) saturate(160%);
+[data-workspace-skin="macos"] .toolbar-strip .toolbar-btn-radio.active,
+[data-workspace-skin="macos"] .toolbar-strip .toolbar-btn-group.active {
+  border-radius: 10px !important;
 }
 [data-workspace-skin="macos"][data-color-scheme="light"] {
-  --tab-btn-active-bg: rgba(255, 255, 255, 0.72);
-  --toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.72);
+  --tab-btn-active-bg: rgba(0, 102, 204, 0.16);
+  --tab-btn-active-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.3);
+  --toolbar-btn-radio-active-bg: rgba(0, 102, 204, 0.16);
+  --toolbar-btn-active-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.3);
 }
 
 /* --- Modern Sidebar and Tabs UI Theme Customizations --- */
@@ -2215,33 +2247,34 @@ html:not(.enable-animations) *::after {
   animation: fadeIn 0.15s ease-out;
 }
 
-.edge-preview-left {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 30%;
-}
-
-.edge-preview-right {
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 30%;
+/* Workspace corner anchor drop zones */
+.fw-corner-zone {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  border: 2px dashed var(--accent-color, #38bdf8);
+  border-radius: 8px;
+  background: rgba(56, 189, 248, 0.06);
+  pointer-events: auto;
+  z-index: 10000;
+  opacity: 0.55;
+  transition: opacity 0.15s ease, background 0.15s ease, border-style 0.15s ease;
+}
+.fw-corner-zone--top-left     { top: 0;    left: 0;  }
+.fw-corner-zone--top-right    { top: 0;    right: 0; }
+.fw-corner-zone--bottom-left  { bottom: 0; left: 0;  }
+.fw-corner-zone--bottom-right { bottom: 0; right: 0; }
+.fw-corner-zone--hovered {
+  opacity: 1;
+  background: rgba(56, 189, 248, 0.18);
+  border-style: solid;
 }
 
-.edge-preview-top {
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 30%;
-}
+[dir="rtl"] .fw-corner-zone--top-right    { right: auto; left: 0;  }
+[dir="rtl"] .fw-corner-zone--top-left     { left: auto;  right: 0; }
+[dir="rtl"] .fw-corner-zone--bottom-right { right: auto; left: 0;  }
+[dir="rtl"] .fw-corner-zone--bottom-left  { left: auto;  right: 0; }
 
-.edge-preview-bottom {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 30%;
-}
 
 /* 
  * Counteract scale for canvas and its siblings inside Luciad containers.
@@ -2268,14 +2301,6 @@ html:not(.enable-animations) *::after {
    RTL (Right-to-Left) Support
    ========================================== */
 
-[dir="rtl"] .workspace-tab-bar {
-  flex-direction: row-reverse !important;
-}
-
-[dir="rtl"] .tab-headers-container {
-  flex-direction: row-reverse !important;
-}
-
 [dir="rtl"] .workspace-tab {
   border-right: none !important;
   border-left: 1px solid var(--border-panel) !important;
@@ -2311,23 +2336,10 @@ html:not(.enable-animations) *::after {
   margin-right: auto !important;
 }
 
-/* Floating window title bar adjustments */
-[dir="rtl"] [data-workspace-skin="vscode"] .floating-window-titlebar,
-[dir="rtl"] [data-workspace-skin="chrome"] .floating-window-titlebar,
-[dir="rtl"] [data-workspace-skin="slate"] .floating-window-titlebar {
-  flex-direction: row-reverse !important;
-}
-
-[dir="rtl"] [data-workspace-skin="vscode"] .floating-window-titlebar .fw-titlebar-actions,
-[dir="rtl"] [data-workspace-skin="chrome"] .floating-window-titlebar .fw-titlebar-actions,
-[dir="rtl"] [data-workspace-skin="slate"] .floating-window-titlebar .fw-titlebar-actions {
-  flex-direction: row-reverse !important;
-}
-
-[dir="rtl"] .floating-window-title {
-  margin-right: 0 !important;
-  margin-left: auto !important;
-}
+/* Floating window title bar RTL — inherited direction:rtl on the titlebar flex container
+   moves buttons (last in DOM) to the LEFT and title (first in DOM) to the RIGHT.
+   No explicit row-reverse needed; only prevent the button group from reordering internally. */
+[dir="rtl"] .fw-titlebar-actions { flex-direction: row; }
 
 /* Side Panels transitions slide-in direction */
 [dir="rtl"] .v2-side-panel-left {
@@ -2363,15 +2375,19 @@ html:not(.enable-animations) *::after {
 
 /* macOS Skin - RTL floating window titlebar overrides
    Dots must stay on the LEFT in both LTR and RTL (real macOS behavior).
-   Title is absolutely centered, so no direction-specific adjustment needed.
-   In RTL, row-reverse naturally places the button group on the left. */
-[dir="rtl"][data-workspace-skin="macos"] .floating-window-titlebar {
-  flex-direction: row-reverse !important;
+   In RTL context flex-direction:row flows items right-to-left, so
+   DOM [title][buttons] → title at RIGHT, buttons at LEFT. */
+[dir="rtl"] [data-workspace-skin="macos"] .floating-window-titlebar {
+  flex-direction: row !important;
 }
-
-/* Button group: keep dots in correct visual order (Red → Yellow → Green)
-   from left to right regardless of text direction */
-[dir="rtl"][data-workspace-skin="macos"] .floating-window-titlebar .fw-titlebar-actions {
+/* Title: pack icon+text toward the visual right (flex-start = right in RTL) */
+[dir="rtl"] [data-workspace-skin="macos"] .floating-window-titlebar .floating-window-title {
+  justify-content: flex-start !important;
+}
+/* Button group: keep dots in correct visual order (Red → Yellow → Green, close at far left).
+   direction:rtl (inherited) + flex-direction:row = right-to-left → DOM first item (more) at right,
+   last item (close) at left. */
+[dir="rtl"] [data-workspace-skin="macos"] .floating-window-titlebar .fw-titlebar-actions {
   flex-direction: row !important;
 }
 
@@ -2381,6 +2397,70 @@ html:not(.enable-animations) *::after {
   margin-right: 2px !important;
 }
 
+/* ── Sidebar strips — separator border, accent indicator, drawer shadow ──
+   direction: rtl (inherited from workspace root) reverses the flex row so
+   .left strips move visually to the RIGHT and .right strips to the LEFT.
+   All physical border-left/border-right and box-shadow directions must swap. */
+
+[dir="rtl"] .sidebar-tabs-strip.left {
+  border-left: 1px solid var(--sidebar-border) !important;
+  border-right: none !important;
+}
+[dir="rtl"] .sidebar-tabs-strip.right {
+  border-right: 1px solid var(--sidebar-border) !important;
+  border-left: none !important;
+}
+
+[dir="rtl"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
+  border-left: none !important;
+  border-right: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
+  margin-left: -2px !important;
+  margin-right: 0 !important;
+}
+[dir="rtl"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
+  border-right: none !important;
+  border-left: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
+  margin-right: -2px !important;
+  margin-left: 0 !important;
+}
+
+[dir="rtl"] .sidebar-content-drawer.left {
+  border-left: 1px solid var(--sidebar-border) !important;
+  border-right: none !important;
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
+}
+[dir="rtl"] .sidebar-content-drawer.right {
+  border-right: 1px solid var(--sidebar-border) !important;
+  border-left: none !important;
+  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
+}
+
+/* obsidian & tokyo — flip the inset glow X offset sign */
+[dir="rtl"] [data-workspace-skin="obsidian"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
+  box-shadow: var(--tab-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
+}
+[dir="rtl"] [data-workspace-skin="obsidian"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
+  box-shadow: var(--tab-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
+}
+[dir="rtl"] [data-workspace-skin="tokyo"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
+  box-shadow: var(--tab-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
+}
+[dir="rtl"] [data-workspace-skin="tokyo"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
+  box-shadow: var(--tab-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
+}
+
+/* chrome — swap the capsule border-radius when strips change sides */
+[dir="rtl"] [data-workspace-skin="chrome"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
+  border-radius: 10px 0 0 10px !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+[dir="rtl"] [data-workspace-skin="chrome"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
+  border-radius: 0 10px 10px 0 !important;
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
 /* ==========================================================================
    FRAMEWORK-AGNOSTIC UTILITY CLASSES
    (replaces Bootstrap utility class dependencies)
@@ -2996,11 +3076,19 @@ html:not(.enable-animations) *::after {
   to   { opacity: 1; transform: scale(1); }
 }
 
-/* Horizontal layout for top/bottom toolbars */
-.toolbar-group-flyout.top,
-.toolbar-group-flyout.bottom {
-  flex-direction: row;
-  min-width: unset;
+/* Animation origin matches the edge closest to the toolbar button */
+.toolbar-group-flyout.left   { transform-origin: top left; }
+.toolbar-group-flyout.right  { transform-origin: top right; }
+.toolbar-group-flyout.top    { transform-origin: top left; }
+.toolbar-group-flyout.bottom { transform-origin: bottom left; }
+/* RTL: physical sides swap, so animation origin flips horizontally */
+[dir="rtl"] .toolbar-group-flyout.left   { transform-origin: top right; }
+[dir="rtl"] .toolbar-group-flyout.right  { transform-origin: top left; }
+[dir="rtl"] .toolbar-group-flyout.top    { transform-origin: top right; }
+[dir="rtl"] .toolbar-group-flyout.bottom { transform-origin: bottom right; }
+
+[dir="rtl"] .toolbar-group-flyout-label {
+  text-align: right;
 }
 
 .toolbar-group-flyout-item {
@@ -3014,7 +3102,7 @@ html:not(.enable-animations) *::after {
   color: var(--sidebar-text-title, var(--text-primary));
   cursor: pointer;
   width: 100%;
-  text-align: left;
+  text-align: start;
   font-size: 0.8125rem;
   font-family: inherit;
   flex-shrink: 0;
@@ -3045,13 +3133,6 @@ html:not(.enable-animations) *::after {
   justify-content: center;
 }
 
-/* top/bottom flyout: icon only, hide label and shortcut */
-.toolbar-group-flyout.top .toolbar-group-flyout-label,
-.toolbar-group-flyout.bottom .toolbar-group-flyout-label,
-.toolbar-group-flyout.top .toolbar-group-flyout-shortcut,
-.toolbar-group-flyout.bottom .toolbar-group-flyout-shortcut {
-  display: none;
-}
 
 .toolbar-group-flyout-label {
   flex: 1;
@@ -3074,13 +3155,6 @@ html:not(.enable-animations) *::after {
   flex-shrink: 0;
 }
 
-/* Vertical separator for horizontal flyout */
-.toolbar-group-flyout.top .toolbar-group-flyout-sep,
-.toolbar-group-flyout.bottom .toolbar-group-flyout-sep {
-  width: 1px;
-  height: 16px;
-  margin: auto 2px;
-}
 
 /* Button base — used in ConfirmationForm and similar dialogs */
 .dw-btn {
@@ -3264,3 +3338,568 @@ html:not(.enable-animations) *::after {
 /* Note: touch-action and -webkit-overflow-scrolling intentionally omitted — they cause iOS Safari
    to fire pointercancel before the 300ms long-press timer can activate tab drag */
 .tab-headers-container::-webkit-scrollbar { display: none; }
+
+/* ==========================================================================
+   PANEL OVERLAY — Per-skin token overrides
+   ========================================================================== */
+
+[data-workspace-skin="vscode"] {
+  --panel-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.12);
+}
+
+[data-workspace-skin="macos"] {
+  --panel-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.18);
+}
+
+[data-workspace-skin="slate"] {
+  --panel-toolbar-btn-active-color: #60a5fa;
+  --panel-toolbar-btn-active-bg: rgba(96, 165, 250, 0.15);
+}
+
+[data-workspace-skin="nord"] {
+  --panel-toolbar-btn-active-color: #88c0d0;
+  --panel-toolbar-btn-active-bg: rgba(136, 192, 208, 0.15);
+}
+
+[data-workspace-skin="obsidian"] {
+  --panel-toolbar-btn-active-color: #a78bfa;
+  --panel-toolbar-btn-active-bg: rgba(167, 139, 250, 0.15);
+}
+
+[data-workspace-skin="tokyo"] {
+  --panel-toolbar-btn-active-color: #7aa2f7;
+  --panel-toolbar-btn-active-bg: rgba(122, 162, 247, 0.15);
+}
+
+/* ==========================================================================
+   PANEL OVERLAY — PanelToolbar + PanelFloatingWindow
+   ========================================================================== */
+
+/* ── Root container ── */
+.dw-panel-overlay-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ── Toolbar container ── */
+.dw-panel-toolbar {
+  position: absolute;
+  z-index: 5;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: var(--panel-toolbar-gap, 4px);
+  padding: var(--panel-toolbar-padding, 8px);
+  box-sizing: border-box;
+}
+
+.dw-panel-toolbar--top,
+.dw-panel-toolbar--bottom {
+  flex-direction: row;
+}
+
+.dw-panel-toolbar--left,
+.dw-panel-toolbar--right {
+  flex-direction: column;
+}
+
+/* Restore pointer-events on every direct child */
+.dw-panel-toolbar > * {
+  pointer-events: auto;
+}
+
+/* ── Toolbar button (shared by ToolbarButton + ToolbarToggle) ── */
+.dw-panel-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--panel-toolbar-btn-size, 32px);
+  height: var(--panel-toolbar-btn-size, 32px);
+  flex-shrink: 0;
+  border-radius: var(--panel-toolbar-btn-radius, 6px);
+  border: none;
+  background: transparent;
+  color: var(--panel-toolbar-fg, rgba(255, 255, 255, 0.65));
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease, border-color 0.12s ease;
+}
+
+.dw-panel-toolbar-btn:hover:not(:disabled) {
+  background: var(--panel-toolbar-btn-hover-bg, rgba(255, 255, 255, 0.15));
+  color: var(--panel-toolbar-fg-hover, rgba(255, 255, 255, 0.95));
+  transform: scale(1.07);
+}
+
+.dw-panel-toolbar-btn:active:not(:disabled) {
+  transform: scale(0.94);
+}
+
+.dw-panel-toolbar-btn--active {
+  background: var(--panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.14));
+  color: var(--panel-toolbar-btn-active-color, #38bdf8);
+}
+
+.dw-panel-toolbar-btn--active:hover:not(:disabled) {
+  background: var(--panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.22));
+}
+
+.dw-panel-toolbar-btn:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+/* ── Toolbar strip variants ── */
+.dw-panel-toolbar[data-variant="frosted"] {
+  background: rgba(15, 20, 30, 0.55);
+  backdrop-filter: blur(10px) saturate(150%);
+  -webkit-backdrop-filter: blur(10px) saturate(150%);
+}
+.dw-panel-toolbar[data-variant="solid"] {
+  background: var(--bg-tab-bar, #0d0f16);
+}
+[data-color-scheme="light"] .dw-panel-toolbar[data-variant="frosted"] {
+  background: rgba(233, 236, 239, 0.72);
+}
+.dw-panel-toolbar--top[data-variant="frosted"],
+.dw-panel-toolbar--top[data-variant="solid"] {
+  border-bottom: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
+}
+.dw-panel-toolbar--bottom[data-variant="frosted"],
+.dw-panel-toolbar--bottom[data-variant="solid"] {
+  border-top: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
+}
+.dw-panel-toolbar--left[data-variant="frosted"],
+.dw-panel-toolbar--left[data-variant="solid"] {
+  border-right: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
+}
+.dw-panel-toolbar--right[data-variant="frosted"],
+.dw-panel-toolbar--right[data-variant="solid"] {
+  border-left: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
+}
+
+/* ── Button variants — toolbar-level default ── */
+
+/* soft */
+.dw-panel-toolbar[data-btn-variant="soft"] .dw-panel-toolbar-btn,
+.dw-panel-toolbar-btn[data-variant="soft"] {
+  background: rgba(255, 255, 255, 0.06);
+}
+.dw-panel-toolbar[data-btn-variant="soft"] .dw-panel-toolbar-btn:hover:not(:disabled),
+.dw-panel-toolbar-btn[data-variant="soft"]:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.15);
+}
+[data-color-scheme="light"] .dw-panel-toolbar[data-btn-variant="soft"] .dw-panel-toolbar-btn,
+[data-color-scheme="light"] .dw-panel-toolbar-btn[data-variant="soft"] {
+  background: rgba(0, 0, 0, 0.04);
+}
+[data-color-scheme="light"] .dw-panel-toolbar[data-btn-variant="soft"] .dw-panel-toolbar-btn:hover:not(:disabled),
+[data-color-scheme="light"] .dw-panel-toolbar-btn[data-variant="soft"]:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+/* outlined */
+.dw-panel-toolbar[data-btn-variant="outlined"] .dw-panel-toolbar-btn,
+.dw-panel-toolbar-btn[data-variant="outlined"] {
+  border: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.18));
+}
+.dw-panel-toolbar[data-btn-variant="outlined"] .dw-panel-toolbar-btn:hover:not(:disabled),
+.dw-panel-toolbar-btn[data-variant="outlined"]:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.38);
+}
+[data-color-scheme="light"] .dw-panel-toolbar[data-btn-variant="outlined"] .dw-panel-toolbar-btn:hover:not(:disabled),
+[data-color-scheme="light"] .dw-panel-toolbar-btn[data-variant="outlined"]:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.06);
+  border-color: rgba(0, 0, 0, 0.25);
+}
+
+/* filled */
+.dw-panel-toolbar[data-btn-variant="filled"] .dw-panel-toolbar-btn,
+.dw-panel-toolbar-btn[data-variant="filled"] {
+  background: var(--panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.2));
+  color: var(--panel-toolbar-btn-active-color, #38bdf8);
+  border: 1px solid var(--panel-toolbar-btn-active-color, #38bdf8);
+}
+.dw-panel-toolbar[data-btn-variant="filled"] .dw-panel-toolbar-btn:hover:not(:disabled),
+.dw-panel-toolbar-btn[data-variant="filled"]:hover:not(:disabled) {
+  background: var(--panel-toolbar-btn-active-color, #38bdf8);
+  color: #000;
+  border-color: transparent;
+}
+
+/* ── Separator ── */
+.dw-panel-toolbar__sep {
+  flex-shrink: 0;
+  background: var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
+  align-self: center;
+}
+
+.dw-panel-toolbar--top .dw-panel-toolbar__sep,
+.dw-panel-toolbar--bottom .dw-panel-toolbar__sep {
+  width: 1px;
+  height: 18px;
+}
+
+.dw-panel-toolbar--left .dw-panel-toolbar__sep,
+.dw-panel-toolbar--right .dw-panel-toolbar__sep {
+  height: 1px;
+  width: 18px;
+}
+
+/* ── Spacer — pushes subsequent items to the opposite end ── */
+.dw-panel-toolbar__spacer {
+  flex: 1;
+  pointer-events: none;
+}
+
+/* ── ToolbarItem wrapper (restores pointer-events for custom controls) ── */
+.dw-panel-toolbar__item {
+  display: inline-flex;
+  align-items: center;
+  pointer-events: auto;
+}
+
+/* ── ToolbarCenter — absolutely centered, independent of left/right widths ── */
+.dw-panel-toolbar__center {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: var(--panel-toolbar-gap, 4px);
+  pointer-events: none;
+}
+.dw-panel-toolbar__center > * {
+  pointer-events: auto;
+}
+/* Horizontal toolbars: center horizontally */
+.dw-panel-toolbar--top .dw-panel-toolbar__center,
+.dw-panel-toolbar--bottom .dw-panel-toolbar__center {
+  flex-direction: row;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+/* Vertical toolbars: center vertically */
+.dw-panel-toolbar--left .dw-panel-toolbar__center,
+.dw-panel-toolbar--right .dw-panel-toolbar__center {
+  flex-direction: column;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ── ToolbarSearchInput ── */
+.dw-panel-toolbar-search {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.dw-panel-toolbar-search__input {
+  height: var(--panel-toolbar-btn-size, 28px);
+  width: 200px;
+  border: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.15));
+  border-radius: var(--panel-toolbar-btn-radius, 6px);
+  background: rgba(0, 0, 0, 0.18);
+  color: inherit;
+  padding: 0 8px;
+  font-size: 12px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.dw-panel-toolbar-search__input::placeholder {
+  opacity: 0.45;
+}
+
+.dw-panel-toolbar-search__input:focus {
+  border-color: var(--panel-toolbar-btn-active-color, #38bdf8);
+}
+
+.dw-panel-toolbar-search__dropdown {
+  background: var(--panel-float-bg, rgba(22, 24, 34, 0.95));
+  border: 1px solid var(--panel-float-border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--panel-float-radius, 8px);
+  box-shadow: var(--panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
+  overflow: hidden;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.dw-panel-toolbar-search__group {
+  padding: 6px 12px 2px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.45;
+}
+
+.dw-panel-toolbar-search__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.dw-panel-toolbar-search__item:hover {
+  background: var(--panel-toolbar-btn-hover-bg, rgba(255, 255, 255, 0.08));
+}
+
+.dw-panel-toolbar-search__item-icon { flex-shrink: 0; opacity: 0.7; }
+.dw-panel-toolbar-search__item-label { flex: 1; }
+.dw-panel-toolbar-search__item-desc { opacity: 0.45; font-size: 11px; }
+
+/* ── Floating window ── */
+.dw-panel-float {
+  position: absolute;
+  min-width: 120px;
+  min-height: 60px;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--panel-float-radius, 8px);
+  background: var(--panel-float-bg, rgba(22, 24, 34, 0.92));
+  border: 1px solid var(--panel-float-border, rgba(255, 255, 255, 0.1));
+  box-shadow: var(--panel-float-shadow, 0 4px 16px rgba(0, 0, 0, 0.35));
+  backdrop-filter: blur(8px);
+  overflow: hidden;
+}
+
+.dw-panel-float--active {
+  box-shadow: var(--panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
+}
+
+.dw-panel-float__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  height: 28px;
+  flex-shrink: 0;
+  background: var(--panel-float-header-bg, rgba(255, 255, 255, 0.04));
+  cursor: grab;
+  user-select: none;
+}
+
+.dw-panel-float__header:active {
+  cursor: grabbing;
+}
+
+.dw-panel-float--active .dw-panel-float__header {
+  background: var(--panel-float-header-bg-active, rgba(56, 189, 248, 0.08));
+}
+
+.dw-panel-float__title {
+  flex: 1;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--panel-float-title-color, rgba(255, 255, 255, 0.6));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dw-panel-float--active .dw-panel-float__title {
+  color: var(--panel-float-title-color-active, rgba(255, 255, 255, 0.9));
+}
+
+.dw-panel-float__icon {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  color: var(--panel-float-title-color, rgba(255, 255, 255, 0.6));
+}
+.dw-panel-float--active .dw-panel-float__icon {
+  opacity: 1;
+  color: var(--panel-float-title-color-active, rgba(255, 255, 255, 0.9));
+}
+
+.dw-panel-float__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  background: var(--custom-btn-bg, rgba(255, 255, 255, 0.03));
+  border: 1px solid var(--custom-btn-border, rgba(255, 255, 255, 0.05));
+  color: var(--text-secondary, #94a3b8);
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0;
+  line-height: 1;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dw-panel-float__close:hover {
+  background-color: var(--custom-btn-hover-bg, rgba(255, 255, 255, 0.12));
+  color: var(--custom-btn-hover-color, #ffffff);
+  border-color: var(--custom-btn-border, rgba(255, 255, 255, 0.05));
+  transform: scale(1.05);
+}
+
+.dw-panel-float__body {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+/* Resize grip — bottom-right corner */
+.dw-panel-float__resize {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  cursor: nwse-resize;
+}
+
+/* ── Docking drop zones (visible while dragging a floating window) ── */
+.dw-panel-float-dropzone {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  border: 2px dashed var(--accent-color, #38bdf8);
+  border-radius: 8px;
+  background: rgba(56, 189, 248, 0.06);
+  pointer-events: none;
+  z-index: 200;
+  opacity: 0.55;
+  transition: opacity 0.15s ease, background 0.15s ease, border-style 0.15s ease;
+}
+
+.dw-panel-float-dropzone--hovered {
+  opacity: 1;
+  background: rgba(56, 189, 248, 0.18);
+  border-style: solid;
+}
+
+.dw-panel-float-dropzone--top-left     { top:    8px; left:  8px; }
+.dw-panel-float-dropzone--top-right    { top:    8px; right: 8px; }
+.dw-panel-float-dropzone--bottom-left  { bottom: 8px; left:  8px; }
+.dw-panel-float-dropzone--bottom-right { bottom: 8px; right: 8px; }
+
+[dir="rtl"] .dw-panel-float-dropzone--top-right    { right: auto; left:  8px; }
+[dir="rtl"] .dw-panel-float-dropzone--top-left     { left:  auto; right: 8px; }
+[dir="rtl"] .dw-panel-float-dropzone--bottom-right { right: auto; left:  8px; }
+[dir="rtl"] .dw-panel-float-dropzone--bottom-left  { left:  auto; right: 8px; }
+
+[dir="rtl"] .dw-panel-float__title  { text-align: right; }
+
+/* ── Toast ── */
+
+/* Color tokens — match confirmation-alert-* palette exactly */
+:root {
+  --toast-info-color:    #67e8f9;
+  --toast-success-color: #4ade80;
+  --toast-warning-color: #fbbf24;
+  --toast-error-color:   #f87171;
+  --toast-bg:            #2a2d32;
+  --toast-border:        rgba(255, 255, 255, 0.14);
+}
+[data-color-scheme="light"] {
+  --toast-info-color:    #0369a1;
+  --toast-success-color: #15803d;
+  --toast-warning-color: #b45309;
+  --toast-error-color:   #b91c1c;
+  --toast-bg:            #ffffff;
+  --toast-border:        rgba(0, 0, 0, 0.14);
+}
+
+/* Position containers */
+.dw-toast-container {
+  position: fixed; z-index: 10100;
+  display: flex; gap: 8px; padding: 16px;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+.dw-toast-container--top-right    { top: var(--dw-toast-offset-top, 0px); right: 0; flex-direction: column; }
+.dw-toast-container--top-left     { top: var(--dw-toast-offset-top, 0px); left:  0; flex-direction: column; }
+.dw-toast-container--bottom-right { bottom: var(--dw-toast-offset-bottom, 0px); right: 0; flex-direction: column-reverse; }
+.dw-toast-container--bottom-left  { bottom: var(--dw-toast-offset-bottom, 0px); left:  0; flex-direction: column-reverse; }
+/* newestOnTop override inverts the column direction */
+.dw-toast-container--newest-top.dw-toast-container--bottom-right,
+.dw-toast-container--newest-top.dw-toast-container--bottom-left  { flex-direction: column; }
+.dw-toast-container--newest-bottom.dw-toast-container--top-right,
+.dw-toast-container--newest-bottom.dw-toast-container--top-left  { flex-direction: column-reverse; }
+
+/* Individual toast — base card */
+.dw-toast {
+  pointer-events: all; position: relative; overflow: hidden;
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 20px 14px; border-radius: 6px;
+  background: var(--toast-bg, #2a2d32);
+  border: 1px solid var(--toast-border, rgba(255,255,255,0.14)); border-inline-start-width: 3px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
+  color: var(--sidebar-text-title, #cccccc);
+  font-size: 13.5px; line-height: 1.4; width: 100%;
+  transition: opacity 200ms ease, transform 200ms ease,
+              max-height 300ms ease, padding 300ms ease, margin 300ms ease;
+}
+/* Reserve space for the absolute-positioned close button */
+.dw-toast:has(.dw-toast__close) { padding-inline-end: 32px; }
+
+/* Type-specific: solid background, accent inline-start border only */
+.dw-toast--info    { border-inline-start-color: var(--toast-info-color); }
+.dw-toast--success { border-inline-start-color: var(--toast-success-color); }
+.dw-toast--warning { border-inline-start-color: var(--toast-warning-color); }
+.dw-toast--error   { border-inline-start-color: var(--toast-error-color); }
+
+/* Entry animation classes toggled by JS on next frame */
+.dw-toast--entering        { opacity: 0; transform: translateX(110%); }
+.dw-toast--entering-left   { opacity: 0; transform: translateX(-110%); }
+.dw-toast--fade-entering   { opacity: 0; transform: translateX(0); }
+.dw-toast--visible         { opacity: 1; transform: translateX(0); }
+/* Exit: fade out + height collapse for gravity slide effect */
+.dw-toast--exiting {
+  opacity: 0; max-height: 0 !important;
+  padding-top: 0; padding-bottom: 0; margin: 0;
+}
+
+/* Icon */
+.dw-toast__icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
+.dw-toast--info    .dw-toast__icon { color: var(--toast-info-color); }
+.dw-toast--success .dw-toast__icon { color: var(--toast-success-color); }
+.dw-toast--warning .dw-toast__icon { color: var(--toast-warning-color); }
+.dw-toast--error   .dw-toast__icon { color: var(--toast-error-color); }
+
+/* Body & close button */
+.dw-toast__body { flex: 1; min-width: 0; word-break: break-word; }
+.dw-toast__close {
+  position: absolute; top: 8px; inset-inline-end: 10px;
+  background: none; border: none; cursor: pointer;
+  opacity: .5; padding: 2px; color: inherit; line-height: 1;
+}
+.dw-toast__close:hover { opacity: 1; }
+
+/* Progress bar */
+.dw-toast__progress {
+  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
+  transform-origin: left; animation: dw-toast-shrink linear forwards;
+}
+.dw-toast--paused .dw-toast__progress { animation-play-state: paused; }
+.dw-toast--info    .dw-toast__progress { background: var(--toast-info-color); }
+.dw-toast--success .dw-toast__progress { background: var(--toast-success-color); }
+.dw-toast--warning .dw-toast__progress { background: var(--toast-warning-color); }
+.dw-toast--error   .dw-toast__progress { background: var(--toast-error-color); }
+
+@keyframes dw-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+
+/* Toast RTL: flip icon/body order and progress bar collapse direction */
+[dir="rtl"] .dw-toast           { flex-direction: row-reverse; }
+[dir="rtl"] .dw-toast__progress { transform-origin: right; }