a2acalling 0.6.63 → 0.6.64
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.
- package/.a2a-manifest.json +2 -2
- package/.maestro/inbox/release-workflow-spam.md +25 -0
- package/docs/plans/2026-02-21-a2a-48-permissions-redesign.md +359 -0
- package/docs/plans/2026-02-21-a2a-49-remaining-tabs-polish.md +375 -0
- package/package.json +1 -1
- package/src/dashboard/public/app.js +564 -400
- package/src/dashboard/public/index.html +194 -125
- package/src/dashboard/public/style.css +919 -109
|
@@ -1,13 +1,17 @@
|
|
|
1
|
+
/* A2A-47: Dark theme CSS custom properties replacing light theme */
|
|
1
2
|
:root {
|
|
2
|
-
--bg: #
|
|
3
|
-
--panel: #
|
|
4
|
-
--ink: #
|
|
5
|
-
--
|
|
6
|
-
--
|
|
3
|
+
--bg: #0B0E14;
|
|
4
|
+
--panel: #151B28;
|
|
5
|
+
--ink: #e2e8f0;
|
|
6
|
+
--ink-muted: #94a3b8;
|
|
7
|
+
--line: rgba(255, 255, 255, 0.08);
|
|
8
|
+
--accent: #3B82F6;
|
|
9
|
+
--sidebar-bg: #0F131C;
|
|
10
|
+
--card-bg: #1E2738;
|
|
7
11
|
|
|
8
12
|
/* Map app vars to Shoelace design tokens */
|
|
9
13
|
--sl-color-primary-600: var(--accent);
|
|
10
|
-
--sl-font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
|
|
14
|
+
--sl-font-sans: "Inter", "IBM Plex Sans", "Segoe UI", sans-serif;
|
|
11
15
|
}
|
|
12
16
|
|
|
13
17
|
* {
|
|
@@ -18,33 +22,149 @@ body {
|
|
|
18
22
|
margin: 0;
|
|
19
23
|
font-family: var(--sl-font-sans);
|
|
20
24
|
color: var(--ink);
|
|
21
|
-
background:
|
|
25
|
+
background: var(--bg);
|
|
22
26
|
}
|
|
23
27
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
28
|
+
/* A2A-47: Panel-based layout — only active panel is visible */
|
|
29
|
+
.panel {
|
|
30
|
+
display: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.panel.active {
|
|
34
|
+
display: block;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* ── A2A-47: Fixed sidebar navigation ──────────────────────── */
|
|
38
|
+
.sidebar {
|
|
39
|
+
position: fixed;
|
|
40
|
+
top: 0;
|
|
41
|
+
left: 0;
|
|
42
|
+
width: 256px;
|
|
43
|
+
height: 100vh;
|
|
44
|
+
background: var(--sidebar-bg);
|
|
45
|
+
border-right: 1px solid var(--line);
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
z-index: 100;
|
|
49
|
+
overflow-y: auto;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.sidebar-brand {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: 0.6rem;
|
|
56
|
+
padding: 1.2rem 1rem;
|
|
27
57
|
border-bottom: 1px solid var(--line);
|
|
28
58
|
}
|
|
29
59
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
60
|
+
.brand-icon {
|
|
61
|
+
font-size: 1.5rem;
|
|
62
|
+
color: var(--accent);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.brand-text {
|
|
66
|
+
font-size: 1.05rem;
|
|
67
|
+
font-weight: 600;
|
|
68
|
+
color: var(--ink);
|
|
69
|
+
white-space: nowrap;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.sidebar-nav {
|
|
73
|
+
display: flex;
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
padding: 0.5rem 0;
|
|
33
76
|
}
|
|
34
77
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
78
|
+
.nav-item {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
gap: 0.75rem;
|
|
82
|
+
padding: 0.65rem 1rem;
|
|
83
|
+
color: var(--ink-muted);
|
|
84
|
+
text-decoration: none;
|
|
85
|
+
cursor: pointer;
|
|
86
|
+
transition: background 0.15s ease, color 0.15s ease;
|
|
87
|
+
border-right: 3px solid transparent;
|
|
38
88
|
font-size: 0.9rem;
|
|
89
|
+
user-select: none;
|
|
39
90
|
}
|
|
40
91
|
|
|
41
|
-
|
|
42
|
-
|
|
92
|
+
.nav-item:hover {
|
|
93
|
+
background: rgba(255, 255, 255, 0.04);
|
|
94
|
+
color: var(--ink);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* A2A-47: Active nav item — blue tint background + right border facing content */
|
|
98
|
+
.nav-item.active {
|
|
99
|
+
background: rgba(59, 130, 246, 0.15);
|
|
100
|
+
border-right: 3px solid #3B82F6;
|
|
101
|
+
color: var(--ink);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.nav-icon {
|
|
105
|
+
font-size: 1.25rem;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.nav-label {
|
|
109
|
+
white-space: nowrap;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* ── A2A-47: Main content area offset by sidebar ──────────── */
|
|
113
|
+
.main-content {
|
|
114
|
+
margin-left: 256px;
|
|
115
|
+
min-height: 100vh;
|
|
116
|
+
position: relative;
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* A2A-47: Decorative gradient orbs for visual depth */
|
|
121
|
+
.bg-orb {
|
|
122
|
+
position: absolute;
|
|
123
|
+
border-radius: 50%;
|
|
124
|
+
filter: blur(120px);
|
|
125
|
+
pointer-events: none;
|
|
126
|
+
opacity: 0.15;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.bg-orb-blue {
|
|
130
|
+
width: 500px;
|
|
131
|
+
height: 500px;
|
|
132
|
+
background: #3B82F6;
|
|
133
|
+
top: -150px;
|
|
134
|
+
right: -100px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.bg-orb-purple {
|
|
138
|
+
width: 400px;
|
|
139
|
+
height: 400px;
|
|
140
|
+
background: #8B5CF6;
|
|
141
|
+
bottom: -100px;
|
|
142
|
+
left: -50px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.content-header {
|
|
146
|
+
padding: 1.2rem 1.5rem 0.8rem;
|
|
147
|
+
position: relative;
|
|
148
|
+
z-index: 1;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.content-header h1 {
|
|
152
|
+
margin: 0;
|
|
153
|
+
font-size: 1.4rem;
|
|
154
|
+
font-weight: 600;
|
|
155
|
+
color: var(--ink);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.content-body {
|
|
159
|
+
padding: 0 1.5rem 1.5rem;
|
|
160
|
+
position: relative;
|
|
161
|
+
z-index: 1;
|
|
43
162
|
}
|
|
44
163
|
|
|
45
164
|
h2,
|
|
46
165
|
h3 {
|
|
47
166
|
margin-top: 0;
|
|
167
|
+
color: var(--ink);
|
|
48
168
|
}
|
|
49
169
|
|
|
50
170
|
.row {
|
|
@@ -60,16 +180,30 @@ h3 {
|
|
|
60
180
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
61
181
|
gap: 0.6rem;
|
|
62
182
|
margin-bottom: 0.9rem;
|
|
183
|
+
/* A2A-49: Subtle background for filter areas */
|
|
184
|
+
background: rgba(255, 255, 255, 0.02);
|
|
185
|
+
border: 1px solid var(--line);
|
|
186
|
+
border-radius: 10px;
|
|
187
|
+
padding: 0.8rem;
|
|
63
188
|
}
|
|
64
189
|
|
|
65
|
-
/*
|
|
190
|
+
/* A2A-47: Glass-panel style for cards in dark theme */
|
|
191
|
+
.glass-panel {
|
|
192
|
+
background: rgba(30, 41, 59, 0.4);
|
|
193
|
+
backdrop-filter: blur(12px);
|
|
194
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
195
|
+
border-radius: 10px;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Shoelace sl-card spacing — dark theme overrides */
|
|
66
199
|
sl-card {
|
|
67
200
|
margin-bottom: 0.9rem;
|
|
68
201
|
--padding: 0.75rem 0.8rem;
|
|
69
202
|
}
|
|
70
203
|
|
|
204
|
+
/* A2A-47: Let Shoelace dark theme handle card background instead of hardcoded light */
|
|
71
205
|
sl-card::part(base) {
|
|
72
|
-
background:
|
|
206
|
+
background: var(--card-bg);
|
|
73
207
|
border-color: var(--line);
|
|
74
208
|
}
|
|
75
209
|
|
|
@@ -91,9 +225,10 @@ label {
|
|
|
91
225
|
display: block;
|
|
92
226
|
margin-bottom: 0.6rem;
|
|
93
227
|
font-size: 0.9rem;
|
|
228
|
+
color: var(--ink-muted);
|
|
94
229
|
}
|
|
95
230
|
|
|
96
|
-
/* Tables */
|
|
231
|
+
/* A2A-47: Tables with dark theme colors */
|
|
97
232
|
table {
|
|
98
233
|
width: 100%;
|
|
99
234
|
border-collapse: collapse;
|
|
@@ -109,12 +244,16 @@ td {
|
|
|
109
244
|
font-size: 0.85rem;
|
|
110
245
|
}
|
|
111
246
|
|
|
247
|
+
/* A2A-47: Dark header background replacing light #f8fafc */
|
|
112
248
|
th {
|
|
113
|
-
background:
|
|
249
|
+
background: rgba(255, 255, 255, 0.04);
|
|
250
|
+
color: var(--ink-muted);
|
|
251
|
+
font-weight: 500;
|
|
114
252
|
}
|
|
115
253
|
|
|
254
|
+
/* A2A-47: Dark selected row replacing light #f0f7ff */
|
|
116
255
|
tr[data-selected="1"] td {
|
|
117
|
-
background:
|
|
256
|
+
background: rgba(59, 130, 246, 0.12);
|
|
118
257
|
}
|
|
119
258
|
|
|
120
259
|
/* Summary & transcript */
|
|
@@ -124,7 +263,7 @@ tr[data-selected="1"] td {
|
|
|
124
263
|
}
|
|
125
264
|
|
|
126
265
|
.summary-pending {
|
|
127
|
-
color:
|
|
266
|
+
color: var(--ink-muted);
|
|
128
267
|
margin: 0.25em 0 0.75em;
|
|
129
268
|
}
|
|
130
269
|
|
|
@@ -132,17 +271,19 @@ tr[data-selected="1"] td {
|
|
|
132
271
|
margin-top: 1em;
|
|
133
272
|
}
|
|
134
273
|
|
|
274
|
+
/* A2A-47: Dark transcript background replacing light #f9fafb */
|
|
135
275
|
.transcript {
|
|
136
276
|
max-width: 600px;
|
|
137
277
|
white-space: pre-wrap;
|
|
138
|
-
background:
|
|
139
|
-
border: 1px solid
|
|
278
|
+
background: rgba(255, 255, 255, 0.03);
|
|
279
|
+
border: 1px solid var(--line);
|
|
140
280
|
border-radius: 4px;
|
|
141
281
|
padding: 0.75em;
|
|
142
282
|
margin-top: 0.5em;
|
|
143
283
|
font-size: 0.85em;
|
|
144
284
|
max-height: 400px;
|
|
145
285
|
overflow-y: auto;
|
|
286
|
+
color: var(--ink);
|
|
146
287
|
}
|
|
147
288
|
|
|
148
289
|
.mono {
|
|
@@ -153,24 +294,43 @@ tr[data-selected="1"] td {
|
|
|
153
294
|
cursor: default;
|
|
154
295
|
}
|
|
155
296
|
|
|
156
|
-
|
|
157
|
-
|
|
297
|
+
/* A2A-49: Universal dark table row hover for all tabs.
|
|
298
|
+
Uses 0.04 to match the existing logs hover opacity from A2A-47. */
|
|
299
|
+
table tbody tr:hover td {
|
|
300
|
+
background: rgba(255, 255, 255, 0.04);
|
|
158
301
|
}
|
|
159
302
|
|
|
303
|
+
/* A2A-49: Contacts rows use buttons inside cells (not full-row click),
|
|
304
|
+
so they don't get cursor:pointer — only calls rows do. */
|
|
305
|
+
|
|
306
|
+
/* A2A-49: Clickable table rows get pointer cursor */
|
|
307
|
+
#calls-table tbody tr {
|
|
308
|
+
cursor: pointer;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
#calls-table tbody tr:hover td {
|
|
312
|
+
background: rgba(59, 130, 246, 0.08);
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/* A2A-47: Dark notice styling replacing light blue colors */
|
|
160
316
|
#notice {
|
|
161
|
-
|
|
317
|
+
position: fixed;
|
|
318
|
+
bottom: 1rem;
|
|
319
|
+
right: 1rem;
|
|
162
320
|
padding: 0.7rem 0.8rem;
|
|
163
321
|
border-radius: 8px;
|
|
164
|
-
background:
|
|
165
|
-
border: 1px solid
|
|
166
|
-
color: #
|
|
322
|
+
background: rgba(59, 130, 246, 0.2);
|
|
323
|
+
border: 1px solid rgba(59, 130, 246, 0.4);
|
|
324
|
+
color: #93c5fd;
|
|
167
325
|
display: none;
|
|
326
|
+
z-index: 200;
|
|
327
|
+
backdrop-filter: blur(8px);
|
|
168
328
|
}
|
|
169
329
|
|
|
170
330
|
/* Pin button for last-called contacts (sl-icon-button) */
|
|
171
331
|
.pin-btn {
|
|
172
332
|
font-size: 1rem;
|
|
173
|
-
color: #
|
|
333
|
+
color: #64748b;
|
|
174
334
|
}
|
|
175
335
|
|
|
176
336
|
.pin-btn:hover {
|
|
@@ -181,27 +341,7 @@ tr[data-selected="1"] td {
|
|
|
181
341
|
color: var(--accent);
|
|
182
342
|
}
|
|
183
343
|
|
|
184
|
-
/*
|
|
185
|
-
sl-tab-group {
|
|
186
|
-
--indicator-color: var(--accent);
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
sl-tab-group::part(base) {
|
|
190
|
-
background: var(--panel);
|
|
191
|
-
border: 1px solid var(--line);
|
|
192
|
-
border-radius: 10px;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
sl-tab-group::part(nav) {
|
|
196
|
-
border-bottom: 1px solid var(--line);
|
|
197
|
-
background: #f8fafc;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
sl-tab-panel::part(base) {
|
|
201
|
-
padding: 1rem;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
/* ── A2A-41: Topic/Goal list rows ──────────────────────────── */
|
|
344
|
+
/* ── A2A-41: Topic/Goal list rows — dark theme overrides ──── */
|
|
205
345
|
.topic-row {
|
|
206
346
|
display: flex;
|
|
207
347
|
align-items: flex-start;
|
|
@@ -210,14 +350,14 @@ sl-tab-panel::part(base) {
|
|
|
210
350
|
border: 1px solid var(--line);
|
|
211
351
|
border-radius: 6px;
|
|
212
352
|
margin-bottom: 0.4rem;
|
|
213
|
-
background: var(--
|
|
353
|
+
background: var(--card-bg);
|
|
214
354
|
cursor: grab;
|
|
215
355
|
transition: box-shadow 0.15s ease, border-color 0.15s ease;
|
|
216
356
|
}
|
|
217
357
|
|
|
218
358
|
.topic-row:hover {
|
|
219
359
|
border-color: var(--accent);
|
|
220
|
-
box-shadow: 0 1px 4px rgba(
|
|
360
|
+
box-shadow: 0 1px 4px rgba(59, 130, 246, 0.15);
|
|
221
361
|
}
|
|
222
362
|
|
|
223
363
|
.topic-row.dragging {
|
|
@@ -225,12 +365,13 @@ sl-tab-panel::part(base) {
|
|
|
225
365
|
border-style: dashed;
|
|
226
366
|
}
|
|
227
367
|
|
|
368
|
+
/* A2A-47: Dark inherited row replacing light #f8fafc */
|
|
228
369
|
.topic-row.inherited {
|
|
229
370
|
opacity: 0.55;
|
|
230
|
-
background:
|
|
371
|
+
background: rgba(255, 255, 255, 0.03);
|
|
231
372
|
cursor: default;
|
|
232
373
|
border-style: dashed;
|
|
233
|
-
border-color:
|
|
374
|
+
border-color: rgba(255, 255, 255, 0.12);
|
|
234
375
|
}
|
|
235
376
|
|
|
236
377
|
.topic-row.inherited .drag-handle,
|
|
@@ -239,7 +380,7 @@ sl-tab-panel::part(base) {
|
|
|
239
380
|
}
|
|
240
381
|
|
|
241
382
|
.drag-handle {
|
|
242
|
-
color: #
|
|
383
|
+
color: #64748b;
|
|
243
384
|
cursor: grab;
|
|
244
385
|
user-select: none;
|
|
245
386
|
font-size: 1.1rem;
|
|
@@ -270,14 +411,14 @@ sl-tab-panel::part(base) {
|
|
|
270
411
|
|
|
271
412
|
.topic-desc-text {
|
|
272
413
|
font-size: 0.82rem;
|
|
273
|
-
color:
|
|
414
|
+
color: var(--ink-muted);
|
|
274
415
|
margin: 0 0 0.3rem;
|
|
275
416
|
line-height: 1.4;
|
|
276
417
|
}
|
|
277
418
|
|
|
278
419
|
.inherited-badge {
|
|
279
420
|
font-size: 0.72rem;
|
|
280
|
-
color: #
|
|
421
|
+
color: #64748b;
|
|
281
422
|
font-style: italic;
|
|
282
423
|
margin-left: auto;
|
|
283
424
|
}
|
|
@@ -289,7 +430,7 @@ sl-tab-panel::part(base) {
|
|
|
289
430
|
border-radius: 6px;
|
|
290
431
|
padding: 0.4rem;
|
|
291
432
|
background: transparent;
|
|
292
|
-
color: #
|
|
433
|
+
color: #64748b;
|
|
293
434
|
cursor: pointer;
|
|
294
435
|
font-size: 0.85rem;
|
|
295
436
|
transition: border-color 0.15s, color 0.15s;
|
|
@@ -300,64 +441,571 @@ sl-tab-panel::part(base) {
|
|
|
300
441
|
color: var(--accent);
|
|
301
442
|
}
|
|
302
443
|
|
|
303
|
-
/* ── A2A-
|
|
304
|
-
|
|
444
|
+
/* ── A2A-48: Permissions tab layout ────────────────────────── */
|
|
445
|
+
/* A2A-48: flex row for main content + right sidebar. The sidebar is fixed
|
|
446
|
+
width and hidden on narrow viewports to keep the main area usable. */
|
|
447
|
+
.perm-layout {
|
|
448
|
+
display: flex;
|
|
449
|
+
gap: 1.5rem;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.perm-main {
|
|
453
|
+
flex: 1;
|
|
454
|
+
min-width: 0;
|
|
455
|
+
overflow-y: auto;
|
|
456
|
+
max-width: 900px;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.perm-sidebar {
|
|
460
|
+
width: 280px;
|
|
461
|
+
flex-shrink: 0;
|
|
462
|
+
overflow-y: auto;
|
|
463
|
+
max-height: calc(100vh - 120px);
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.perm-section {
|
|
467
|
+
margin-bottom: 1.5rem;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.perm-section-header {
|
|
471
|
+
display: flex;
|
|
472
|
+
align-items: center;
|
|
473
|
+
justify-content: space-between;
|
|
474
|
+
margin-bottom: 0.6rem;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.perm-section-header h2 {
|
|
478
|
+
margin: 0;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.perm-hint {
|
|
482
|
+
font-size: 0.78rem;
|
|
483
|
+
color: var(--ink-muted);
|
|
484
|
+
font-style: italic;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.perm-add-btn {
|
|
488
|
+
display: flex;
|
|
489
|
+
align-items: center;
|
|
490
|
+
gap: 0.25rem;
|
|
491
|
+
background: none;
|
|
492
|
+
border: none;
|
|
493
|
+
color: var(--accent);
|
|
494
|
+
font-size: 0.85rem;
|
|
495
|
+
font-weight: 500;
|
|
496
|
+
cursor: pointer;
|
|
497
|
+
padding: 0.3rem 0.5rem;
|
|
498
|
+
border-radius: 6px;
|
|
499
|
+
transition: background 0.15s ease;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.perm-add-btn:hover {
|
|
503
|
+
background: rgba(59, 130, 246, 0.1);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
/* ── A2A-48: Tier cards grid ──────────────────────────────── */
|
|
507
|
+
.tier-cards-grid {
|
|
508
|
+
display: grid;
|
|
509
|
+
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
510
|
+
gap: 0.75rem;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.tier-card {
|
|
514
|
+
position: relative;
|
|
515
|
+
background: rgba(30, 39, 56, 0.5);
|
|
516
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
517
|
+
border-radius: 12px;
|
|
518
|
+
padding: 1rem;
|
|
305
519
|
display: flex;
|
|
306
520
|
flex-direction: column;
|
|
307
|
-
|
|
521
|
+
align-items: center;
|
|
522
|
+
justify-content: center;
|
|
523
|
+
gap: 0.4rem;
|
|
524
|
+
height: 96px;
|
|
525
|
+
cursor: pointer;
|
|
526
|
+
transition: background 0.15s ease, border-color 0.15s ease;
|
|
308
527
|
}
|
|
309
528
|
|
|
310
|
-
.
|
|
311
|
-
|
|
529
|
+
.tier-card:hover {
|
|
530
|
+
background: rgba(30, 39, 56, 0.8);
|
|
531
|
+
border-color: rgba(255, 255, 255, 0.18);
|
|
312
532
|
}
|
|
313
533
|
|
|
314
|
-
|
|
315
|
-
|
|
534
|
+
/* A2A-48: Active tier card gets a gradient glow border via pseudo-element
|
|
535
|
+
with blur, matching the concept mock's neon glow effect. */
|
|
536
|
+
.tier-card.active {
|
|
537
|
+
border-color: rgba(59, 130, 246, 0.5);
|
|
538
|
+
box-shadow: 0 0 12px rgba(59, 130, 246, 0.25), 0 0 4px rgba(59, 130, 246, 0.15);
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
.tier-card.active::before {
|
|
542
|
+
content: '';
|
|
543
|
+
position: absolute;
|
|
544
|
+
inset: -2px;
|
|
545
|
+
border-radius: 14px;
|
|
546
|
+
background: linear-gradient(135deg, #3B82F6, #06B6D4);
|
|
547
|
+
opacity: 0.5;
|
|
548
|
+
filter: blur(6px);
|
|
549
|
+
z-index: -1;
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
.tier-card .status-dot {
|
|
553
|
+
position: absolute;
|
|
554
|
+
top: 8px;
|
|
555
|
+
right: 8px;
|
|
316
556
|
}
|
|
317
557
|
|
|
318
|
-
.
|
|
319
|
-
|
|
320
|
-
font-weight: normal;
|
|
558
|
+
.tier-card-icon {
|
|
559
|
+
font-size: 1.5rem;
|
|
321
560
|
}
|
|
322
561
|
|
|
323
|
-
|
|
324
|
-
|
|
562
|
+
.tier-card-name {
|
|
563
|
+
font-size: 0.85rem;
|
|
564
|
+
font-weight: 600;
|
|
565
|
+
color: var(--ink);
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
/* ── A2A-48: Toggle switch cards (replacing checkboxes) ────── */
|
|
569
|
+
.tool-toggles-grid {
|
|
325
570
|
display: grid;
|
|
326
|
-
grid-template-columns:
|
|
327
|
-
gap: 0.
|
|
328
|
-
margin-bottom: 1.2rem;
|
|
571
|
+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
572
|
+
gap: 0.75rem;
|
|
329
573
|
}
|
|
330
574
|
|
|
331
|
-
.
|
|
332
|
-
|
|
575
|
+
.toggle-switch {
|
|
576
|
+
position: relative;
|
|
577
|
+
display: inline-block;
|
|
578
|
+
width: 44px;
|
|
579
|
+
height: 24px;
|
|
580
|
+
flex-shrink: 0;
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
.toggle-switch input {
|
|
584
|
+
opacity: 0;
|
|
585
|
+
width: 0;
|
|
586
|
+
height: 0;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
.toggle-switch .slider {
|
|
590
|
+
position: absolute;
|
|
591
|
+
cursor: pointer;
|
|
592
|
+
top: 0;
|
|
593
|
+
left: 0;
|
|
594
|
+
right: 0;
|
|
595
|
+
bottom: 0;
|
|
596
|
+
background-color: #374151;
|
|
597
|
+
transition: 0.3s;
|
|
598
|
+
border-radius: 24px;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.toggle-switch .slider:before {
|
|
602
|
+
position: absolute;
|
|
603
|
+
content: "";
|
|
604
|
+
height: 18px;
|
|
605
|
+
width: 18px;
|
|
606
|
+
left: 3px;
|
|
607
|
+
bottom: 3px;
|
|
608
|
+
background-color: white;
|
|
609
|
+
transition: 0.3s;
|
|
610
|
+
border-radius: 50%;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.toggle-switch input:checked + .slider {
|
|
614
|
+
background-color: #3B82F6;
|
|
615
|
+
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
.toggle-switch input:checked + .slider:before {
|
|
619
|
+
transform: translateX(20px);
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
.tool-toggle-card {
|
|
623
|
+
background: rgba(30, 41, 59, 0.4);
|
|
624
|
+
backdrop-filter: blur(12px);
|
|
625
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
626
|
+
border-radius: 12px;
|
|
627
|
+
padding: 1rem 1.2rem;
|
|
628
|
+
display: flex;
|
|
629
|
+
align-items: flex-start;
|
|
630
|
+
justify-content: space-between;
|
|
631
|
+
gap: 0.75rem;
|
|
632
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
.tool-toggle-card:hover {
|
|
636
|
+
background: rgba(30, 41, 59, 0.6);
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
/* A2A-48: Enabled tool card gets subtle blue border glow to match concept mock */
|
|
640
|
+
.tool-toggle-card.enabled {
|
|
641
|
+
border-color: rgba(59, 130, 246, 0.3);
|
|
642
|
+
box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.tool-toggle-info {
|
|
646
|
+
display: flex;
|
|
647
|
+
align-items: flex-start;
|
|
648
|
+
gap: 0.75rem;
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
.tool-icon {
|
|
652
|
+
width: 40px;
|
|
653
|
+
height: 40px;
|
|
333
654
|
border-radius: 8px;
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
655
|
+
display: flex;
|
|
656
|
+
align-items: center;
|
|
657
|
+
justify-content: center;
|
|
658
|
+
flex-shrink: 0;
|
|
659
|
+
font-size: 1.3rem;
|
|
337
660
|
}
|
|
338
661
|
|
|
339
|
-
.
|
|
340
|
-
margin: 0
|
|
662
|
+
.tool-toggle-card h3 {
|
|
663
|
+
margin: 0;
|
|
341
664
|
font-size: 0.9rem;
|
|
665
|
+
font-weight: 500;
|
|
342
666
|
color: var(--ink);
|
|
343
|
-
padding-bottom: 0.4rem;
|
|
344
|
-
border-bottom: 1px solid var(--line);
|
|
345
667
|
}
|
|
346
668
|
|
|
347
|
-
.
|
|
348
|
-
|
|
349
|
-
|
|
669
|
+
.tool-toggle-card p {
|
|
670
|
+
margin: 0.2rem 0 0;
|
|
671
|
+
font-size: 0.78rem;
|
|
672
|
+
color: var(--ink-muted);
|
|
673
|
+
max-width: 220px;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
/* ── A2A-48: Configuration zones (topics + goals) ─────────── */
|
|
677
|
+
.config-columns {
|
|
678
|
+
display: grid;
|
|
679
|
+
grid-template-columns: 1fr 1fr;
|
|
680
|
+
gap: 1rem;
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
.config-col {
|
|
684
|
+
display: flex;
|
|
685
|
+
flex-direction: column;
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
.config-col-header {
|
|
689
|
+
display: flex;
|
|
690
|
+
align-items: center;
|
|
691
|
+
gap: 0.5rem;
|
|
692
|
+
font-size: 0.75rem;
|
|
693
|
+
font-weight: 600;
|
|
694
|
+
text-transform: uppercase;
|
|
695
|
+
letter-spacing: 0.05em;
|
|
696
|
+
margin-bottom: 0.5rem;
|
|
697
|
+
padding: 0 0.25rem;
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
.config-col-header--teal {
|
|
701
|
+
color: #2DD4BF;
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
.config-col-header--yellow {
|
|
705
|
+
color: #FBBF24;
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.status-dot {
|
|
709
|
+
width: 6px;
|
|
710
|
+
height: 6px;
|
|
711
|
+
border-radius: 50%;
|
|
712
|
+
flex-shrink: 0;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
.status-dot--teal {
|
|
716
|
+
background: #2DD4BF;
|
|
717
|
+
box-shadow: 0 0 8px rgba(45, 212, 191, 0.8);
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
.status-dot--yellow {
|
|
721
|
+
background: #FBBF24;
|
|
722
|
+
box-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
.status-dot--green {
|
|
726
|
+
background: #10B981;
|
|
727
|
+
box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
.count-badge {
|
|
731
|
+
font-size: 0.65rem;
|
|
732
|
+
padding: 0.1rem 0.4rem;
|
|
350
733
|
border-radius: 4px;
|
|
351
|
-
|
|
734
|
+
margin-left: auto;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
.count-badge--teal {
|
|
738
|
+
background: rgba(45, 212, 191, 0.1);
|
|
739
|
+
color: #5EEAD4;
|
|
740
|
+
border: 1px solid rgba(45, 212, 191, 0.2);
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
.count-badge--yellow {
|
|
744
|
+
background: rgba(250, 204, 21, 0.1);
|
|
745
|
+
color: #FDE68A;
|
|
746
|
+
border: 1px solid rgba(250, 204, 21, 0.2);
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
/* A2A-48: Drop zone uses dashed SVG border matching the concept mock.
|
|
750
|
+
The SVG stroke approach avoids needing a separate border-image. */
|
|
751
|
+
.perm-drop-zone {
|
|
752
|
+
min-height: 140px;
|
|
753
|
+
border-radius: 12px;
|
|
754
|
+
padding: 0.75rem;
|
|
755
|
+
display: flex;
|
|
756
|
+
flex-direction: column;
|
|
757
|
+
gap: 0.5rem;
|
|
758
|
+
background: rgba(30, 39, 56, 0.3);
|
|
759
|
+
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%233B82F640' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
|
|
760
|
+
transition: background-color 0.2s ease;
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.perm-drop-zone.drag-over {
|
|
764
|
+
background-color: rgba(59, 130, 246, 0.08);
|
|
765
|
+
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%233B82F6' stroke-width='2' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
.active-item-card {
|
|
769
|
+
position: relative;
|
|
770
|
+
background: var(--card-bg);
|
|
771
|
+
border-radius: 8px;
|
|
772
|
+
padding: 0.6rem 2.2rem 0.6rem 0.75rem;
|
|
773
|
+
display: flex;
|
|
774
|
+
align-items: center;
|
|
775
|
+
gap: 0.5rem;
|
|
776
|
+
transition: background 0.15s ease;
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
.active-item-card:hover {
|
|
780
|
+
background: rgba(37, 47, 66, 1);
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
/* A2A-48: Teal accent for topic cards with glow shadow */
|
|
784
|
+
.active-item-card--teal {
|
|
785
|
+
border: 1px solid rgba(45, 212, 191, 0.5);
|
|
786
|
+
box-shadow: 0 0 12px rgba(45, 212, 191, 0.15);
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
/* A2A-48: Yellow accent for goal cards with glow shadow */
|
|
790
|
+
.active-item-card--yellow {
|
|
791
|
+
border: 1px solid rgba(234, 179, 8, 0.5);
|
|
792
|
+
box-shadow: 0 0 12px rgba(234, 179, 8, 0.15);
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
.active-item-card .item-name {
|
|
796
|
+
font-size: 0.85rem;
|
|
797
|
+
font-weight: 600;
|
|
798
|
+
color: var(--ink);
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
.active-item-card .item-type-label {
|
|
802
|
+
font-size: 0.6rem;
|
|
803
|
+
text-transform: uppercase;
|
|
804
|
+
letter-spacing: 0.08em;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
.active-item-card--teal .item-type-label {
|
|
808
|
+
color: #2DD4BF;
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
.active-item-card--yellow .item-type-label {
|
|
812
|
+
color: #FBBF24;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
.active-item-card .item-close-btn {
|
|
816
|
+
position: absolute;
|
|
817
|
+
top: 4px;
|
|
818
|
+
right: 4px;
|
|
819
|
+
background: none;
|
|
820
|
+
border: none;
|
|
821
|
+
color: var(--ink-muted);
|
|
822
|
+
cursor: pointer;
|
|
823
|
+
padding: 2px;
|
|
824
|
+
border-radius: 50%;
|
|
825
|
+
line-height: 1;
|
|
826
|
+
transition: color 0.15s ease, background 0.15s ease;
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
.active-item-card .item-close-btn:hover {
|
|
830
|
+
color: #f87171;
|
|
831
|
+
background: rgba(255, 255, 255, 0.05);
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
.drop-placeholder {
|
|
835
|
+
display: flex;
|
|
836
|
+
align-items: center;
|
|
837
|
+
justify-content: center;
|
|
838
|
+
border: 2px dashed rgba(255, 255, 255, 0.1);
|
|
839
|
+
border-radius: 8px;
|
|
840
|
+
padding: 0.75rem;
|
|
841
|
+
margin-top: auto;
|
|
842
|
+
flex: 1;
|
|
843
|
+
min-height: 40px;
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
.drop-placeholder span {
|
|
847
|
+
font-size: 0.75rem;
|
|
848
|
+
color: rgba(255, 255, 255, 0.2);
|
|
849
|
+
font-weight: 500;
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
/* ── A2A-48: Right sidebar ────────────────────────────────── */
|
|
853
|
+
.preview-card {
|
|
854
|
+
background: linear-gradient(135deg, #1E293B, #0F172A);
|
|
855
|
+
border-radius: 16px;
|
|
856
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
857
|
+
padding: 1.2rem;
|
|
858
|
+
position: relative;
|
|
859
|
+
overflow: hidden;
|
|
860
|
+
margin-bottom: 1.2rem;
|
|
861
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
/* A2A-48: decorative gradient orbs inside the preview card */
|
|
865
|
+
.preview-card::before {
|
|
866
|
+
content: '';
|
|
867
|
+
position: absolute;
|
|
868
|
+
top: -30px;
|
|
869
|
+
right: -30px;
|
|
870
|
+
width: 80px;
|
|
871
|
+
height: 80px;
|
|
872
|
+
background: rgba(59, 130, 246, 0.15);
|
|
873
|
+
border-radius: 50%;
|
|
874
|
+
filter: blur(20px);
|
|
875
|
+
pointer-events: none;
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
.preview-card::after {
|
|
879
|
+
content: '';
|
|
880
|
+
position: absolute;
|
|
881
|
+
bottom: -20px;
|
|
882
|
+
left: -20px;
|
|
883
|
+
width: 60px;
|
|
884
|
+
height: 60px;
|
|
885
|
+
background: rgba(139, 92, 246, 0.15);
|
|
886
|
+
border-radius: 50%;
|
|
887
|
+
filter: blur(20px);
|
|
888
|
+
pointer-events: none;
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
.preview-card-inner {
|
|
892
|
+
position: relative;
|
|
893
|
+
z-index: 1;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
.preview-tier-badge {
|
|
897
|
+
display: inline-block;
|
|
898
|
+
font-size: 0.65rem;
|
|
899
|
+
padding: 0.15rem 0.5rem;
|
|
900
|
+
border-radius: 999px;
|
|
901
|
+
background: rgba(59, 130, 246, 0.1);
|
|
902
|
+
color: #60A5FA;
|
|
903
|
+
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
904
|
+
margin-top: 0.3rem;
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
.preview-summary {
|
|
908
|
+
font-size: 0.82rem;
|
|
909
|
+
color: var(--ink-muted);
|
|
910
|
+
line-height: 1.5;
|
|
911
|
+
background: rgba(0, 0, 0, 0.2);
|
|
912
|
+
border-radius: 8px;
|
|
913
|
+
padding: 0.6rem;
|
|
914
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
915
|
+
margin-top: 0.75rem;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
.preview-summary strong {
|
|
919
|
+
color: var(--ink);
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
.preview-footer {
|
|
923
|
+
display: flex;
|
|
924
|
+
align-items: center;
|
|
925
|
+
justify-content: space-between;
|
|
926
|
+
font-size: 0.72rem;
|
|
927
|
+
color: var(--ink-muted);
|
|
928
|
+
padding-top: 0.5rem;
|
|
929
|
+
margin-top: 0.75rem;
|
|
930
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
931
|
+
}
|
|
932
|
+
|
|
933
|
+
.sidebar-list {
|
|
934
|
+
margin-bottom: 1rem;
|
|
935
|
+
}
|
|
936
|
+
|
|
937
|
+
.sidebar-list-header {
|
|
938
|
+
font-size: 0.7rem;
|
|
939
|
+
font-weight: 700;
|
|
940
|
+
text-transform: uppercase;
|
|
941
|
+
letter-spacing: 0.06em;
|
|
942
|
+
color: var(--ink-muted);
|
|
943
|
+
margin-bottom: 0.5rem;
|
|
944
|
+
}
|
|
945
|
+
|
|
946
|
+
.sidebar-item {
|
|
947
|
+
background: rgba(30, 39, 56, 0.6);
|
|
948
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
949
|
+
border-radius: 8px;
|
|
950
|
+
padding: 0.5rem 0.6rem;
|
|
951
|
+
display: flex;
|
|
952
|
+
align-items: center;
|
|
953
|
+
justify-content: space-between;
|
|
954
|
+
gap: 0.5rem;
|
|
955
|
+
margin-bottom: 0.4rem;
|
|
956
|
+
cursor: grab;
|
|
957
|
+
transition: background 0.15s ease, border-color 0.15s ease;
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
.sidebar-item:hover {
|
|
961
|
+
background: var(--card-bg);
|
|
962
|
+
border-color: rgba(255, 255, 255, 0.18);
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
/* A2A-48: Active items in the sidebar are dimmed with dashed border and
|
|
966
|
+
non-draggable to indicate they are already in the active zone. */
|
|
967
|
+
.sidebar-item.active-in-zone {
|
|
968
|
+
opacity: 0.5;
|
|
969
|
+
border-style: dashed;
|
|
970
|
+
cursor: default;
|
|
971
|
+
font-style: italic;
|
|
972
|
+
}
|
|
973
|
+
|
|
974
|
+
.sidebar-item .sidebar-item-name {
|
|
975
|
+
font-size: 0.82rem;
|
|
976
|
+
font-weight: 500;
|
|
977
|
+
color: var(--ink-muted);
|
|
352
978
|
}
|
|
353
979
|
|
|
354
|
-
.
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
980
|
+
.sidebar-item .sidebar-item-active-label {
|
|
981
|
+
font-size: 0.7rem;
|
|
982
|
+
color: var(--ink-muted);
|
|
983
|
+
font-style: italic;
|
|
358
984
|
}
|
|
359
985
|
|
|
360
|
-
|
|
986
|
+
.sidebar-add-btn {
|
|
987
|
+
width: 100%;
|
|
988
|
+
margin-top: 0.4rem;
|
|
989
|
+
padding: 0.45rem;
|
|
990
|
+
border: 1px dashed rgba(255, 255, 255, 0.12);
|
|
991
|
+
border-radius: 8px;
|
|
992
|
+
background: transparent;
|
|
993
|
+
color: var(--ink-muted);
|
|
994
|
+
font-size: 0.78rem;
|
|
995
|
+
cursor: pointer;
|
|
996
|
+
display: flex;
|
|
997
|
+
align-items: center;
|
|
998
|
+
justify-content: center;
|
|
999
|
+
gap: 0.3rem;
|
|
1000
|
+
transition: color 0.15s ease, border-color 0.15s ease;
|
|
1001
|
+
}
|
|
1002
|
+
|
|
1003
|
+
.sidebar-add-btn:hover {
|
|
1004
|
+
color: var(--accent);
|
|
1005
|
+
border-color: rgba(59, 130, 246, 0.4);
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
/* ── A2A-41: Validation warnings — adjusted for dark theme ── */
|
|
361
1009
|
.tier-warnings {
|
|
362
1010
|
margin-bottom: 0.8rem;
|
|
363
1011
|
}
|
|
@@ -372,22 +1020,23 @@ sl-tab-panel::part(base) {
|
|
|
372
1020
|
margin-bottom: 0.3rem;
|
|
373
1021
|
}
|
|
374
1022
|
|
|
1023
|
+
/* A2A-47: Warning colors darkened for dark theme */
|
|
375
1024
|
.tier-warning.warn {
|
|
376
|
-
background:
|
|
377
|
-
border: 1px solid
|
|
378
|
-
color: #
|
|
1025
|
+
background: rgba(245, 158, 11, 0.15);
|
|
1026
|
+
border: 1px solid rgba(245, 158, 11, 0.4);
|
|
1027
|
+
color: #fbbf24;
|
|
379
1028
|
}
|
|
380
1029
|
|
|
381
1030
|
.tier-warning.danger {
|
|
382
|
-
background:
|
|
383
|
-
border: 1px solid
|
|
384
|
-
color: #
|
|
1031
|
+
background: rgba(239, 68, 68, 0.15);
|
|
1032
|
+
border: 1px solid rgba(239, 68, 68, 0.4);
|
|
1033
|
+
color: #f87171;
|
|
385
1034
|
}
|
|
386
1035
|
|
|
387
1036
|
.tier-warning.info {
|
|
388
|
-
background:
|
|
389
|
-
border: 1px solid
|
|
390
|
-
color: #
|
|
1037
|
+
background: rgba(59, 130, 246, 0.15);
|
|
1038
|
+
border: 1px solid rgba(59, 130, 246, 0.4);
|
|
1039
|
+
color: #93c5fd;
|
|
391
1040
|
}
|
|
392
1041
|
|
|
393
1042
|
/* ── A2A-41: Preview dialog ────────────────────────────────── */
|
|
@@ -416,12 +1065,173 @@ sl-tab-panel::part(base) {
|
|
|
416
1065
|
color: var(--ink);
|
|
417
1066
|
}
|
|
418
1067
|
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
1068
|
+
/* A2A-49: Contact status colored badges */
|
|
1069
|
+
.contact-status {
|
|
1070
|
+
display: inline-flex;
|
|
1071
|
+
align-items: center;
|
|
1072
|
+
gap: 0.35rem;
|
|
1073
|
+
font-size: 0.82rem;
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
.contact-status::before {
|
|
1077
|
+
content: '';
|
|
1078
|
+
width: 6px;
|
|
1079
|
+
height: 6px;
|
|
1080
|
+
border-radius: 50%;
|
|
1081
|
+
flex-shrink: 0;
|
|
1082
|
+
}
|
|
1083
|
+
|
|
1084
|
+
.contact-status[data-status="online"]::before {
|
|
1085
|
+
background: #10B981;
|
|
1086
|
+
box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
.contact-status[data-status="offline"]::before {
|
|
1090
|
+
background: #EF4444;
|
|
1091
|
+
box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1094
|
+
.contact-status[data-status="unknown"]::before {
|
|
1095
|
+
background: #6B7280;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
/* A2A-49: Log level color coding */
|
|
1099
|
+
.log-level {
|
|
1100
|
+
font-size: 0.78rem;
|
|
1101
|
+
font-weight: 600;
|
|
1102
|
+
text-transform: uppercase;
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
.log-level[data-level="error"] {
|
|
1106
|
+
color: #F87171;
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
.log-level[data-level="warn"] {
|
|
1110
|
+
color: #FBBF24;
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
.log-level[data-level="info"] {
|
|
1114
|
+
color: #60A5FA;
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
.log-level[data-level="debug"] {
|
|
1118
|
+
color: #A78BFA;
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
.log-level[data-level="trace"] {
|
|
1122
|
+
color: #6B7280;
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
/* A2A-49: Dark monospace code elements */
|
|
1126
|
+
code {
|
|
1127
|
+
background: rgba(255, 255, 255, 0.06);
|
|
1128
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1129
|
+
border-radius: 4px;
|
|
1130
|
+
padding: 0.1em 0.35em;
|
|
1131
|
+
font-size: 0.85em;
|
|
1132
|
+
color: #E2E8F0;
|
|
1133
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
/* A2A-49: pre.summary gets dark background. This SUPPLEMENTS the existing
|
|
1137
|
+
.summary rule (max-width + white-space) — do NOT remove .summary. */
|
|
1138
|
+
pre.summary {
|
|
1139
|
+
background: rgba(255, 255, 255, 0.03);
|
|
1140
|
+
border: 1px solid var(--line);
|
|
1141
|
+
border-radius: 6px;
|
|
1142
|
+
padding: 0.75em;
|
|
1143
|
+
color: var(--ink);
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
/* A2A-49: sl-details summary bar dark polish */
|
|
1147
|
+
sl-details::part(summary) {
|
|
1148
|
+
font-weight: 500;
|
|
1149
|
+
color: var(--ink);
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
sl-details::part(base) {
|
|
1153
|
+
background: var(--card-bg);
|
|
1154
|
+
border-color: var(--line);
|
|
1155
|
+
}
|
|
1156
|
+
|
|
1157
|
+
/* A2A-49: Health card gets glass-panel treatment via CSS (not index.html).
|
|
1158
|
+
The acceptance criterion requires glass-panel styling on #health-latest.
|
|
1159
|
+
We target the sl-card shadow DOM part directly. */
|
|
1160
|
+
#health-latest::part(base) {
|
|
1161
|
+
background: rgba(30, 41, 59, 0.4);
|
|
1162
|
+
backdrop-filter: blur(12px);
|
|
1163
|
+
border-color: rgba(255, 255, 255, 0.08);
|
|
1164
|
+
border-radius: 10px;
|
|
1165
|
+
}
|
|
1166
|
+
|
|
1167
|
+
/* A2A-49: Health tab — step icons and status reinforcement.
|
|
1168
|
+
Shoelace badge variants (success/danger/warning) already provide
|
|
1169
|
+
green/red/yellow colors in dark theme — no override needed. */
|
|
1170
|
+
#health-latest details ul {
|
|
1171
|
+
list-style: none;
|
|
1172
|
+
padding-left: 0;
|
|
1173
|
+
}
|
|
1174
|
+
|
|
1175
|
+
#health-latest details li {
|
|
1176
|
+
padding: 0.3rem 0;
|
|
1177
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
|
1178
|
+
font-size: 0.85rem;
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1181
|
+
#health-latest details li:last-child {
|
|
1182
|
+
border-bottom: none;
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
/* A2A-49: Native <details> dark styling inside health cards */
|
|
1186
|
+
#health-latest details > summary {
|
|
1187
|
+
cursor: pointer;
|
|
1188
|
+
color: var(--ink-muted);
|
|
1189
|
+
font-size: 0.85rem;
|
|
1190
|
+
padding: 0.3rem 0;
|
|
1191
|
+
}
|
|
1192
|
+
|
|
1193
|
+
#health-latest details > summary:hover {
|
|
1194
|
+
color: var(--ink);
|
|
1195
|
+
}
|
|
1196
|
+
|
|
1197
|
+
/* ── A2A-48: Hide permissions sidebar below 1280px ─────────── */
|
|
1198
|
+
@media (max-width: 1280px) {
|
|
1199
|
+
.perm-sidebar {
|
|
1200
|
+
display: none;
|
|
422
1201
|
}
|
|
423
|
-
|
|
424
|
-
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1204
|
+
/* A2A-48: Stack config columns on narrow screens */
|
|
1205
|
+
@media (max-width: 900px) {
|
|
1206
|
+
.config-columns {
|
|
425
1207
|
grid-template-columns: 1fr;
|
|
426
1208
|
}
|
|
427
1209
|
}
|
|
1210
|
+
|
|
1211
|
+
/* ── A2A-47: Responsive — sidebar collapses at 1024px ──────── */
|
|
1212
|
+
@media (max-width: 1024px) {
|
|
1213
|
+
.sidebar {
|
|
1214
|
+
width: 80px;
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
/* A2A-47: Hide labels, show only icons on narrow screens */
|
|
1218
|
+
.brand-text,
|
|
1219
|
+
.nav-label {
|
|
1220
|
+
display: none;
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
.sidebar-brand {
|
|
1224
|
+
justify-content: center;
|
|
1225
|
+
padding: 1.2rem 0.5rem;
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1228
|
+
.nav-item {
|
|
1229
|
+
justify-content: center;
|
|
1230
|
+
padding: 0.65rem 0.5rem;
|
|
1231
|
+
gap: 0;
|
|
1232
|
+
}
|
|
1233
|
+
|
|
1234
|
+
.main-content {
|
|
1235
|
+
margin-left: 80px;
|
|
1236
|
+
}
|
|
1237
|
+
}
|