react-dockable-desktop 4.2.2 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +11 -4
  2. package/dist/index.cjs +4 -4
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +277 -11
  5. package/dist/index.d.ts +277 -11
  6. package/dist/index.js +5 -5
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +1122 -1115
  9. package/package.json +12 -2
package/dist/styles.css CHANGED
@@ -8,88 +8,95 @@
8
8
 
9
9
  :root {
10
10
  --rdd-styles-loaded: 1; /* sentinel — checked at mount to detect missing CSS import */
11
- --bg-primary: #090b11;
12
- --bg-workspace: #0f111a;
13
- --bg-panel: #141722;
14
- --bg-tab-bar: #0d0f16;
15
- --text-primary: #f1f5f9;
16
- --text-secondary: #94a3b8;
17
- --border-color: rgba(255, 255, 255, 0.08);
18
- --accent-color: #38bdf8; /* Modern Cyan/Sky-blue accent */
19
- --accent-glow: rgba(56, 189, 248, 0.15);
20
- --header-button-gap: 4px; /* Configurable gap spacing between titlebar action buttons */
11
+ --rdd-z-base: 1000; /* base for floating windows + all chrome overlays; override via WindowManagerProvider's zIndexBase */
12
+ --rdd-bg-primary: #090b11;
13
+ --rdd-bg-workspace: #0f111a;
14
+ --rdd-bg-panel: #141722;
15
+ --rdd-bg-tab-bar: #0d0f16;
16
+ --rdd-text-primary: #f1f5f9;
17
+ --rdd-text-secondary: #94a3b8;
18
+ --rdd-border-color: rgba(255, 255, 255, 0.08);
19
+ --rdd-accent-color: #38bdf8; /* Modern Cyan/Sky-blue accent */
20
+ --rdd-accent-glow: rgba(56, 189, 248, 0.15);
21
+ --rdd-header-button-gap: 4px; /* Configurable gap spacing between titlebar action buttons */
21
22
  /* Window skins variables */
22
- --window-bg: rgba(20, 22, 28, var(--window-opacity, 0.85));
23
- --window-border: rgba(255, 255, 255, 0.08);
24
- --window-border-focused: rgba(255, 255, 255, 0.28);
25
- --window-header-bg: rgba(0, 0, 0, 0.25);
26
- --window-text: #f8f9fa;
27
- --window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
28
- --window-shadow-focused: 0 24px 50px rgba(0, 0, 0, 0.55);
23
+ --rdd-window-bg: rgba(20, 22, 28, var(--rdd-window-opacity, 0.85));
24
+ --rdd-window-border: rgba(255, 255, 255, 0.08);
25
+ --rdd-window-border-focused: rgba(255, 255, 255, 0.28);
26
+ --rdd-window-header-bg: rgba(0, 0, 0, 0.25);
27
+ --rdd-window-text: #f8f9fa;
28
+ --rdd-window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
29
+ --rdd-window-shadow-focused: 0 24px 50px rgba(0, 0, 0, 0.55);
29
30
  /* Grid/Docked panel theme variables */
30
- --border-panel: rgba(255, 255, 255, 0.08);
31
- --bg-tab-inactive: #0c0d12;
32
- --text-tab-inactive: #858b99;
33
- --text-tab-active: #ffffff;
31
+ --rdd-border-panel: rgba(255, 255, 255, 0.08);
32
+ --rdd-bg-tab-inactive: #0c0d12;
33
+ --rdd-text-tab-inactive: #858b99;
34
+ --rdd-text-tab-active: #ffffff;
34
35
  /* Tab and control button hover colors */
35
- --bg-tab-hover: #171a22;
36
- --text-tab-hover: #e2e8f0;
37
- --close-btn-hover-bg: rgba(255, 255, 255, 0.12);
38
- --close-btn-hover-color: #ffffff;
39
- --close-btn-color: #858b99;
40
- --close-btn-active-color: #e2e8f0;
36
+ --rdd-bg-tab-hover: #171a22;
37
+ --rdd-text-tab-hover: #e2e8f0;
38
+ --rdd-close-btn-hover-bg: rgba(255, 255, 255, 0.12);
39
+ --rdd-close-btn-hover-color: #ffffff;
40
+ --rdd-close-btn-color: #858b99;
41
+ --rdd-close-btn-active-color: #e2e8f0;
41
42
  /* Tab focus states */
42
- --tab-indicator-focused: var(--accent-color, #38bdf8);
43
- --tab-indicator-unfocused: rgba(255, 255, 255, 0.3);
44
- --tab-bg-active-focused: var(--bg-panel);
45
- --tab-bg-active-unfocused: rgba(20, 23, 34, 0.55);
46
- --tab-text-active-focused: var(--text-tab-active, #ffffff);
47
- --tab-text-active-unfocused: rgba(255, 255, 255, 0.65);
48
- --resizer-bg: rgba(255, 255, 255, 0.08);
49
- --custom-btn-bg: rgba(255, 255, 255, 0.03);
50
- --custom-btn-border: rgba(255, 255, 255, 0.05);
51
- --custom-btn-hover-bg: rgba(255, 255, 255, 0.12);
52
- --custom-btn-hover-color: #ffffff;
43
+ --rdd-tab-indicator-focused: var(--rdd-accent-color, #38bdf8);
44
+ --rdd-tab-indicator-unfocused: rgba(255, 255, 255, 0.3);
45
+ --rdd-tab-bg-active-focused: var(--rdd-bg-panel);
46
+ --rdd-tab-bg-active-unfocused: rgba(20, 23, 34, 0.55);
47
+ --rdd-tab-text-active-focused: var(--rdd-text-tab-active, #ffffff);
48
+ --rdd-tab-text-active-unfocused: rgba(255, 255, 255, 0.65);
49
+ --rdd-resizer-bg: rgba(255, 255, 255, 0.08);
50
+ --rdd-custom-btn-bg: rgba(255, 255, 255, 0.03);
51
+ --rdd-custom-btn-border: rgba(255, 255, 255, 0.05);
52
+ --rdd-custom-btn-hover-bg: rgba(255, 255, 255, 0.12);
53
+ --rdd-custom-btn-hover-color: #ffffff;
53
54
  /* Taskbar theme variables */
54
- --taskbar-bg: rgba(0, 0, 0, 0.75);
55
- --taskbar-border: rgba(255, 255, 255, 0.1);
56
- --taskbar-nav-color: rgba(255, 255, 255, 0.5);
57
- --taskbar-item-bg: rgba(15, 23, 42, 0.6);
58
- --taskbar-item-hover-bg: rgba(15, 23, 42, 0.8);
59
- --taskbar-item-border: rgba(255, 255, 255, 0.08);
60
- --taskbar-item-text: var(--accent-color, #38bdf8);
55
+ --rdd-taskbar-bg: rgba(0, 0, 0, 0.75);
56
+ --rdd-taskbar-border: rgba(255, 255, 255, 0.1);
57
+ --rdd-taskbar-nav-color: rgba(255, 255, 255, 0.5);
58
+ --rdd-taskbar-item-bg: rgba(15, 23, 42, 0.6);
59
+ --rdd-taskbar-item-hover-bg: rgba(15, 23, 42, 0.8);
60
+ --rdd-taskbar-item-border: rgba(255, 255, 255, 0.08);
61
+ --rdd-taskbar-item-text: var(--rdd-accent-color, #38bdf8);
61
62
  /* Scrollbar theme variables */
62
- --scrollbar-thumb: rgba(255, 255, 255, 0.1);
63
- --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
64
- --scrollbar-track: rgba(255, 255, 255, 0.01);
63
+ --rdd-scrollbar-thumb: rgba(255, 255, 255, 0.1);
64
+ --rdd-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
65
+ --rdd-scrollbar-track: rgba(255, 255, 255, 0.01);
65
66
  /* Mockup Panel inner theme variables */
66
- --panel-card-bg: rgba(0, 0, 0, 0.2);
67
- --panel-card-border: rgba(255, 255, 255, 0.1);
68
- --panel-text: var(--text-primary);
69
- --panel-title-color: var(--accent-color, #38bdf8);
67
+ --rdd-panel-card-bg: rgba(0, 0, 0, 0.2);
68
+ --rdd-panel-card-border: rgba(255, 255, 255, 0.1);
69
+ --rdd-panel-text: var(--rdd-text-primary);
70
+ --rdd-panel-title-color: var(--rdd-accent-color, #38bdf8);
70
71
  /* ── Panel Overlay — Toolbar ── */
71
- --panel-toolbar-padding: 8px;
72
- --panel-toolbar-gap: 4px;
73
- --panel-toolbar-btn-size: 32px;
74
- --panel-toolbar-btn-radius: 6px;
75
- --panel-toolbar-fg: rgba(255, 255, 255, 0.65);
76
- --panel-toolbar-fg-hover: rgba(255, 255, 255, 0.95);
77
- --panel-toolbar-btn-hover-bg: var(--toolbar-btn-hover-bg, rgba(255, 255, 255, 0.08));
78
- --panel-toolbar-btn-active-bg: var(--toolbar-btn-radio-active-bg, rgba(56, 189, 248, 0.14));
79
- --panel-toolbar-btn-active-color: var(--tab-icon-active, #38bdf8);
80
- --panel-toolbar-separator-color: var(--toolbar-separator-color, rgba(255, 255, 255, 0.09));
72
+ --rdd-panel-toolbar-padding: 8px;
73
+ --rdd-panel-toolbar-gap: 4px;
74
+ --rdd-panel-toolbar-btn-size: 32px;
75
+ --rdd-panel-toolbar-btn-radius: 6px;
76
+ --rdd-panel-toolbar-fg: rgba(255, 255, 255, 0.65);
77
+ --rdd-panel-toolbar-fg-hover: rgba(255, 255, 255, 0.95);
78
+ --rdd-panel-toolbar-btn-hover-bg: var(--toolbar-btn-hover-bg, rgba(255, 255, 255, 0.08));
79
+ --rdd-panel-toolbar-btn-active-bg: var(--toolbar-btn-radio-active-bg, rgba(56, 189, 248, 0.14));
80
+ --rdd-panel-toolbar-btn-active-color: var(--tab-icon-active, #38bdf8);
81
+ --rdd-panel-toolbar-separator-color: var(--toolbar-separator-color, rgba(255, 255, 255, 0.09));
81
82
  /* ── Panel Overlay — Floating Window ── */
82
- --panel-float-bg: rgba(22, 24, 34, 0.92);
83
- --panel-float-border: rgba(255, 255, 255, 0.1);
84
- --panel-float-radius: 8px;
85
- --panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
86
- --panel-float-shadow-active: 0 8px 28px rgba(0, 0, 0, 0.55);
87
- --panel-float-header-bg: var(--window-header-bg, rgba(0, 0, 0, 0.25));
88
- --panel-float-header-bg-active: var(--window-header-bg, rgba(0, 0, 0, 0.25));
89
- --panel-float-title-color: var(--window-text, #f8f9fa);
90
- --panel-float-title-color-active: var(--window-text, #f8f9fa);
91
- }
92
-
83
+ --rdd-panel-float-bg: rgba(22, 24, 34, 0.92);
84
+ --rdd-panel-float-border: rgba(255, 255, 255, 0.1);
85
+ --rdd-panel-float-radius: 8px;
86
+ --rdd-panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
87
+ --rdd-panel-float-shadow-active: 0 8px 28px rgba(0, 0, 0, 0.55);
88
+ --rdd-panel-float-header-bg: var(--rdd-window-header-bg, rgba(0, 0, 0, 0.25));
89
+ --rdd-panel-float-header-bg-active: var(--rdd-window-header-bg, rgba(0, 0, 0, 0.25));
90
+ --rdd-panel-float-title-color: var(--rdd-window-text, #f8f9fa);
91
+ --rdd-panel-float-title-color-active: var(--rdd-window-text, #f8f9fa);
92
+ }
93
+
94
+ /* Sizing only — margin/overflow/height/width, no cosmetic properties. This is a
95
+ structural requirement, not a style choice: `.full-viewport-layout` and every
96
+ percentage-height element the workspace nests inside (including WindowManager's
97
+ own root) can only resolve `height: 100%` if this chain has a real height all
98
+ the way up to <html>. Removing this (rather than just the cosmetic properties
99
+ below) collapses the whole page to content-height instead of the viewport. */
93
100
  html,
94
101
  body,
95
102
  #root {
@@ -98,15 +105,15 @@ body,
98
105
  width: 100%;
99
106
  height: 100%;
100
107
  overflow: hidden;
101
- background-color: var(--bg-primary);
102
- color: var(--text-primary);
103
- font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
104
- -webkit-font-smoothing: antialiased;
105
108
  }
106
109
 
107
- #root {
108
- display: flex;
109
- flex-direction: column;
110
+ /* Cosmetic properties are scoped to the library's own root element only — never
111
+ the consumer's page, html/body, or their own mount div. */
112
+ .rdd-workspace {
113
+ background-color: var(--rdd-bg-primary);
114
+ color: var(--rdd-text-primary);
115
+ font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
116
+ -webkit-font-smoothing: antialiased;
110
117
  }
111
118
 
112
119
  /* Premium full viewport layout */
@@ -115,13 +122,13 @@ body,
115
122
  flex-direction: column;
116
123
  height: 100%;
117
124
  width: 100%;
118
- background-color: var(--bg-primary);
125
+ background-color: var(--rdd-bg-primary);
119
126
  }
120
127
 
121
128
  /* Subtle, high-tech grid styling for the window manager workspace */
122
129
  .desktop-workspace,
123
130
  .window-manager-workspace {
124
- background-color: var(--bg-workspace);
131
+ background-color: var(--rdd-bg-workspace);
125
132
  background-size: 32px 32px;
126
133
  position: relative;
127
134
  }
@@ -134,9 +141,9 @@ body,
134
141
  }
135
142
 
136
143
  /* Workspace Panel Container */
137
- .workspace-panel {
138
- background-color: var(--bg-panel);
139
- border: 1px solid var(--border-panel);
144
+ .rdd-workspace-panel {
145
+ background-color: var(--rdd-bg-panel);
146
+ border: 1px solid var(--rdd-border-panel);
140
147
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.15);
141
148
  width: 100%;
142
149
  height: 100%;
@@ -145,9 +152,9 @@ body,
145
152
  }
146
153
 
147
154
  /* Tab Headers Bar */
148
- .workspace-tab-bar {
149
- background-color: var(--bg-tab-bar);
150
- border-bottom: 1px solid var(--border-panel);
155
+ .rdd-workspace-tab-bar {
156
+ background-color: var(--rdd-bg-tab-bar);
157
+ border-bottom: 1px solid var(--rdd-border-panel);
151
158
  padding: 0 4px;
152
159
  display: flex;
153
160
  flex-direction: row;
@@ -156,7 +163,7 @@ body,
156
163
  }
157
164
 
158
165
  /* Tab Headers Container */
159
- .tab-headers-container {
166
+ .rdd-tab-headers-container {
160
167
  display: flex;
161
168
  align-items: flex-end;
162
169
  height: 100%;
@@ -170,43 +177,43 @@ body,
170
177
  }
171
178
 
172
179
  /* Tab bar scroll arrow buttons — appear when tabs overflow */
173
- .tab-scroll-btn {
180
+ .rdd-tab-scroll-btn {
174
181
  flex-shrink: 0;
175
182
  width: 20px;
176
183
  height: 35px;
177
184
  display: flex;
178
185
  align-items: center;
179
186
  justify-content: center;
180
- background: var(--bg-tab-inactive);
187
+ background: var(--rdd-bg-tab-inactive);
181
188
  border: none;
182
- border-right: 1px solid var(--border-panel);
189
+ border-right: 1px solid var(--rdd-border-panel);
183
190
  cursor: pointer;
184
191
  font-size: 16px;
185
192
  line-height: 1;
186
- color: var(--text-tab-inactive);
193
+ color: var(--rdd-text-tab-inactive);
187
194
  padding: 0;
188
195
  z-index: 27;
189
196
  user-select: none;
190
197
  transition: background-color 0.1s ease, color 0.1s ease;
191
198
  }
192
199
 
193
- .tab-scroll-btn:hover {
194
- color: var(--text-primary);
195
- background: var(--bg-tab-hover, var(--bg-drop-hover, rgba(255,255,255,0.08)));
200
+ .rdd-tab-scroll-btn:hover {
201
+ color: var(--rdd-text-primary);
202
+ background: var(--rdd-bg-tab-hover, var(--bg-drop-hover, rgba(255,255,255,0.08)));
196
203
  }
197
204
 
198
- .tab-scroll-btn-right {
205
+ .rdd-tab-scroll-btn-right {
199
206
  border-right: none;
200
- border-left: 1px solid var(--border-panel);
207
+ border-left: 1px solid var(--rdd-border-panel);
201
208
  }
202
209
 
203
210
  /* Premium Tab styling (VS Code Style) */
204
- .workspace-tab {
211
+ .rdd-workspace-tab {
205
212
  position: relative;
206
- background-color: var(--bg-tab-inactive) !important; /* VS Code dark background for inactive tabs */
207
- color: var(--text-tab-inactive) !important; /* Clear readable gray */
213
+ background-color: var(--rdd-bg-tab-inactive) !important; /* VS Code dark background for inactive tabs */
214
+ color: var(--rdd-text-tab-inactive) !important; /* Clear readable gray */
208
215
  border: none !important;
209
- border-right: 1px solid var(--border-panel) !important; /* crisp separator */
216
+ border-right: 1px solid var(--rdd-border-panel) !important; /* crisp separator */
210
217
  padding: 0 6px 0 14px !important;
211
218
  font-size: 0.75rem;
212
219
  display: flex;
@@ -223,117 +230,117 @@ body,
223
230
  transition: background-color 0.1s ease, color 0.1s ease;
224
231
  }
225
232
 
226
- .workspace-tab > .text-truncate {
233
+ .rdd-workspace-tab > .rdd-text-truncate {
227
234
  margin-right: 12px;
228
235
  }
229
236
 
230
237
  /* Remove original after element separator */
231
- .workspace-tab:not(.active):not(:last-child)::after {
238
+ .rdd-workspace-tab:not(.rdd-active):not(:last-child)::after {
232
239
  display: none !important;
233
240
  }
234
241
 
235
- .workspace-tab:hover {
236
- background-color: var(--bg-tab-hover) !important;
237
- color: var(--text-tab-hover) !important;
242
+ .rdd-workspace-tab:hover {
243
+ background-color: var(--rdd-bg-tab-hover) !important;
244
+ color: var(--rdd-text-tab-hover) !important;
238
245
  }
239
246
 
240
247
  /* Active tab (focused) */
241
- .workspace-tab.active.workspace-tab-active-focused {
242
- background-color: var(--tab-bg-active-focused) !important;
243
- color: var(--tab-text-active-focused) !important;
248
+ .rdd-workspace-tab.rdd-active.rdd-workspace-tab-active-focused {
249
+ background-color: var(--rdd-tab-bg-active-focused) !important;
250
+ color: var(--rdd-tab-text-active-focused) !important;
244
251
  font-weight: 500;
245
- border-right: 1px solid var(--border-panel) !important;
252
+ border-right: 1px solid var(--rdd-border-panel) !important;
246
253
  z-index: 2;
247
254
  }
248
255
 
249
- .workspace-tab.active.workspace-tab-active-focused::before {
256
+ .rdd-workspace-tab.rdd-active.rdd-workspace-tab-active-focused::before {
250
257
  content: '';
251
258
  position: absolute;
252
259
  top: 0;
253
260
  left: 0;
254
261
  right: 0;
255
262
  height: 2px;
256
- background-color: var(--tab-indicator-focused) !important;
263
+ background-color: var(--rdd-tab-indicator-focused) !important;
257
264
  border-radius: 0 !important;
258
- box-shadow: 0 1px 4px var(--accent-glow);
265
+ box-shadow: 0 1px 4px var(--rdd-accent-glow);
259
266
  }
260
267
 
261
268
  /* Active tab (unfocused/inactive group) */
262
- .workspace-tab.active.workspace-tab-active-unfocused {
263
- background-color: var(--tab-bg-active-unfocused) !important;
264
- color: var(--tab-text-active-unfocused) !important;
269
+ .rdd-workspace-tab.rdd-active.rdd-workspace-tab-active-unfocused {
270
+ background-color: var(--rdd-tab-bg-active-unfocused) !important;
271
+ color: var(--rdd-tab-text-active-unfocused) !important;
265
272
  font-weight: 500;
266
- border-right: 1px solid var(--border-panel) !important;
273
+ border-right: 1px solid var(--rdd-border-panel) !important;
267
274
  z-index: 2;
268
275
  }
269
276
 
270
- .workspace-tab.active.workspace-tab-active-unfocused::before {
277
+ .rdd-workspace-tab.rdd-active.rdd-workspace-tab-active-unfocused::before {
271
278
  content: '';
272
279
  position: absolute;
273
280
  top: 0;
274
281
  left: 0;
275
282
  right: 0;
276
283
  height: 2px;
277
- background-color: var(--tab-indicator-unfocused) !important;
284
+ background-color: var(--rdd-tab-indicator-unfocused) !important;
278
285
  border-radius: 0 !important;
279
286
  }
280
287
 
281
- .workspace-tab-inactive {
282
- color: var(--close-btn-color) !important;
288
+ .rdd-workspace-tab-inactive {
289
+ color: var(--rdd-close-btn-color) !important;
283
290
  }
284
291
 
285
- .workspace-tab-inactive:hover {
286
- color: var(--text-tab-hover) !important;
292
+ .rdd-workspace-tab-inactive:hover {
293
+ color: var(--rdd-text-tab-hover) !important;
287
294
  }
288
295
 
289
296
  /* Tab close button (VS Code style visibility) */
290
- .close-tab-x {
297
+ .rdd-close-tab-x {
291
298
  opacity: 0; /* hidden by default on inactive tabs, allows hover/active overrides */
292
299
  transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
293
300
  margin-left: 8px;
294
301
  border-radius: 3px;
295
- color: var(--close-btn-color) !important;
302
+ color: var(--rdd-close-btn-color) !important;
296
303
  display: flex;
297
304
  align-items: center;
298
305
  justify-content: center;
299
306
  }
300
307
 
301
308
  /* Always show close icon on active tab */
302
- .workspace-tab.active .close-tab-x {
309
+ .rdd-workspace-tab.rdd-active .rdd-close-tab-x {
303
310
  opacity: 0.75 !important;
304
- color: var(--close-btn-active-color) !important;
311
+ color: var(--rdd-close-btn-active-color) !important;
305
312
  }
306
313
 
307
314
  /* Show close icon on hover of any tab */
308
- .workspace-tab:hover .close-tab-x {
315
+ .rdd-workspace-tab:hover .rdd-close-tab-x {
309
316
  opacity: 0.75 !important;
310
- color: var(--close-btn-active-color) !important;
317
+ color: var(--rdd-close-btn-active-color) !important;
311
318
  }
312
319
 
313
320
  /* Hover style on the close icon itself (VS Code dark rounded background) */
314
- .close-tab-x:hover {
321
+ .rdd-close-tab-x:hover {
315
322
  opacity: 1 !important;
316
- background-color: var(--close-btn-hover-bg) !important;
317
- color: var(--close-btn-hover-color) !important;
323
+ background-color: var(--rdd-close-btn-hover-bg) !important;
324
+ color: var(--rdd-close-btn-hover-color) !important;
318
325
  }
319
326
 
320
327
  /* Drag resizer split bars */
321
- .resizer-bar {
322
- background-color: var(--border-panel, rgba(255, 255, 255, 0.08)) !important;
328
+ .rdd-resizer-bar {
329
+ background-color: var(--rdd-border-panel, rgba(255, 255, 255, 0.08)) !important;
323
330
  transition: background-color 0.15s ease, transform 0.15s ease !important;
324
331
  position: relative;
325
332
  z-index: 21;
326
333
  }
327
334
 
328
335
  /* Invisible 8px hit-box overlay to make grabbing easy */
329
- .resizer-bar::before {
336
+ .rdd-resizer-bar::before {
330
337
  content: '';
331
338
  position: absolute;
332
339
  z-index: 22;
333
340
  }
334
341
 
335
342
  /* Grab hit-box for columns (cursor: col-resize) */
336
- .resizer-bar[style*="cursor: col-resize"]::before {
343
+ .rdd-resizer-bar[style*="cursor: col-resize"]::before {
337
344
  top: 0;
338
345
  bottom: 0;
339
346
  left: -3px;
@@ -343,7 +350,7 @@ body,
343
350
 
344
351
  /* Grab hit-box for rows (cursor: row-resize) — extends upward only (into safe content area),
345
352
  never downward into the tab bar of the panel below */
346
- .resizer-bar[style*="cursor: row-resize"]::before {
353
+ .rdd-resizer-bar[style*="cursor: row-resize"]::before {
347
354
  left: 0;
348
355
  right: 0;
349
356
  top: -8px;
@@ -352,41 +359,41 @@ body,
352
359
  }
353
360
 
354
361
  /* Highlight state (on hover or active drag) */
355
- .resizer-bar:hover,
356
- .resizer-bar.active {
357
- background-color: color-mix(in srgb, var(--accent-color) 35%, transparent) !important;
362
+ .rdd-resizer-bar:hover,
363
+ .rdd-resizer-bar.rdd-active {
364
+ background-color: color-mix(in srgb, var(--rdd-accent-color) 35%, transparent) !important;
358
365
  box-shadow: none !important;
359
366
  z-index: 25 !important;
360
367
  }
361
368
 
362
- .resizer-bar[style*="cursor: col-resize"]:hover,
363
- .resizer-bar[style*="cursor: col-resize"].active {
369
+ .rdd-resizer-bar[style*="cursor: col-resize"]:hover,
370
+ .rdd-resizer-bar[style*="cursor: col-resize"].rdd-active {
364
371
  transform: scaleX(2);
365
372
  }
366
373
 
367
- .resizer-bar[style*="cursor: row-resize"]:hover,
368
- .resizer-bar[style*="cursor: row-resize"].active {
374
+ .rdd-resizer-bar[style*="cursor: row-resize"]:hover,
375
+ .rdd-resizer-bar[style*="cursor: row-resize"].rdd-active {
369
376
  transform: scaleY(2);
370
377
  }
371
378
 
372
379
  /* Global body cursor overrides during active resize drag to prevent cursor flickering */
373
- body.resizing-active {
380
+ body.rdd-resizing-active {
374
381
  user-select: none !important;
375
382
  }
376
- body.resizing-row-active,
377
- body.resizing-row-active * {
383
+ body.rdd-resizing-row-active,
384
+ body.rdd-resizing-row-active * {
378
385
  cursor: row-resize !important;
379
386
  }
380
- body.resizing-col-active,
381
- body.resizing-col-active * {
387
+ body.rdd-resizing-col-active,
388
+ body.rdd-resizing-col-active * {
382
389
  cursor: col-resize !important;
383
390
  }
384
391
 
385
392
  /* Control buttons inside tabs/windows */
386
- .custom-tab-btn {
387
- background: var(--custom-btn-bg);
388
- border: 1px solid var(--custom-btn-border);
389
- color: var(--text-secondary);
393
+ .rdd-custom-tab-btn {
394
+ background: var(--rdd-custom-btn-bg);
395
+ border: 1px solid var(--rdd-custom-btn-border);
396
+ color: var(--rdd-text-secondary);
390
397
  font-size: 9px;
391
398
  width: 18px;
392
399
  height: 18px;
@@ -400,16 +407,16 @@ body.resizing-col-active * {
400
407
  line-height: 1;
401
408
  }
402
409
 
403
- .custom-tab-btn:hover {
404
- background-color: var(--custom-btn-hover-bg);
405
- color: var(--custom-btn-hover-color);
406
- border-color: var(--custom-btn-border);
410
+ .rdd-custom-tab-btn:hover {
411
+ background-color: var(--rdd-custom-btn-hover-bg);
412
+ color: var(--rdd-custom-btn-hover-color);
413
+ border-color: var(--rdd-custom-btn-border);
407
414
  transform: scale(1.05);
408
415
  }
409
416
 
410
417
  /* Taskbar Sibling Footer Styling */
411
418
  /* ── autohide mode: absolute overlay, collapses to peek strip ── */
412
- .taskbar-footer-container.taskbar-mode-autohide {
419
+ .rdd-taskbar-footer-container.rdd-taskbar-mode-autohide {
413
420
  position: absolute;
414
421
  bottom: 0;
415
422
  left: 0;
@@ -418,11 +425,11 @@ body.resizing-col-active * {
418
425
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
419
426
  }
420
427
 
421
- .taskbar-footer-container.taskbar-mode-autohide.taskbar-expanded {
428
+ .rdd-taskbar-footer-container.rdd-taskbar-mode-autohide.rdd-taskbar-expanded {
422
429
  transform: translateY(0);
423
430
  }
424
431
 
425
- .taskbar-peek-handle {
432
+ .rdd-taskbar-peek-handle {
426
433
  position: absolute;
427
434
  top: 3px;
428
435
  left: 50%;
@@ -430,25 +437,25 @@ body.resizing-col-active * {
430
437
  width: 32px;
431
438
  height: 3px;
432
439
  border-radius: 999px;
433
- background: var(--accent-color, #38bdf8);
440
+ background: var(--rdd-accent-color, #38bdf8);
434
441
  opacity: 0.5;
435
442
  pointer-events: none;
436
443
  transition: opacity 0.2s;
437
444
  }
438
445
 
439
- .taskbar-footer-container.taskbar-mode-autohide.taskbar-expanded .taskbar-peek-handle {
446
+ .rdd-taskbar-footer-container.rdd-taskbar-mode-autohide.rdd-taskbar-expanded .rdd-taskbar-peek-handle {
440
447
  opacity: 0;
441
448
  }
442
449
 
443
450
  @media (pointer: coarse) {
444
- .taskbar-footer-container.taskbar-mode-autohide {
451
+ .rdd-taskbar-footer-container.rdd-taskbar-mode-autohide {
445
452
  transform: translateY(calc(100% - 12px));
446
453
  }
447
454
  }
448
455
 
449
- .taskbar-footer-container {
450
- background-color: var(--taskbar-bg) !important;
451
- border-top: 1px solid var(--border-panel) !important;
456
+ .rdd-taskbar-footer-container {
457
+ background-color: var(--rdd-taskbar-bg) !important;
458
+ border-top: 1px solid var(--rdd-border-panel) !important;
452
459
  backdrop-filter: blur(12px) saturate(180%);
453
460
  -webkit-backdrop-filter: blur(12px) saturate(180%);
454
461
  flex-shrink: 0;
@@ -460,8 +467,8 @@ body.resizing-col-active * {
460
467
  padding: 0 1rem;
461
468
  }
462
469
 
463
- .taskbar-nav-btn {
464
- color: var(--taskbar-nav-color) !important;
470
+ .rdd-taskbar-nav-btn {
471
+ color: var(--rdd-taskbar-nav-color) !important;
465
472
  background: transparent;
466
473
  border: none;
467
474
  cursor: pointer;
@@ -472,17 +479,17 @@ body.resizing-col-active * {
472
479
  line-height: 1;
473
480
  }
474
481
 
475
- .taskbar-nav-btn:hover {
476
- color: var(--accent-color) !important;
482
+ .rdd-taskbar-nav-btn:hover {
483
+ color: var(--rdd-accent-color) !important;
477
484
  }
478
485
 
479
486
  /* macOS/Win11 Glassmorphic Taskbar */
480
- .taskbar-glassmorphic-item {
481
- background: var(--taskbar-item-bg) !important;
487
+ .rdd-taskbar-glassmorphic-item {
488
+ background: var(--rdd-taskbar-item-bg) !important;
482
489
  backdrop-filter: blur(12px) saturate(180%);
483
490
  -webkit-backdrop-filter: blur(12px) saturate(180%);
484
- border: 1px solid var(--taskbar-item-border) !important;
485
- color: var(--taskbar-item-text) !important;
491
+ border: 1px solid var(--rdd-taskbar-item-border) !important;
492
+ color: var(--rdd-taskbar-item-text) !important;
486
493
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
487
494
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
488
495
  display: flex;
@@ -492,14 +499,14 @@ body.resizing-col-active * {
492
499
  cursor: pointer;
493
500
  }
494
501
 
495
- .taskbar-glassmorphic-item:hover {
496
- background: var(--taskbar-item-hover-bg) !important;
497
- border-color: var(--accent-color, #38bdf8) !important;
502
+ .rdd-taskbar-glassmorphic-item:hover {
503
+ background: var(--rdd-taskbar-item-hover-bg) !important;
504
+ border-color: var(--rdd-accent-color, #38bdf8) !important;
498
505
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.15);
499
506
  }
500
507
 
501
508
  /* Minimalist Taskbar Icon-Only & Premium Tooltip Rules */
502
- .taskbar-item-icon {
509
+ .rdd-taskbar-item-icon {
503
510
  font-size: 22px !important;
504
511
  line-height: 1 !important;
505
512
  display: inline-flex;
@@ -507,8 +514,8 @@ body.resizing-col-active * {
507
514
  justify-content: center;
508
515
  }
509
516
 
510
- .taskbar-item-icon svg,
511
- .taskbar-item-icon img {
517
+ .rdd-taskbar-item-icon svg,
518
+ .rdd-taskbar-item-icon img {
512
519
  width: 22px !important;
513
520
  height: 22px !important;
514
521
  max-width: 22px !important;
@@ -528,15 +535,15 @@ body.resizing-col-active * {
528
535
  }
529
536
  }
530
537
 
531
- .taskbar-item-tooltip {
532
- background: var(--bg-panel, #1e1e1e) !important;
533
- color: var(--text-primary, #ffffff) !important;
538
+ .rdd-taskbar-item-tooltip {
539
+ background: var(--rdd-bg-panel, #1e1e1e) !important;
540
+ color: var(--rdd-text-primary, #ffffff) !important;
534
541
  padding: 8px !important;
535
542
  border-radius: 6px;
536
543
  font-size: 11px !important;
537
544
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
538
545
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
539
- border: 1px solid var(--taskbar-item-border, rgba(255, 255, 255, 0.1)) !important;
546
+ border: 1px solid var(--rdd-taskbar-item-border, rgba(255, 255, 255, 0.1)) !important;
540
547
  animation: tooltipFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
541
548
  display: flex;
542
549
  flex-direction: column;
@@ -544,7 +551,7 @@ body.resizing-col-active * {
544
551
  }
545
552
 
546
553
  /* Invisible bridge so mouse transitions smoothly to tooltip */
547
- .taskbar-item-tooltip::before {
554
+ .rdd-taskbar-item-tooltip::before {
548
555
  content: '';
549
556
  position: absolute;
550
557
  top: 100%;
@@ -554,7 +561,7 @@ body.resizing-col-active * {
554
561
  background: transparent;
555
562
  }
556
563
 
557
- .taskbar-item-tooltip::after {
564
+ .rdd-taskbar-item-tooltip::after {
558
565
  content: '';
559
566
  position: absolute;
560
567
  top: 100%;
@@ -562,41 +569,41 @@ body.resizing-col-active * {
562
569
  transform: translateX(-50%);
563
570
  border-width: 5px;
564
571
  border-style: solid;
565
- border-color: var(--bg-panel, #1e1e1e) transparent transparent transparent;
572
+ border-color: var(--rdd-bg-panel, #1e1e1e) transparent transparent transparent;
566
573
  }
567
574
 
568
575
  /* Live preview thumbnail styles */
569
- .taskbar-item-preview-frame {
576
+ .rdd-taskbar-item-preview-frame {
570
577
  border-radius: 4px;
571
578
  overflow: hidden;
572
579
  background: #000000;
573
- border: 1px solid var(--taskbar-item-border, rgba(255, 255, 255, 0.15));
580
+ border: 1px solid var(--rdd-taskbar-item-border, rgba(255, 255, 255, 0.15));
574
581
  position: relative;
575
582
  margin-top: 4px;
576
583
  pointer-events: none !important;
577
584
  user-select: none !important;
578
585
  }
579
586
 
580
- .taskbar-item-preview-host {
587
+ .rdd-taskbar-item-preview-host {
581
588
  transform-origin: top left;
582
589
  position: absolute;
583
590
  top: 0;
584
591
  left: 0;
585
592
  }
586
- .taskbar-item-preview-host * {
593
+ .rdd-taskbar-item-preview-host * {
587
594
  pointer-events: none !important;
588
595
  user-select: none !important;
589
596
  }
590
597
 
591
598
 
592
599
 
593
- .tooltip-close-x {
600
+ .rdd-tooltip-close-x {
594
601
  width: 18px;
595
602
  height: 18px;
596
603
  border-radius: 3px;
597
604
  background: transparent !important;
598
605
  border: none !important;
599
- color: var(--close-btn-color, var(--text-secondary, #888888)) !important;
606
+ color: var(--rdd-close-btn-color, var(--rdd-text-secondary, #888888)) !important;
600
607
  cursor: pointer;
601
608
  transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
602
609
  flex-shrink: 0;
@@ -606,35 +613,36 @@ body.resizing-col-active * {
606
613
  opacity: 0.75;
607
614
  }
608
615
 
609
- .tooltip-close-x:hover {
610
- background: var(--close-btn-hover-bg) !important;
611
- color: var(--close-btn-hover-color) !important;
616
+ .rdd-tooltip-close-x:hover {
617
+ background: var(--rdd-close-btn-hover-bg) !important;
618
+ color: var(--rdd-close-btn-hover-color) !important;
612
619
  opacity: 1 !important;
613
620
  }
614
- .scrollbar-hidden::-webkit-scrollbar {
621
+ .rdd-scrollbar-hidden::-webkit-scrollbar {
615
622
  display: none;
616
623
  }
617
624
 
618
- /* Cross-browser scrollbar styling (Firefox standard) */
619
- * {
625
+ /* Cross-browser scrollbar styling (Firefox standard) — scoped to the library's
626
+ own workspace subtree, never the consumer's page. */
627
+ .rdd-workspace * {
620
628
  scrollbar-width: thin;
621
- scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
629
+ scrollbar-color: var(--rdd-scrollbar-thumb) var(--rdd-scrollbar-track);
622
630
  }
623
631
 
624
632
  /* WebKit (Chrome, Safari, Edge) scrollbar styling */
625
- ::-webkit-scrollbar {
633
+ .rdd-workspace ::-webkit-scrollbar {
626
634
  width: 6px;
627
635
  height: 6px;
628
636
  }
629
- ::-webkit-scrollbar-track {
630
- background: var(--scrollbar-track);
637
+ .rdd-workspace ::-webkit-scrollbar-track {
638
+ background: var(--rdd-scrollbar-track);
631
639
  }
632
- ::-webkit-scrollbar-thumb {
633
- background: var(--scrollbar-thumb);
640
+ .rdd-workspace ::-webkit-scrollbar-thumb {
641
+ background: var(--rdd-scrollbar-thumb);
634
642
  border-radius: 4px;
635
643
  }
636
- ::-webkit-scrollbar-thumb:hover {
637
- background: var(--scrollbar-thumb-hover);
644
+ .rdd-workspace ::-webkit-scrollbar-thumb:hover {
645
+ background: var(--rdd-scrollbar-thumb-hover);
638
646
  }
639
647
 
640
648
  /* Premium Hover Highlight Effects */
@@ -643,41 +651,41 @@ body.resizing-col-active * {
643
651
  border-color: rgba(56, 189, 248, 0.25) !important;
644
652
  }
645
653
 
646
- .floating-window {
654
+ .rdd-floating-window {
647
655
  display: flex;
648
656
  flex-direction: column;
649
657
  border-radius: 8px;
650
- border: 1px solid var(--window-border);
651
- box-shadow: var(--window-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
658
+ border: 1px solid var(--rdd-window-border);
659
+ box-shadow: var(--rdd-window-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
652
660
  backdrop-filter: blur(16px) saturate(180%);
653
661
  -webkit-backdrop-filter: blur(16px) saturate(180%);
654
- background-color: var(--window-bg);
662
+ background-color: var(--rdd-window-bg);
655
663
  overflow: hidden;
656
664
  transition: box-shadow 0.2s, border-color 0.2s;
657
665
  }
658
666
 
659
- .floating-window.v2-window-focused {
660
- box-shadow: var(--window-shadow-focused), inset 0 1px 0 rgba(255, 255, 255, 0.08);
661
- border-color: var(--window-border-focused);
667
+ .rdd-floating-window.rdd-window-focused {
668
+ box-shadow: var(--rdd-window-shadow-focused), inset 0 1px 0 rgba(255, 255, 255, 0.08);
669
+ border-color: var(--rdd-window-border-focused);
662
670
  }
663
671
 
664
672
  /* Dim only titlebar when window is unfocused to keep panel content opaque */
665
- .floating-window:not(.v2-window-focused) .floating-window-titlebar {
673
+ .rdd-floating-window:not(.rdd-window-focused) .rdd-floating-window-titlebar {
666
674
  opacity: 0.65;
667
675
  transition: opacity 0.2s ease;
668
676
  }
669
677
 
670
- .floating-window.maximized {
678
+ .rdd-floating-window.maximized {
671
679
  border-radius: 0;
672
680
  border: none;
673
681
  box-shadow: none;
674
682
  }
675
683
 
676
684
 
677
- .floating-window-titlebar {
685
+ .rdd-floating-window-titlebar {
678
686
  padding: 8px 14px;
679
- background-color: var(--window-header-bg);
680
- border-bottom: 1px solid var(--window-border);
687
+ background-color: var(--rdd-window-header-bg);
688
+ border-bottom: 1px solid var(--rdd-window-border);
681
689
  min-height: 38px;
682
690
  display: flex;
683
691
  flex-direction: row;
@@ -685,11 +693,11 @@ body.resizing-col-active * {
685
693
  align-items: center;
686
694
  }
687
695
 
688
- .floating-window-title {
696
+ .rdd-floating-window-title {
689
697
  font-family: 'Outfit', sans-serif;
690
698
  font-size: 0.78rem;
691
699
  font-weight: 600;
692
- color: var(--window-text);
700
+ color: var(--rdd-window-text);
693
701
  letter-spacing: 0.02em;
694
702
  display: flex;
695
703
  align-items: center;
@@ -699,20 +707,20 @@ body.resizing-col-active * {
699
707
  margin-inline-end: 0.5rem;
700
708
  }
701
709
 
702
- .cursor-move {
710
+ .rdd-cursor-move {
703
711
  cursor: grab;
704
712
  }
705
- .cursor-move:active {
713
+ .rdd-cursor-move:active {
706
714
  cursor: grabbing;
707
715
  }
708
716
 
709
717
  /* ==========================================================================
710
- CONTEXT MENU (.dw-context-menu)
718
+ CONTEXT MENU (.rdd-context-menu)
711
719
  ========================================================================== */
712
720
 
713
721
  /* Icon slot used by both context menu items and toolbar flyout items.
714
722
  Fixed width keeps text columns aligned regardless of SVG size. */
715
- .wm-menu-icon {
723
+ .rdd-menu-icon {
716
724
  width: 14px;
717
725
  display: inline-flex;
718
726
  align-items: center;
@@ -720,9 +728,9 @@ body.resizing-col-active * {
720
728
  flex-shrink: 0;
721
729
  }
722
730
 
723
- .dw-context-menu {
731
+ .rdd-context-menu {
724
732
  position: fixed;
725
- z-index: 9500;
733
+ z-index: calc(var(--rdd-z-base, 1000) + 8500);
726
734
  background: var(--sidebar-bg, #1e2024);
727
735
  border: 1px solid var(--sidebar-border, rgba(255, 255, 255, 0.08));
728
736
  border-radius: 6px;
@@ -731,27 +739,27 @@ body.resizing-col-active * {
731
739
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
732
740
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
733
741
  font-size: 13px;
734
- animation: dw-context-menu-in 0.1s cubic-bezier(0.16, 1, 0.3, 1);
742
+ animation: rdd-context-menu-in 0.1s cubic-bezier(0.16, 1, 0.3, 1);
735
743
  outline: none;
736
744
  }
737
745
 
738
- @keyframes dw-context-menu-in {
746
+ @keyframes rdd-context-menu-in {
739
747
  from { opacity: 0; transform: scale(0.97); }
740
748
  to { opacity: 1; transform: scale(1); }
741
749
  }
742
750
 
743
- .dw-context-menu--submenu {
744
- z-index: 9501;
751
+ .rdd-context-menu--submenu {
752
+ z-index: calc(var(--rdd-z-base, 1000) + 8501);
745
753
  }
746
754
 
747
- .dw-context-menu__separator {
755
+ .rdd-context-menu__separator {
748
756
  height: 1px;
749
757
  background: var(--sidebar-border, rgba(255, 255, 255, 0.08));
750
758
  margin: 4px 8px;
751
759
  border: none;
752
760
  }
753
761
 
754
- .dw-context-menu__item {
762
+ .rdd-context-menu__item {
755
763
  display: flex;
756
764
  align-items: center;
757
765
  width: calc(100% - 8px);
@@ -771,23 +779,23 @@ body.resizing-col-active * {
771
779
  font-family: inherit;
772
780
  }
773
781
 
774
- .dw-context-menu__item:hover:not(:disabled):not(.dw-context-menu__item--disabled) {
782
+ .rdd-context-menu__item:hover:not(:disabled):not(.rdd-context-menu__item--disabled) {
775
783
  background-color: var(--toolbar-btn-hover-bg, rgba(255, 255, 255, 0.07));
776
784
  color: var(--sidebar-text-title, #f8f9fa);
777
785
  }
778
786
 
779
- .dw-context-menu__item:disabled,
780
- .dw-context-menu__item--disabled {
787
+ .rdd-context-menu__item:disabled,
788
+ .rdd-context-menu__item--disabled {
781
789
  opacity: 0.38;
782
790
  cursor: default;
783
791
  pointer-events: none;
784
792
  }
785
793
 
786
- .dw-context-menu__item--has-submenu.dw-context-menu__item--submenu-open {
794
+ .rdd-context-menu__item--has-submenu.rdd-context-menu__item--submenu-open {
787
795
  background-color: var(--toolbar-btn-radio-active-bg, rgba(9, 71, 113, 0.35));
788
796
  }
789
797
 
790
- .dw-context-menu__icon {
798
+ .rdd-context-menu__icon {
791
799
  width: 16px;
792
800
  min-width: 16px;
793
801
  display: inline-flex;
@@ -798,13 +806,13 @@ body.resizing-col-active * {
798
806
  opacity: 0.85;
799
807
  }
800
808
 
801
- .dw-context-menu__label {
809
+ .rdd-context-menu__label {
802
810
  flex: 1;
803
811
  overflow: hidden;
804
812
  text-overflow: ellipsis;
805
813
  }
806
814
 
807
- .dw-context-menu__chevron {
815
+ .rdd-context-menu__chevron {
808
816
  flex-shrink: 0;
809
817
  margin-left: auto;
810
818
  padding-left: 12px;
@@ -813,7 +821,7 @@ body.resizing-col-active * {
813
821
  opacity: 0.6;
814
822
  }
815
823
 
816
- [dir="rtl"] .dw-context-menu__chevron {
824
+ [dir="rtl"] .rdd-context-menu__chevron {
817
825
  margin-left: 0;
818
826
  margin-right: auto;
819
827
  padding-left: 0;
@@ -821,14 +829,14 @@ body.resizing-col-active * {
821
829
  transform: scaleX(-1);
822
830
  }
823
831
 
824
- [dir="rtl"] .dw-context-menu__checkbox {
832
+ [dir="rtl"] .rdd-context-menu__checkbox {
825
833
  margin-left: 0;
826
834
  margin-right: auto;
827
835
  padding-left: 0;
828
836
  padding-right: 12px;
829
837
  }
830
838
 
831
- .dw-context-menu__checkbox {
839
+ .rdd-context-menu__checkbox {
832
840
  width: 14px;
833
841
  min-width: 14px;
834
842
  height: 14px;
@@ -843,12 +851,12 @@ body.resizing-col-active * {
843
851
  opacity: 0.6;
844
852
  }
845
853
 
846
- .dw-context-menu__checkbox--checked {
854
+ .rdd-context-menu__checkbox--checked {
847
855
  opacity: 1;
848
856
  }
849
857
 
850
858
  /* Drag split target drop zone overlays */
851
- .dock-drop-zone-overlay {
859
+ .rdd-dock-drop-zone-overlay {
852
860
  position: absolute;
853
861
  inset: 0;
854
862
  z-index: 100;
@@ -861,17 +869,17 @@ body.resizing-col-active * {
861
869
  }
862
870
 
863
871
  /* Translucent overlay preview highlighting the grid section about to split */
864
- .dock-preview-highlight {
872
+ .rdd-dock-preview-highlight {
865
873
  position: absolute;
866
874
  background-color: rgba(56, 189, 248, 0.2) !important; /* neon cyan overlay */
867
- border: 1.5px dashed var(--accent-color) !important;
875
+ border: 1.5px dashed var(--rdd-accent-color) !important;
868
876
  transition: all 0.1s ease-out;
869
877
  pointer-events: none;
870
878
  z-index: 90;
871
879
  }
872
880
 
873
881
  /* Central cross layout container */
874
- .dock-target-cross {
882
+ .rdd-dock-target-cross {
875
883
  position: relative;
876
884
  width: 140px;
877
885
  height: 140px;
@@ -879,7 +887,7 @@ body.resizing-col-active * {
879
887
  }
880
888
 
881
889
  /* Visual split target buttons (top, bottom, left, right, center) */
882
- .dock-target-box {
890
+ .rdd-dock-target-box {
883
891
  position: absolute;
884
892
  background-color: rgba(15, 23, 42, 0.92);
885
893
  border: 1px solid rgba(255, 255, 255, 0.15);
@@ -891,63 +899,63 @@ body.resizing-col-active * {
891
899
  transition: all 0.12s ease-in-out;
892
900
  pointer-events: auto;
893
901
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
894
- color: var(--text-secondary);
902
+ color: var(--rdd-text-secondary);
895
903
  }
896
904
 
897
- .dock-target-box:hover {
898
- background-color: var(--accent-color) !important;
905
+ .rdd-dock-target-box:hover {
906
+ background-color: var(--rdd-accent-color) !important;
899
907
  border-color: #ffffff !important;
900
908
  color: #090b11 !important;
901
909
  transform: scale(1.12);
902
- box-shadow: 0 0 12px var(--accent-color);
910
+ box-shadow: 0 0 12px var(--rdd-accent-color);
903
911
  }
904
912
 
905
913
  /* Specific split target layouts */
906
- .dock-target-left {
914
+ .rdd-dock-target-left {
907
915
  left: 0;
908
916
  top: 45px;
909
917
  width: 40px;
910
918
  height: 50px;
911
919
  }
912
- .dock-target-right {
920
+ .rdd-dock-target-right {
913
921
  right: 0;
914
922
  top: 45px;
915
923
  width: 40px;
916
924
  height: 50px;
917
925
  }
918
- .dock-target-top {
926
+ .rdd-dock-target-top {
919
927
  left: 45px;
920
928
  top: 0;
921
929
  width: 50px;
922
930
  height: 40px;
923
931
  }
924
- .dock-target-bottom {
932
+ .rdd-dock-target-bottom {
925
933
  left: 45px;
926
934
  bottom: 0;
927
935
  width: 50px;
928
936
  height: 40px;
929
937
  }
930
- .dock-target-center {
938
+ .rdd-dock-target-center {
931
939
  left: 45px;
932
940
  top: 45px;
933
941
  width: 50px;
934
942
  height: 50px;
935
943
  background-color: rgba(30, 41, 59, 0.95);
936
- color: var(--accent-color);
944
+ color: var(--rdd-accent-color);
937
945
  }
938
946
 
939
947
  /* Drag hover indicators: glowing insertion line */
940
- .workspace-tab.drag-hover-left {
941
- box-shadow: -3px 0 0 0 var(--accent-color, #38bdf8),
942
- -10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
948
+ .rdd-workspace-tab.rdd-drag-hover-left {
949
+ box-shadow: -3px 0 0 0 var(--rdd-accent-color, #38bdf8),
950
+ -10px 0 10px -2px var(--rdd-accent-glow, rgba(56,189,248,0.35));
943
951
  }
944
- .workspace-tab.drag-hover-right {
945
- box-shadow: 3px 0 0 0 var(--accent-color, #38bdf8),
946
- 10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
952
+ .rdd-workspace-tab.rdd-drag-hover-right {
953
+ box-shadow: 3px 0 0 0 var(--rdd-accent-color, #38bdf8),
954
+ 10px 0 10px -2px var(--rdd-accent-glow, rgba(56,189,248,0.35));
947
955
  }
948
956
 
949
957
  /* Close button for empty LeafGroups inside header */
950
- .header-close-empty-group {
958
+ .rdd-header-close-empty-group {
951
959
  opacity: 0 !important;
952
960
  transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease !important;
953
961
  display: flex;
@@ -956,19 +964,19 @@ body.resizing-col-active * {
956
964
  margin-inline-end: 0.5rem;
957
965
  }
958
966
 
959
- .workspace-panel:hover .header-close-empty-group {
967
+ .rdd-workspace-panel:hover .rdd-header-close-empty-group {
960
968
  opacity: 0.75 !important;
961
969
  }
962
970
 
963
- .header-close-empty-group:hover {
971
+ .rdd-header-close-empty-group:hover {
964
972
  opacity: 1 !important;
965
973
  background-color: rgba(255, 255, 255, 0.12) !important;
966
974
  color: #ffffff !important;
967
975
  }
968
976
 
969
977
  /* Grabbing cursor style during active dragging */
970
- .dragging-active,
971
- .dragging-active * {
978
+ .rdd-dragging-active,
979
+ .rdd-dragging-active * {
972
980
  cursor: grabbing !important;
973
981
  }
974
982
 
@@ -1014,13 +1022,13 @@ body.resizing-col-active * {
1014
1022
  }
1015
1023
 
1016
1024
  [data-color-scheme="light"] {
1017
- --bg-primary: #f8f9fa;
1018
- --bg-workspace: #f1f5f9;
1019
- --bg-panel: #ffffff;
1020
- --bg-tab-bar: #e9ecef;
1021
- --text-primary: #212529;
1022
- --text-secondary: #6c757d;
1023
- --border-color: rgba(0, 0, 0, 0.08);
1025
+ --rdd-bg-primary: #f8f9fa;
1026
+ --rdd-bg-workspace: #f1f5f9;
1027
+ --rdd-bg-panel: #ffffff;
1028
+ --rdd-bg-tab-bar: #e9ecef;
1029
+ --rdd-text-primary: #212529;
1030
+ --rdd-text-secondary: #6c757d;
1031
+ --rdd-border-color: rgba(0, 0, 0, 0.08);
1024
1032
 
1025
1033
  --sidebar-bg: #f8f9fa;
1026
1034
  --sidebar-tabs-bg: #e9ecef;
@@ -1050,63 +1058,63 @@ body.resizing-col-active * {
1050
1058
  --toolbar-btn-toggle-active-bg: rgba(0, 102, 204, 0.06);
1051
1059
  --toolbar-separator-color: rgba(0, 0, 0, 0.1);
1052
1060
  /* Light skin window overrides */
1053
- --window-bg: rgba(243, 244, 246, var(--window-opacity, 0.9));
1054
- --window-border: rgba(0, 0, 0, 0.08);
1055
- --window-border-focused: rgba(0, 0, 0, 0.28);
1056
- --window-header-bg: rgba(0, 0, 0, 0.04);
1057
- --window-text: #212529;
1058
- --window-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
1059
- --window-shadow-focused: 0 16px 36px rgba(0, 0, 0, 0.12);
1061
+ --rdd-window-bg: rgba(243, 244, 246, var(--rdd-window-opacity, 0.9));
1062
+ --rdd-window-border: rgba(0, 0, 0, 0.08);
1063
+ --rdd-window-border-focused: rgba(0, 0, 0, 0.28);
1064
+ --rdd-window-header-bg: rgba(0, 0, 0, 0.04);
1065
+ --rdd-window-text: #212529;
1066
+ --rdd-window-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
1067
+ --rdd-window-shadow-focused: 0 16px 36px rgba(0, 0, 0, 0.12);
1060
1068
  /* Light skin grid/docked panel overrides */
1061
- --border-panel: rgba(0, 0, 0, 0.08);
1062
- --bg-tab-inactive: #e9ecef;
1063
- --text-tab-inactive: #495057;
1064
- --text-tab-active: #212529;
1069
+ --rdd-border-panel: rgba(0, 0, 0, 0.08);
1070
+ --rdd-bg-tab-inactive: #e9ecef;
1071
+ --rdd-text-tab-inactive: #495057;
1072
+ --rdd-text-tab-active: #212529;
1065
1073
  /* Light skin tab and control button hover colors */
1066
- --bg-tab-hover: #dee2e6;
1067
- --text-tab-hover: #212529;
1068
- --close-btn-hover-bg: rgba(0, 0, 0, 0.08);
1069
- --close-btn-hover-color: #212529;
1070
- --close-btn-color: #6c757d;
1071
- --close-btn-active-color: #212529;
1072
- --tab-indicator-focused: #0066cc;
1073
- --tab-indicator-unfocused: rgba(0, 0, 0, 0.25);
1074
- --tab-bg-active-focused: var(--bg-panel);
1075
- --tab-bg-active-unfocused: rgba(220, 224, 230, 0.65);
1076
- --tab-text-active-focused: #212529;
1077
- --tab-text-active-unfocused: #6c757d;
1078
- --resizer-bg: rgba(0, 0, 0, 0.08);
1079
- --custom-btn-bg: rgba(0, 0, 0, 0.03);
1080
- --custom-btn-border: rgba(0, 0, 0, 0.08);
1081
- --custom-btn-hover-bg: rgba(0, 0, 0, 0.08);
1082
- --custom-btn-hover-color: #212529;
1074
+ --rdd-bg-tab-hover: #dee2e6;
1075
+ --rdd-text-tab-hover: #212529;
1076
+ --rdd-close-btn-hover-bg: rgba(0, 0, 0, 0.08);
1077
+ --rdd-close-btn-hover-color: #212529;
1078
+ --rdd-close-btn-color: #6c757d;
1079
+ --rdd-close-btn-active-color: #212529;
1080
+ --rdd-tab-indicator-focused: #0066cc;
1081
+ --rdd-tab-indicator-unfocused: rgba(0, 0, 0, 0.25);
1082
+ --rdd-tab-bg-active-focused: var(--rdd-bg-panel);
1083
+ --rdd-tab-bg-active-unfocused: rgba(220, 224, 230, 0.65);
1084
+ --rdd-tab-text-active-focused: #212529;
1085
+ --rdd-tab-text-active-unfocused: #6c757d;
1086
+ --rdd-resizer-bg: rgba(0, 0, 0, 0.08);
1087
+ --rdd-custom-btn-bg: rgba(0, 0, 0, 0.03);
1088
+ --rdd-custom-btn-border: rgba(0, 0, 0, 0.08);
1089
+ --rdd-custom-btn-hover-bg: rgba(0, 0, 0, 0.08);
1090
+ --rdd-custom-btn-hover-color: #212529;
1083
1091
  /* Light skin taskbar theme variables */
1084
- --taskbar-bg: rgba(248, 249, 250, 0.85);
1085
- --taskbar-border: rgba(0, 0, 0, 0.08);
1086
- --taskbar-nav-color: rgba(0, 0, 0, 0.5);
1087
- --taskbar-item-bg: rgba(255, 255, 255, 0.65);
1088
- --taskbar-item-hover-bg: rgba(255, 255, 255, 0.85);
1089
- --taskbar-item-border: rgba(0, 0, 0, 0.08);
1090
- --taskbar-item-text: #0066cc;
1092
+ --rdd-taskbar-bg: rgba(248, 249, 250, 0.85);
1093
+ --rdd-taskbar-border: rgba(0, 0, 0, 0.08);
1094
+ --rdd-taskbar-nav-color: rgba(0, 0, 0, 0.5);
1095
+ --rdd-taskbar-item-bg: rgba(255, 255, 255, 0.65);
1096
+ --rdd-taskbar-item-hover-bg: rgba(255, 255, 255, 0.85);
1097
+ --rdd-taskbar-item-border: rgba(0, 0, 0, 0.08);
1098
+ --rdd-taskbar-item-text: #0066cc;
1091
1099
  /* Light skin scrollbar theme variables */
1092
- --scrollbar-thumb: rgba(0, 0, 0, 0.15);
1093
- --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
1094
- --scrollbar-track: rgba(0, 0, 0, 0.02);
1100
+ --rdd-scrollbar-thumb: rgba(0, 0, 0, 0.15);
1101
+ --rdd-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
1102
+ --rdd-scrollbar-track: rgba(0, 0, 0, 0.02);
1095
1103
  /* Light skin mockup panel inner theme variables */
1096
- --panel-card-bg: rgba(0, 0, 0, 0.03);
1097
- --panel-card-border: rgba(0, 0, 0, 0.08);
1098
- --panel-text: #212529;
1099
- --panel-title-color: #0066cc;
1104
+ --rdd-panel-card-bg: rgba(0, 0, 0, 0.03);
1105
+ --rdd-panel-card-border: rgba(0, 0, 0, 0.08);
1106
+ --rdd-panel-text: #212529;
1107
+ --rdd-panel-title-color: #0066cc;
1100
1108
  /* ── Panel Overlay — Toolbar (light) ── */
1101
- --panel-toolbar-fg: rgba(0, 0, 0, 0.55);
1102
- --panel-toolbar-fg-hover: rgba(0, 0, 0, 0.85);
1103
- --panel-toolbar-btn-hover-bg: rgba(0, 0, 0, 0.08);
1104
- --panel-toolbar-separator-color: rgba(0, 0, 0, 0.1);
1109
+ --rdd-panel-toolbar-fg: rgba(0, 0, 0, 0.55);
1110
+ --rdd-panel-toolbar-fg-hover: rgba(0, 0, 0, 0.85);
1111
+ --rdd-panel-toolbar-btn-hover-bg: rgba(0, 0, 0, 0.08);
1112
+ --rdd-panel-toolbar-separator-color: rgba(0, 0, 0, 0.1);
1105
1113
  /* ── Panel Overlay — Floating Window (light) ── */
1106
- --panel-float-bg: rgba(255, 255, 255, 0.96);
1107
- --panel-float-border: rgba(0, 0, 0, 0.1);
1108
- --panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
1109
- --panel-float-shadow-active: 0 8px 28px rgba(0, 0, 0, 0.2);
1114
+ --rdd-panel-float-bg: rgba(255, 255, 255, 0.96);
1115
+ --rdd-panel-float-border: rgba(0, 0, 0, 0.1);
1116
+ --rdd-panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
1117
+ --rdd-panel-float-shadow-active: 0 8px 28px rgba(0, 0, 0, 0.2);
1110
1118
  }
1111
1119
 
1112
1120
  /* ==========================================================================
@@ -1124,95 +1132,95 @@ body.resizing-col-active * {
1124
1132
  SKIN 2: macOS / Glassmorphic Preset
1125
1133
  -------------------------------------------------------------------------- */
1126
1134
  [data-workspace-skin="macos"] {
1127
- --bg-workspace: #1a1a24;
1128
- --bg-panel: rgba(30, 30, 40, 0.45);
1129
- --bg-tab-bar: rgba(18, 18, 24, 0.3);
1130
- --window-bg: rgba(25, 25, 35, var(--window-opacity, 0.7));
1131
- --window-border: rgba(255, 255, 255, 0.1);
1132
- --window-header-bg: rgba(0, 0, 0, 0.15);
1133
- --accent-color: #38bdf8;
1134
- --accent-glow: rgba(56, 189, 248, 0.25);
1135
- --border-panel: rgba(255, 255, 255, 0.08);
1136
- --bg-tab-inactive: transparent;
1137
- --text-tab-inactive: #94a3b8;
1138
- --text-tab-active: #ffffff;
1139
- --window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
1140
- --window-shadow-focused: 0 24px 50px rgba(56, 189, 248, 0.15);
1141
- --panel-card-bg: rgba(255, 255, 255, 0.03);
1142
- --panel-card-border: rgba(255, 255, 255, 0.08);
1135
+ --rdd-bg-workspace: #1a1a24;
1136
+ --rdd-bg-panel: rgba(30, 30, 40, 0.45);
1137
+ --rdd-bg-tab-bar: rgba(18, 18, 24, 0.3);
1138
+ --rdd-window-bg: rgba(25, 25, 35, var(--rdd-window-opacity, 0.7));
1139
+ --rdd-window-border: rgba(255, 255, 255, 0.1);
1140
+ --rdd-window-header-bg: rgba(0, 0, 0, 0.15);
1141
+ --rdd-accent-color: #38bdf8;
1142
+ --rdd-accent-glow: rgba(56, 189, 248, 0.25);
1143
+ --rdd-border-panel: rgba(255, 255, 255, 0.08);
1144
+ --rdd-bg-tab-inactive: transparent;
1145
+ --rdd-text-tab-inactive: #94a3b8;
1146
+ --rdd-text-tab-active: #ffffff;
1147
+ --rdd-window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
1148
+ --rdd-window-shadow-focused: 0 24px 50px rgba(56, 189, 248, 0.15);
1149
+ --rdd-panel-card-bg: rgba(255, 255, 255, 0.03);
1150
+ --rdd-panel-card-border: rgba(255, 255, 255, 0.08);
1143
1151
  }
1144
1152
 
1145
1153
  [data-workspace-skin="macos"][data-color-scheme="light"] {
1146
- --bg-primary: #f3f4f6;
1147
- --bg-workspace: #e5e7eb;
1148
- --bg-panel: rgba(255, 255, 255, 0.7);
1149
- --bg-tab-bar: rgba(229, 231, 235, 0.5);
1150
- --window-bg: rgba(255, 255, 255, var(--window-opacity, 0.85));
1151
- --window-border: rgba(0, 0, 0, 0.12);
1152
- --window-header-bg: rgba(243, 244, 246, 0.5);
1153
- --accent-color: #0066cc;
1154
- --accent-glow: rgba(0, 102, 204, 0.15);
1155
- --border-panel: rgba(0, 0, 0, 0.1);
1156
- --bg-tab-inactive: transparent;
1157
- --text-tab-inactive: #4b5563;
1158
- --text-tab-active: #111827;
1159
- --window-text: #111827;
1160
- --window-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
1161
- --window-shadow-focused: 0 16px 36px rgba(0, 102, 204, 0.18);
1162
- --panel-card-bg: rgba(0, 0, 0, 0.04);
1163
- --panel-card-border: rgba(0, 0, 0, 0.08);
1164
- --panel-text: #111827;
1165
- --panel-title-color: #0066cc;
1166
- --close-btn-color: #4b5563;
1167
- --close-btn-active-color: #111827;
1154
+ --rdd-bg-primary: #f3f4f6;
1155
+ --rdd-bg-workspace: #e5e7eb;
1156
+ --rdd-bg-panel: rgba(255, 255, 255, 0.7);
1157
+ --rdd-bg-tab-bar: rgba(229, 231, 235, 0.5);
1158
+ --rdd-window-bg: rgba(255, 255, 255, var(--rdd-window-opacity, 0.85));
1159
+ --rdd-window-border: rgba(0, 0, 0, 0.12);
1160
+ --rdd-window-header-bg: rgba(243, 244, 246, 0.5);
1161
+ --rdd-accent-color: #0066cc;
1162
+ --rdd-accent-glow: rgba(0, 102, 204, 0.15);
1163
+ --rdd-border-panel: rgba(0, 0, 0, 0.1);
1164
+ --rdd-bg-tab-inactive: transparent;
1165
+ --rdd-text-tab-inactive: #4b5563;
1166
+ --rdd-text-tab-active: #111827;
1167
+ --rdd-window-text: #111827;
1168
+ --rdd-window-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
1169
+ --rdd-window-shadow-focused: 0 16px 36px rgba(0, 102, 204, 0.18);
1170
+ --rdd-panel-card-bg: rgba(0, 0, 0, 0.04);
1171
+ --rdd-panel-card-border: rgba(0, 0, 0, 0.08);
1172
+ --rdd-panel-text: #111827;
1173
+ --rdd-panel-title-color: #0066cc;
1174
+ --rdd-close-btn-color: #4b5563;
1175
+ --rdd-close-btn-active-color: #111827;
1168
1176
  }
1169
1177
 
1170
1178
  /* macOS structural adjustments */
1171
- [data-workspace-skin="macos"] .floating-window {
1179
+ [data-workspace-skin="macos"] .rdd-floating-window {
1172
1180
  border-radius: 12px;
1173
1181
  backdrop-filter: blur(20px) saturate(180%);
1174
1182
  -webkit-backdrop-filter: blur(20px) saturate(180%);
1175
- border-color: var(--window-border);
1183
+ border-color: var(--rdd-window-border);
1176
1184
  }
1177
- [data-workspace-skin="macos"] .floating-window-titlebar {
1185
+ [data-workspace-skin="macos"] .rdd-floating-window-titlebar {
1178
1186
  border-top-left-radius: 12px;
1179
1187
  border-top-right-radius: 12px;
1180
1188
  }
1181
- [data-workspace-skin="macos"] .workspace-panel {
1189
+ [data-workspace-skin="macos"] .rdd-workspace-panel {
1182
1190
  border-radius: 8px;
1183
1191
  backdrop-filter: blur(12px) saturate(180%);
1184
1192
  -webkit-backdrop-filter: blur(12px) saturate(180%);
1185
1193
  }
1186
- [data-workspace-skin="macos"] .workspace-tab {
1194
+ [data-workspace-skin="macos"] .rdd-workspace-tab {
1187
1195
  border-radius: 6px !important;
1188
1196
  margin: 4px 4px 4px 4px !important;
1189
1197
  height: 28px !important;
1190
- border: 1px solid var(--border-panel) !important;
1198
+ border: 1px solid var(--rdd-border-panel) !important;
1191
1199
  }
1192
- [data-workspace-skin="macos"] .workspace-tab.active {
1193
- background-color: var(--bg-workspace) !important;
1200
+ [data-workspace-skin="macos"] .rdd-workspace-tab.rdd-active {
1201
+ background-color: var(--rdd-bg-workspace) !important;
1194
1202
  }
1195
- [data-workspace-skin="macos"] .workspace-tab.active::before {
1203
+ [data-workspace-skin="macos"] .rdd-workspace-tab.rdd-active::before {
1196
1204
  display: none !important; /* Hide VS Code top line */
1197
1205
  }
1198
1206
 
1199
1207
  /* macOS Circle dots controls styling */
1200
- [data-workspace-skin="macos"] .custom-tab-btn {
1208
+ [data-workspace-skin="macos"] .rdd-custom-tab-btn {
1201
1209
  border-radius: 50% !important;
1202
1210
  width: 12px !important;
1203
1211
  height: 12px !important;
1204
- background: var(--custom-btn-bg) !important;
1212
+ background: var(--rdd-custom-btn-bg) !important;
1205
1213
  border: none !important;
1206
1214
  color: transparent !important;
1207
1215
  font-size: 0 !important;
1208
1216
  overflow: hidden;
1209
1217
  margin: 0 2px;
1210
1218
  }
1211
- [data-workspace-skin="macos"] .floating-window-titlebar {
1219
+ [data-workspace-skin="macos"] .rdd-floating-window-titlebar {
1212
1220
  flex-direction: row-reverse !important;
1213
1221
  position: relative !important;
1214
1222
  }
1215
- [data-workspace-skin="macos"] .floating-window-titlebar .floating-window-title {
1223
+ [data-workspace-skin="macos"] .rdd-floating-window-titlebar .rdd-floating-window-title {
1216
1224
  pointer-events: none !important;
1217
1225
  margin: 0 !important;
1218
1226
  margin-inline-start: 0.5rem !important;
@@ -1220,28 +1228,28 @@ body.resizing-col-active * {
1220
1228
  min-width: 0 !important;
1221
1229
  justify-content: flex-end !important;
1222
1230
  }
1223
- [data-workspace-skin="macos"] .floating-window-titlebar .floating-window-title > * {
1231
+ [data-workspace-skin="macos"] .rdd-floating-window-titlebar .rdd-floating-window-title > * {
1224
1232
  pointer-events: auto;
1225
1233
  }
1226
- [data-workspace-skin="macos"] .floating-window-titlebar .fw-titlebar-actions {
1234
+ [data-workspace-skin="macos"] .rdd-floating-window-titlebar .rdd-titlebar-actions {
1227
1235
  flex-direction: row-reverse !important;
1228
1236
  }
1229
- [data-workspace-skin="macos"] .custom-tab-btn svg {
1237
+ [data-workspace-skin="macos"] .rdd-custom-tab-btn svg {
1230
1238
  display: none !important;
1231
1239
  }
1232
- [data-workspace-skin="macos"] .btn-close-tab {
1240
+ [data-workspace-skin="macos"] .rdd-btn-close-tab {
1233
1241
  background-color: #ff5f56 !important; /* Red (Close) */
1234
1242
  }
1235
- [data-workspace-skin="macos"] .btn-minimize-tab {
1243
+ [data-workspace-skin="macos"] .rdd-btn-minimize-tab {
1236
1244
  background-color: #ffbd2e !important; /* Yellow (Minimize) */
1237
1245
  }
1238
- [data-workspace-skin="macos"] .btn-maximize-tab {
1246
+ [data-workspace-skin="macos"] .rdd-btn-maximize-tab {
1239
1247
  background-color: #27c93f !important; /* Green (Maximize) */
1240
1248
  }
1241
1249
 
1242
1250
  /* Panel Icon Styling and Alignment */
1243
- .workspace-tab-icon,
1244
- .window-title-icon {
1251
+ .rdd-workspace-tab-icon,
1252
+ .rdd-window-title-icon {
1245
1253
  display: inline-flex;
1246
1254
  align-items: center;
1247
1255
  justify-content: center;
@@ -1251,10 +1259,10 @@ body.resizing-col-active * {
1251
1259
  margin-inline-end: 4px !important; /* Forces the gap between the icon and the text title */
1252
1260
  }
1253
1261
 
1254
- .workspace-tab-icon svg,
1255
- .workspace-tab-icon img,
1256
- .window-title-icon svg,
1257
- .window-title-icon img {
1262
+ .rdd-workspace-tab-icon svg,
1263
+ .rdd-workspace-tab-icon img,
1264
+ .rdd-window-title-icon svg,
1265
+ .rdd-window-title-icon img {
1258
1266
  width: 14px !important;
1259
1267
  height: 14px !important;
1260
1268
  max-width: 14px !important;
@@ -1263,7 +1271,7 @@ body.resizing-col-active * {
1263
1271
  display: block;
1264
1272
  }
1265
1273
 
1266
- [data-workspace-skin="macos"] .custom-tab-btn:hover {
1274
+ [data-workspace-skin="macos"] .rdd-custom-tab-btn:hover {
1267
1275
  filter: brightness(0.85);
1268
1276
  transform: none !important;
1269
1277
  }
@@ -1272,63 +1280,63 @@ body.resizing-col-active * {
1272
1280
  SKIN 3: Chrome / Browser-Style Preset
1273
1281
  -------------------------------------------------------------------------- */
1274
1282
  [data-workspace-skin="chrome"] {
1275
- --bg-workspace: #202124;
1276
- --bg-panel: #292a2d;
1277
- --bg-tab-bar: #202124;
1278
- --window-bg: rgba(41, 42, 45, var(--window-opacity, 1.0));
1279
- --window-border: #3c4043;
1280
- --window-header-bg: #202124;
1281
- --accent-color: #8ab4f8;
1282
- --accent-glow: rgba(138, 180, 248, 0.15);
1283
- --border-panel: #3c4043;
1284
- --bg-tab-inactive: #202124;
1285
- --text-tab-inactive: #9aa0a6;
1286
- --text-tab-active: #ffffff;
1287
- --panel-card-bg: #202124;
1288
- --panel-card-border: #3c4043;
1289
- --window-text: #ffffff;
1290
- --panel-text: #e8eaed;
1283
+ --rdd-bg-workspace: #202124;
1284
+ --rdd-bg-panel: #292a2d;
1285
+ --rdd-bg-tab-bar: #202124;
1286
+ --rdd-window-bg: rgba(41, 42, 45, var(--rdd-window-opacity, 1.0));
1287
+ --rdd-window-border: #3c4043;
1288
+ --rdd-window-header-bg: #202124;
1289
+ --rdd-accent-color: #8ab4f8;
1290
+ --rdd-accent-glow: rgba(138, 180, 248, 0.15);
1291
+ --rdd-border-panel: #3c4043;
1292
+ --rdd-bg-tab-inactive: #202124;
1293
+ --rdd-text-tab-inactive: #9aa0a6;
1294
+ --rdd-text-tab-active: #ffffff;
1295
+ --rdd-panel-card-bg: #202124;
1296
+ --rdd-panel-card-border: #3c4043;
1297
+ --rdd-window-text: #ffffff;
1298
+ --rdd-panel-text: #e8eaed;
1291
1299
  --tab-icon-active: #8ab4f8;
1292
1300
  --toolbar-btn-radio-active-bg: rgba(138, 180, 248, 0.14);
1293
1301
  --toolbar-btn-toggle-active-bg: rgba(138, 180, 248, 0.08);
1294
1302
  }
1295
1303
 
1296
1304
  [data-workspace-skin="chrome"][data-color-scheme="light"] {
1297
- --bg-workspace: #dee1e6;
1298
- --bg-panel: #ffffff;
1299
- --bg-tab-bar: #dee1e6;
1300
- --window-bg: rgba(255, 255, 255, var(--window-opacity, 1.0));
1301
- --window-border: #cbd5e1;
1302
- --window-header-bg: #dee1e6;
1303
- --accent-color: #1a73e8;
1304
- --accent-glow: rgba(26, 115, 232, 0.15);
1305
- --border-panel: #dadce0;
1306
- --bg-tab-inactive: #dee1e6;
1307
- --text-tab-inactive: #474747;
1308
- --text-tab-active: #1f1f1f;
1309
- --panel-card-bg: #f1f3f4;
1310
- --panel-card-border: #dadce0;
1311
- --window-text: #1f1f1f;
1312
- --panel-text: #1f1f1f;
1313
- --panel-title-color: #1a73e8;
1314
- --close-btn-color: #474747;
1315
- --close-btn-active-color: #1f1f1f;
1305
+ --rdd-bg-workspace: #dee1e6;
1306
+ --rdd-bg-panel: #ffffff;
1307
+ --rdd-bg-tab-bar: #dee1e6;
1308
+ --rdd-window-bg: rgba(255, 255, 255, var(--rdd-window-opacity, 1.0));
1309
+ --rdd-window-border: #cbd5e1;
1310
+ --rdd-window-header-bg: #dee1e6;
1311
+ --rdd-accent-color: #1a73e8;
1312
+ --rdd-accent-glow: rgba(26, 115, 232, 0.15);
1313
+ --rdd-border-panel: #dadce0;
1314
+ --rdd-bg-tab-inactive: #dee1e6;
1315
+ --rdd-text-tab-inactive: #474747;
1316
+ --rdd-text-tab-active: #1f1f1f;
1317
+ --rdd-panel-card-bg: #f1f3f4;
1318
+ --rdd-panel-card-border: #dadce0;
1319
+ --rdd-window-text: #1f1f1f;
1320
+ --rdd-panel-text: #1f1f1f;
1321
+ --rdd-panel-title-color: #1a73e8;
1322
+ --rdd-close-btn-color: #474747;
1323
+ --rdd-close-btn-active-color: #1f1f1f;
1316
1324
  --tab-icon-active: #1a73e8;
1317
1325
  --toolbar-btn-radio-active-bg: rgba(26, 115, 232, 0.12);
1318
1326
  --toolbar-btn-toggle-active-bg: rgba(26, 115, 232, 0.07);
1319
1327
  }
1320
1328
 
1321
1329
  /* Chrome tab angled geometry shapes */
1322
- [data-workspace-skin="chrome"] .workspace-tab {
1330
+ [data-workspace-skin="chrome"] .rdd-workspace-tab {
1323
1331
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 100%, 0% 100%);
1324
1332
  padding: 0 18px !important;
1325
1333
  margin-right: -4px !important;
1326
1334
  border-right: none !important;
1327
1335
  }
1328
- [data-workspace-skin="chrome"] .workspace-tab.active {
1336
+ [data-workspace-skin="chrome"] .rdd-workspace-tab.rdd-active {
1329
1337
  z-index: 5;
1330
1338
  }
1331
- [data-workspace-skin="chrome"] .workspace-tab.active::before {
1339
+ [data-workspace-skin="chrome"] .rdd-workspace-tab.rdd-active::before {
1332
1340
  display: none !important;
1333
1341
  }
1334
1342
 
@@ -1336,50 +1344,50 @@ body.resizing-col-active * {
1336
1344
  SKIN 4: Fluent Slate Preset
1337
1345
  -------------------------------------------------------------------------- */
1338
1346
  [data-workspace-skin="slate"] {
1339
- --bg-workspace: #0f172a;
1340
- --bg-panel: #1e293b;
1341
- --bg-tab-bar: #0f172a;
1342
- --window-bg: rgba(30, 41, 59, var(--window-opacity, 1.0));
1343
- --window-border: #334155;
1344
- --window-header-bg: #1e293b;
1345
- --accent-color: #38bdf8;
1346
- --accent-glow: rgba(56, 189, 248, 0.15);
1347
- --border-panel: #334155;
1348
- --bg-tab-inactive: #1e293b;
1349
- --text-tab-inactive: #64748b;
1350
- --text-tab-active: #f8fafc;
1351
- --panel-card-bg: #0f172a;
1352
- --panel-card-border: #334155;
1353
- --window-text: #f8fafc;
1354
- --panel-text: #f8fafc;
1347
+ --rdd-bg-workspace: #0f172a;
1348
+ --rdd-bg-panel: #1e293b;
1349
+ --rdd-bg-tab-bar: #0f172a;
1350
+ --rdd-window-bg: rgba(30, 41, 59, var(--rdd-window-opacity, 1.0));
1351
+ --rdd-window-border: #334155;
1352
+ --rdd-window-header-bg: #1e293b;
1353
+ --rdd-accent-color: #38bdf8;
1354
+ --rdd-accent-glow: rgba(56, 189, 248, 0.15);
1355
+ --rdd-border-panel: #334155;
1356
+ --rdd-bg-tab-inactive: #1e293b;
1357
+ --rdd-text-tab-inactive: #64748b;
1358
+ --rdd-text-tab-active: #f8fafc;
1359
+ --rdd-panel-card-bg: #0f172a;
1360
+ --rdd-panel-card-border: #334155;
1361
+ --rdd-window-text: #f8fafc;
1362
+ --rdd-panel-text: #f8fafc;
1355
1363
  }
1356
1364
 
1357
1365
  [data-workspace-skin="slate"][data-color-scheme="light"] {
1358
- --bg-workspace: #f1f5f9;
1359
- --bg-panel: #ffffff;
1360
- --bg-tab-bar: #f1f5f9;
1361
- --window-bg: rgba(255, 255, 255, var(--window-opacity, 1.0));
1362
- --window-border: #cbd5e1;
1363
- --window-header-bg: #f8fafc;
1364
- --accent-color: #0078d4;
1365
- --accent-glow: rgba(0, 120, 212, 0.15);
1366
- --border-panel: #e2e8f0;
1367
- --bg-tab-inactive: #f8fafc;
1368
- --text-tab-inactive: #475569;
1369
- --text-tab-active: #0f172a;
1370
- --panel-card-bg: #f8fafc;
1371
- --panel-card-border: #cbd5e1;
1372
- --window-text: #0f172a;
1373
- --panel-text: #0f172a;
1374
- --panel-title-color: #0078d4;
1375
- --close-btn-color: #475569;
1376
- --close-btn-active-color: #0f172a;
1366
+ --rdd-bg-workspace: #f1f5f9;
1367
+ --rdd-bg-panel: #ffffff;
1368
+ --rdd-bg-tab-bar: #f1f5f9;
1369
+ --rdd-window-bg: rgba(255, 255, 255, var(--rdd-window-opacity, 1.0));
1370
+ --rdd-window-border: #cbd5e1;
1371
+ --rdd-window-header-bg: #f8fafc;
1372
+ --rdd-accent-color: #0078d4;
1373
+ --rdd-accent-glow: rgba(0, 120, 212, 0.15);
1374
+ --rdd-border-panel: #e2e8f0;
1375
+ --rdd-bg-tab-inactive: #f8fafc;
1376
+ --rdd-text-tab-inactive: #475569;
1377
+ --rdd-text-tab-active: #0f172a;
1378
+ --rdd-panel-card-bg: #f8fafc;
1379
+ --rdd-panel-card-border: #cbd5e1;
1380
+ --rdd-window-text: #0f172a;
1381
+ --rdd-panel-text: #0f172a;
1382
+ --rdd-panel-title-color: #0078d4;
1383
+ --rdd-close-btn-color: #475569;
1384
+ --rdd-close-btn-active-color: #0f172a;
1377
1385
  --tab-icon-active: #0078d4;
1378
1386
  --toolbar-btn-radio-active-bg: rgba(0, 120, 212, 0.10);
1379
1387
  --toolbar-btn-toggle-active-bg: rgba(0, 120, 212, 0.06);
1380
1388
  }
1381
1389
 
1382
- [data-workspace-skin="slate"] .workspace-tab.active::before {
1390
+ [data-workspace-skin="slate"] .rdd-workspace-tab.rdd-active::before {
1383
1391
  top: auto !important;
1384
1392
  bottom: 0 !important;
1385
1393
  height: 3px !important;
@@ -1389,53 +1397,53 @@ body.resizing-col-active * {
1389
1397
  SKIN 5: Nordic Frost Preset (Nord Theme)
1390
1398
  -------------------------------------------------------------------------- */
1391
1399
  [data-workspace-skin="nord"] {
1392
- --bg-workspace: #2e3440;
1393
- --bg-panel: #3b4252;
1394
- --bg-tab-bar: #2e3440;
1395
- --window-bg: rgba(59, 66, 82, var(--window-opacity, 1.0));
1396
- --window-border: #434c5e;
1397
- --window-header-bg: #2e3440;
1398
- --accent-color: #88c0d0;
1399
- --accent-glow: rgba(136, 192, 208, 0.2);
1400
- --border-panel: #434c5e;
1401
- --bg-tab-inactive: #2e3440;
1402
- --text-tab-inactive: #d8dee9;
1403
- --text-tab-active: #eceff4;
1404
- --panel-card-bg: #2e3440;
1405
- --panel-card-border: #4c566a;
1406
- --close-btn-color: #d8dee9;
1407
- --close-btn-active-color: #88c0d0;
1408
- --scrollbar-thumb: rgba(136, 192, 208, 0.25);
1409
- --scrollbar-thumb-hover: rgba(136, 192, 208, 0.4);
1410
- --window-text: #eceff4;
1411
- --panel-text: #eceff4;
1400
+ --rdd-bg-workspace: #2e3440;
1401
+ --rdd-bg-panel: #3b4252;
1402
+ --rdd-bg-tab-bar: #2e3440;
1403
+ --rdd-window-bg: rgba(59, 66, 82, var(--rdd-window-opacity, 1.0));
1404
+ --rdd-window-border: #434c5e;
1405
+ --rdd-window-header-bg: #2e3440;
1406
+ --rdd-accent-color: #88c0d0;
1407
+ --rdd-accent-glow: rgba(136, 192, 208, 0.2);
1408
+ --rdd-border-panel: #434c5e;
1409
+ --rdd-bg-tab-inactive: #2e3440;
1410
+ --rdd-text-tab-inactive: #d8dee9;
1411
+ --rdd-text-tab-active: #eceff4;
1412
+ --rdd-panel-card-bg: #2e3440;
1413
+ --rdd-panel-card-border: #4c566a;
1414
+ --rdd-close-btn-color: #d8dee9;
1415
+ --rdd-close-btn-active-color: #88c0d0;
1416
+ --rdd-scrollbar-thumb: rgba(136, 192, 208, 0.25);
1417
+ --rdd-scrollbar-thumb-hover: rgba(136, 192, 208, 0.4);
1418
+ --rdd-window-text: #eceff4;
1419
+ --rdd-panel-text: #eceff4;
1412
1420
  --tab-icon-active: #88c0d0;
1413
1421
  --toolbar-btn-radio-active-bg: rgba(136, 192, 208, 0.14);
1414
1422
  --toolbar-btn-toggle-active-bg: rgba(136, 192, 208, 0.08);
1415
1423
  }
1416
1424
 
1417
1425
  [data-workspace-skin="nord"][data-color-scheme="light"] {
1418
- --bg-workspace: #e5e9f0;
1419
- --bg-panel: #eceff4;
1420
- --bg-tab-bar: #e5e9f0;
1421
- --window-bg: rgba(236, 239, 244, var(--window-opacity, 1.0));
1422
- --window-border: #d8dee9;
1423
- --window-header-bg: #e5e9f0;
1424
- --accent-color: #5e81ac;
1425
- --accent-glow: rgba(94, 129, 172, 0.15);
1426
- --border-panel: #d8dee9;
1427
- --bg-tab-inactive: #e5e9f0;
1428
- --text-tab-inactive: #4c566a;
1429
- --text-tab-active: #2e3440;
1430
- --panel-card-bg: #e5e9f0;
1431
- --panel-card-border: #d8dee9;
1432
- --close-btn-color: #4c566a;
1433
- --close-btn-active-color: #5e81ac;
1434
- --scrollbar-thumb: rgba(94, 129, 172, 0.2);
1435
- --scrollbar-thumb-hover: rgba(94, 129, 172, 0.35);
1436
- --window-text: #2e3440;
1437
- --panel-text: #2e3440;
1438
- --panel-title-color: #5e81ac;
1426
+ --rdd-bg-workspace: #e5e9f0;
1427
+ --rdd-bg-panel: #eceff4;
1428
+ --rdd-bg-tab-bar: #e5e9f0;
1429
+ --rdd-window-bg: rgba(236, 239, 244, var(--rdd-window-opacity, 1.0));
1430
+ --rdd-window-border: #d8dee9;
1431
+ --rdd-window-header-bg: #e5e9f0;
1432
+ --rdd-accent-color: #5e81ac;
1433
+ --rdd-accent-glow: rgba(94, 129, 172, 0.15);
1434
+ --rdd-border-panel: #d8dee9;
1435
+ --rdd-bg-tab-inactive: #e5e9f0;
1436
+ --rdd-text-tab-inactive: #4c566a;
1437
+ --rdd-text-tab-active: #2e3440;
1438
+ --rdd-panel-card-bg: #e5e9f0;
1439
+ --rdd-panel-card-border: #d8dee9;
1440
+ --rdd-close-btn-color: #4c566a;
1441
+ --rdd-close-btn-active-color: #5e81ac;
1442
+ --rdd-scrollbar-thumb: rgba(94, 129, 172, 0.2);
1443
+ --rdd-scrollbar-thumb-hover: rgba(94, 129, 172, 0.35);
1444
+ --rdd-window-text: #2e3440;
1445
+ --rdd-panel-text: #2e3440;
1446
+ --rdd-panel-title-color: #5e81ac;
1439
1447
  --tab-icon-active: #5e81ac;
1440
1448
  --toolbar-btn-radio-active-bg: rgba(94, 129, 172, 0.12);
1441
1449
  --toolbar-btn-toggle-active-bg: rgba(94, 129, 172, 0.07);
@@ -1445,72 +1453,72 @@ body.resizing-col-active * {
1445
1453
  SKIN 6: Midnight Obsidian Preset (Vercel Style)
1446
1454
  -------------------------------------------------------------------------- */
1447
1455
  [data-workspace-skin="obsidian"] {
1448
- --bg-workspace: #000000;
1449
- --bg-panel: #0a0a0a;
1450
- --bg-tab-bar: #000000;
1451
- --window-bg: rgba(10, 10, 10, var(--window-opacity, 1.0));
1452
- --window-border: #1a1a1a;
1453
- --window-border-focused: #333333;
1454
- --window-header-bg: #000000;
1455
- --accent-color: #ffffff;
1456
- --accent-glow: rgba(255, 255, 255, 0.08);
1457
- --border-panel: #1a1a1a;
1458
- --bg-tab-inactive: #000000;
1459
- --text-tab-inactive: #737373;
1460
- --text-tab-active: #ffffff;
1461
- --panel-card-bg: #030303;
1462
- --panel-card-border: #1a1a1a;
1463
- --close-btn-color: #737373;
1464
- --close-btn-active-color: #ffffff;
1465
- --scrollbar-thumb: rgba(255, 255, 255, 0.15);
1466
- --scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
1467
- --window-text: #ffffff;
1468
- --panel-text: #ffffff;
1456
+ --rdd-bg-workspace: #000000;
1457
+ --rdd-bg-panel: #0a0a0a;
1458
+ --rdd-bg-tab-bar: #000000;
1459
+ --rdd-window-bg: rgba(10, 10, 10, var(--rdd-window-opacity, 1.0));
1460
+ --rdd-window-border: #1a1a1a;
1461
+ --rdd-window-border-focused: #333333;
1462
+ --rdd-window-header-bg: #000000;
1463
+ --rdd-accent-color: #ffffff;
1464
+ --rdd-accent-glow: rgba(255, 255, 255, 0.08);
1465
+ --rdd-border-panel: #1a1a1a;
1466
+ --rdd-bg-tab-inactive: #000000;
1467
+ --rdd-text-tab-inactive: #737373;
1468
+ --rdd-text-tab-active: #ffffff;
1469
+ --rdd-panel-card-bg: #030303;
1470
+ --rdd-panel-card-border: #1a1a1a;
1471
+ --rdd-close-btn-color: #737373;
1472
+ --rdd-close-btn-active-color: #ffffff;
1473
+ --rdd-scrollbar-thumb: rgba(255, 255, 255, 0.15);
1474
+ --rdd-scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
1475
+ --rdd-window-text: #ffffff;
1476
+ --rdd-panel-text: #ffffff;
1469
1477
  --tab-icon-active: #ffffff;
1470
1478
  --toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.10);
1471
1479
  --toolbar-btn-toggle-active-bg: rgba(255, 255, 255, 0.06);
1472
1480
  }
1473
1481
 
1474
1482
  [data-workspace-skin="obsidian"][data-color-scheme="light"] {
1475
- --bg-workspace: #ffffff;
1476
- --bg-panel: #fafafa;
1477
- --bg-tab-bar: #ffffff;
1478
- --window-bg: rgba(250, 250, 250, var(--window-opacity, 1.0));
1479
- --window-border: #e5e5e5;
1480
- --window-border-focused: #a3a3a3;
1481
- --window-header-bg: #ffffff;
1482
- --accent-color: #000000;
1483
- --accent-glow: rgba(0, 0, 0, 0.05);
1484
- --border-panel: #eaeaea;
1485
- --bg-tab-inactive: #ffffff;
1486
- --text-tab-inactive: #737373;
1487
- --text-tab-active: #000000;
1488
- --panel-card-bg: #ffffff;
1489
- --panel-card-border: #e5e5e5;
1490
- --close-btn-color: #737373;
1491
- --close-btn-active-color: #000000;
1492
- --scrollbar-thumb: rgba(0, 0, 0, 0.1);
1493
- --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
1494
- --window-text: #000000;
1495
- --panel-text: #000000;
1496
- --panel-title-color: #000000;
1483
+ --rdd-bg-workspace: #ffffff;
1484
+ --rdd-bg-panel: #fafafa;
1485
+ --rdd-bg-tab-bar: #ffffff;
1486
+ --rdd-window-bg: rgba(250, 250, 250, var(--rdd-window-opacity, 1.0));
1487
+ --rdd-window-border: #e5e5e5;
1488
+ --rdd-window-border-focused: #a3a3a3;
1489
+ --rdd-window-header-bg: #ffffff;
1490
+ --rdd-accent-color: #000000;
1491
+ --rdd-accent-glow: rgba(0, 0, 0, 0.05);
1492
+ --rdd-border-panel: #eaeaea;
1493
+ --rdd-bg-tab-inactive: #ffffff;
1494
+ --rdd-text-tab-inactive: #737373;
1495
+ --rdd-text-tab-active: #000000;
1496
+ --rdd-panel-card-bg: #ffffff;
1497
+ --rdd-panel-card-border: #e5e5e5;
1498
+ --rdd-close-btn-color: #737373;
1499
+ --rdd-close-btn-active-color: #000000;
1500
+ --rdd-scrollbar-thumb: rgba(0, 0, 0, 0.1);
1501
+ --rdd-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
1502
+ --rdd-window-text: #000000;
1503
+ --rdd-panel-text: #000000;
1504
+ --rdd-panel-title-color: #000000;
1497
1505
  --tab-icon-active: #000000;
1498
1506
  --toolbar-btn-radio-active-bg: rgba(0, 0, 0, 0.10);
1499
1507
  --toolbar-btn-toggle-active-bg: rgba(0, 0, 0, 0.06);
1500
1508
  }
1501
1509
 
1502
1510
  /* Obsidian custom borderless panel elevations */
1503
- [data-workspace-skin="obsidian"] .floating-window {
1511
+ [data-workspace-skin="obsidian"] .rdd-floating-window {
1504
1512
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.2) !important;
1505
1513
  border-radius: 6px;
1506
1514
  }
1507
- [data-workspace-skin="obsidian"] .floating-window.v2-window-focused {
1515
+ [data-workspace-skin="obsidian"] .rdd-floating-window.rdd-window-focused {
1508
1516
  box-shadow: 0 24px 50px rgba(255, 255, 255, 0.06), 0 0 1px rgba(255, 255, 255, 0.4) !important;
1509
1517
  }
1510
- [data-workspace-skin="obsidian"][data-color-scheme="light"] .floating-window {
1518
+ [data-workspace-skin="obsidian"][data-color-scheme="light"] .rdd-floating-window {
1511
1519
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1) !important;
1512
1520
  }
1513
- [data-workspace-skin="obsidian"][data-color-scheme="light"] .floating-window.v2-window-focused {
1521
+ [data-workspace-skin="obsidian"][data-color-scheme="light"] .rdd-floating-window.rdd-window-focused {
1514
1522
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 0 1px rgba(0, 0, 0, 0.2) !important;
1515
1523
  }
1516
1524
 
@@ -1518,55 +1526,55 @@ body.resizing-col-active * {
1518
1526
  SKIN 7: Tokyo Night Preset
1519
1527
  -------------------------------------------------------------------------- */
1520
1528
  [data-workspace-skin="tokyo"] {
1521
- --bg-workspace: #1a1b26;
1522
- --bg-panel: #24283c;
1523
- --bg-tab-bar: #1f2335;
1524
- --window-bg: rgba(36, 40, 60, var(--window-opacity, 1.0));
1525
- --window-border: #383e5a;
1526
- --window-border-focused: #7aa2f7;
1527
- --window-header-bg: #1f2335;
1528
- --accent-color: #bb9af7;
1529
- --accent-glow: rgba(187, 154, 247, 0.25);
1530
- --border-panel: #383e5a;
1531
- --bg-tab-inactive: #1f2335;
1532
- --text-tab-inactive: #787c99;
1533
- --text-tab-active: #c0caf5;
1534
- --panel-card-bg: #1a1b26;
1535
- --panel-card-border: #383e5a;
1536
- --close-btn-color: #787c99;
1537
- --close-btn-active-color: #7aa2f7;
1538
- --scrollbar-thumb: rgba(122, 162, 247, 0.25);
1539
- --scrollbar-thumb-hover: rgba(187, 154, 247, 0.4);
1540
- --window-text: #c0caf5;
1541
- --panel-text: #c0caf5;
1529
+ --rdd-bg-workspace: #1a1b26;
1530
+ --rdd-bg-panel: #24283c;
1531
+ --rdd-bg-tab-bar: #1f2335;
1532
+ --rdd-window-bg: rgba(36, 40, 60, var(--rdd-window-opacity, 1.0));
1533
+ --rdd-window-border: #383e5a;
1534
+ --rdd-window-border-focused: #7aa2f7;
1535
+ --rdd-window-header-bg: #1f2335;
1536
+ --rdd-accent-color: #bb9af7;
1537
+ --rdd-accent-glow: rgba(187, 154, 247, 0.25);
1538
+ --rdd-border-panel: #383e5a;
1539
+ --rdd-bg-tab-inactive: #1f2335;
1540
+ --rdd-text-tab-inactive: #787c99;
1541
+ --rdd-text-tab-active: #c0caf5;
1542
+ --rdd-panel-card-bg: #1a1b26;
1543
+ --rdd-panel-card-border: #383e5a;
1544
+ --rdd-close-btn-color: #787c99;
1545
+ --rdd-close-btn-active-color: #7aa2f7;
1546
+ --rdd-scrollbar-thumb: rgba(122, 162, 247, 0.25);
1547
+ --rdd-scrollbar-thumb-hover: rgba(187, 154, 247, 0.4);
1548
+ --rdd-window-text: #c0caf5;
1549
+ --rdd-panel-text: #c0caf5;
1542
1550
  --tab-icon-active: #7aa2f7;
1543
1551
  --toolbar-btn-radio-active-bg: rgba(122, 162, 247, 0.14);
1544
1552
  --toolbar-btn-toggle-active-bg: rgba(122, 162, 247, 0.08);
1545
1553
  }
1546
1554
 
1547
1555
  [data-workspace-skin="tokyo"][data-color-scheme="light"] {
1548
- --bg-workspace: #e1e2e7;
1549
- --bg-panel: #f2f4f8;
1550
- --bg-tab-bar: #d5d6db;
1551
- --window-bg: rgba(242, 244, 248, var(--window-opacity, 1.0));
1552
- --window-border: #b4b5b9;
1553
- --window-border-focused: #385af6;
1554
- --window-header-bg: #d5d6db;
1555
- --accent-color: #9854f1;
1556
- --accent-glow: rgba(152, 84, 241, 0.15);
1557
- --border-panel: #b4b5b9;
1558
- --bg-tab-inactive: #d5d6db;
1559
- --text-tab-inactive: #565a6e;
1560
- --text-tab-active: #383e56;
1561
- --panel-card-bg: #e1e2e7;
1562
- --panel-card-border: #b4b5b9;
1563
- --close-btn-color: #565a6e;
1564
- --close-btn-active-color: #385af6;
1565
- --scrollbar-thumb: rgba(56, 90, 246, 0.2);
1566
- --scrollbar-thumb-hover: rgba(152, 84, 241, 0.35);
1567
- --window-text: #383e56;
1568
- --panel-text: #383e56;
1569
- --panel-title-color: #9854f1;
1556
+ --rdd-bg-workspace: #e1e2e7;
1557
+ --rdd-bg-panel: #f2f4f8;
1558
+ --rdd-bg-tab-bar: #d5d6db;
1559
+ --rdd-window-bg: rgba(242, 244, 248, var(--rdd-window-opacity, 1.0));
1560
+ --rdd-window-border: #b4b5b9;
1561
+ --rdd-window-border-focused: #385af6;
1562
+ --rdd-window-header-bg: #d5d6db;
1563
+ --rdd-accent-color: #9854f1;
1564
+ --rdd-accent-glow: rgba(152, 84, 241, 0.15);
1565
+ --rdd-border-panel: #b4b5b9;
1566
+ --rdd-bg-tab-inactive: #d5d6db;
1567
+ --rdd-text-tab-inactive: #565a6e;
1568
+ --rdd-text-tab-active: #383e56;
1569
+ --rdd-panel-card-bg: #e1e2e7;
1570
+ --rdd-panel-card-border: #b4b5b9;
1571
+ --rdd-close-btn-color: #565a6e;
1572
+ --rdd-close-btn-active-color: #385af6;
1573
+ --rdd-scrollbar-thumb: rgba(56, 90, 246, 0.2);
1574
+ --rdd-scrollbar-thumb-hover: rgba(152, 84, 241, 0.35);
1575
+ --rdd-window-text: #383e56;
1576
+ --rdd-panel-text: #383e56;
1577
+ --rdd-panel-title-color: #9854f1;
1570
1578
  --tab-icon-active: #385af6;
1571
1579
  --toolbar-btn-radio-active-bg: rgba(56, 90, 246, 0.12);
1572
1580
  --toolbar-btn-toggle-active-bg: rgba(56, 90, 246, 0.07);
@@ -1585,7 +1593,7 @@ body.resizing-col-active * {
1585
1593
  --toolbar-btn-radio-active-bg: transparent;
1586
1594
  --toolbar-accent-bar-width: 2px;
1587
1595
  }
1588
- [data-workspace-skin="vscode"] .sidebar-tab-btn.active {
1596
+ [data-workspace-skin="vscode"] .rdd-sidebar-tab-btn.rdd-active {
1589
1597
  border-top: 1px solid transparent !important;
1590
1598
  border-bottom: 1px solid transparent !important;
1591
1599
  }
@@ -1598,11 +1606,11 @@ body.resizing-col-active * {
1598
1606
  --tab-accent-bar-width: 0px;
1599
1607
  --toolbar-accent-bar-width: 2px;
1600
1608
  }
1601
- [data-workspace-skin="chrome"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
1609
+ [data-workspace-skin="chrome"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
1602
1610
  border-radius: 0 10px 10px 0 !important;
1603
1611
  border-left: none !important;
1604
1612
  }
1605
- [data-workspace-skin="chrome"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
1613
+ [data-workspace-skin="chrome"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
1606
1614
  border-radius: 10px 0 0 10px !important;
1607
1615
  border-right: none !important;
1608
1616
  border-top: 1px solid var(--sidebar-border) !important;
@@ -1620,13 +1628,13 @@ body.resizing-col-active * {
1620
1628
  --toolbar-btn-radio-active-bg: rgba(96, 165, 250, 0.14);
1621
1629
  --toolbar-accent-bar-width: 0px;
1622
1630
  }
1623
- [data-workspace-skin="slate"] .sidebar-tab-btn.active {
1631
+ [data-workspace-skin="slate"] .rdd-sidebar-tab-btn.rdd-active {
1624
1632
  border-top: 1px solid transparent !important;
1625
1633
  border-bottom: 1px solid transparent !important;
1626
1634
  margin: 0 !important;
1627
1635
  }
1628
- [data-workspace-skin="slate"] .toolbar-strip .toolbar-btn-radio.active,
1629
- [data-workspace-skin="slate"] .toolbar-strip .toolbar-btn-group.active {
1636
+ [data-workspace-skin="slate"] .rdd-toolbar-strip .rdd-toolbar-btn-radio.rdd-active,
1637
+ [data-workspace-skin="slate"] .rdd-toolbar-strip .rdd-toolbar-btn-group.rdd-active {
1630
1638
  border-radius: 8px !important;
1631
1639
  }
1632
1640
  [data-workspace-skin="slate"][data-color-scheme="light"] {
@@ -1645,13 +1653,13 @@ body.resizing-col-active * {
1645
1653
  --toolbar-btn-radio-active-bg: transparent;
1646
1654
  --toolbar-accent-bar-width: 0px;
1647
1655
  }
1648
- [data-workspace-skin="nord"] .sidebar-tab-btn.active {
1656
+ [data-workspace-skin="nord"] .rdd-sidebar-tab-btn.rdd-active {
1649
1657
  border-top: 1px solid transparent !important;
1650
1658
  border-bottom: 1px solid transparent !important;
1651
1659
  border-left: none !important;
1652
1660
  border-right: none !important;
1653
1661
  }
1654
- [data-workspace-skin="nord"] .sidebar-tab-btn.active::after {
1662
+ [data-workspace-skin="nord"] .rdd-sidebar-tab-btn.rdd-active::after {
1655
1663
  content: '';
1656
1664
  position: absolute;
1657
1665
  bottom: 5px;
@@ -1662,19 +1670,19 @@ body.resizing-col-active * {
1662
1670
  border-radius: 1px;
1663
1671
  background-color: var(--tab-icon-active);
1664
1672
  }
1665
- [data-workspace-skin="nord"] .toolbar-strip .toolbar-btn-radio.active,
1666
- [data-workspace-skin="nord"] .toolbar-strip .toolbar-btn-group.active {
1673
+ [data-workspace-skin="nord"] .rdd-toolbar-strip .rdd-toolbar-btn-radio.rdd-active,
1674
+ [data-workspace-skin="nord"] .rdd-toolbar-strip .rdd-toolbar-btn-group.rdd-active {
1667
1675
  border-left: none !important;
1668
1676
  border-right: none !important;
1669
1677
  border-top: none !important;
1670
1678
  border-bottom: none !important;
1671
1679
  }
1672
- [data-workspace-skin="nord"] .toolbar-strip.left .toolbar-btn-radio.active::after,
1673
- [data-workspace-skin="nord"] .toolbar-strip.left .toolbar-btn-group.active::after,
1674
- [data-workspace-skin="nord"] .toolbar-strip.right .toolbar-btn-radio.active::after,
1675
- [data-workspace-skin="nord"] .toolbar-strip.right .toolbar-btn-group.active::after,
1676
- [data-workspace-skin="nord"] .toolbar-strip.top .toolbar-btn-radio.active::after,
1677
- [data-workspace-skin="nord"] .toolbar-strip.top .toolbar-btn-group.active::after {
1680
+ [data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-radio.rdd-active::after,
1681
+ [data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-group.rdd-active::after,
1682
+ [data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-radio.rdd-active::after,
1683
+ [data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-group.rdd-active::after,
1684
+ [data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-radio.rdd-active::after,
1685
+ [data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-group.rdd-active::after {
1678
1686
  content: '';
1679
1687
  position: absolute;
1680
1688
  bottom: 4px;
@@ -1685,8 +1693,8 @@ body.resizing-col-active * {
1685
1693
  border-radius: 1px;
1686
1694
  background-color: var(--tab-icon-active);
1687
1695
  }
1688
- [data-workspace-skin="nord"] .toolbar-strip.bottom .toolbar-btn-radio.active::after,
1689
- [data-workspace-skin="nord"] .toolbar-strip.bottom .toolbar-btn-group.active::after {
1696
+ [data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-radio.rdd-active::after,
1697
+ [data-workspace-skin="nord"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-group.rdd-active::after {
1690
1698
  content: '';
1691
1699
  position: absolute;
1692
1700
  top: 4px;
@@ -1711,26 +1719,26 @@ body.resizing-col-active * {
1711
1719
  --toolbar-btn-active-glow: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
1712
1720
  --toolbar-accent-bar-width: 2px;
1713
1721
  }
1714
- [data-workspace-skin="obsidian"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
1722
+ [data-workspace-skin="obsidian"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
1715
1723
  box-shadow: var(--tab-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
1716
1724
  }
1717
- [data-workspace-skin="obsidian"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
1725
+ [data-workspace-skin="obsidian"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
1718
1726
  box-shadow: var(--tab-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
1719
1727
  }
1720
- [data-workspace-skin="obsidian"] .toolbar-strip.left .toolbar-btn-radio.active,
1721
- [data-workspace-skin="obsidian"] .toolbar-strip.left .toolbar-btn-group.active {
1728
+ [data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-radio.rdd-active,
1729
+ [data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-group.rdd-active {
1722
1730
  box-shadow: var(--toolbar-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
1723
1731
  }
1724
- [data-workspace-skin="obsidian"] .toolbar-strip.right .toolbar-btn-radio.active,
1725
- [data-workspace-skin="obsidian"] .toolbar-strip.right .toolbar-btn-group.active {
1732
+ [data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-radio.rdd-active,
1733
+ [data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-group.rdd-active {
1726
1734
  box-shadow: var(--toolbar-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
1727
1735
  }
1728
- [data-workspace-skin="obsidian"] .toolbar-strip.top .toolbar-btn-radio.active,
1729
- [data-workspace-skin="obsidian"] .toolbar-strip.top .toolbar-btn-group.active {
1736
+ [data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-radio.rdd-active,
1737
+ [data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-group.rdd-active {
1730
1738
  box-shadow: var(--toolbar-btn-active-shadow), inset 0 -3px 8px rgba(255, 255, 255, 0.08) !important;
1731
1739
  }
1732
- [data-workspace-skin="obsidian"] .toolbar-strip.bottom .toolbar-btn-radio.active,
1733
- [data-workspace-skin="obsidian"] .toolbar-strip.bottom .toolbar-btn-group.active {
1740
+ [data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-radio.rdd-active,
1741
+ [data-workspace-skin="obsidian"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-group.rdd-active {
1734
1742
  box-shadow: var(--toolbar-btn-active-shadow), inset 0 3px 8px rgba(255, 255, 255, 0.08) !important;
1735
1743
  }
1736
1744
  [data-workspace-skin="obsidian"][data-color-scheme="light"] {
@@ -1753,26 +1761,26 @@ body.resizing-col-active * {
1753
1761
  --toolbar-btn-active-glow: drop-shadow(0 0 6px rgba(122, 162, 247, 0.65));
1754
1762
  --toolbar-accent-bar-width: 2px;
1755
1763
  }
1756
- [data-workspace-skin="tokyo"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
1764
+ [data-workspace-skin="tokyo"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
1757
1765
  box-shadow: var(--tab-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
1758
1766
  }
1759
- [data-workspace-skin="tokyo"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
1767
+ [data-workspace-skin="tokyo"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
1760
1768
  box-shadow: var(--tab-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
1761
1769
  }
1762
- [data-workspace-skin="tokyo"] .toolbar-strip.left .toolbar-btn-radio.active,
1763
- [data-workspace-skin="tokyo"] .toolbar-strip.left .toolbar-btn-group.active {
1770
+ [data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-radio.rdd-active,
1771
+ [data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-group.rdd-active {
1764
1772
  box-shadow: var(--toolbar-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
1765
1773
  }
1766
- [data-workspace-skin="tokyo"] .toolbar-strip.right .toolbar-btn-radio.active,
1767
- [data-workspace-skin="tokyo"] .toolbar-strip.right .toolbar-btn-group.active {
1774
+ [data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-radio.rdd-active,
1775
+ [data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-group.rdd-active {
1768
1776
  box-shadow: var(--toolbar-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
1769
1777
  }
1770
- [data-workspace-skin="tokyo"] .toolbar-strip.top .toolbar-btn-radio.active,
1771
- [data-workspace-skin="tokyo"] .toolbar-strip.top .toolbar-btn-group.active {
1778
+ [data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-radio.rdd-active,
1779
+ [data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-group.rdd-active {
1772
1780
  box-shadow: var(--toolbar-btn-active-shadow), inset 0 -3px 12px rgba(122, 162, 247, 0.18) !important;
1773
1781
  }
1774
- [data-workspace-skin="tokyo"] .toolbar-strip.bottom .toolbar-btn-radio.active,
1775
- [data-workspace-skin="tokyo"] .toolbar-strip.bottom .toolbar-btn-group.active {
1782
+ [data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-radio.rdd-active,
1783
+ [data-workspace-skin="tokyo"] .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-group.rdd-active {
1776
1784
  box-shadow: var(--toolbar-btn-active-shadow), inset 0 3px 12px rgba(122, 162, 247, 0.18) !important;
1777
1785
  }
1778
1786
 
@@ -1791,13 +1799,13 @@ body.resizing-col-active * {
1791
1799
  --toolbar-btn-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
1792
1800
  --toolbar-accent-bar-width: 0px;
1793
1801
  }
1794
- [data-workspace-skin="macos"] .sidebar-tab-btn.active {
1802
+ [data-workspace-skin="macos"] .rdd-sidebar-tab-btn.rdd-active {
1795
1803
  border-top: 1px solid transparent !important;
1796
1804
  border-bottom: 1px solid transparent !important;
1797
1805
  margin: 0 !important;
1798
1806
  }
1799
- [data-workspace-skin="macos"] .toolbar-strip .toolbar-btn-radio.active,
1800
- [data-workspace-skin="macos"] .toolbar-strip .toolbar-btn-group.active {
1807
+ [data-workspace-skin="macos"] .rdd-toolbar-strip .rdd-toolbar-btn-radio.rdd-active,
1808
+ [data-workspace-skin="macos"] .rdd-toolbar-strip .rdd-toolbar-btn-group.rdd-active {
1801
1809
  border-radius: 10px !important;
1802
1810
  }
1803
1811
  [data-workspace-skin="macos"][data-color-scheme="light"] {
@@ -1808,30 +1816,30 @@ body.resizing-col-active * {
1808
1816
  }
1809
1817
 
1810
1818
  /* --- Modern Sidebar and Tabs UI Theme Customizations --- */
1811
- .sidebar-content-drawer {
1819
+ .rdd-sidebar-content-drawer {
1812
1820
  background-color: var(--sidebar-bg) !important;
1813
1821
  color: var(--sidebar-text-title) !important;
1814
1822
  height: 100%;
1815
1823
  }
1816
1824
 
1817
1825
  /* Suppress all drawer transitions during pointer-drag resize */
1818
- .sidebar-resizing .sidebar-content-drawer {
1826
+ .rdd-sidebar-resizing .rdd-sidebar-content-drawer {
1819
1827
  transition: none !important;
1820
1828
  }
1821
1829
 
1822
1830
  /* Position-specific drawer border and shadow alignment */
1823
- .sidebar-content-drawer.left {
1831
+ .rdd-sidebar-content-drawer.rdd-left {
1824
1832
  border-right: 1px solid var(--sidebar-border) !important;
1825
1833
  border-left: none !important;
1826
1834
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
1827
1835
  }
1828
- .sidebar-content-drawer.right {
1836
+ .rdd-sidebar-content-drawer.rdd-right {
1829
1837
  border-left: 1px solid var(--sidebar-border) !important;
1830
1838
  border-right: none !important;
1831
1839
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
1832
1840
  }
1833
1841
 
1834
- .sidebar-tabs-strip {
1842
+ .rdd-sidebar-tabs-strip {
1835
1843
  background-color: var(--sidebar-tabs-bg) !important;
1836
1844
  display: flex;
1837
1845
  flex-direction: column;
@@ -1844,17 +1852,17 @@ body.resizing-col-active * {
1844
1852
  }
1845
1853
 
1846
1854
  /* Position-specific tab strip border alignment */
1847
- .sidebar-tabs-strip.left {
1855
+ .rdd-sidebar-tabs-strip.rdd-left {
1848
1856
  border-right: 1px solid var(--sidebar-border) !important;
1849
1857
  border-left: none !important;
1850
1858
  }
1851
- .sidebar-tabs-strip.right {
1859
+ .rdd-sidebar-tabs-strip.rdd-right {
1852
1860
  border-left: 1px solid var(--sidebar-border) !important;
1853
1861
  border-right: none !important;
1854
1862
  }
1855
1863
 
1856
1864
  /* Sidebar Header */
1857
- .sidebar-header-title {
1865
+ .rdd-sidebar-header-title {
1858
1866
  font-family: monospace;
1859
1867
  font-weight: 700;
1860
1868
  letter-spacing: 0.05em;
@@ -1864,7 +1872,7 @@ body.resizing-col-active * {
1864
1872
  }
1865
1873
 
1866
1874
  /* Tab Button with real tabbed integration */
1867
- .sidebar-tab-btn {
1875
+ .rdd-sidebar-tab-btn {
1868
1876
  width: 44px;
1869
1877
  height: 44px;
1870
1878
  display: flex;
@@ -1881,13 +1889,13 @@ body.resizing-col-active * {
1881
1889
  }
1882
1890
 
1883
1891
  /* Micro-interactions & hover tactile feedback for inactive buttons */
1884
- .sidebar-tab-btn:not(.active):hover {
1892
+ .rdd-sidebar-tab-btn:not(.rdd-active):hover {
1885
1893
  color: var(--sidebar-text-title);
1886
1894
  background-color: var(--sidebar-btn-hover-bg) !important;
1887
1895
  transform: scale(1.05);
1888
1896
  }
1889
1897
 
1890
- .sidebar-tab-btn.active {
1898
+ .rdd-sidebar-tab-btn.rdd-active {
1891
1899
  width: var(--tab-btn-active-width) !important;
1892
1900
  color: var(--tab-icon-active) !important;
1893
1901
  background-color: var(--tab-btn-active-bg) !important;
@@ -1901,13 +1909,13 @@ body.resizing-col-active * {
1901
1909
  }
1902
1910
 
1903
1911
  /* Position-specific active button border & margin alignments */
1904
- .sidebar-tabs-strip.left .sidebar-tab-btn.active {
1912
+ .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
1905
1913
  border-left: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
1906
1914
  border-right: none !important;
1907
1915
  margin-right: -2px !important;
1908
1916
  margin-left: 0 !important;
1909
1917
  }
1910
- .sidebar-tabs-strip.right .sidebar-tab-btn.active {
1918
+ .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
1911
1919
  border-left: none !important;
1912
1920
  border-right: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
1913
1921
  margin-left: -2px !important;
@@ -1931,7 +1939,7 @@ body.resizing-col-active * {
1931
1939
  background-color: var(--sidebar-card-hover-bg) !important;
1932
1940
  }
1933
1941
 
1934
- .sidebar-window-card.active {
1942
+ .sidebar-window-card.rdd-active {
1935
1943
  background-color: var(--sidebar-card-active-bg) !important;
1936
1944
  border-color: var(--sidebar-card-active-border) !important;
1937
1945
  box-shadow: 0 0 10px var(--sidebar-card-active-shadow);
@@ -1979,10 +1987,18 @@ body.resizing-col-active * {
1979
1987
  }
1980
1988
 
1981
1989
 
1982
- /* Disable transitions/animations when animations are disabled */
1983
- html:not(.enable-animations) *,
1984
- html:not(.enable-animations) *::before,
1985
- html:not(.enable-animations) *::after {
1990
+ /* Animations are on by default. `animations={false}` on <WindowManager /> adds
1991
+ `rdd-no-animations` to the workspace root and mirrors it onto <html> (so
1992
+ portaled elements — ContextMenu, Toast, Toolbar's flyout — are covered too).
1993
+ Scoped to only the library's own elements ([class*="rdd-"]) via the new
1994
+ unified prefix — this never touches the consumer's own transitions/animations
1995
+ elsewhere on the page, in either state. */
1996
+ .rdd-no-animations [class*="rdd-"],
1997
+ .rdd-no-animations [class*="rdd-"]::before,
1998
+ .rdd-no-animations [class*="rdd-"]::after,
1999
+ html.rdd-no-animations [class*="rdd-"],
2000
+ html.rdd-no-animations [class*="rdd-"]::before,
2001
+ html.rdd-no-animations [class*="rdd-"]::after {
1986
2002
  transition: none !important;
1987
2003
  animation: none !important;
1988
2004
  }
@@ -2000,24 +2016,24 @@ html:not(.enable-animations) *::after {
2000
2016
  }
2001
2017
 
2002
2018
  /* Stacked Modal Classes */
2003
- .v2-modal-overlay {
2019
+ .rdd-modal-overlay {
2004
2020
  position: fixed;
2005
2021
  inset: 0;
2006
2022
  display: flex;
2007
2023
  align-items: center;
2008
2024
  justify-content: center;
2009
- z-index: 10000;
2025
+ z-index: calc(var(--rdd-z-base, 1000) + 9000);
2010
2026
  animation: fadeIn 0.18s ease-out;
2011
2027
  }
2012
2028
 
2013
- .v2-modal-curtain {
2029
+ .rdd-modal-curtain {
2014
2030
  position: absolute;
2015
2031
  inset: 0;
2016
2032
  background-color: rgba(9, 11, 17, 0.65);
2017
2033
  backdrop-filter: blur(6px);
2018
2034
  }
2019
2035
 
2020
- .v2-modal-window {
2036
+ .rdd-modal-window {
2021
2037
  position: relative;
2022
2038
  background: rgba(20, 23, 34, 0.95);
2023
2039
  border: 1px solid rgba(255, 255, 255, 0.08);
@@ -2025,14 +2041,14 @@ html:not(.enable-animations) *::after {
2025
2041
  border-radius: 12px;
2026
2042
  display: flex;
2027
2043
  flex-direction: column;
2028
- color: var(--text-primary);
2044
+ color: var(--rdd-text-primary);
2029
2045
  max-width: 90%;
2030
2046
  max-height: 90vh;
2031
2047
  animation: scaleUp 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
2032
2048
  overflow: hidden;
2033
2049
  }
2034
2050
 
2035
- .v2-modal-header {
2051
+ .rdd-modal-header {
2036
2052
  display: flex;
2037
2053
  align-items: center;
2038
2054
  padding: 12px 20px;
@@ -2040,24 +2056,24 @@ html:not(.enable-animations) *::after {
2040
2056
  background-color: rgba(0, 0, 0, 0.15);
2041
2057
  }
2042
2058
 
2043
- .v2-modal-icon {
2059
+ .rdd-modal-icon {
2044
2060
  margin-right: 10px;
2045
2061
  font-size: 1.1rem;
2046
2062
  display: flex;
2047
2063
  align-items: center;
2048
2064
  }
2049
2065
 
2050
- .v2-modal-title {
2066
+ .rdd-modal-title {
2051
2067
  font-size: 1rem;
2052
2068
  font-weight: 600;
2053
2069
  margin: 0;
2054
2070
  flex-grow: 1;
2055
2071
  }
2056
2072
 
2057
- .v2-modal-close-button {
2073
+ .rdd-modal-close-button {
2058
2074
  background: transparent;
2059
2075
  border: none;
2060
- color: var(--text-secondary);
2076
+ color: var(--rdd-text-secondary);
2061
2077
  cursor: pointer;
2062
2078
  padding: 4px;
2063
2079
  display: flex;
@@ -2067,38 +2083,38 @@ html:not(.enable-animations) *::after {
2067
2083
  transition: all 0.15s ease;
2068
2084
  }
2069
2085
 
2070
- .v2-modal-close-button:hover {
2086
+ .rdd-modal-close-button:hover {
2071
2087
  background-color: rgba(255, 255, 255, 0.08);
2072
2088
  color: #fff;
2073
2089
  }
2074
2090
 
2075
- .v2-modal-body {
2091
+ .rdd-modal-body {
2076
2092
  padding: 10px;
2077
2093
  overflow-y: auto;
2078
2094
  max-height: calc(90vh - 70px);
2079
2095
  }
2080
2096
 
2081
2097
  /* Modal Sizes */
2082
- .v2-modal-size-small {
2098
+ .rdd-modal-size-small {
2083
2099
  width: 420px;
2084
2100
  }
2085
- .v2-modal-size-medium {
2101
+ .rdd-modal-size-medium {
2086
2102
  width: 560px;
2087
2103
  }
2088
- .v2-modal-size-large {
2104
+ .rdd-modal-size-large {
2089
2105
  width: 800px;
2090
2106
  }
2091
- .v2-modal-size-fullscreen {
2107
+ .rdd-modal-size-fullscreen {
2092
2108
  width: 98vw;
2093
2109
  height: 96vh;
2094
2110
  }
2095
- .v2-modal-size-auto {
2111
+ .rdd-modal-size-auto {
2096
2112
  width: auto;
2097
2113
  min-width: 300px;
2098
2114
  }
2099
2115
 
2100
2116
  /* Side Drawer Panels */
2101
- .v2-side-panel {
2117
+ .rdd-side-panel {
2102
2118
  position: absolute;
2103
2119
  top: 0;
2104
2120
  bottom: 0;
@@ -2107,32 +2123,32 @@ html:not(.enable-animations) *::after {
2107
2123
  backdrop-filter: blur(20px) saturate(180%);
2108
2124
  -webkit-backdrop-filter: blur(20px) saturate(180%);
2109
2125
  border-right: 1px solid rgba(255, 255, 255, 0.08);
2110
- z-index: 9000;
2126
+ z-index: calc(var(--rdd-z-base, 1000) + 8000);
2111
2127
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
2112
2128
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
2113
2129
  display: flex;
2114
2130
  flex-direction: column;
2115
2131
  }
2116
2132
 
2117
- .v2-side-panel-right {
2133
+ .rdd-side-panel-right {
2118
2134
  right: 0;
2119
2135
  border-right: none;
2120
2136
  border-left: 1px solid rgba(255, 255, 255, 0.08);
2121
2137
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
2122
2138
  }
2123
2139
 
2124
- .v2-side-panel-left {
2140
+ .rdd-side-panel-left {
2125
2141
  left: 0;
2126
2142
  }
2127
2143
 
2128
- .v2-side-panel-window {
2144
+ .rdd-side-panel-window {
2129
2145
  display: flex;
2130
2146
  flex-direction: column;
2131
2147
  height: 100%;
2132
2148
  width: 100%;
2133
2149
  }
2134
2150
 
2135
- .v2-side-panel-header {
2151
+ .rdd-side-panel-header {
2136
2152
  display: flex;
2137
2153
  align-items: center;
2138
2154
  padding: 12px 20px;
@@ -2141,25 +2157,25 @@ html:not(.enable-animations) *::after {
2141
2157
  min-height: 44px;
2142
2158
  }
2143
2159
 
2144
- .v2-side-panel-icon {
2160
+ .rdd-side-panel-icon {
2145
2161
  margin-right: 10px;
2146
2162
  font-size: 1.1rem;
2147
2163
  display: flex;
2148
2164
  align-items: center;
2149
2165
  }
2150
2166
 
2151
- .v2-side-panel-title {
2167
+ .rdd-side-panel-title {
2152
2168
  font-size: 0.95rem;
2153
2169
  font-weight: 600;
2154
2170
  margin: 0;
2155
2171
  flex-grow: 1;
2156
- color: var(--text-primary);
2172
+ color: var(--rdd-text-primary);
2157
2173
  }
2158
2174
 
2159
- .v2-side-panel-close-button {
2175
+ .rdd-side-panel-close-button {
2160
2176
  background: transparent;
2161
2177
  border: none;
2162
- color: var(--text-secondary);
2178
+ color: var(--rdd-text-secondary);
2163
2179
  cursor: pointer;
2164
2180
  padding: 4px;
2165
2181
  display: flex;
@@ -2169,22 +2185,22 @@ html:not(.enable-animations) *::after {
2169
2185
  transition: all 0.15s ease;
2170
2186
  }
2171
2187
 
2172
- .v2-side-panel-close-button:hover {
2188
+ .rdd-side-panel-close-button:hover {
2173
2189
  background-color: rgba(255, 255, 255, 0.08);
2174
2190
  color: #fff;
2175
2191
  }
2176
2192
 
2177
- .v2-side-panel-body {
2193
+ .rdd-side-panel-body {
2178
2194
  flex-grow: 1;
2179
2195
  overflow-y: auto;
2180
2196
  padding: 10px;
2181
2197
  }
2182
2198
 
2183
- .v2-side-panel-left.v2-side-panel-visible {
2199
+ .rdd-side-panel-left.rdd-side-panel-visible {
2184
2200
  animation: slideInLeft 0.25s cubic-bezier(0.16, 1, 0.3, 1);
2185
2201
  }
2186
2202
 
2187
- .v2-side-panel-right.v2-side-panel-visible {
2203
+ .rdd-side-panel-right.rdd-side-panel-visible {
2188
2204
  animation: slideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
2189
2205
  }
2190
2206
 
@@ -2199,48 +2215,48 @@ html:not(.enable-animations) *::after {
2199
2215
  }
2200
2216
 
2201
2217
  /* Outer Workspace Edge Drop Zones */
2202
- .workspace-edge-trigger {
2218
+ .rdd-workspace-edge-trigger {
2203
2219
  position: absolute;
2204
- z-index: 9999;
2220
+ z-index: calc(var(--rdd-z-base, 1000) + 8999);
2205
2221
  background-color: rgba(0, 123, 255, 0.01);
2206
2222
  transition: background-color 0.2s;
2207
2223
  }
2208
2224
 
2209
- .workspace-edge-trigger:hover {
2225
+ .rdd-workspace-edge-trigger:hover {
2210
2226
  background-color: rgba(0, 123, 255, 0.12);
2211
2227
  }
2212
2228
 
2213
- .edge-trigger-left {
2229
+ .rdd-edge-trigger-left {
2214
2230
  left: 0;
2215
2231
  top: 0;
2216
2232
  bottom: 0;
2217
2233
  width: 24px;
2218
2234
  }
2219
2235
 
2220
- .edge-trigger-right {
2236
+ .rdd-edge-trigger-right {
2221
2237
  right: 0;
2222
2238
  top: 0;
2223
2239
  bottom: 0;
2224
2240
  width: 24px;
2225
2241
  }
2226
2242
 
2227
- .edge-trigger-top {
2243
+ .rdd-edge-trigger-top {
2228
2244
  top: 0;
2229
2245
  left: 24px;
2230
2246
  right: 24px;
2231
2247
  height: 10px; /* thin strip — keeps clear of tab bar (38px tall) */
2232
2248
  }
2233
2249
 
2234
- .edge-trigger-bottom {
2250
+ .rdd-edge-trigger-bottom {
2235
2251
  bottom: 0;
2236
2252
  left: 24px;
2237
2253
  right: 24px;
2238
2254
  height: 24px;
2239
2255
  }
2240
2256
 
2241
- .workspace-edge-preview {
2257
+ .rdd-workspace-edge-preview {
2242
2258
  position: absolute;
2243
- z-index: 9998;
2259
+ z-index: calc(var(--rdd-z-base, 1000) + 8998);
2244
2260
  background-color: rgba(0, 123, 255, 0.2);
2245
2261
  border: 2px dashed #007bff;
2246
2262
  pointer-events: none;
@@ -2248,39 +2264,39 @@ html:not(.enable-animations) *::after {
2248
2264
  }
2249
2265
 
2250
2266
  /* Workspace corner anchor drop zones */
2251
- .fw-corner-zone {
2267
+ .rdd-corner-zone {
2252
2268
  position: absolute;
2253
2269
  width: 80px;
2254
2270
  height: 80px;
2255
- border: 2px dashed var(--accent-color, #38bdf8);
2271
+ border: 2px dashed var(--rdd-accent-color, #38bdf8);
2256
2272
  border-radius: 8px;
2257
2273
  background: rgba(56, 189, 248, 0.06);
2258
2274
  pointer-events: auto;
2259
- z-index: 10000;
2275
+ z-index: calc(var(--rdd-z-base, 1000) + 9000);
2260
2276
  opacity: 0.55;
2261
2277
  transition: opacity 0.15s ease, background 0.15s ease, border-style 0.15s ease;
2262
2278
  }
2263
- .fw-corner-zone--top-left { top: 0; left: 0; }
2264
- .fw-corner-zone--top-right { top: 0; right: 0; }
2265
- .fw-corner-zone--bottom-left { bottom: 0; left: 0; }
2266
- .fw-corner-zone--bottom-right { bottom: 0; right: 0; }
2267
- .fw-corner-zone--hovered {
2279
+ .rdd-corner-zone--top-left { top: 0; left: 0; }
2280
+ .rdd-corner-zone--top-right { top: 0; right: 0; }
2281
+ .rdd-corner-zone--bottom-left { bottom: 0; left: 0; }
2282
+ .rdd-corner-zone--bottom-right { bottom: 0; right: 0; }
2283
+ .rdd-corner-zone--hovered {
2268
2284
  opacity: 1;
2269
2285
  background: rgba(56, 189, 248, 0.18);
2270
2286
  border-style: solid;
2271
2287
  }
2272
2288
 
2273
- [dir="rtl"] .fw-corner-zone--top-right { right: auto; left: 0; }
2274
- [dir="rtl"] .fw-corner-zone--top-left { left: auto; right: 0; }
2275
- [dir="rtl"] .fw-corner-zone--bottom-right { right: auto; left: 0; }
2276
- [dir="rtl"] .fw-corner-zone--bottom-left { left: auto; right: 0; }
2289
+ [dir="rtl"] .rdd-corner-zone--top-right { right: auto; left: 0; }
2290
+ [dir="rtl"] .rdd-corner-zone--top-left { left: auto; right: 0; }
2291
+ [dir="rtl"] .rdd-corner-zone--bottom-right { right: auto; left: 0; }
2292
+ [dir="rtl"] .rdd-corner-zone--bottom-left { left: auto; right: 0; }
2277
2293
 
2278
2294
 
2279
2295
  /*
2280
2296
  * Counteract scale for canvas and its siblings inside Luciad containers.
2281
2297
  *
2282
2298
  * When rendering a panel's mini hover-preview in the taskbar, the parent container
2283
- * is scaled down using CSS transform scale(var(--preview-scale)). For standard HTML UI,
2299
+ * is scaled down using CSS transform scale(var(--rdd-preview-scale)). For standard HTML UI,
2284
2300
  * this works natively. However, for web maps (like WebGL / canvas-based engines such as
2285
2301
  * LuciadRIA), scaling down the browser container causes the rendering canvas and its absolute
2286
2302
  * siblings (e.g. HTML overlays, labels, shapes) to blur or offset.
@@ -2289,49 +2305,49 @@ html:not(.enable-animations) *::after {
2289
2305
  * of the canvas and its siblings by the scale factor. This forces the map engine to render
2290
2306
  * at full resolution inside the preview container without positioning glitches.
2291
2307
  */
2292
- .taskbar-item-preview-host .luciad canvas,
2293
- .taskbar-item-preview-host .luciad canvas ~ * {
2294
- transform: scale(calc(1 / var(--preview-scale, 1))) !important;
2308
+ .rdd-taskbar-item-preview-host .luciad canvas,
2309
+ .rdd-taskbar-item-preview-host .luciad canvas ~ * {
2310
+ transform: scale(calc(1 / var(--rdd-preview-scale, 1))) !important;
2295
2311
  transform-origin: top left;
2296
- width: calc(100% * var(--preview-scale, 1)) !important;
2297
- height: calc(100% * var(--preview-scale, 1)) !important;
2312
+ width: calc(100% * var(--rdd-preview-scale, 1)) !important;
2313
+ height: calc(100% * var(--rdd-preview-scale, 1)) !important;
2298
2314
  }
2299
2315
 
2300
2316
  /* ==========================================
2301
2317
  RTL (Right-to-Left) Support
2302
2318
  ========================================== */
2303
2319
 
2304
- [dir="rtl"] .workspace-tab {
2320
+ [dir="rtl"] .rdd-workspace-tab {
2305
2321
  border-right: none !important;
2306
- border-left: 1px solid var(--border-panel) !important;
2322
+ border-left: 1px solid var(--rdd-border-panel) !important;
2307
2323
  padding: 0 14px 0 6px !important;
2308
2324
  }
2309
2325
 
2310
- [dir="rtl"] .workspace-tab.drag-hover-left {
2311
- box-shadow: 3px 0 0 0 var(--accent-color, #38bdf8),
2312
- 10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
2326
+ [dir="rtl"] .rdd-workspace-tab.rdd-drag-hover-left {
2327
+ box-shadow: 3px 0 0 0 var(--rdd-accent-color, #38bdf8),
2328
+ 10px 0 10px -2px var(--rdd-accent-glow, rgba(56,189,248,0.35));
2313
2329
  }
2314
- [dir="rtl"] .workspace-tab.drag-hover-right {
2315
- box-shadow: -3px 0 0 0 var(--accent-color, #38bdf8),
2316
- -10px 0 10px -2px var(--accent-glow, rgba(56,189,248,0.35));
2330
+ [dir="rtl"] .rdd-workspace-tab.rdd-drag-hover-right {
2331
+ box-shadow: -3px 0 0 0 var(--rdd-accent-color, #38bdf8),
2332
+ -10px 0 10px -2px var(--rdd-accent-glow, rgba(56,189,248,0.35));
2317
2333
  }
2318
2334
 
2319
- [dir="rtl"] .workspace-tab > .text-truncate {
2335
+ [dir="rtl"] .rdd-workspace-tab > .rdd-text-truncate {
2320
2336
  margin-right: 0 !important;
2321
2337
  margin-left: 12px !important;
2322
2338
  }
2323
2339
 
2324
- [dir="rtl"] .workspace-tab-icon {
2340
+ [dir="rtl"] .rdd-workspace-tab-icon {
2325
2341
  margin-right: 0 !important;
2326
2342
  margin-left: 6px !important;
2327
2343
  }
2328
2344
 
2329
- [dir="rtl"] .tab-header-actions {
2345
+ [dir="rtl"] .rdd-tab-header-actions {
2330
2346
  margin-left: 0 !important;
2331
2347
  margin-right: auto !important;
2332
2348
  }
2333
2349
 
2334
- [dir="rtl"] .close-tab-x {
2350
+ [dir="rtl"] .rdd-close-tab-x {
2335
2351
  margin-left: 0 !important;
2336
2352
  margin-right: auto !important;
2337
2353
  }
@@ -2339,36 +2355,36 @@ html:not(.enable-animations) *::after {
2339
2355
  /* Floating window title bar RTL — inherited direction:rtl on the titlebar flex container
2340
2356
  moves buttons (last in DOM) to the LEFT and title (first in DOM) to the RIGHT.
2341
2357
  No explicit row-reverse needed; only prevent the button group from reordering internally. */
2342
- [dir="rtl"] .fw-titlebar-actions { flex-direction: row; }
2358
+ [dir="rtl"] .rdd-titlebar-actions { flex-direction: row; }
2343
2359
 
2344
2360
  /* Side Panels transitions slide-in direction */
2345
- [dir="rtl"] .v2-side-panel-left {
2361
+ [dir="rtl"] .rdd-side-panel-left {
2346
2362
  left: auto !important;
2347
2363
  right: 0 !important;
2348
2364
  transform: translateX(100%) !important;
2349
2365
  }
2350
- [dir="rtl"] .v2-side-panel-left.v2-side-panel-visible {
2366
+ [dir="rtl"] .rdd-side-panel-left.rdd-side-panel-visible {
2351
2367
  transform: translateX(0) !important;
2352
2368
  border-right: none !important;
2353
- border-left: 1px solid var(--border-panel, #3c3c3c) !important;
2369
+ border-left: 1px solid var(--rdd-border-panel, #3c3c3c) !important;
2354
2370
  }
2355
2371
 
2356
- [dir="rtl"] .v2-side-panel-right {
2372
+ [dir="rtl"] .rdd-side-panel-right {
2357
2373
  right: auto !important;
2358
2374
  left: 0 !important;
2359
2375
  transform: translateX(-100%) !important;
2360
2376
  }
2361
- [dir="rtl"] .v2-side-panel-right.v2-side-panel-visible {
2377
+ [dir="rtl"] .rdd-side-panel-right.rdd-side-panel-visible {
2362
2378
  transform: translateX(0) !important;
2363
2379
  border-left: none !important;
2364
- border-right: 1px solid var(--border-panel, #3c3c3c) !important;
2380
+ border-right: 1px solid var(--rdd-border-panel, #3c3c3c) !important;
2365
2381
  }
2366
2382
 
2367
2383
  /* Minimize Taskbar adjustments */
2368
- [dir="rtl"] .taskbar-footer-container {
2384
+ [dir="rtl"] .rdd-taskbar-footer-container {
2369
2385
  flex-direction: row-reverse !important;
2370
2386
  }
2371
- [dir="rtl"] .taskbar-item-icon {
2387
+ [dir="rtl"] .rdd-taskbar-item-icon {
2372
2388
  margin-right: 0 !important;
2373
2389
  margin-left: 4px !important;
2374
2390
  }
@@ -2377,22 +2393,22 @@ html:not(.enable-animations) *::after {
2377
2393
  Dots must stay on the LEFT in both LTR and RTL (real macOS behavior).
2378
2394
  In RTL context flex-direction:row flows items right-to-left, so
2379
2395
  DOM [title][buttons] → title at RIGHT, buttons at LEFT. */
2380
- [dir="rtl"] [data-workspace-skin="macos"] .floating-window-titlebar {
2396
+ [dir="rtl"] [data-workspace-skin="macos"] .rdd-floating-window-titlebar {
2381
2397
  flex-direction: row !important;
2382
2398
  }
2383
2399
  /* Title: pack icon+text toward the visual right (flex-start = right in RTL) */
2384
- [dir="rtl"] [data-workspace-skin="macos"] .floating-window-titlebar .floating-window-title {
2400
+ [dir="rtl"] [data-workspace-skin="macos"] .rdd-floating-window-titlebar .rdd-floating-window-title {
2385
2401
  justify-content: flex-start !important;
2386
2402
  }
2387
2403
  /* Button group: keep dots in correct visual order (Red → Yellow → Green, close at far left).
2388
2404
  direction:rtl (inherited) + flex-direction:row = right-to-left → DOM first item (more) at right,
2389
2405
  last item (close) at left. */
2390
- [dir="rtl"] [data-workspace-skin="macos"] .floating-window-titlebar .fw-titlebar-actions {
2406
+ [dir="rtl"] [data-workspace-skin="macos"] .rdd-floating-window-titlebar .rdd-titlebar-actions {
2391
2407
  flex-direction: row !important;
2392
2408
  }
2393
2409
 
2394
2410
  /* Mirror close-button margins for macOS tabs under RTL */
2395
- [dir="rtl"][data-workspace-skin="macos"] .close-tab-x {
2411
+ [dir="rtl"][data-workspace-skin="macos"] .rdd-close-tab-x {
2396
2412
  margin-left: 0 !important;
2397
2413
  margin-right: 2px !important;
2398
2414
  }
@@ -2402,60 +2418,60 @@ html:not(.enable-animations) *::after {
2402
2418
  .left strips move visually to the RIGHT and .right strips to the LEFT.
2403
2419
  All physical border-left/border-right and box-shadow directions must swap. */
2404
2420
 
2405
- [dir="rtl"] .sidebar-tabs-strip.left {
2421
+ [dir="rtl"] .rdd-sidebar-tabs-strip.rdd-left {
2406
2422
  border-left: 1px solid var(--sidebar-border) !important;
2407
2423
  border-right: none !important;
2408
2424
  }
2409
- [dir="rtl"] .sidebar-tabs-strip.right {
2425
+ [dir="rtl"] .rdd-sidebar-tabs-strip.rdd-right {
2410
2426
  border-right: 1px solid var(--sidebar-border) !important;
2411
2427
  border-left: none !important;
2412
2428
  }
2413
2429
 
2414
- [dir="rtl"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
2430
+ [dir="rtl"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
2415
2431
  border-left: none !important;
2416
2432
  border-right: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
2417
2433
  margin-left: -2px !important;
2418
2434
  margin-right: 0 !important;
2419
2435
  }
2420
- [dir="rtl"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
2436
+ [dir="rtl"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
2421
2437
  border-right: none !important;
2422
2438
  border-left: var(--tab-accent-bar-width) solid var(--tab-icon-active) !important;
2423
2439
  margin-right: -2px !important;
2424
2440
  margin-left: 0 !important;
2425
2441
  }
2426
2442
 
2427
- [dir="rtl"] .sidebar-content-drawer.left {
2443
+ [dir="rtl"] .rdd-sidebar-content-drawer.rdd-left {
2428
2444
  border-left: 1px solid var(--sidebar-border) !important;
2429
2445
  border-right: none !important;
2430
2446
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
2431
2447
  }
2432
- [dir="rtl"] .sidebar-content-drawer.right {
2448
+ [dir="rtl"] .rdd-sidebar-content-drawer.rdd-right {
2433
2449
  border-right: 1px solid var(--sidebar-border) !important;
2434
2450
  border-left: none !important;
2435
2451
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
2436
2452
  }
2437
2453
 
2438
2454
  /* obsidian & tokyo — flip the inset glow X offset sign */
2439
- [dir="rtl"] [data-workspace-skin="obsidian"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
2455
+ [dir="rtl"] [data-workspace-skin="obsidian"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
2440
2456
  box-shadow: var(--tab-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
2441
2457
  }
2442
- [dir="rtl"] [data-workspace-skin="obsidian"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
2458
+ [dir="rtl"] [data-workspace-skin="obsidian"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
2443
2459
  box-shadow: var(--tab-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
2444
2460
  }
2445
- [dir="rtl"] [data-workspace-skin="tokyo"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
2461
+ [dir="rtl"] [data-workspace-skin="tokyo"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
2446
2462
  box-shadow: var(--tab-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
2447
2463
  }
2448
- [dir="rtl"] [data-workspace-skin="tokyo"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
2464
+ [dir="rtl"] [data-workspace-skin="tokyo"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
2449
2465
  box-shadow: var(--tab-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
2450
2466
  }
2451
2467
 
2452
2468
  /* chrome — swap the capsule border-radius when strips change sides */
2453
- [dir="rtl"] [data-workspace-skin="chrome"] .sidebar-tabs-strip.left .sidebar-tab-btn.active {
2469
+ [dir="rtl"] [data-workspace-skin="chrome"] .rdd-sidebar-tabs-strip.rdd-left .rdd-sidebar-tab-btn.rdd-active {
2454
2470
  border-radius: 10px 0 0 10px !important;
2455
2471
  margin-left: 0 !important;
2456
2472
  margin-right: 0 !important;
2457
2473
  }
2458
- [dir="rtl"] [data-workspace-skin="chrome"] .sidebar-tabs-strip.right .sidebar-tab-btn.active {
2474
+ [dir="rtl"] [data-workspace-skin="chrome"] .rdd-sidebar-tabs-strip.rdd-right .rdd-sidebar-tab-btn.rdd-active {
2459
2475
  border-radius: 0 10px 10px 0 !important;
2460
2476
  margin-right: 0 !important;
2461
2477
  margin-left: 0 !important;
@@ -2466,45 +2482,45 @@ html:not(.enable-animations) *::after {
2466
2482
  (replaces Bootstrap utility class dependencies)
2467
2483
  ========================================================================== */
2468
2484
 
2469
- /* Text truncation (equivalent to Bootstrap .text-truncate) */
2470
- .text-truncate {
2485
+ /* Text truncation (equivalent to Bootstrap .rdd-text-truncate) */
2486
+ .rdd-text-truncate {
2471
2487
  overflow: hidden;
2472
2488
  text-overflow: ellipsis;
2473
2489
  white-space: nowrap;
2474
2490
  }
2475
2491
 
2476
2492
  /* Floating window titlebar button group */
2477
- .fw-titlebar-actions {
2493
+ .rdd-titlebar-actions {
2478
2494
  display: flex;
2479
2495
  align-items: center;
2480
2496
  }
2481
2497
 
2482
2498
  /* Window custom header actions slot */
2483
- .window-header-actions {
2499
+ .rdd-window-header-actions {
2484
2500
  display: flex;
2485
2501
  align-items: center;
2486
2502
  margin-inline-end: 0.25rem;
2487
- gap: var(--header-button-gap, 4px);
2503
+ gap: var(--rdd-header-button-gap, 4px);
2488
2504
  }
2489
2505
 
2490
2506
  /* Tab header custom actions slot */
2491
- .tab-header-actions {
2507
+ .rdd-tab-header-actions {
2492
2508
  margin-inline-start: auto;
2493
2509
  display: flex;
2494
2510
  align-items: center;
2495
2511
  margin-inline-end: 0.25rem;
2496
- gap: var(--header-button-gap, 4px);
2512
+ gap: var(--rdd-header-button-gap, 4px);
2497
2513
  }
2498
2514
 
2499
2515
  /* Panel body (tab content area / floating window content area) */
2500
- .dw-panel-body {
2516
+ .rdd-panel-body {
2501
2517
  flex-grow: 1;
2502
2518
  width: 100%;
2503
2519
  height: 100%;
2504
2520
  }
2505
2521
 
2506
2522
  /* Empty workspace section placeholder text */
2507
- .empty-leaf-placeholder {
2523
+ .rdd-empty-leaf-placeholder {
2508
2524
  width: 100%;
2509
2525
  height: 100%;
2510
2526
  display: flex;
@@ -2512,23 +2528,23 @@ html:not(.enable-animations) *::after {
2512
2528
  justify-content: center;
2513
2529
  font-family: monospace;
2514
2530
  font-size: 0.875rem;
2515
- color: var(--text-secondary, #94a3b8);
2531
+ color: var(--rdd-text-secondary, #94a3b8);
2516
2532
  }
2517
2533
 
2518
2534
  /* Empty workspace grid (no panels loaded) */
2519
- .empty-workspace-grid {
2535
+ .rdd-empty-workspace-grid {
2520
2536
  width: 100%;
2521
2537
  height: 100%;
2522
2538
  display: flex;
2523
2539
  align-items: center;
2524
2540
  justify-content: center;
2525
- color: var(--text-secondary, #94a3b8);
2541
+ color: var(--rdd-text-secondary, #94a3b8);
2526
2542
  font-family: monospace;
2527
2543
  font-size: 0.875rem;
2528
2544
  }
2529
2545
 
2530
2546
  /* Unregistered component error panel */
2531
- .dw-unregistered-panel {
2547
+ .rdd-unregistered-panel {
2532
2548
  width: 100%;
2533
2549
  height: 100%;
2534
2550
  display: flex;
@@ -2544,7 +2560,7 @@ html:not(.enable-animations) *::after {
2544
2560
  }
2545
2561
 
2546
2562
  /* Taskbar scrollable items row */
2547
- .taskbar-items-container {
2563
+ .rdd-taskbar-items-container {
2548
2564
  display: flex;
2549
2565
  flex-direction: row;
2550
2566
  gap: 0.5rem;
@@ -2557,12 +2573,12 @@ html:not(.enable-animations) *::after {
2557
2573
  max-width: 800px;
2558
2574
  }
2559
2575
 
2560
- .taskbar-items-container::-webkit-scrollbar {
2576
+ .rdd-taskbar-items-container::-webkit-scrollbar {
2561
2577
  display: none;
2562
2578
  }
2563
2579
 
2564
2580
  /* Tooltip header row (title + close button) */
2565
- .tooltip-header-row {
2581
+ .rdd-tooltip-header-row {
2566
2582
  display: flex;
2567
2583
  flex-direction: row;
2568
2584
  align-items: center;
@@ -2573,13 +2589,13 @@ html:not(.enable-animations) *::after {
2573
2589
  }
2574
2590
 
2575
2591
  /* Drag ghost tab preview (floating label while dragging) */
2576
- .drag-ghost-tab {
2592
+ .rdd-drag-ghost-tab {
2577
2593
  position: fixed;
2578
2594
  background: rgba(0, 0, 0, 0.8);
2579
- border: 1px solid var(--accent-color, #38bdf8);
2580
- border-left: 3px solid var(--accent-color, #38bdf8);
2595
+ border: 1px solid var(--rdd-accent-color, #38bdf8);
2596
+ border-left: 3px solid var(--rdd-accent-color, #38bdf8);
2581
2597
  border-radius: 4px;
2582
- color: var(--accent-color, #38bdf8);
2598
+ color: var(--rdd-accent-color, #38bdf8);
2583
2599
  font-family: monospace;
2584
2600
  padding: 0.375rem 1rem;
2585
2601
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
@@ -2592,14 +2608,14 @@ html:not(.enable-animations) *::after {
2592
2608
  }
2593
2609
 
2594
2610
  /* ConfirmationForm component styles */
2595
- .confirmation-form-body {
2611
+ .rdd-confirmation-form-body {
2596
2612
  padding: 0.75rem;
2597
2613
  display: flex;
2598
2614
  flex-direction: column;
2599
2615
  gap: 0.75rem;
2600
2616
  }
2601
2617
 
2602
- .confirmation-alert {
2618
+ .rdd-confirmation-alert {
2603
2619
  display: flex;
2604
2620
  align-items: center;
2605
2621
  gap: 0.5rem;
@@ -2609,38 +2625,38 @@ html:not(.enable-animations) *::after {
2609
2625
  border-radius: 0.375rem;
2610
2626
  }
2611
2627
 
2612
- .confirmation-alert-danger {
2628
+ .rdd-confirmation-alert-danger {
2613
2629
  background: rgba(220, 53, 69, 0.15);
2614
2630
  border: 1px solid rgba(220, 53, 69, 0.3);
2615
2631
  color: #f87171;
2616
2632
  }
2617
2633
 
2618
- .confirmation-alert-info {
2634
+ .rdd-confirmation-alert-info {
2619
2635
  background: rgba(13, 202, 240, 0.15);
2620
2636
  border: 1px solid rgba(13, 202, 240, 0.3);
2621
2637
  color: #67e8f9;
2622
2638
  }
2623
2639
 
2624
- .confirmation-alert-warning {
2640
+ .rdd-confirmation-alert-warning {
2625
2641
  background: rgba(255, 193, 7, 0.15);
2626
2642
  border: 1px solid rgba(255, 193, 7, 0.3);
2627
2643
  color: #fbbf24;
2628
2644
  }
2629
2645
 
2630
- .confirmation-alert-success {
2646
+ .rdd-confirmation-alert-success {
2631
2647
  background: rgba(25, 135, 84, 0.15);
2632
2648
  border: 1px solid rgba(25, 135, 84, 0.3);
2633
2649
  color: #4ade80;
2634
2650
  }
2635
2651
 
2636
- .confirmation-actions {
2652
+ .rdd-confirmation-actions {
2637
2653
  display: flex;
2638
2654
  justify-content: flex-end;
2639
2655
  gap: 0.5rem;
2640
2656
  }
2641
2657
 
2642
2658
  /* Sidebar drawer header */
2643
- .sidebar-drawer-header {
2659
+ .rdd-sidebar-drawer-header {
2644
2660
  display: flex;
2645
2661
  align-items: center;
2646
2662
  justify-content: space-between;
@@ -2652,7 +2668,7 @@ html:not(.enable-animations) *::after {
2652
2668
  }
2653
2669
 
2654
2670
  /* Sidebar drawer content body */
2655
- .sidebar-drawer-body {
2671
+ .rdd-sidebar-drawer-body {
2656
2672
  flex-grow: 1;
2657
2673
  overflow: auto;
2658
2674
  }
@@ -2678,7 +2694,7 @@ html:not(.enable-animations) *::after {
2678
2694
  font-weight: 700;
2679
2695
  letter-spacing: 0.08em;
2680
2696
  text-transform: uppercase;
2681
- color: var(--sidebar-text-muted, var(--text-secondary));
2697
+ color: var(--sidebar-text-muted, var(--rdd-text-secondary));
2682
2698
  margin: 0 0 4px 0;
2683
2699
  }
2684
2700
 
@@ -2692,7 +2708,7 @@ html:not(.enable-animations) *::after {
2692
2708
  /* Empty state placeholder */
2693
2709
  .sb-empty-state {
2694
2710
  font-size: 0.8rem;
2695
- color: var(--sidebar-text-muted, var(--text-secondary));
2711
+ color: var(--sidebar-text-muted, var(--rdd-text-secondary));
2696
2712
  text-align: center;
2697
2713
  padding: 16px 12px;
2698
2714
  }
@@ -2712,7 +2728,7 @@ html:not(.enable-animations) *::after {
2712
2728
  border-color: var(--sidebar-card-hover-border);
2713
2729
  background-color: var(--sidebar-card-hover-bg);
2714
2730
  }
2715
- .sb-card.active {
2731
+ .sb-card.rdd-active {
2716
2732
  background-color: var(--sidebar-card-active-bg);
2717
2733
  border-color: var(--sidebar-card-active-border);
2718
2734
  box-shadow: 0 0 10px var(--sidebar-card-active-shadow);
@@ -2757,8 +2773,8 @@ html:not(.enable-animations) *::after {
2757
2773
  align-items: center;
2758
2774
  justify-content: center;
2759
2775
  gap: 4px;
2760
- background: var(--accent-color);
2761
- color: var(--bg-primary);
2776
+ background: var(--rdd-accent-color);
2777
+ color: var(--rdd-bg-primary);
2762
2778
  border: none;
2763
2779
  border-radius: 5px;
2764
2780
  padding: 5px 12px;
@@ -2798,7 +2814,7 @@ html:not(.enable-animations) *::after {
2798
2814
  align-items: center;
2799
2815
  justify-content: center;
2800
2816
  background: transparent;
2801
- color: var(--text-secondary);
2817
+ color: var(--rdd-text-secondary);
2802
2818
  border: none;
2803
2819
  border-radius: 4px;
2804
2820
  padding: 3px 5px;
@@ -2806,7 +2822,7 @@ html:not(.enable-animations) *::after {
2806
2822
  transition: color 0.15s ease, background-color 0.15s ease;
2807
2823
  }
2808
2824
  .sb-btn-ghost:hover {
2809
- color: var(--text-primary);
2825
+ color: var(--rdd-text-primary);
2810
2826
  background-color: var(--sidebar-btn-hover-bg);
2811
2827
  }
2812
2828
  .sb-btn-ghost.danger:hover { color: #f87171; }
@@ -2827,8 +2843,8 @@ html:not(.enable-animations) *::after {
2827
2843
 
2828
2844
  /* Text input */
2829
2845
  .sb-input {
2830
- background: var(--bg-panel);
2831
- color: var(--text-primary);
2846
+ background: var(--rdd-bg-panel);
2847
+ color: var(--rdd-text-primary);
2832
2848
  border: 1px solid var(--sidebar-border);
2833
2849
  border-radius: 5px;
2834
2850
  padding: 5px 8px;
@@ -2838,13 +2854,13 @@ html:not(.enable-animations) *::after {
2838
2854
  transition: border-color 0.15s ease;
2839
2855
  outline: none;
2840
2856
  }
2841
- .sb-input:focus { border-color: var(--accent-color); }
2842
- .sb-input::placeholder { color: var(--text-secondary); }
2857
+ .sb-input:focus { border-color: var(--rdd-accent-color); }
2858
+ .sb-input::placeholder { color: var(--rdd-text-secondary); }
2843
2859
 
2844
2860
  /* Select control */
2845
2861
  .sb-select {
2846
- background: var(--bg-panel);
2847
- color: var(--text-primary);
2862
+ background: var(--rdd-bg-panel);
2863
+ color: var(--rdd-text-primary);
2848
2864
  border: 1px solid var(--sidebar-border);
2849
2865
  border-radius: 5px;
2850
2866
  padding: 5px 8px;
@@ -2855,12 +2871,12 @@ html:not(.enable-animations) *::after {
2855
2871
  transition: border-color 0.15s ease;
2856
2872
  outline: none;
2857
2873
  }
2858
- .sb-select:focus { border-color: var(--accent-color); }
2874
+ .sb-select:focus { border-color: var(--rdd-accent-color); }
2859
2875
 
2860
2876
  /* Range slider */
2861
2877
  .sb-range {
2862
2878
  width: 100%;
2863
- accent-color: var(--accent-color);
2879
+ accent-color: var(--rdd-accent-color);
2864
2880
  cursor: pointer;
2865
2881
  }
2866
2882
 
@@ -2875,7 +2891,7 @@ html:not(.enable-animations) *::after {
2875
2891
  .sb-field-value {
2876
2892
  font-family: monospace;
2877
2893
  font-size: 0.78rem;
2878
- color: var(--text-primary);
2894
+ color: var(--rdd-text-primary);
2879
2895
  white-space: nowrap;
2880
2896
  min-width: 36px;
2881
2897
  text-align: right;
@@ -2890,23 +2906,14 @@ html:not(.enable-animations) *::after {
2890
2906
  }
2891
2907
  .sb-toggle-label {
2892
2908
  font-size: 0.8rem;
2893
- color: var(--text-primary);
2909
+ color: var(--rdd-text-primary);
2894
2910
  }
2895
2911
 
2896
- /* Deprecated aliases — keep existing consumer code working for one release */
2897
- .sidebar-window-card { background-color: var(--sidebar-card-bg) !important; border: 1px solid var(--sidebar-card-border) !important; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: all 0.15s ease; }
2898
- .sidebar-window-card:hover { border-color: var(--sidebar-card-hover-border) !important; background-color: var(--sidebar-card-hover-bg) !important; }
2899
- .sidebar-window-card.active { background-color: var(--sidebar-card-active-bg) !important; border-color: var(--sidebar-card-active-border) !important; box-shadow: 0 0 10px var(--sidebar-card-active-shadow); }
2900
- .btn-pill-outline { border: 1px solid var(--sidebar-btn-front-border) !important; color: var(--sidebar-btn-front-text) !important; background: var(--sidebar-btn-front-bg) !important; font-size: 0.68rem !important; font-weight: 500 !important; border-radius: 12px !important; padding: 2px 10px !important; transition: all 0.15s ease !important; line-height: 1 !important; text-decoration: none !important; }
2901
- .btn-pill-outline:hover { background: var(--sidebar-btn-front-hover-bg) !important; transform: scale(1.03); }
2902
- .badge-pill-dark { background-color: var(--sidebar-badge-bg) !important; color: var(--sidebar-badge-text) !important; font-size: 0.65rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
2903
- .sidebar-card-title { font-size: 0.82rem; font-weight: 600; color: var(--sidebar-text-title); max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
2904
-
2905
2912
  /* ==========================================================================
2906
2913
  TOOLBAR STRIP
2907
2914
  ========================================================================== */
2908
2915
 
2909
- .toolbar-strip {
2916
+ .rdd-toolbar-strip {
2910
2917
  background-color: var(--sidebar-tabs-bg);
2911
2918
  display: flex;
2912
2919
  align-items: center;
@@ -2914,8 +2921,8 @@ html:not(.enable-animations) *::after {
2914
2921
  z-index: 5;
2915
2922
  }
2916
2923
 
2917
- .toolbar-strip.left,
2918
- .toolbar-strip.right {
2924
+ .rdd-toolbar-strip.rdd-left,
2925
+ .rdd-toolbar-strip.rdd-right {
2919
2926
  flex-direction: column;
2920
2927
  width: 48px;
2921
2928
  height: 100%;
@@ -2925,8 +2932,8 @@ html:not(.enable-animations) *::after {
2925
2932
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
2926
2933
  }
2927
2934
 
2928
- .toolbar-strip.top,
2929
- .toolbar-strip.bottom {
2935
+ .rdd-toolbar-strip.rdd-top,
2936
+ .rdd-toolbar-strip.rdd-bottom {
2930
2937
  flex-direction: row;
2931
2938
  width: 100%;
2932
2939
  height: 48px;
@@ -2937,17 +2944,17 @@ html:not(.enable-animations) *::after {
2937
2944
  }
2938
2945
 
2939
2946
  @media (pointer: coarse) {
2940
- .toolbar-strip.left, .toolbar-strip.right { width: 56px; }
2941
- .toolbar-strip.top, .toolbar-strip.bottom { height: 56px; }
2947
+ .rdd-toolbar-strip.rdd-left, .rdd-toolbar-strip.rdd-right { width: 56px; }
2948
+ .rdd-toolbar-strip.rdd-top, .rdd-toolbar-strip.rdd-bottom { height: 56px; }
2942
2949
  }
2943
2950
 
2944
- .toolbar-strip.left { border-right: 1px solid var(--sidebar-border); }
2945
- .toolbar-strip.right { border-left: 1px solid var(--sidebar-border); }
2946
- .toolbar-strip.top { border-bottom: 1px solid var(--sidebar-border); }
2947
- .toolbar-strip.bottom{ border-top: 1px solid var(--sidebar-border); }
2951
+ .rdd-toolbar-strip.rdd-left { border-right: 1px solid var(--sidebar-border); }
2952
+ .rdd-toolbar-strip.rdd-right { border-left: 1px solid var(--sidebar-border); }
2953
+ .rdd-toolbar-strip.rdd-top { border-bottom: 1px solid var(--sidebar-border); }
2954
+ .rdd-toolbar-strip.rdd-bottom{ border-top: 1px solid var(--sidebar-border); }
2948
2955
 
2949
2956
  /* Base button */
2950
- .toolbar-btn {
2957
+ .rdd-toolbar-btn {
2951
2958
  width: 36px;
2952
2959
  height: 36px;
2953
2960
  display: flex;
@@ -2964,18 +2971,18 @@ html:not(.enable-animations) *::after {
2964
2971
  transition: color 0.15s ease, background-color 0.15s ease;
2965
2972
  }
2966
2973
 
2967
- .toolbar-btn:hover:not(:disabled) {
2974
+ .rdd-toolbar-btn:hover:not(:disabled) {
2968
2975
  background-color: var(--toolbar-btn-hover-bg);
2969
2976
  color: var(--sidebar-text-title);
2970
2977
  }
2971
2978
 
2972
- .toolbar-btn:disabled {
2979
+ .rdd-toolbar-btn:disabled {
2973
2980
  opacity: 0.35;
2974
2981
  cursor: not-allowed;
2975
2982
  }
2976
2983
 
2977
2984
  /* Radio active — accent bar on the outer edge */
2978
- .toolbar-btn-radio.active {
2985
+ .rdd-toolbar-btn-radio.rdd-active {
2979
2986
  color: var(--tab-icon-active);
2980
2987
  background-color: var(--toolbar-btn-radio-active-bg);
2981
2988
  box-shadow: var(--toolbar-btn-active-shadow);
@@ -2983,23 +2990,23 @@ html:not(.enable-animations) *::after {
2983
2990
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
2984
2991
  }
2985
2992
 
2986
- .toolbar-strip.left .toolbar-btn-radio.active { border-left: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
2987
- .toolbar-strip.right .toolbar-btn-radio.active { border-right: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
2988
- .toolbar-strip.top .toolbar-btn-radio.active { border-bottom: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
2989
- .toolbar-strip.bottom .toolbar-btn-radio.active { border-top: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
2993
+ .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-radio.rdd-active { border-left: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
2994
+ .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-radio.rdd-active { border-right: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
2995
+ .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-radio.rdd-active { border-bottom: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
2996
+ .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-radio.rdd-active { border-top: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
2990
2997
 
2991
2998
  /* Toggle active — lighter tint, no directional border */
2992
- .toolbar-btn-toggle.active {
2999
+ .rdd-toolbar-btn-toggle.rdd-active {
2993
3000
  color: var(--tab-icon-active);
2994
3001
  background-color: var(--toolbar-btn-toggle-active-bg);
2995
3002
  }
2996
3003
 
2997
3004
  /* Group button — corner triangle indicator shows a sub-tool family */
2998
- .toolbar-btn-group {
3005
+ .rdd-toolbar-btn-group {
2999
3006
  position: relative;
3000
3007
  }
3001
3008
 
3002
- .toolbar-btn-group::after {
3009
+ .rdd-toolbar-btn-group::after {
3003
3010
  content: '';
3004
3011
  position: absolute;
3005
3012
  bottom: 4px;
@@ -3013,7 +3020,7 @@ html:not(.enable-animations) *::after {
3013
3020
  }
3014
3021
 
3015
3022
  /* Group active state — same directional accent as radio */
3016
- .toolbar-btn-group.active {
3023
+ .rdd-toolbar-btn-group.rdd-active {
3017
3024
  color: var(--tab-icon-active);
3018
3025
  background-color: var(--toolbar-btn-radio-active-bg);
3019
3026
  box-shadow: var(--toolbar-btn-active-shadow);
@@ -3021,14 +3028,14 @@ html:not(.enable-animations) *::after {
3021
3028
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
3022
3029
  }
3023
3030
 
3024
- .toolbar-strip.left .toolbar-btn-group.active { border-left: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
3025
- .toolbar-strip.right .toolbar-btn-group.active { border-right: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
3026
- .toolbar-strip.top .toolbar-btn-group.active { border-bottom: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
3027
- .toolbar-strip.bottom .toolbar-btn-group.active { border-top: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
3031
+ .rdd-toolbar-strip.rdd-left .rdd-toolbar-btn-group.rdd-active { border-left: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 6px 6px 0; }
3032
+ .rdd-toolbar-strip.rdd-right .rdd-toolbar-btn-group.rdd-active { border-right: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 0 0 6px; }
3033
+ .rdd-toolbar-strip.rdd-top .rdd-toolbar-btn-group.rdd-active { border-bottom: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 6px 6px 0 0; }
3034
+ .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-btn-group.rdd-active { border-top: var(--toolbar-accent-bar-width) solid var(--tab-icon-active); border-radius: 0 0 6px 6px; }
3028
3035
 
3029
3036
  /* Separators */
3030
- .toolbar-strip.left .toolbar-separator,
3031
- .toolbar-strip.right .toolbar-separator {
3037
+ .rdd-toolbar-strip.rdd-left .rdd-toolbar-separator,
3038
+ .rdd-toolbar-strip.rdd-right .rdd-toolbar-separator {
3032
3039
  width: 24px;
3033
3040
  height: 1px;
3034
3041
  background-color: var(--toolbar-separator-color);
@@ -3037,8 +3044,8 @@ html:not(.enable-animations) *::after {
3037
3044
  align-self: center;
3038
3045
  }
3039
3046
 
3040
- .toolbar-strip.top .toolbar-separator,
3041
- .toolbar-strip.bottom .toolbar-separator {
3047
+ .rdd-toolbar-strip.rdd-top .rdd-toolbar-separator,
3048
+ .rdd-toolbar-strip.rdd-bottom .rdd-toolbar-separator {
3042
3049
  height: 24px;
3043
3050
  width: 1px;
3044
3051
  background-color: var(--toolbar-separator-color);
@@ -3049,17 +3056,17 @@ html:not(.enable-animations) *::after {
3049
3056
 
3050
3057
  /* Touch targets on coarse-pointer devices */
3051
3058
  @media (pointer: coarse) {
3052
- .toolbar-btn { width: 44px; height: 44px; }
3059
+ .rdd-toolbar-btn { width: 44px; height: 44px; }
3053
3060
  }
3054
3061
 
3055
3062
  /* ==========================================================================
3056
3063
  TOOLBAR GROUP FLYOUT
3057
3064
  ========================================================================== */
3058
3065
 
3059
- .toolbar-group-flyout {
3066
+ .rdd-toolbar-group-flyout {
3060
3067
  position: fixed;
3061
- z-index: 8000;
3062
- background: var(--sidebar-bg, var(--bg-panel));
3068
+ z-index: calc(var(--rdd-z-base, 1000) + 7000);
3069
+ background: var(--sidebar-bg, var(--rdd-bg-panel));
3063
3070
  border: 1px solid var(--sidebar-border);
3064
3071
  border-radius: 8px;
3065
3072
  padding: 4px;
@@ -3077,21 +3084,21 @@ html:not(.enable-animations) *::after {
3077
3084
  }
3078
3085
 
3079
3086
  /* Animation origin matches the edge closest to the toolbar button */
3080
- .toolbar-group-flyout.left { transform-origin: top left; }
3081
- .toolbar-group-flyout.right { transform-origin: top right; }
3082
- .toolbar-group-flyout.top { transform-origin: top left; }
3083
- .toolbar-group-flyout.bottom { transform-origin: bottom left; }
3087
+ .rdd-toolbar-group-flyout.rdd-left { transform-origin: top left; }
3088
+ .rdd-toolbar-group-flyout.rdd-right { transform-origin: top right; }
3089
+ .rdd-toolbar-group-flyout.rdd-top { transform-origin: top left; }
3090
+ .rdd-toolbar-group-flyout.rdd-bottom { transform-origin: bottom left; }
3084
3091
  /* RTL: physical sides swap, so animation origin flips horizontally */
3085
- [dir="rtl"] .toolbar-group-flyout.left { transform-origin: top right; }
3086
- [dir="rtl"] .toolbar-group-flyout.right { transform-origin: top left; }
3087
- [dir="rtl"] .toolbar-group-flyout.top { transform-origin: top right; }
3088
- [dir="rtl"] .toolbar-group-flyout.bottom { transform-origin: bottom right; }
3092
+ [dir="rtl"] .rdd-toolbar-group-flyout.rdd-left { transform-origin: top right; }
3093
+ [dir="rtl"] .rdd-toolbar-group-flyout.rdd-right { transform-origin: top left; }
3094
+ [dir="rtl"] .rdd-toolbar-group-flyout.rdd-top { transform-origin: top right; }
3095
+ [dir="rtl"] .rdd-toolbar-group-flyout.rdd-bottom { transform-origin: bottom right; }
3089
3096
 
3090
- [dir="rtl"] .toolbar-group-flyout-label {
3097
+ [dir="rtl"] .rdd-toolbar-group-flyout-label {
3091
3098
  text-align: right;
3092
3099
  }
3093
3100
 
3094
- .toolbar-group-flyout-item {
3101
+ .rdd-toolbar-group-flyout-item {
3095
3102
  display: flex;
3096
3103
  align-items: center;
3097
3104
  gap: 8px;
@@ -3099,7 +3106,7 @@ html:not(.enable-animations) *::after {
3099
3106
  border: 1px solid transparent;
3100
3107
  border-radius: 6px;
3101
3108
  background: transparent;
3102
- color: var(--sidebar-text-title, var(--text-primary));
3109
+ color: var(--sidebar-text-title, var(--rdd-text-primary));
3103
3110
  cursor: pointer;
3104
3111
  width: 100%;
3105
3112
  text-align: start;
@@ -3109,22 +3116,22 @@ html:not(.enable-animations) *::after {
3109
3116
  transition: background-color 0.1s ease, color 0.1s ease;
3110
3117
  }
3111
3118
 
3112
- .toolbar-group-flyout-item:hover:not(:disabled) {
3119
+ .rdd-toolbar-group-flyout-item:hover:not(:disabled) {
3113
3120
  background-color: var(--toolbar-btn-hover-bg);
3114
- color: var(--sidebar-text-title, var(--text-primary));
3121
+ color: var(--sidebar-text-title, var(--rdd-text-primary));
3115
3122
  }
3116
3123
 
3117
- .toolbar-group-flyout-item:disabled {
3124
+ .rdd-toolbar-group-flyout-item:disabled {
3118
3125
  opacity: 0.35;
3119
3126
  cursor: not-allowed;
3120
3127
  }
3121
3128
 
3122
- .toolbar-group-flyout-item.active {
3129
+ .rdd-toolbar-group-flyout-item.rdd-active {
3123
3130
  color: var(--tab-icon-active);
3124
3131
  background-color: var(--toolbar-btn-radio-active-bg);
3125
3132
  }
3126
3133
 
3127
- .toolbar-group-flyout-icon {
3134
+ .rdd-toolbar-group-flyout-icon {
3128
3135
  flex-shrink: 0;
3129
3136
  width: 16px;
3130
3137
  height: 16px;
@@ -3134,21 +3141,21 @@ html:not(.enable-animations) *::after {
3134
3141
  }
3135
3142
 
3136
3143
 
3137
- .toolbar-group-flyout-label {
3144
+ .rdd-toolbar-group-flyout-label {
3138
3145
  flex: 1;
3139
3146
  white-space: nowrap;
3140
3147
  overflow: hidden;
3141
3148
  text-overflow: ellipsis;
3142
3149
  }
3143
3150
 
3144
- .toolbar-group-flyout-shortcut {
3151
+ .rdd-toolbar-group-flyout-shortcut {
3145
3152
  flex-shrink: 0;
3146
3153
  font-size: 0.6875rem;
3147
- color: var(--text-secondary);
3154
+ color: var(--rdd-text-secondary);
3148
3155
  opacity: 0.7;
3149
3156
  }
3150
3157
 
3151
- .toolbar-group-flyout-sep {
3158
+ .rdd-toolbar-group-flyout-sep {
3152
3159
  height: 1px;
3153
3160
  background: var(--toolbar-separator-color);
3154
3161
  margin: 3px 4px;
@@ -3157,7 +3164,7 @@ html:not(.enable-animations) *::after {
3157
3164
 
3158
3165
 
3159
3166
  /* Button base — used in ConfirmationForm and similar dialogs */
3160
- .dw-btn {
3167
+ .rdd-btn {
3161
3168
  display: inline-flex;
3162
3169
  align-items: center;
3163
3170
  justify-content: center;
@@ -3171,45 +3178,45 @@ html:not(.enable-animations) *::after {
3171
3178
  line-height: 1.2;
3172
3179
  }
3173
3180
 
3174
- .dw-btn-sm {
3181
+ .rdd-btn-sm {
3175
3182
  padding: 0.25rem 0.75rem;
3176
3183
  font-size: 0.8125rem;
3177
3184
  }
3178
3185
 
3179
- .dw-btn-outline {
3186
+ .rdd-btn-outline {
3180
3187
  background: transparent;
3181
- border: 1px solid var(--text-secondary, #6c757d);
3182
- color: var(--text-secondary, #6c757d);
3188
+ border: 1px solid var(--rdd-text-secondary, #6c757d);
3189
+ color: var(--rdd-text-secondary, #6c757d);
3183
3190
  }
3184
3191
 
3185
- .dw-btn-outline:hover {
3192
+ .rdd-btn-outline:hover {
3186
3193
  background: rgba(255, 255, 255, 0.08);
3187
- border-color: var(--text-primary, #f1f5f9);
3188
- color: var(--text-primary, #f1f5f9);
3194
+ border-color: var(--rdd-text-primary, #f1f5f9);
3195
+ color: var(--rdd-text-primary, #f1f5f9);
3189
3196
  }
3190
3197
 
3191
- [data-color-scheme="light"] .dw-btn-outline {
3198
+ [data-color-scheme="light"] .rdd-btn-outline {
3192
3199
  border-color: #6c757d;
3193
3200
  color: #6c757d;
3194
3201
  }
3195
3202
 
3196
- [data-color-scheme="light"] .dw-btn-outline:hover {
3203
+ [data-color-scheme="light"] .rdd-btn-outline:hover {
3197
3204
  background: rgba(0, 0, 0, 0.05);
3198
3205
  border-color: #495057;
3199
3206
  color: #495057;
3200
3207
  }
3201
3208
 
3202
- .dw-btn-primary {
3203
- background: var(--accent-color, #38bdf8);
3204
- border: 1px solid var(--accent-color, #38bdf8);
3209
+ .rdd-btn-primary {
3210
+ background: var(--rdd-accent-color, #38bdf8);
3211
+ border: 1px solid var(--rdd-accent-color, #38bdf8);
3205
3212
  color: #090b11;
3206
3213
  }
3207
3214
 
3208
- .dw-btn-primary:hover {
3215
+ .rdd-btn-primary:hover {
3209
3216
  filter: brightness(1.1);
3210
3217
  }
3211
3218
 
3212
- [data-color-scheme="light"] .dw-btn-primary {
3219
+ [data-color-scheme="light"] .rdd-btn-primary {
3213
3220
  color: #ffffff;
3214
3221
  }
3215
3222
 
@@ -3219,43 +3226,43 @@ html:not(.enable-animations) *::after {
3219
3226
 
3220
3227
  /* Phase 1C: touch-action — suppress scroll on drag handles,
3221
3228
  allow horizontal pan on tab bar */
3222
- .workspace-tab { touch-action: none; }
3223
- .floating-window-titlebar { touch-action: none; }
3224
- .resizer-bar { touch-action: none; }
3225
- .resize-handle { touch-action: none; }
3229
+ .rdd-workspace-tab { touch-action: none; }
3230
+ .rdd-floating-window-titlebar { touch-action: none; }
3231
+ .rdd-resizer-bar { touch-action: none; }
3232
+ .rdd-resize-handle { touch-action: none; }
3226
3233
 
3227
3234
  /* Phase 2A: Expand resizer hit area to 44px on touch devices */
3228
3235
  @media (pointer: coarse) {
3229
- .resizer-bar[style*="cursor: col-resize"]::before {
3236
+ .rdd-resizer-bar[style*="cursor: col-resize"]::before {
3230
3237
  left: -20px;
3231
3238
  width: 44px;
3232
3239
  }
3233
- .resizer-bar[style*="cursor: row-resize"]::before {
3240
+ .rdd-resizer-bar[style*="cursor: row-resize"]::before {
3234
3241
  top: -32px;
3235
3242
  height: 33px; /* 32px upward into safe content area, 0px downward into tab bar */
3236
3243
  }
3237
3244
  }
3238
3245
 
3239
3246
  /* Phase 3B: 8-direction resize handles on floating windows */
3240
- .resize-handle {
3247
+ .rdd-resize-handle {
3241
3248
  position: absolute;
3242
3249
  z-index: 30;
3243
3250
  }
3244
3251
 
3245
3252
  /* Edge handles */
3246
- .resize-n { top: -4px; left: 16px; right: 16px; height: 8px; cursor: n-resize; }
3247
- .resize-s { bottom: -4px; left: 16px; right: 16px; height: 8px; cursor: s-resize; }
3248
- .resize-e { right: -4px; top: 16px; bottom: 16px; width: 8px; cursor: e-resize; }
3249
- .resize-w { left: -4px; top: 16px; bottom: 16px; width: 8px; cursor: w-resize; }
3253
+ .rdd-resize-n { top: -4px; left: 16px; right: 16px; height: 8px; cursor: n-resize; }
3254
+ .rdd-resize-s { bottom: -4px; left: 16px; right: 16px; height: 8px; cursor: s-resize; }
3255
+ .rdd-resize-e { right: -4px; top: 16px; bottom: 16px; width: 8px; cursor: e-resize; }
3256
+ .rdd-resize-w { left: -4px; top: 16px; bottom: 16px; width: 8px; cursor: w-resize; }
3250
3257
 
3251
3258
  /* Corner handles */
3252
- .resize-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
3253
- .resize-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
3254
- .resize-sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
3255
- .resize-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
3259
+ .rdd-resize-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
3260
+ .rdd-resize-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
3261
+ .rdd-resize-sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
3262
+ .rdd-resize-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
3256
3263
 
3257
3264
  /* SE corner subtle visual indicator (preserve existing look) */
3258
- .resize-se::after {
3265
+ .rdd-resize-se::after {
3259
3266
  content: '';
3260
3267
  position: absolute;
3261
3268
  inset: 0;
@@ -3264,111 +3271,111 @@ html:not(.enable-animations) *::after {
3264
3271
 
3265
3272
  /* Touch: larger 44px hit areas via padding */
3266
3273
  @media (pointer: coarse) {
3267
- .resize-ne, .resize-se, .resize-sw, .resize-nw {
3274
+ .rdd-resize-ne, .rdd-resize-se, .rdd-resize-sw, .rdd-resize-nw {
3268
3275
  width: 28px;
3269
3276
  height: 28px;
3270
3277
  }
3271
- .resize-n, .resize-s {
3278
+ .rdd-resize-n, .rdd-resize-s {
3272
3279
  left: 28px;
3273
3280
  right: 28px;
3274
3281
  height: 12px;
3275
3282
  top: -6px;
3276
3283
  }
3277
- .resize-s { top: auto; bottom: -6px; }
3278
- .resize-e, .resize-w {
3284
+ .rdd-resize-s { top: auto; bottom: -6px; }
3285
+ .rdd-resize-e, .rdd-resize-w {
3279
3286
  top: 28px;
3280
3287
  bottom: 28px;
3281
3288
  width: 12px;
3282
3289
  right: -6px;
3283
3290
  }
3284
- .resize-w { right: auto; left: -6px; }
3291
+ .rdd-resize-w { right: auto; left: -6px; }
3285
3292
  }
3286
3293
 
3287
3294
  /* Phase 2B: Adaptive density for coarse-pointer (touch) devices */
3288
3295
  @media (pointer: coarse) {
3289
3296
  /* Taller tabs for touch targets */
3290
- .workspace-tab {
3297
+ .rdd-workspace-tab {
3291
3298
  min-height: 44px !important;
3292
3299
  height: 44px !important;
3293
3300
  padding: 0 12px 0 14px !important;
3294
3301
  }
3295
3302
 
3296
3303
  /* Always-visible close button (no hover-to-reveal) */
3297
- .workspace-tab .close-tab-x {
3304
+ .rdd-workspace-tab .rdd-close-tab-x {
3298
3305
  opacity: 0.8 !important;
3299
3306
  width: 24px !important;
3300
3307
  height: 24px !important;
3301
3308
  }
3302
3309
 
3303
3310
  /* Larger titlebar action buttons */
3304
- .custom-tab-btn {
3311
+ .rdd-custom-tab-btn {
3305
3312
  width: 28px !important;
3306
3313
  height: 28px !important;
3307
3314
  }
3308
3315
 
3309
3316
  /* Taller taskbar items */
3310
- .taskbar-glassmorphic-item {
3317
+ .rdd-taskbar-glassmorphic-item {
3311
3318
  width: 48px !important;
3312
3319
  height: 48px !important;
3313
3320
  }
3314
3321
 
3315
3322
  /* Wider tab min-width on touch */
3316
- .workspace-tab { min-width: 88px; }
3323
+ .rdd-workspace-tab { min-width: 88px; }
3317
3324
 
3318
3325
  /* Wider scroll arrows on touch */
3319
- .tab-scroll-btn { width: 32px; height: 44px; }
3326
+ .rdd-tab-scroll-btn { width: 32px; height: 44px; }
3320
3327
 
3321
3328
  /* Keep top edge trigger thin even on touch — avoids collision with tab bar */
3322
- .edge-trigger-top { height: 14px; }
3329
+ .rdd-edge-trigger-top { height: 14px; }
3323
3330
  }
3324
3331
 
3325
3332
  /* Phase 4A: Long-press active animation (visual feedback during 300ms hold) */
3326
- .long-press-active {
3333
+ .rdd-long-press-active {
3327
3334
  animation: rdd-long-press-pulse 0.25s ease-out forwards;
3328
3335
  transform-origin: center;
3329
3336
  }
3330
3337
 
3331
3338
  @keyframes rdd-long-press-pulse {
3332
- 0% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-glow, rgba(56,189,248,0.3)); }
3333
- 60% { transform: scale(1.04); box-shadow: 0 0 0 6px var(--accent-glow, rgba(56,189,248,0.15)); }
3334
- 100% { transform: scale(1.02); box-shadow: 0 0 0 4px var(--accent-glow, rgba(56,189,248,0.1)); }
3339
+ 0% { transform: scale(1); box-shadow: 0 0 0 0 var(--rdd-accent-glow, rgba(56,189,248,0.3)); }
3340
+ 60% { transform: scale(1.04); box-shadow: 0 0 0 6px var(--rdd-accent-glow, rgba(56,189,248,0.15)); }
3341
+ 100% { transform: scale(1.02); box-shadow: 0 0 0 4px var(--rdd-accent-glow, rgba(56,189,248,0.1)); }
3335
3342
  }
3336
3343
 
3337
- /* Phase 4C: Tab bar horizontal scroll (handled by existing .tab-headers-container overflow-x: auto) */
3344
+ /* Phase 4C: Tab bar horizontal scroll (handled by existing .rdd-tab-headers-container overflow-x: auto) */
3338
3345
  /* Note: touch-action and -webkit-overflow-scrolling intentionally omitted — they cause iOS Safari
3339
3346
  to fire pointercancel before the 300ms long-press timer can activate tab drag */
3340
- .tab-headers-container::-webkit-scrollbar { display: none; }
3347
+ .rdd-tab-headers-container::-webkit-scrollbar { display: none; }
3341
3348
 
3342
3349
  /* ==========================================================================
3343
3350
  PANEL OVERLAY — Per-skin token overrides
3344
3351
  ========================================================================== */
3345
3352
 
3346
3353
  [data-workspace-skin="vscode"] {
3347
- --panel-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.12);
3354
+ --rdd-panel-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.12);
3348
3355
  }
3349
3356
 
3350
3357
  [data-workspace-skin="macos"] {
3351
- --panel-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.18);
3358
+ --rdd-panel-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.18);
3352
3359
  }
3353
3360
 
3354
3361
  [data-workspace-skin="slate"] {
3355
- --panel-toolbar-btn-active-color: #60a5fa;
3356
- --panel-toolbar-btn-active-bg: rgba(96, 165, 250, 0.15);
3362
+ --rdd-panel-toolbar-btn-active-color: #60a5fa;
3363
+ --rdd-panel-toolbar-btn-active-bg: rgba(96, 165, 250, 0.15);
3357
3364
  }
3358
3365
 
3359
3366
  [data-workspace-skin="nord"] {
3360
- --panel-toolbar-btn-active-color: #88c0d0;
3361
- --panel-toolbar-btn-active-bg: rgba(136, 192, 208, 0.15);
3367
+ --rdd-panel-toolbar-btn-active-color: #88c0d0;
3368
+ --rdd-panel-toolbar-btn-active-bg: rgba(136, 192, 208, 0.15);
3362
3369
  }
3363
3370
 
3364
3371
  [data-workspace-skin="obsidian"] {
3365
- --panel-toolbar-btn-active-color: #a78bfa;
3366
- --panel-toolbar-btn-active-bg: rgba(167, 139, 250, 0.15);
3372
+ --rdd-panel-toolbar-btn-active-color: #a78bfa;
3373
+ --rdd-panel-toolbar-btn-active-bg: rgba(167, 139, 250, 0.15);
3367
3374
  }
3368
3375
 
3369
3376
  [data-workspace-skin="tokyo"] {
3370
- --panel-toolbar-btn-active-color: #7aa2f7;
3371
- --panel-toolbar-btn-active-bg: rgba(122, 162, 247, 0.15);
3377
+ --rdd-panel-toolbar-btn-active-color: #7aa2f7;
3378
+ --rdd-panel-toolbar-btn-active-bg: rgba(122, 162, 247, 0.15);
3372
3379
  }
3373
3380
 
3374
3381
  /* ==========================================================================
@@ -3376,7 +3383,7 @@ html:not(.enable-animations) *::after {
3376
3383
  ========================================================================== */
3377
3384
 
3378
3385
  /* ── Root container ── */
3379
- .dw-panel-overlay-root {
3386
+ .rdd-panel-overlay-root {
3380
3387
  position: relative;
3381
3388
  width: 100%;
3382
3389
  height: 100%;
@@ -3384,198 +3391,198 @@ html:not(.enable-animations) *::after {
3384
3391
  }
3385
3392
 
3386
3393
  /* ── Toolbar container ── */
3387
- .dw-panel-toolbar {
3394
+ .rdd-panel-toolbar {
3388
3395
  position: absolute;
3389
3396
  z-index: 5;
3390
3397
  pointer-events: none;
3391
3398
  display: flex;
3392
3399
  align-items: center;
3393
- gap: var(--panel-toolbar-gap, 4px);
3394
- padding: var(--panel-toolbar-padding, 8px);
3400
+ gap: var(--rdd-panel-toolbar-gap, 4px);
3401
+ padding: var(--rdd-panel-toolbar-padding, 8px);
3395
3402
  box-sizing: border-box;
3396
3403
  }
3397
3404
 
3398
- .dw-panel-toolbar--top,
3399
- .dw-panel-toolbar--bottom {
3405
+ .rdd-panel-toolbar--top,
3406
+ .rdd-panel-toolbar--bottom {
3400
3407
  flex-direction: row;
3401
3408
  }
3402
3409
 
3403
- .dw-panel-toolbar--left,
3404
- .dw-panel-toolbar--right {
3410
+ .rdd-panel-toolbar--left,
3411
+ .rdd-panel-toolbar--right {
3405
3412
  flex-direction: column;
3406
3413
  }
3407
3414
 
3408
3415
  /* Restore pointer-events on every direct child */
3409
- .dw-panel-toolbar > * {
3416
+ .rdd-panel-toolbar > * {
3410
3417
  pointer-events: auto;
3411
3418
  }
3412
3419
 
3413
3420
  /* ── Toolbar button (shared by ToolbarButton + ToolbarToggle) ── */
3414
- .dw-panel-toolbar-btn {
3421
+ .rdd-panel-toolbar-btn {
3415
3422
  display: inline-flex;
3416
3423
  align-items: center;
3417
3424
  justify-content: center;
3418
- width: var(--panel-toolbar-btn-size, 32px);
3419
- height: var(--panel-toolbar-btn-size, 32px);
3425
+ width: var(--rdd-panel-toolbar-btn-size, 32px);
3426
+ height: var(--rdd-panel-toolbar-btn-size, 32px);
3420
3427
  flex-shrink: 0;
3421
- border-radius: var(--panel-toolbar-btn-radius, 6px);
3428
+ border-radius: var(--rdd-panel-toolbar-btn-radius, 6px);
3422
3429
  border: none;
3423
3430
  background: transparent;
3424
- color: var(--panel-toolbar-fg, rgba(255, 255, 255, 0.65));
3431
+ color: var(--rdd-panel-toolbar-fg, rgba(255, 255, 255, 0.65));
3425
3432
  cursor: pointer;
3426
3433
  padding: 0;
3427
3434
  transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease, border-color 0.12s ease;
3428
3435
  }
3429
3436
 
3430
- .dw-panel-toolbar-btn:hover:not(:disabled) {
3431
- background: var(--panel-toolbar-btn-hover-bg, rgba(255, 255, 255, 0.15));
3432
- color: var(--panel-toolbar-fg-hover, rgba(255, 255, 255, 0.95));
3437
+ .rdd-panel-toolbar-btn:hover:not(:disabled) {
3438
+ background: var(--rdd-panel-toolbar-btn-hover-bg, rgba(255, 255, 255, 0.15));
3439
+ color: var(--rdd-panel-toolbar-fg-hover, rgba(255, 255, 255, 0.95));
3433
3440
  transform: scale(1.07);
3434
3441
  }
3435
3442
 
3436
- .dw-panel-toolbar-btn:active:not(:disabled) {
3443
+ .rdd-panel-toolbar-btn:active:not(:disabled) {
3437
3444
  transform: scale(0.94);
3438
3445
  }
3439
3446
 
3440
- .dw-panel-toolbar-btn--active {
3441
- background: var(--panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.14));
3442
- color: var(--panel-toolbar-btn-active-color, #38bdf8);
3447
+ .rdd-panel-toolbar-btn--active {
3448
+ background: var(--rdd-panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.14));
3449
+ color: var(--rdd-panel-toolbar-btn-active-color, #38bdf8);
3443
3450
  }
3444
3451
 
3445
- .dw-panel-toolbar-btn--active:hover:not(:disabled) {
3446
- background: var(--panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.22));
3452
+ .rdd-panel-toolbar-btn--active:hover:not(:disabled) {
3453
+ background: var(--rdd-panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.22));
3447
3454
  }
3448
3455
 
3449
- .dw-panel-toolbar-btn:disabled {
3456
+ .rdd-panel-toolbar-btn:disabled {
3450
3457
  opacity: 0.38;
3451
3458
  cursor: not-allowed;
3452
3459
  }
3453
3460
 
3454
3461
  /* ── Toolbar strip variants ── */
3455
- .dw-panel-toolbar[data-variant="frosted"] {
3462
+ .rdd-panel-toolbar[data-variant="frosted"] {
3456
3463
  background: rgba(15, 20, 30, 0.55);
3457
3464
  backdrop-filter: blur(10px) saturate(150%);
3458
3465
  -webkit-backdrop-filter: blur(10px) saturate(150%);
3459
3466
  }
3460
- .dw-panel-toolbar[data-variant="solid"] {
3461
- background: var(--bg-tab-bar, #0d0f16);
3467
+ .rdd-panel-toolbar[data-variant="solid"] {
3468
+ background: var(--rdd-bg-tab-bar, #0d0f16);
3462
3469
  }
3463
- [data-color-scheme="light"] .dw-panel-toolbar[data-variant="frosted"] {
3470
+ [data-color-scheme="light"] .rdd-panel-toolbar[data-variant="frosted"] {
3464
3471
  background: rgba(233, 236, 239, 0.72);
3465
3472
  }
3466
- .dw-panel-toolbar--top[data-variant="frosted"],
3467
- .dw-panel-toolbar--top[data-variant="solid"] {
3468
- border-bottom: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
3473
+ .rdd-panel-toolbar--top[data-variant="frosted"],
3474
+ .rdd-panel-toolbar--top[data-variant="solid"] {
3475
+ border-bottom: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
3469
3476
  }
3470
- .dw-panel-toolbar--bottom[data-variant="frosted"],
3471
- .dw-panel-toolbar--bottom[data-variant="solid"] {
3472
- border-top: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
3477
+ .rdd-panel-toolbar--bottom[data-variant="frosted"],
3478
+ .rdd-panel-toolbar--bottom[data-variant="solid"] {
3479
+ border-top: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
3473
3480
  }
3474
- .dw-panel-toolbar--left[data-variant="frosted"],
3475
- .dw-panel-toolbar--left[data-variant="solid"] {
3476
- border-right: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
3481
+ .rdd-panel-toolbar--left[data-variant="frosted"],
3482
+ .rdd-panel-toolbar--left[data-variant="solid"] {
3483
+ border-right: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
3477
3484
  }
3478
- .dw-panel-toolbar--right[data-variant="frosted"],
3479
- .dw-panel-toolbar--right[data-variant="solid"] {
3480
- border-left: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
3485
+ .rdd-panel-toolbar--right[data-variant="frosted"],
3486
+ .rdd-panel-toolbar--right[data-variant="solid"] {
3487
+ border-left: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
3481
3488
  }
3482
3489
 
3483
3490
  /* ── Button variants — toolbar-level default ── */
3484
3491
 
3485
3492
  /* soft */
3486
- .dw-panel-toolbar[data-btn-variant="soft"] .dw-panel-toolbar-btn,
3487
- .dw-panel-toolbar-btn[data-variant="soft"] {
3493
+ .rdd-panel-toolbar[data-btn-variant="soft"] .rdd-panel-toolbar-btn,
3494
+ .rdd-panel-toolbar-btn[data-variant="soft"] {
3488
3495
  background: rgba(255, 255, 255, 0.06);
3489
3496
  }
3490
- .dw-panel-toolbar[data-btn-variant="soft"] .dw-panel-toolbar-btn:hover:not(:disabled),
3491
- .dw-panel-toolbar-btn[data-variant="soft"]:hover:not(:disabled) {
3497
+ .rdd-panel-toolbar[data-btn-variant="soft"] .rdd-panel-toolbar-btn:hover:not(:disabled),
3498
+ .rdd-panel-toolbar-btn[data-variant="soft"]:hover:not(:disabled) {
3492
3499
  background: rgba(255, 255, 255, 0.15);
3493
3500
  }
3494
- [data-color-scheme="light"] .dw-panel-toolbar[data-btn-variant="soft"] .dw-panel-toolbar-btn,
3495
- [data-color-scheme="light"] .dw-panel-toolbar-btn[data-variant="soft"] {
3501
+ [data-color-scheme="light"] .rdd-panel-toolbar[data-btn-variant="soft"] .rdd-panel-toolbar-btn,
3502
+ [data-color-scheme="light"] .rdd-panel-toolbar-btn[data-variant="soft"] {
3496
3503
  background: rgba(0, 0, 0, 0.04);
3497
3504
  }
3498
- [data-color-scheme="light"] .dw-panel-toolbar[data-btn-variant="soft"] .dw-panel-toolbar-btn:hover:not(:disabled),
3499
- [data-color-scheme="light"] .dw-panel-toolbar-btn[data-variant="soft"]:hover:not(:disabled) {
3505
+ [data-color-scheme="light"] .rdd-panel-toolbar[data-btn-variant="soft"] .rdd-panel-toolbar-btn:hover:not(:disabled),
3506
+ [data-color-scheme="light"] .rdd-panel-toolbar-btn[data-variant="soft"]:hover:not(:disabled) {
3500
3507
  background: rgba(0, 0, 0, 0.08);
3501
3508
  }
3502
3509
 
3503
3510
  /* outlined */
3504
- .dw-panel-toolbar[data-btn-variant="outlined"] .dw-panel-toolbar-btn,
3505
- .dw-panel-toolbar-btn[data-variant="outlined"] {
3506
- border: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.18));
3511
+ .rdd-panel-toolbar[data-btn-variant="outlined"] .rdd-panel-toolbar-btn,
3512
+ .rdd-panel-toolbar-btn[data-variant="outlined"] {
3513
+ border: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.18));
3507
3514
  }
3508
- .dw-panel-toolbar[data-btn-variant="outlined"] .dw-panel-toolbar-btn:hover:not(:disabled),
3509
- .dw-panel-toolbar-btn[data-variant="outlined"]:hover:not(:disabled) {
3515
+ .rdd-panel-toolbar[data-btn-variant="outlined"] .rdd-panel-toolbar-btn:hover:not(:disabled),
3516
+ .rdd-panel-toolbar-btn[data-variant="outlined"]:hover:not(:disabled) {
3510
3517
  background: rgba(255, 255, 255, 0.12);
3511
3518
  border-color: rgba(255, 255, 255, 0.38);
3512
3519
  }
3513
- [data-color-scheme="light"] .dw-panel-toolbar[data-btn-variant="outlined"] .dw-panel-toolbar-btn:hover:not(:disabled),
3514
- [data-color-scheme="light"] .dw-panel-toolbar-btn[data-variant="outlined"]:hover:not(:disabled) {
3520
+ [data-color-scheme="light"] .rdd-panel-toolbar[data-btn-variant="outlined"] .rdd-panel-toolbar-btn:hover:not(:disabled),
3521
+ [data-color-scheme="light"] .rdd-panel-toolbar-btn[data-variant="outlined"]:hover:not(:disabled) {
3515
3522
  background: rgba(0, 0, 0, 0.06);
3516
3523
  border-color: rgba(0, 0, 0, 0.25);
3517
3524
  }
3518
3525
 
3519
3526
  /* filled */
3520
- .dw-panel-toolbar[data-btn-variant="filled"] .dw-panel-toolbar-btn,
3521
- .dw-panel-toolbar-btn[data-variant="filled"] {
3522
- background: var(--panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.2));
3523
- color: var(--panel-toolbar-btn-active-color, #38bdf8);
3524
- border: 1px solid var(--panel-toolbar-btn-active-color, #38bdf8);
3525
- }
3526
- .dw-panel-toolbar[data-btn-variant="filled"] .dw-panel-toolbar-btn:hover:not(:disabled),
3527
- .dw-panel-toolbar-btn[data-variant="filled"]:hover:not(:disabled) {
3528
- background: var(--panel-toolbar-btn-active-color, #38bdf8);
3527
+ .rdd-panel-toolbar[data-btn-variant="filled"] .rdd-panel-toolbar-btn,
3528
+ .rdd-panel-toolbar-btn[data-variant="filled"] {
3529
+ background: var(--rdd-panel-toolbar-btn-active-bg, rgba(56, 189, 248, 0.2));
3530
+ color: var(--rdd-panel-toolbar-btn-active-color, #38bdf8);
3531
+ border: 1px solid var(--rdd-panel-toolbar-btn-active-color, #38bdf8);
3532
+ }
3533
+ .rdd-panel-toolbar[data-btn-variant="filled"] .rdd-panel-toolbar-btn:hover:not(:disabled),
3534
+ .rdd-panel-toolbar-btn[data-variant="filled"]:hover:not(:disabled) {
3535
+ background: var(--rdd-panel-toolbar-btn-active-color, #38bdf8);
3529
3536
  color: #000;
3530
3537
  border-color: transparent;
3531
3538
  }
3532
3539
 
3533
3540
  /* ── Separator ── */
3534
- .dw-panel-toolbar__sep {
3541
+ .rdd-panel-toolbar__sep {
3535
3542
  flex-shrink: 0;
3536
- background: var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
3543
+ background: var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.09));
3537
3544
  align-self: center;
3538
3545
  }
3539
3546
 
3540
- .dw-panel-toolbar--top .dw-panel-toolbar__sep,
3541
- .dw-panel-toolbar--bottom .dw-panel-toolbar__sep {
3547
+ .rdd-panel-toolbar--top .rdd-panel-toolbar__sep,
3548
+ .rdd-panel-toolbar--bottom .rdd-panel-toolbar__sep {
3542
3549
  width: 1px;
3543
3550
  height: 18px;
3544
3551
  }
3545
3552
 
3546
- .dw-panel-toolbar--left .dw-panel-toolbar__sep,
3547
- .dw-panel-toolbar--right .dw-panel-toolbar__sep {
3553
+ .rdd-panel-toolbar--left .rdd-panel-toolbar__sep,
3554
+ .rdd-panel-toolbar--right .rdd-panel-toolbar__sep {
3548
3555
  height: 1px;
3549
3556
  width: 18px;
3550
3557
  }
3551
3558
 
3552
3559
  /* ── Spacer — pushes subsequent items to the opposite end ── */
3553
- .dw-panel-toolbar__spacer {
3560
+ .rdd-panel-toolbar__spacer {
3554
3561
  flex: 1;
3555
3562
  pointer-events: none;
3556
3563
  }
3557
3564
 
3558
3565
  /* ── ToolbarItem wrapper (restores pointer-events for custom controls) ── */
3559
- .dw-panel-toolbar__item {
3566
+ .rdd-panel-toolbar__item {
3560
3567
  display: inline-flex;
3561
3568
  align-items: center;
3562
3569
  pointer-events: auto;
3563
3570
  }
3564
3571
 
3565
3572
  /* ── ToolbarCenter — absolutely centered, independent of left/right widths ── */
3566
- .dw-panel-toolbar__center {
3573
+ .rdd-panel-toolbar__center {
3567
3574
  position: absolute;
3568
3575
  display: flex;
3569
3576
  align-items: center;
3570
- gap: var(--panel-toolbar-gap, 4px);
3577
+ gap: var(--rdd-panel-toolbar-gap, 4px);
3571
3578
  pointer-events: none;
3572
3579
  }
3573
- .dw-panel-toolbar__center > * {
3580
+ .rdd-panel-toolbar__center > * {
3574
3581
  pointer-events: auto;
3575
3582
  }
3576
3583
  /* Horizontal toolbars: center horizontally */
3577
- .dw-panel-toolbar--top .dw-panel-toolbar__center,
3578
- .dw-panel-toolbar--bottom .dw-panel-toolbar__center {
3584
+ .rdd-panel-toolbar--top .rdd-panel-toolbar__center,
3585
+ .rdd-panel-toolbar--bottom .rdd-panel-toolbar__center {
3579
3586
  flex-direction: row;
3580
3587
  top: 0;
3581
3588
  bottom: 0;
@@ -3583,8 +3590,8 @@ html:not(.enable-animations) *::after {
3583
3590
  transform: translateX(-50%);
3584
3591
  }
3585
3592
  /* Vertical toolbars: center vertically */
3586
- .dw-panel-toolbar--left .dw-panel-toolbar__center,
3587
- .dw-panel-toolbar--right .dw-panel-toolbar__center {
3593
+ .rdd-panel-toolbar--left .rdd-panel-toolbar__center,
3594
+ .rdd-panel-toolbar--right .rdd-panel-toolbar__center {
3588
3595
  flex-direction: column;
3589
3596
  left: 0;
3590
3597
  right: 0;
@@ -3593,17 +3600,17 @@ html:not(.enable-animations) *::after {
3593
3600
  }
3594
3601
 
3595
3602
  /* ── ToolbarSearchInput ── */
3596
- .dw-panel-toolbar-search {
3603
+ .rdd-panel-toolbar-search {
3597
3604
  display: inline-flex;
3598
3605
  align-items: center;
3599
3606
  gap: 4px;
3600
3607
  }
3601
3608
 
3602
- .dw-panel-toolbar-search__input {
3603
- height: var(--panel-toolbar-btn-size, 28px);
3609
+ .rdd-panel-toolbar-search__input {
3610
+ height: var(--rdd-panel-toolbar-btn-size, 28px);
3604
3611
  width: 200px;
3605
- border: 1px solid var(--panel-toolbar-separator-color, rgba(255, 255, 255, 0.15));
3606
- border-radius: var(--panel-toolbar-btn-radius, 6px);
3612
+ border: 1px solid var(--rdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.15));
3613
+ border-radius: var(--rdd-panel-toolbar-btn-radius, 6px);
3607
3614
  background: rgba(0, 0, 0, 0.18);
3608
3615
  color: inherit;
3609
3616
  padding: 0 8px;
@@ -3612,25 +3619,25 @@ html:not(.enable-animations) *::after {
3612
3619
  box-sizing: border-box;
3613
3620
  }
3614
3621
 
3615
- .dw-panel-toolbar-search__input::placeholder {
3622
+ .rdd-panel-toolbar-search__input::placeholder {
3616
3623
  opacity: 0.45;
3617
3624
  }
3618
3625
 
3619
- .dw-panel-toolbar-search__input:focus {
3620
- border-color: var(--panel-toolbar-btn-active-color, #38bdf8);
3626
+ .rdd-panel-toolbar-search__input:focus {
3627
+ border-color: var(--rdd-panel-toolbar-btn-active-color, #38bdf8);
3621
3628
  }
3622
3629
 
3623
- .dw-panel-toolbar-search__dropdown {
3624
- background: var(--panel-float-bg, rgba(22, 24, 34, 0.95));
3625
- border: 1px solid var(--panel-float-border, rgba(255, 255, 255, 0.1));
3626
- border-radius: var(--panel-float-radius, 8px);
3627
- box-shadow: var(--panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
3630
+ .rdd-panel-toolbar-search__dropdown {
3631
+ background: var(--rdd-panel-float-bg, rgba(22, 24, 34, 0.95));
3632
+ border: 1px solid var(--rdd-panel-float-border, rgba(255, 255, 255, 0.1));
3633
+ border-radius: var(--rdd-panel-float-radius, 8px);
3634
+ box-shadow: var(--rdd-panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
3628
3635
  overflow: hidden;
3629
3636
  max-height: 300px;
3630
3637
  overflow-y: auto;
3631
3638
  }
3632
3639
 
3633
- .dw-panel-toolbar-search__group {
3640
+ .rdd-panel-toolbar-search__group {
3634
3641
  padding: 6px 12px 2px;
3635
3642
  font-size: 10px;
3636
3643
  font-weight: 600;
@@ -3639,7 +3646,7 @@ html:not(.enable-animations) *::after {
3639
3646
  opacity: 0.45;
3640
3647
  }
3641
3648
 
3642
- .dw-panel-toolbar-search__item {
3649
+ .rdd-panel-toolbar-search__item {
3643
3650
  display: flex;
3644
3651
  align-items: center;
3645
3652
  gap: 8px;
@@ -3653,68 +3660,68 @@ html:not(.enable-animations) *::after {
3653
3660
  font-size: 12px;
3654
3661
  }
3655
3662
 
3656
- .dw-panel-toolbar-search__item:hover {
3657
- background: var(--panel-toolbar-btn-hover-bg, rgba(255, 255, 255, 0.08));
3663
+ .rdd-panel-toolbar-search__item:hover {
3664
+ background: var(--rdd-panel-toolbar-btn-hover-bg, rgba(255, 255, 255, 0.08));
3658
3665
  }
3659
3666
 
3660
- .dw-panel-toolbar-search__item-icon { flex-shrink: 0; opacity: 0.7; }
3661
- .dw-panel-toolbar-search__item-label { flex: 1; }
3662
- .dw-panel-toolbar-search__item-desc { opacity: 0.45; font-size: 11px; }
3667
+ .rdd-panel-toolbar-search__item-icon { flex-shrink: 0; opacity: 0.7; }
3668
+ .rdd-panel-toolbar-search__item-label { flex: 1; }
3669
+ .rdd-panel-toolbar-search__item-desc { opacity: 0.45; font-size: 11px; }
3663
3670
 
3664
3671
  /* ── Floating window ── */
3665
- .dw-panel-float {
3672
+ .rdd-panel-float {
3666
3673
  position: absolute;
3667
3674
  min-width: 120px;
3668
3675
  min-height: 60px;
3669
3676
  display: flex;
3670
3677
  flex-direction: column;
3671
- border-radius: var(--panel-float-radius, 8px);
3672
- background: var(--panel-float-bg, rgba(22, 24, 34, 0.92));
3673
- border: 1px solid var(--panel-float-border, rgba(255, 255, 255, 0.1));
3674
- box-shadow: var(--panel-float-shadow, 0 4px 16px rgba(0, 0, 0, 0.35));
3678
+ border-radius: var(--rdd-panel-float-radius, 8px);
3679
+ background: var(--rdd-panel-float-bg, rgba(22, 24, 34, 0.92));
3680
+ border: 1px solid var(--rdd-panel-float-border, rgba(255, 255, 255, 0.1));
3681
+ box-shadow: var(--rdd-panel-float-shadow, 0 4px 16px rgba(0, 0, 0, 0.35));
3675
3682
  backdrop-filter: blur(8px);
3676
3683
  overflow: hidden;
3677
3684
  }
3678
3685
 
3679
- .dw-panel-float--active {
3680
- box-shadow: var(--panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
3686
+ .rdd-panel-float--active {
3687
+ box-shadow: var(--rdd-panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
3681
3688
  }
3682
3689
 
3683
- .dw-panel-float__header {
3690
+ .rdd-panel-float__header {
3684
3691
  display: flex;
3685
3692
  align-items: center;
3686
3693
  gap: 6px;
3687
3694
  padding: 0 8px;
3688
3695
  height: 28px;
3689
3696
  flex-shrink: 0;
3690
- background: var(--panel-float-header-bg, rgba(255, 255, 255, 0.04));
3697
+ background: var(--rdd-panel-float-header-bg, rgba(255, 255, 255, 0.04));
3691
3698
  cursor: grab;
3692
3699
  user-select: none;
3693
3700
  }
3694
3701
 
3695
- .dw-panel-float__header:active {
3702
+ .rdd-panel-float__header:active {
3696
3703
  cursor: grabbing;
3697
3704
  }
3698
3705
 
3699
- .dw-panel-float--active .dw-panel-float__header {
3700
- background: var(--panel-float-header-bg-active, rgba(56, 189, 248, 0.08));
3706
+ .rdd-panel-float--active .rdd-panel-float__header {
3707
+ background: var(--rdd-panel-float-header-bg-active, rgba(56, 189, 248, 0.08));
3701
3708
  }
3702
3709
 
3703
- .dw-panel-float__title {
3710
+ .rdd-panel-float__title {
3704
3711
  flex: 1;
3705
3712
  font-size: 11px;
3706
3713
  font-weight: 500;
3707
- color: var(--panel-float-title-color, rgba(255, 255, 255, 0.6));
3714
+ color: var(--rdd-panel-float-title-color, rgba(255, 255, 255, 0.6));
3708
3715
  overflow: hidden;
3709
3716
  text-overflow: ellipsis;
3710
3717
  white-space: nowrap;
3711
3718
  }
3712
3719
 
3713
- .dw-panel-float--active .dw-panel-float__title {
3714
- color: var(--panel-float-title-color-active, rgba(255, 255, 255, 0.9));
3720
+ .rdd-panel-float--active .rdd-panel-float__title {
3721
+ color: var(--rdd-panel-float-title-color-active, rgba(255, 255, 255, 0.9));
3715
3722
  }
3716
3723
 
3717
- .dw-panel-float__icon {
3724
+ .rdd-panel-float__icon {
3718
3725
  flex-shrink: 0;
3719
3726
  width: 14px;
3720
3727
  height: 14px;
@@ -3722,23 +3729,23 @@ html:not(.enable-animations) *::after {
3722
3729
  align-items: center;
3723
3730
  justify-content: center;
3724
3731
  opacity: 0.7;
3725
- color: var(--panel-float-title-color, rgba(255, 255, 255, 0.6));
3732
+ color: var(--rdd-panel-float-title-color, rgba(255, 255, 255, 0.6));
3726
3733
  }
3727
- .dw-panel-float--active .dw-panel-float__icon {
3734
+ .rdd-panel-float--active .rdd-panel-float__icon {
3728
3735
  opacity: 1;
3729
- color: var(--panel-float-title-color-active, rgba(255, 255, 255, 0.9));
3736
+ color: var(--rdd-panel-float-title-color-active, rgba(255, 255, 255, 0.9));
3730
3737
  }
3731
3738
 
3732
- .dw-panel-float__close {
3739
+ .rdd-panel-float__close {
3733
3740
  display: inline-flex;
3734
3741
  align-items: center;
3735
3742
  justify-content: center;
3736
3743
  width: 18px;
3737
3744
  height: 18px;
3738
3745
  flex-shrink: 0;
3739
- background: var(--custom-btn-bg, rgba(255, 255, 255, 0.03));
3740
- border: 1px solid var(--custom-btn-border, rgba(255, 255, 255, 0.05));
3741
- color: var(--text-secondary, #94a3b8);
3746
+ background: var(--rdd-custom-btn-bg, rgba(255, 255, 255, 0.03));
3747
+ border: 1px solid var(--rdd-custom-btn-border, rgba(255, 255, 255, 0.05));
3748
+ color: var(--rdd-text-secondary, #94a3b8);
3742
3749
  cursor: pointer;
3743
3750
  border-radius: 4px;
3744
3751
  padding: 0;
@@ -3746,21 +3753,21 @@ html:not(.enable-animations) *::after {
3746
3753
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
3747
3754
  }
3748
3755
 
3749
- .dw-panel-float__close:hover {
3750
- background-color: var(--custom-btn-hover-bg, rgba(255, 255, 255, 0.12));
3751
- color: var(--custom-btn-hover-color, #ffffff);
3752
- border-color: var(--custom-btn-border, rgba(255, 255, 255, 0.05));
3756
+ .rdd-panel-float__close:hover {
3757
+ background-color: var(--rdd-custom-btn-hover-bg, rgba(255, 255, 255, 0.12));
3758
+ color: var(--rdd-custom-btn-hover-color, #ffffff);
3759
+ border-color: var(--rdd-custom-btn-border, rgba(255, 255, 255, 0.05));
3753
3760
  transform: scale(1.05);
3754
3761
  }
3755
3762
 
3756
- .dw-panel-float__body {
3763
+ .rdd-panel-float__body {
3757
3764
  flex: 1;
3758
3765
  overflow: auto;
3759
3766
  min-height: 0;
3760
3767
  }
3761
3768
 
3762
3769
  /* Resize grip — bottom-right corner */
3763
- .dw-panel-float__resize {
3770
+ .rdd-panel-float__resize {
3764
3771
  position: absolute;
3765
3772
  bottom: 0;
3766
3773
  right: 0;
@@ -3770,11 +3777,11 @@ html:not(.enable-animations) *::after {
3770
3777
  }
3771
3778
 
3772
3779
  /* ── Docking drop zones (visible while dragging a floating window) ── */
3773
- .dw-panel-float-dropzone {
3780
+ .rdd-panel-float-dropzone {
3774
3781
  position: absolute;
3775
3782
  width: 80px;
3776
3783
  height: 80px;
3777
- border: 2px dashed var(--accent-color, #38bdf8);
3784
+ border: 2px dashed var(--rdd-accent-color, #38bdf8);
3778
3785
  border-radius: 8px;
3779
3786
  background: rgba(56, 189, 248, 0.06);
3780
3787
  pointer-events: none;
@@ -3783,68 +3790,68 @@ html:not(.enable-animations) *::after {
3783
3790
  transition: opacity 0.15s ease, background 0.15s ease, border-style 0.15s ease;
3784
3791
  }
3785
3792
 
3786
- .dw-panel-float-dropzone--hovered {
3793
+ .rdd-panel-float-dropzone--hovered {
3787
3794
  opacity: 1;
3788
3795
  background: rgba(56, 189, 248, 0.18);
3789
3796
  border-style: solid;
3790
3797
  }
3791
3798
 
3792
- .dw-panel-float-dropzone--top-left { top: 8px; left: 8px; }
3793
- .dw-panel-float-dropzone--top-right { top: 8px; right: 8px; }
3794
- .dw-panel-float-dropzone--bottom-left { bottom: 8px; left: 8px; }
3795
- .dw-panel-float-dropzone--bottom-right { bottom: 8px; right: 8px; }
3799
+ .rdd-panel-float-dropzone--top-left { top: 8px; left: 8px; }
3800
+ .rdd-panel-float-dropzone--top-right { top: 8px; right: 8px; }
3801
+ .rdd-panel-float-dropzone--bottom-left { bottom: 8px; left: 8px; }
3802
+ .rdd-panel-float-dropzone--bottom-right { bottom: 8px; right: 8px; }
3796
3803
 
3797
- [dir="rtl"] .dw-panel-float-dropzone--top-right { right: auto; left: 8px; }
3798
- [dir="rtl"] .dw-panel-float-dropzone--top-left { left: auto; right: 8px; }
3799
- [dir="rtl"] .dw-panel-float-dropzone--bottom-right { right: auto; left: 8px; }
3800
- [dir="rtl"] .dw-panel-float-dropzone--bottom-left { left: auto; right: 8px; }
3804
+ [dir="rtl"] .rdd-panel-float-dropzone--top-right { right: auto; left: 8px; }
3805
+ [dir="rtl"] .rdd-panel-float-dropzone--top-left { left: auto; right: 8px; }
3806
+ [dir="rtl"] .rdd-panel-float-dropzone--bottom-right { right: auto; left: 8px; }
3807
+ [dir="rtl"] .rdd-panel-float-dropzone--bottom-left { left: auto; right: 8px; }
3801
3808
 
3802
- [dir="rtl"] .dw-panel-float__title { text-align: right; }
3809
+ [dir="rtl"] .rdd-panel-float__title { text-align: right; }
3803
3810
 
3804
3811
  /* ── Toast ── */
3805
3812
 
3806
3813
  /* Color tokens — match confirmation-alert-* palette exactly */
3807
3814
  :root {
3808
- --toast-info-color: #67e8f9;
3809
- --toast-success-color: #4ade80;
3810
- --toast-warning-color: #fbbf24;
3811
- --toast-error-color: #f87171;
3812
- --toast-bg: #2a2d32;
3813
- --toast-border: rgba(255, 255, 255, 0.14);
3815
+ --rdd-toast-info-color: #67e8f9;
3816
+ --rdd-toast-success-color: #4ade80;
3817
+ --rdd-toast-warning-color: #fbbf24;
3818
+ --rdd-toast-error-color: #f87171;
3819
+ --rdd-toast-bg: #2a2d32;
3820
+ --rdd-toast-border: rgba(255, 255, 255, 0.14);
3814
3821
  }
3815
3822
  [data-color-scheme="light"] {
3816
- --toast-info-color: #0369a1;
3817
- --toast-success-color: #15803d;
3818
- --toast-warning-color: #b45309;
3819
- --toast-error-color: #b91c1c;
3820
- --toast-bg: #ffffff;
3821
- --toast-border: rgba(0, 0, 0, 0.14);
3823
+ --rdd-toast-info-color: #0369a1;
3824
+ --rdd-toast-success-color: #15803d;
3825
+ --rdd-toast-warning-color: #b45309;
3826
+ --rdd-toast-error-color: #b91c1c;
3827
+ --rdd-toast-bg: #ffffff;
3828
+ --rdd-toast-border: rgba(0, 0, 0, 0.14);
3822
3829
  }
3823
3830
 
3824
3831
  /* Position containers */
3825
- .dw-toast-container {
3826
- position: fixed; z-index: 10100;
3832
+ .rdd-toast-container {
3833
+ position: fixed; z-index: calc(var(--rdd-z-base, 1000) + 9100);
3827
3834
  display: flex; gap: 8px; padding: 16px;
3828
3835
  pointer-events: none;
3829
3836
  box-sizing: border-box;
3830
3837
  }
3831
- .dw-toast-container--top-right { top: var(--dw-toast-offset-top, 0px); right: 0; flex-direction: column; }
3832
- .dw-toast-container--top-left { top: var(--dw-toast-offset-top, 0px); left: 0; flex-direction: column; }
3833
- .dw-toast-container--bottom-right { bottom: var(--dw-toast-offset-bottom, 0px); right: 0; flex-direction: column-reverse; }
3834
- .dw-toast-container--bottom-left { bottom: var(--dw-toast-offset-bottom, 0px); left: 0; flex-direction: column-reverse; }
3838
+ .rdd-toast-container--top-right { top: var(--rdd-toast-offset-top, 0px); right: 0; flex-direction: column; }
3839
+ .rdd-toast-container--top-left { top: var(--rdd-toast-offset-top, 0px); left: 0; flex-direction: column; }
3840
+ .rdd-toast-container--bottom-right { bottom: var(--rdd-toast-offset-bottom, 0px); right: 0; flex-direction: column-reverse; }
3841
+ .rdd-toast-container--bottom-left { bottom: var(--rdd-toast-offset-bottom, 0px); left: 0; flex-direction: column-reverse; }
3835
3842
  /* newestOnTop override inverts the column direction */
3836
- .dw-toast-container--newest-top.dw-toast-container--bottom-right,
3837
- .dw-toast-container--newest-top.dw-toast-container--bottom-left { flex-direction: column; }
3838
- .dw-toast-container--newest-bottom.dw-toast-container--top-right,
3839
- .dw-toast-container--newest-bottom.dw-toast-container--top-left { flex-direction: column-reverse; }
3843
+ .rdd-toast-container--newest-top.rdd-toast-container--bottom-right,
3844
+ .rdd-toast-container--newest-top.rdd-toast-container--bottom-left { flex-direction: column; }
3845
+ .rdd-toast-container--newest-bottom.rdd-toast-container--top-right,
3846
+ .rdd-toast-container--newest-bottom.rdd-toast-container--top-left { flex-direction: column-reverse; }
3840
3847
 
3841
3848
  /* Individual toast — base card */
3842
- .dw-toast {
3849
+ .rdd-toast {
3843
3850
  pointer-events: all; position: relative; overflow: hidden;
3844
3851
  display: flex; align-items: flex-start; gap: 10px;
3845
3852
  padding: 20px 14px; border-radius: 6px;
3846
- background: var(--toast-bg, #2a2d32);
3847
- border: 1px solid var(--toast-border, rgba(255,255,255,0.14)); border-inline-start-width: 3px;
3853
+ background: var(--rdd-toast-bg, #2a2d32);
3854
+ border: 1px solid var(--rdd-toast-border, rgba(255,255,255,0.14)); border-inline-start-width: 3px;
3848
3855
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
3849
3856
  color: var(--sidebar-text-title, #cccccc);
3850
3857
  font-size: 13.5px; line-height: 1.4; width: 100%;
@@ -3852,54 +3859,54 @@ html:not(.enable-animations) *::after {
3852
3859
  max-height 300ms ease, padding 300ms ease, margin 300ms ease;
3853
3860
  }
3854
3861
  /* Reserve space for the absolute-positioned close button */
3855
- .dw-toast:has(.dw-toast__close) { padding-inline-end: 32px; }
3862
+ .rdd-toast:has(.rdd-toast__close) { padding-inline-end: 32px; }
3856
3863
 
3857
3864
  /* Type-specific: solid background, accent inline-start border only */
3858
- .dw-toast--info { border-inline-start-color: var(--toast-info-color); }
3859
- .dw-toast--success { border-inline-start-color: var(--toast-success-color); }
3860
- .dw-toast--warning { border-inline-start-color: var(--toast-warning-color); }
3861
- .dw-toast--error { border-inline-start-color: var(--toast-error-color); }
3865
+ .rdd-toast--info { border-inline-start-color: var(--rdd-toast-info-color); }
3866
+ .rdd-toast--success { border-inline-start-color: var(--rdd-toast-success-color); }
3867
+ .rdd-toast--warning { border-inline-start-color: var(--rdd-toast-warning-color); }
3868
+ .rdd-toast--error { border-inline-start-color: var(--rdd-toast-error-color); }
3862
3869
 
3863
3870
  /* Entry animation classes toggled by JS on next frame */
3864
- .dw-toast--entering { opacity: 0; transform: translateX(110%); }
3865
- .dw-toast--entering-left { opacity: 0; transform: translateX(-110%); }
3866
- .dw-toast--fade-entering { opacity: 0; transform: translateX(0); }
3867
- .dw-toast--visible { opacity: 1; transform: translateX(0); }
3871
+ .rdd-toast--entering { opacity: 0; transform: translateX(110%); }
3872
+ .rdd-toast--entering-left { opacity: 0; transform: translateX(-110%); }
3873
+ .rdd-toast--fade-entering { opacity: 0; transform: translateX(0); }
3874
+ .rdd-toast--visible { opacity: 1; transform: translateX(0); }
3868
3875
  /* Exit: fade out + height collapse for gravity slide effect */
3869
- .dw-toast--exiting {
3876
+ .rdd-toast--exiting {
3870
3877
  opacity: 0; max-height: 0 !important;
3871
3878
  padding-top: 0; padding-bottom: 0; margin: 0;
3872
3879
  }
3873
3880
 
3874
3881
  /* Icon */
3875
- .dw-toast__icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
3876
- .dw-toast--info .dw-toast__icon { color: var(--toast-info-color); }
3877
- .dw-toast--success .dw-toast__icon { color: var(--toast-success-color); }
3878
- .dw-toast--warning .dw-toast__icon { color: var(--toast-warning-color); }
3879
- .dw-toast--error .dw-toast__icon { color: var(--toast-error-color); }
3882
+ .rdd-toast__icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
3883
+ .rdd-toast--info .rdd-toast__icon { color: var(--rdd-toast-info-color); }
3884
+ .rdd-toast--success .rdd-toast__icon { color: var(--rdd-toast-success-color); }
3885
+ .rdd-toast--warning .rdd-toast__icon { color: var(--rdd-toast-warning-color); }
3886
+ .rdd-toast--error .rdd-toast__icon { color: var(--rdd-toast-error-color); }
3880
3887
 
3881
3888
  /* Body & close button */
3882
- .dw-toast__body { flex: 1; min-width: 0; word-break: break-word; }
3883
- .dw-toast__close {
3889
+ .rdd-toast__body { flex: 1; min-width: 0; word-break: break-word; }
3890
+ .rdd-toast__close {
3884
3891
  position: absolute; top: 8px; inset-inline-end: 10px;
3885
3892
  background: none; border: none; cursor: pointer;
3886
3893
  opacity: .5; padding: 2px; color: inherit; line-height: 1;
3887
3894
  }
3888
- .dw-toast__close:hover { opacity: 1; }
3895
+ .rdd-toast__close:hover { opacity: 1; }
3889
3896
 
3890
3897
  /* Progress bar */
3891
- .dw-toast__progress {
3898
+ .rdd-toast__progress {
3892
3899
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
3893
- transform-origin: left; animation: dw-toast-shrink linear forwards;
3900
+ transform-origin: left; animation: rdd-toast-shrink linear forwards;
3894
3901
  }
3895
- .dw-toast--paused .dw-toast__progress { animation-play-state: paused; }
3896
- .dw-toast--info .dw-toast__progress { background: var(--toast-info-color); }
3897
- .dw-toast--success .dw-toast__progress { background: var(--toast-success-color); }
3898
- .dw-toast--warning .dw-toast__progress { background: var(--toast-warning-color); }
3899
- .dw-toast--error .dw-toast__progress { background: var(--toast-error-color); }
3902
+ .rdd-toast--paused .rdd-toast__progress { animation-play-state: paused; }
3903
+ .rdd-toast--info .rdd-toast__progress { background: var(--rdd-toast-info-color); }
3904
+ .rdd-toast--success .rdd-toast__progress { background: var(--rdd-toast-success-color); }
3905
+ .rdd-toast--warning .rdd-toast__progress { background: var(--rdd-toast-warning-color); }
3906
+ .rdd-toast--error .rdd-toast__progress { background: var(--rdd-toast-error-color); }
3900
3907
 
3901
- @keyframes dw-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
3908
+ @keyframes rdd-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
3902
3909
 
3903
3910
  /* Toast RTL: flip icon/body order and progress bar collapse direction */
3904
- [dir="rtl"] .dw-toast { flex-direction: row-reverse; }
3905
- [dir="rtl"] .dw-toast__progress { transform-origin: right; }
3911
+ [dir="rtl"] .rdd-toast { flex-direction: row-reverse; }
3912
+ [dir="rtl"] .rdd-toast__progress { transform-origin: right; }