@growthub/cli 0.12.2 → 0.13.1

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 (31) hide show
  1. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/api/workspace/sandbox-run/route.js +50 -25
  2. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/ApiRegistryActionCard.jsx +141 -0
  3. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/ApiRegistryReviewModal.jsx +38 -0
  4. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/DataModelShell.jsx +556 -248
  5. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/OrchestrationGraphCanvas.jsx +242 -0
  6. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/OrchestrationGraphEmptyCanvas.jsx +52 -0
  7. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/OrchestrationNodeConfigPanel.jsx +1203 -0
  8. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/OrchestrationRunTracePanel.jsx +163 -0
  9. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/SandboxOrchestrationEditorPanel.jsx +190 -0
  10. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/SandboxToolConfirmModal.jsx +64 -0
  11. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/SandboxToolDraftPanel.jsx +376 -0
  12. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/components/dm-shared.jsx +8 -2
  13. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/data-model/page.jsx +6 -1
  14. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/globals.css +2897 -934
  15. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/page.jsx +10 -7
  16. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/views/[viewId]/page.jsx +206 -0
  17. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/workflows/WorkflowSurface.jsx +906 -0
  18. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/workflows/page.jsx +12 -0
  19. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/workspace-builder.jsx +493 -28
  20. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/workspace-rail.jsx +1363 -8
  21. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/data-model/field-contracts.js +1 -0
  22. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/nav-workflows.js +54 -0
  23. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/orchestration-graph-runner.js +322 -0
  24. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/orchestration-graph.js +734 -0
  25. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/orchestration-run-trace.js +73 -0
  26. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/orchestration-sidecar-routing.js +24 -0
  27. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/workspace-data-model.js +13 -4
  28. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/workspace-helper-apply.js +96 -0
  29. package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/lib/workspace-schema.js +122 -0
  30. package/assets/worker-kits/growthub-custom-workspace-starter-v1/kit.json +1 -0
  31. package/package.json +1 -1
@@ -413,7 +413,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
413
413
  .workspace-rail {
414
414
  display: flex;
415
415
  flex-direction: column;
416
- gap: 18px;
416
+ gap: 8px;
417
417
  border-right: 1px solid #e8e8e8;
418
418
  padding: 18px 14px;
419
419
  /* Lock rail to viewport height so the bottom status pill never
@@ -426,6 +426,74 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
426
426
  top: 0;
427
427
  overflow: hidden;
428
428
  }
429
+ body.workspace-rail-collapsed .workspace-builder {
430
+ grid-template-columns: 52px minmax(0, 1fr) 320px;
431
+ }
432
+ body.workspace-rail-collapsed .workspace-builder.workspace-settings-page {
433
+ grid-template-columns: 52px minmax(0, 1fr);
434
+ }
435
+ .workspace-builder.dm-workflow-page {
436
+ grid-template-columns: 264px minmax(0, 1fr);
437
+ height: 100vh;
438
+ overflow: hidden;
439
+ }
440
+ body.workspace-rail-collapsed .workspace-builder.dm-workflow-page {
441
+ grid-template-columns: 52px minmax(0, 1fr);
442
+ }
443
+ .workspace-rail.is-collapsed {
444
+ padding: 18px 10px;
445
+ align-items: center;
446
+ gap: 10px;
447
+ }
448
+ .workspace-rail.is-collapsed .workspace-rail-brand-button,
449
+ .workspace-rail.is-collapsed .workspace-rail-folders,
450
+ .workspace-rail.is-collapsed .workspace-nav,
451
+ .workspace-rail.is-collapsed .workspace-rail-chat,
452
+ .workspace-rail.is-collapsed .workspace-rail-status,
453
+ .workspace-rail.is-collapsed .workspace-rail-helper-pill {
454
+ display: none;
455
+ }
456
+ .workspace-rail.is-collapsed .workspace-rail-topbar {
457
+ justify-content: center;
458
+ width: 100%;
459
+ }
460
+ .workspace-rail.is-collapsed .workspace-rail-topbar-actions {
461
+ display: flex;
462
+ flex-direction: column;
463
+ justify-content: center;
464
+ gap: 8px;
465
+ }
466
+ .workspace-rail.is-collapsed .workspace-rail-topbar-actions .workspace-rail-icon-btn {
467
+ order: 2;
468
+ }
469
+ .workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-pressed="true"] {
470
+ order: 1;
471
+ }
472
+ .workspace-rail.is-collapsed .workspace-rail-icon-btn[data-rail-search] {
473
+ order: 2;
474
+ }
475
+ .workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-label="Workspace settings"] {
476
+ order: 3;
477
+ }
478
+ .workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-pressed="true"] svg {
479
+ transform: rotate(180deg);
480
+ }
481
+ .workspace-rail.is-collapsed .workspace-rail-tabbar {
482
+ display: flex;
483
+ justify-content: center;
484
+ width: 100%;
485
+ }
486
+ .workspace-rail.is-collapsed .workspace-rail-tabs {
487
+ flex-direction: column;
488
+ gap: 8px;
489
+ padding: 0;
490
+ }
491
+ .workspace-rail.is-collapsed .workspace-rail-tab,
492
+ .workspace-rail.is-collapsed .workspace-rail-icon-btn {
493
+ width: 34px;
494
+ height: 34px;
495
+ border-radius: 9px;
496
+ }
429
497
  .workspace-brand {
430
498
  display: flex;
431
499
  align-items: center;
@@ -578,11 +646,9 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
578
646
  border: 1px solid #e7e7e7;
579
647
  border-radius: 8px;
580
648
  background: #ffffff;
581
- /* Bounded height with internal scroll the 16-row × 52px grid
582
- (832px+) was being clipped on most laptop viewports. Reserves
583
- ~210px above for the workspace toolbar + dashboard tabs + page
584
- padding so the rail's bottom status pill stays above the fold. */
585
- max-height: calc(100vh - 210px);
649
+ /* Bounded height with internal scroll. Keep the dashboard canvas tall
650
+ enough to show more tab/widget state before the internal scroll. */
651
+ max-height: calc(100vh - 150px);
586
652
  overflow-y: auto;
587
653
  overscroll-behavior: contain;
588
654
  scrollbar-gutter: stable;
@@ -590,7 +656,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
590
656
  .workspace-table {
591
657
  margin-bottom: 14px;
592
658
  display: grid;
593
- grid-template-columns: minmax(190px, 1.25fr) minmax(116px, 0.75fr) minmax(92px, 0.6fr) minmax(118px, 0.7fr) minmax(210px, 1fr);
659
+ grid-template-columns: minmax(260px, 2fr) minmax(84px, .45fr) minmax(142px, .65fr) minmax(132px, .55fr) 64px;
594
660
  }
595
661
  .workspace-table-heading {
596
662
  grid-column: 1 / -1;
@@ -607,6 +673,62 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
607
673
  color: #999;
608
674
  font-size: 12px;
609
675
  }
676
+ .workspace-builder-filterbar {
677
+ grid-column: 1 / -1;
678
+ display: flex;
679
+ align-items: center;
680
+ justify-content: space-between;
681
+ gap: 10px;
682
+ border-bottom: 1px solid #ececec;
683
+ padding: 9px 12px;
684
+ }
685
+ .workspace-builder-filterbar__segments {
686
+ display: inline-flex;
687
+ align-items: center;
688
+ gap: 4px;
689
+ padding: 2px;
690
+ border: 1px solid #e5e7eb;
691
+ border-radius: 7px;
692
+ background: #f9fafb;
693
+ }
694
+ .workspace-builder-filterbar__segments button {
695
+ min-height: 26px;
696
+ border: 0;
697
+ border-radius: 5px;
698
+ background: transparent;
699
+ color: #667085;
700
+ cursor: pointer;
701
+ font: inherit;
702
+ font-size: 12px;
703
+ padding: 0 9px;
704
+ }
705
+ .workspace-builder-filterbar__segments button.is-active {
706
+ background: #fff;
707
+ color: #111827;
708
+ box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
709
+ }
710
+ .workspace-builder-filterbar__search {
711
+ min-width: 240px;
712
+ display: grid;
713
+ grid-template-columns: 16px minmax(0, 1fr);
714
+ align-items: center;
715
+ gap: 6px;
716
+ min-height: 32px;
717
+ border: 1px solid #e5e7eb;
718
+ border-radius: 7px;
719
+ background: #fff;
720
+ color: #98a2b3;
721
+ padding: 0 9px;
722
+ }
723
+ .workspace-builder-filterbar__search input {
724
+ min-width: 0;
725
+ border: 0;
726
+ outline: 0;
727
+ background: transparent;
728
+ color: #111827;
729
+ font: inherit;
730
+ font-size: 12px;
731
+ }
610
732
  .workspace-table-row {
611
733
  display: contents;
612
734
  }
@@ -622,6 +744,14 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
622
744
  font-size: 12px;
623
745
  padding: 7px 10px;
624
746
  }
747
+ .workspace-table-row > span:nth-child(3) {
748
+ white-space: nowrap;
749
+ }
750
+ .workspace-table-row > span:nth-child(5) {
751
+ justify-content: center;
752
+ padding-left: 6px;
753
+ padding-right: 6px;
754
+ }
625
755
  .workspace-table-head > span {
626
756
  min-height: 36px;
627
757
  background: #fbfbfb;
@@ -654,6 +784,9 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
654
784
  }
655
785
  .workspace-dashboard-title button {
656
786
  min-width: 0;
787
+ display: inline-flex;
788
+ align-items: center;
789
+ gap: 6px;
657
790
  border: 0;
658
791
  background: transparent;
659
792
  color: #333;
@@ -706,6 +839,8 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
706
839
  .workspace-dashboard-actions {
707
840
  flex-wrap: wrap;
708
841
  justify-content: flex-start;
842
+ position: relative;
843
+ overflow: visible;
709
844
  }
710
845
  .workspace-dashboard-actions button {
711
846
  min-height: 30px;
@@ -726,6 +861,37 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
726
861
  background: #f7f7f7;
727
862
  border-color: #cfcfcd;
728
863
  }
864
+ .workspace-dashboard-actions .workspace-row-action-trigger {
865
+ width: 34px;
866
+ min-width: 34px;
867
+ padding: 0;
868
+ }
869
+ .workspace-row-action-menu {
870
+ position: fixed;
871
+ z-index: 1000;
872
+ min-width: 148px;
873
+ display: grid;
874
+ gap: 2px;
875
+ padding: 6px;
876
+ border: 1px solid #e5e7eb;
877
+ border-radius: 8px;
878
+ background: #ffffff;
879
+ box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
880
+ }
881
+ .workspace-row-action-menu button {
882
+ width: 100%;
883
+ min-height: 30px;
884
+ justify-content: flex-start;
885
+ border: 0;
886
+ border-radius: 6px;
887
+ background: transparent;
888
+ color: #344054;
889
+ padding: 0 9px;
890
+ }
891
+ .workspace-row-action-menu button:hover {
892
+ background: #f5f5f5;
893
+ border-color: transparent;
894
+ }
729
895
  .workspace-integration-summary {
730
896
  display: grid;
731
897
  grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -4183,6 +4349,9 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
4183
4349
  .dm-btn-primary-sm { display: inline-flex; align-items: center; gap: 5px; height: 28px; border: 0; border-radius: 6px; background: #111; color: #fff; font: inherit; font-size: 12px; padding: 0 11px; cursor: pointer; font-weight: 500; transition: background .12s; }
4184
4350
  .dm-btn-primary-sm:hover { background: #333; }
4185
4351
  .dm-btn-primary-sm:disabled { opacity: .45; cursor: not-allowed; }
4352
+ .dm-btn-danger-sm { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; border: 1px solid #fecaca; border-radius: 6px; background: #fff; color: #dc2626; font: inherit; font-size: 12px; padding: 0 10px; cursor: pointer; transition: background .1s, border-color .1s; }
4353
+ .dm-btn-danger-sm:hover { background: #fef2f2; border-color: #fca5a5; }
4354
+ .dm-btn-danger-sm:disabled { opacity: .5; cursor: not-allowed; }
4186
4355
  .dm-table-wrap { border: 1px solid #e5e7eb; border-radius: 8px; overflow-x: auto; }
4187
4356
  .dm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
4188
4357
  .dm-table th { background: #f9fafb; border-bottom: 1px solid #e5e7eb; color: #6b7280; font-size: 11px; font-weight: 600; text-align: left; padding: 8px 10px; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
@@ -4219,7 +4388,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
4219
4388
  border-bottom: 1px solid #efefef;
4220
4389
  background: #fff;
4221
4390
  }
4222
- .dm-db-toolbar + * { padding-top: 4px; }
4391
+ .dm-db-toolbar + * { padding-top: 0; }
4223
4392
  .dm-db-toolbar .dm-records-actions {
4224
4393
  order: 1;
4225
4394
  margin-left: 0;
@@ -4308,1137 +4477,2931 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
4308
4477
  .dm-db-status.bad span { background: #ef4444; }
4309
4478
  .dm-record-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(15,23,42,.12); }
4310
4479
  .dm-record-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; display: flex; flex-direction: column; width: min(440px, 100vw); background: #fff; border-left: 1px solid #dfe3e8; box-shadow: -10px 0 34px rgba(15,23,42,.16); }
4311
- .dm-record-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #edf0f3; }
4312
- .dm-record-drawer-actions { display: inline-flex; align-items: center; gap: 8px; }
4313
- .dm-record-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 16px; border-top: 1px solid #edf0f3; background: #fff; }
4314
- .dm-drawer-field-editor { display: grid; gap: 8px; }
4315
- .dm-drawer-field-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 8px; align-items: center; }
4316
- .dm-drawer-field-row input { width: 100%; height: 34px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 0 10px; }
4317
- .dm-drawer-hidden-fields { display: grid; gap: 8px; margin-top: 10px; }
4318
- .dm-drawer-hidden-fields > span { color: #64748b; font-size: 12px; font-weight: 600; }
4319
- .dm-drawer-hidden-list { display: flex; flex-wrap: wrap; gap: 8px; }
4320
- .dm-record-drawer-head p { margin: 0 0 3px; color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
4321
- .dm-record-drawer-head h2 { margin: 0; color: #111827; font-size: 16px; font-weight: 650; }
4322
- .dm-record-testbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid #edf0f3; background: #fbfdff; }
4323
- .dm-record-testbar > span:last-child { min-width: 0; color: #64748b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4324
- .dm-record-fields { display: grid; gap: 8px; padding: 14px 16px 28px; overflow-y: auto; }
4325
- .dm-record-field { display: grid; gap: 5px; }
4326
- .dm-record-field span { color: #475569; font-size: 11px; font-weight: 650; }
4327
- .dm-record-field input,
4328
- .dm-record-field textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 7px 9px; box-sizing: border-box; }
4329
- .dm-record-field textarea { resize: vertical; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; line-height: 1.45; }
4330
- .dm-record-field input:focus,
4331
- .dm-record-field textarea:focus { outline: none; border-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.12); }
4332
- .dm-record-field input:disabled,
4333
- .dm-record-field textarea:disabled { background: #f8fafc; color: #64748b; }
4334
- .dm-record-field input { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 7px 9px; box-sizing: border-box; }
4335
- .dm-drawer-section { border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; overflow: visible; }
4336
- .dm-drawer-section-toggle { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; background: #f8fafc; color: #334155; font: inherit; font-size: 12px; font-weight: 700; padding: 0 11px; text-align: left; cursor: pointer; }
4337
- .dm-drawer-section-toggle svg { flex: 0 0 auto; color: #64748b; transition: transform .12s; }
4338
- .dm-drawer-section.open .dm-drawer-section-toggle { border-bottom: 1px solid #e2e8f0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
4339
- .dm-drawer-section.open .dm-drawer-section-toggle svg { transform: rotate(90deg); }
4340
- .dm-drawer-section-body { display: grid; gap: 10px; padding: 11px; }
4341
- .dm-sandbox-config { display: grid; gap: 8px; }
4342
- .dm-radio-row { display: grid; gap: 8px; }
4343
- .dm-radio-row label, .dm-check-row { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; column-gap: 8px; color: #1f2937; font-size: 12px; line-height: 1.35; }
4344
- .dm-radio-row input[type="radio"], .dm-check-row input[type="checkbox"] { width: 14px; height: 14px; margin: 1px 0 0; padding: 0; box-shadow: none; accent-color: #111827; }
4345
- .dm-radio-row span, .dm-check-row span { color: #1f2937; font-size: 12px; font-weight: 500; }
4346
- .dm-check-row { cursor: pointer; }
4347
- .dm-select { position: relative; width: 100%; min-width: 180px; font-size: 11px; }
4348
- .dm-select-trigger { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(15,23,42,.05); font: inherit; font-size: 11px; padding: 6px 10px; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
4349
- .dm-select-trigger:hover:not(:disabled) { border-color: #94a3b8; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
4350
- .dm-select.open .dm-select-trigger { border-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.12), 0 2px 8px rgba(15,23,42,.08); }
4351
- .dm-select-trigger:disabled { background: #f8fafc; color: #64748b; cursor: not-allowed; }
4352
- .dm-select-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111827; font-size: 11px; font-weight: 600; }
4353
- .dm-select-trigger span.empty { color: #94a3b8; }
4354
- .dm-select-trigger svg { flex: 0 0 auto; color: #64748b; transition: transform .12s; }
4355
- .dm-select.open .dm-select-trigger svg { transform: rotate(180deg); }
4356
- .dm-select-popover { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 120; display: grid; gap: 6px; min-width: 240px; padding: 8px; border: 1px solid #dbe2ea; border-radius: 8px; background: #fff; box-shadow: 0 18px 42px rgba(15,23,42,.18), 0 3px 10px rgba(15,23,42,.08); }
4357
- .dm-select-search { display: flex; align-items: center; gap: 6px; height: 32px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; padding: 0 8px; color: #64748b; }
4358
- .dm-select-search input { min-width: 0; flex: 1; border: 0; padding: 0; background: transparent; box-shadow: none; color: #111827; font: inherit; font-size: 11px; outline: none; }
4359
- .dm-select-list { display: grid; gap: 2px; max-height: 232px; overflow-y: auto; padding: 2px 2px 2px 0; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
4360
- .dm-select-list::-webkit-scrollbar { width: 8px; }
4361
- .dm-select-list::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5e1; }
4362
- .dm-select-option { display: grid; gap: 1px; width: 100%; border: 0; border-radius: 6px; background: transparent; color: #111827; font: inherit; font-size: 11px; line-height: 1.25; padding: 7px 9px; text-align: left; cursor: pointer; }
4363
- .dm-select-option:hover { background: #f1f5f9; }
4364
- .dm-select-option.selected { background: #eef2ff; color: #3730a3; font-weight: 650; }
4365
- .dm-select-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: inherit; color: inherit; }
4366
- .dm-select-option em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: 11px; font-style: normal; font-weight: 500; }
4367
- .dm-select-empty { margin: 0; padding: 10px 8px; color: #94a3b8; font-size: 12px; }
4368
- .dm-select-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid #f1f5f9; }
4369
- .dm-select-pager button { height: 26px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 12px; padding: 0 8px; cursor: pointer; }
4370
- .dm-select-pager button:disabled { opacity: .45; cursor: not-allowed; }
4371
- .dm-select-pager span { color: #64748b; font-size: 12px; font-weight: 650; }
4372
- .dm-db-grid td:has(.dm-select) { overflow: visible; padding-top: 5px; padding-bottom: 5px; }
4373
- .dm-db-grid td .dm-select { min-width: 230px; }
4374
- .dm-json-field { position: relative; }
4375
- .dm-json-field > span { padding-right: 34px; }
4376
- .dm-json-expand { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #64748b; box-shadow: 0 1px 2px rgba(15,23,42,.05); opacity: 0; cursor: pointer; transition: opacity .12s, border-color .12s, color .12s, box-shadow .12s; }
4377
- .dm-json-field:hover .dm-json-expand, .dm-json-expand:focus-visible { opacity: 1; }
4378
- .dm-json-expand:hover:not(:disabled) { border-color: #94a3b8; color: #111827; box-shadow: 0 3px 10px rgba(15,23,42,.1); }
4379
- .dm-json-expand:disabled { cursor: not-allowed; opacity: 0; }
4380
- .dm-json-modal-backdrop { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 24px; background: rgba(15,23,42,.38); }
4381
- .dm-json-modal { width: min(920px, 96vw); max-height: min(760px, 90vh); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dbe2ea; border-radius: 8px; background: #fff; box-shadow: 0 28px 80px rgba(15,23,42,.28); }
4382
- .dm-json-modal header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #edf0f3; background: #fbfdff; }
4383
- .dm-json-modal header p { margin: 0 0 2px; color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
4384
- .dm-json-modal header h2 { margin: 0; color: #111827; font-size: 15px; font-weight: 650; }
4385
- .dm-json-modal pre { margin: 0; flex: 1; overflow: auto; padding: 16px; background: #0f172a; color: #e5edf8; font: 12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; word-break: break-word; scrollbar-width: thin; scrollbar-color: #64748b transparent; }
4386
-
4387
- /* Relations tab */
4388
- .dm-relations-tab { display: grid; gap: 16px; }
4389
- .dm-relations-desc { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.55; }
4390
- .dm-relation-card { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; }
4391
- .dm-relation-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #f3f4f6; background: #fafafa; }
4392
- .dm-relation-mode-label { font-size: 12px; color: #6b7280; font-weight: 600; }
4393
- .dm-relation-props { display: grid; gap: 0; }
4394
- .dm-relation-prop { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #f3f4f6; font-size: 12px; }
4395
- .dm-relation-prop:last-child { border-bottom: 0; }
4396
- .dm-relation-prop span { color: #9ca3af; font-weight: 600; }
4397
- .dm-relation-prop code { font-size: 11px; color: #374151; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; word-break: break-all; }
4398
- .dm-relation-flow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #f3f4f6; }
4399
- .dm-relation-node { display: inline-flex; align-items: center; height: 26px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; color: #374151; font-size: 12px; font-weight: 600; padding: 0 10px; }
4400
- .dm-relation-node.source { background: #f0f0f0; border-color: #d5d5d5; color: #333; }
4401
- .dm-relation-arrow { color: #9ca3af; }
4402
- .dm-relation-hint { margin: 0; padding: 10px 14px; font-size: 12px; color: #6b7280; border-top: 1px solid #f3f4f6; line-height: 1.5; }
4403
- .dm-usage-section { display: grid; gap: 8px; }
4404
- .dm-usage-label { margin: 0; font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
4405
- .dm-usage-rows { display: grid; gap: 5px; }
4406
- .dm-usage-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 7px; background: #fafafa; font-size: 12px; }
4407
- .dm-usage-row strong { color: #111827; font-weight: 500; }
4408
- .dm-usage-row span { color: #9ca3af; }
4409
- .dm-usage-row code { font-size: 11px; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; color: #6b7280; }
4410
-
4411
- /* Buttons v2 */
4412
- .dm-btn-primary { display: inline-flex; align-items: center; gap: 5px; height: 32px; border: 0; border-radius: 6px; background: #111; color: #fff; font: inherit; font-size: 13px; padding: 0 13px; cursor: pointer; font-weight: 500; transition: background .12s; }
4413
- .dm-btn-primary:hover { background: #333; }
4414
- .dm-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
4415
- .dm-btn-outline { display: inline-flex; align-items: center; gap: 5px; height: 32px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fff; color: #333; font: inherit; font-size: 13px; padding: 0 13px; cursor: pointer; transition: background .1s, border-color .1s; }
4416
- .dm-btn-outline:hover { background: #f5f5f5; border-color: #bbb; }
4417
-
4418
- /* Slide-out sidebar */
4419
- .dm-sidebar-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(17,24,39,.2); }
4420
- .dm-add-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; background: #fff; border-left: 1px solid #e5e7eb; box-shadow: -6px 0 32px rgba(15,23,42,.12); transform: translateX(100%); transition: transform .22s cubic-bezier(.22,1,.36,1); z-index: 81; display: flex; flex-direction: column; }
4421
- .dm-add-sidebar.open { transform: translateX(0); }
4422
- .dm-add-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; }
4423
- .dm-add-sidebar-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: #111827; }
4424
- .dm-sidebar-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280; cursor: pointer; }
4425
- .dm-sidebar-close:hover { background: #f9fafb; color: #374151; }
4426
- .dm-add-sidebar-body { display: grid; gap: 14px; padding: 20px; flex: 1; align-content: start; }
4427
- .dm-add-sidebar-hint { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5; }
4428
- .dm-field-label-v2 { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: #374151; }
4429
- .dm-input-v2 { width: 100%; height: 34px; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; color: #111827; font: inherit; font-size: 13px; padding: 0 10px; box-sizing: border-box; }
4430
- .dm-input-v2:focus { outline: none; border-color: #666; box-shadow: 0 0 0 3px rgba(0,0,0,.07); }
4431
- .dm-add-sidebar-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
4432
-
4433
- /* Object type badges */
4434
- .dm-badge-registry { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4435
- .dm-badge-people { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4436
- .dm-badge-tasks { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4437
- .dm-badge-manual { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4438
- .dm-badge-belongs { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4439
- .dm-badge-hasmany { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
4440
-
4441
- /* Tab count pill */
4442
- .dm-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; border-radius: 999px; background: #e5e7eb; color: #6b7280; font-size: 10px; font-weight: 700; padding: 0 5px; margin-left: 5px; }
4443
- .dm-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 99px; background: #ebebeb; color: #666; font-size: 10px; font-weight: 600; padding: 0 4px; margin-left: 4px; }
4444
- .dm-tab-v2.active .dm-tab-count { background: #222; color: #fff; }
4445
-
4446
- /* Sidebar step: type-picker */
4447
- .dm-type-picker { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
4448
- .dm-type-picker-hint { margin: 0; padding: 14px 20px 8px; font-size: 13px; color: #6b7280; line-height: 1.5; }
4449
- .dm-type-picker-list { display: grid; gap: 2px; padding: 4px 12px 16px; }
4450
- .dm-type-card { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #e8e8e8; border-radius: 7px; background: #fff; cursor: pointer; text-align: left; font: inherit; transition: background .1s, border-color .1s; }
4451
- .dm-type-card:hover { background: #fafafa; border-color: #ccc; }
4480
+ .dm-record-drawer-wide { width: min(780px, 100vw); }
4481
+ .dm-api-action-card {
4482
+ display: grid;
4483
+ grid-template-columns: auto 1fr auto;
4484
+ gap: 12px;
4485
+ align-items: start;
4486
+ margin: 12px 16px 0;
4487
+ padding: 14px 14px;
4488
+ background: #fff;
4489
+ border: 1px solid #e5e7eb;
4490
+ border-radius: 5px;
4491
+ box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
4492
+ }
4493
+ .dm-api-action-card-success { grid-template-columns: 1fr auto; }
4494
+ .dm-api-action-card-muted { grid-template-columns: 1fr; background: #fafafa; }
4495
+ .dm-api-action-card-note { font-size: 11px; color: #6b7280; margin-top: 4px; }
4496
+ .dm-api-action-checklist { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
4497
+ .dm-api-action-checklist li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #374151; }
4498
+ .dm-api-action-checklist li.is-done { color: #065f46; }
4499
+ .dm-api-action-checklist li.is-pending { color: #6b7280; }
4500
+ .dm-api-action-card-actions {
4501
+ display: flex;
4502
+ flex-direction: column;
4503
+ gap: 6px;
4504
+ align-items: stretch;
4505
+ flex-shrink: 0;
4506
+ }
4507
+ .dm-api-action-card-actions .dm-api-action-card-cta {
4508
+ display: inline-flex;
4509
+ align-items: center;
4510
+ justify-content: center;
4511
+ gap: 6px;
4512
+ }
4513
+ .dm-api-action-card-icon { color: #111827; margin-top: 2px; }
4514
+ .dm-api-action-card-body { display: grid; gap: 4px; min-width: 0; }
4515
+ .dm-api-action-card-eyebrow { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
4516
+ .dm-api-action-card-body h3 { margin: 0; font-size: 14px; font-weight: 650; color: #111827; }
4517
+ .dm-api-action-card-body p { margin: 0; font-size: 12px; line-height: 1.45; color: #4b5563; }
4518
+ .dm-api-action-card-cta { flex-shrink: 0; align-self: center; }
4519
+ .dm-api-review-banner {
4520
+ display: grid;
4521
+ grid-template-columns: auto 1fr auto;
4522
+ gap: 10px;
4523
+ align-items: start;
4524
+ padding: 12px 14px;
4525
+ margin-bottom: 12px;
4526
+ background: #fafafa;
4527
+ border: 1px solid #e5e7eb;
4528
+ border-radius: 5px;
4529
+ }
4530
+ .dm-api-review-banner-icon { color: #111827; }
4531
+ .dm-api-review-banner-body { display: grid; gap: 4px; }
4532
+ .dm-api-review-banner-eyebrow { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6b7280; }
4533
+ .dm-api-review-banner-body h3 { margin: 0; font-size: 14px; color: #111827; }
4534
+ .dm-api-review-banner-body p { margin: 0; font-size: 12px; color: #4b5563; }
4535
+ .dm-api-review-banner-route { display: block; margin-top: 4px; font-size: 11px; color: #374151; word-break: break-all; }
4536
+ .dm-sandbox-tool-draft { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 0; overflow-y: auto; flex: 1; min-height: 0; }
4537
+ .dm-sandbox-tool-draft-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
4538
+ @media (max-width: 720px) { .dm-sandbox-tool-draft-grid { grid-template-columns: 1fr; } }
4539
+ .dm-sandbox-tool-draft-label { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6b7280; }
4540
+ .dm-sandbox-tool-draft-fields { display: grid; gap: 8px; align-content: start; }
4541
+ .dm-sandbox-tool-draft-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0 16px; border-top: 1px solid #edf0f3; }
4542
+ .dm-sandbox-tool-advanced { border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; }
4543
+ .dm-sandbox-tool-advanced summary { cursor: pointer; padding: 8px 10px; font-size: 12px; font-weight: 650; color: #111827; }
4544
+ .dm-sandbox-tool-advanced-hint { margin: 0; padding: 0 10px 10px; font-size: 11px; color: #6b7280; }
4545
+ .dm-sandbox-tool-error { margin: 0; font-size: 12px; color: #b91c1c; }
4546
+ .dm-sandbox-tool-test-msg { margin-top: 6px; color: #065f46; }
4547
+ .dm-orchestration-sidecar { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
4548
+ .dm-orchestration-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #edf0f3; }
4549
+ .dm-orchestration-header__back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; color: #374151; cursor: pointer; }
4550
+ .dm-orchestration-header__titles { flex: 1; min-width: 140px; }
4551
+ .dm-orchestration-header h2 { margin: 0; font-size: 15px; font-weight: 650; color: #111827; }
4552
+ .dm-orchestration-header p { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
4553
+ .dm-orchestration-header__badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; border-radius: 5px; border: 1px solid #e5e7eb; background: #fafafa; color: #6b7280; }
4554
+ .dm-orchestration-header__badge.is-connected { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
4555
+ .dm-orchestration-header__badge.is-draft { border-color: #fde68a; background: #fffbeb; color: #92400e; }
4556
+ .dm-orchestration-header__actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
4557
+ .dm-orchestration-sidecar__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; padding: 12px 16px 16px; overflow-y: auto; flex: 1; min-height: 0; }
4558
+ @media (max-width: 720px) { .dm-orchestration-sidecar__body { grid-template-columns: 1fr; } }
4559
+ .dm-orchestration-sidecar__label { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6b7280; }
4560
+ .dm-orchestration-sidecar__footnote { margin: 10px 0 0; font-size: 11px; color: #6b7280; line-height: 1.45; }
4561
+ .dm-orchestration-canvas { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 28px 12px 12px; background: #fafafa; border: 1px solid #e5e7eb; border-radius: 5px; overflow: visible; }
4562
+ .dm-orchestration-canvas--empty { font-size: 12px; color: #6b7280; }
4563
+ .dm-orchestration-canvas__badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
4564
+ .dm-orchestration-canvas__step { display: flex; flex-direction: column; align-items: stretch; }
4565
+ .dm-orchestration-node { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; text-align: left; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05); cursor: pointer; transition: border-color 0.1s, box-shadow 0.1s; }
4566
+ .dm-orchestration-node:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); border-color: #d1d5db; }
4567
+ .dm-orchestration-node--selected { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb, 0 2px 8px rgba(37, 99, 235, 0.12); }
4568
+ .dm-orchestration-node__icon { grid-row: 1 / span 3; color: #374151; display: inline-flex; align-items: flex-start; padding-top: 2px; }
4569
+ .dm-orchestration-node__type { grid-column: 2; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
4570
+ .dm-orchestration-node__title { grid-column: 2; font-size: 13px; font-weight: 650; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4571
+ .dm-orchestration-node__subtitle { grid-column: 2; font-size: 11px; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4572
+ .dm-orchestration-connector { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 0; overflow: visible; z-index: 1; }
4573
+ .dm-orchestration-connector__line { width: 1px; height: 16px; background: #d1d5db; }
4574
+ .dm-orchestration-connector__add { width: 22px; height: 22px; margin: 2px 0; border: 1px solid #e5e7eb; border-radius: 50%; background: #fff; color: #374151; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.1s; }
4575
+ .dm-orchestration-connector:hover .dm-orchestration-connector__add { opacity: 1; }
4576
+ .dm-orchestration-connector__popover { position: absolute; left: 50%; transform: translateX(-50%); top: 28px; z-index: 85; min-width: 180px; padding: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 5px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); }
4577
+ .dm-orchestration-connector__popover p { margin: 0 0 6px; font-size: 11px; color: #6b7280; }
4578
+ .dm-orchestration-connector__popover button { display: block; width: 100%; text-align: left; padding: 6px 8px; border: none; background: transparent; font-size: 12px; color: #111827; border-radius: 4px; cursor: pointer; }
4579
+ .dm-orchestration-connector__popover button:hover { background: #f3f4f6; }
4580
+ .dm-orchestration-connector__passes { font-size: 9px; color: #9ca3af; margin-top: 2px; }
4581
+ .dm-orchestration-config { display: grid; gap: 10px; padding: 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 5px; min-height: 200px; }
4582
+ .dm-orchestration-config--empty p { margin: 0; font-size: 12px; color: #6b7280; }
4583
+ .dm-orchestration-config__head { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid #f3f4f6; }
4584
+ .dm-orchestration-config__node-kind { margin: 0; font-size: 14px; font-weight: 650; color: #111827; }
4585
+ .dm-orchestration-config__node-sub { margin: 0; font-size: 11px; color: #6b7280; }
4586
+ .dm-orchestration-config__badge { display: inline-flex; align-self: start; font-size: 10px; font-weight: 700; text-transform: none; padding: 3px 8px; border-radius: 5px; border: 1px solid #e5e7eb; background: #fafafa; color: #374151; }
4587
+ .dm-orchestration-config__badge.is-connected { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
4588
+ .dm-orchestration-config__badge.is-failed { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
4589
+ .dm-orchestration-config__meta { margin: 0; font-size: 11px; color: #4b5563; }
4590
+ .dm-orchestration-config__field-label { font-size: 11px; font-weight: 650; color: #475569; }
4591
+ .dm-orchestration-config__fieldmap,
4592
+ .dm-orchestration-config__payload { display: grid; gap: 8px; }
4593
+ .dm-orchestration-config__fieldmap-row,
4594
+ .dm-orchestration-config__payload-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
4595
+ .dm-orchestration-config__advanced-json summary { cursor: pointer; font-size: 11px; font-weight: 650; color: #374151; }
4596
+ .dm-orchestration-preview { margin: 0; padding: 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 5px; font-size: 10px; overflow: auto; max-height: 160px; white-space: pre-wrap; word-break: break-word; }
4597
+ .dm-orchestration-preview > span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; }
4598
+ .dm-orchestration-config__preview-list { margin: 0; padding-left: 18px; font-size: 12px; color: #374151; display: grid; gap: 4px; }
4599
+ .dm-orchestration-config__tabs { display: flex; gap: 4px; flex-wrap: wrap; }
4600
+ .dm-orchestration-config__tabs button { padding: 5px 10px; border: 1px solid #e5e7eb; border-radius: 5px; background: #fafafa; font-size: 11px; font-weight: 600; color: #4b5563; cursor: pointer; }
4601
+ .dm-orchestration-config__tabs button.is-active { background: #fff; border-color: #111827; color: #111827; }
4602
+ .dm-orchestration-config__pane { display: grid; gap: 8px; }
4603
+ .dm-orchestration-config__field { display: grid; gap: 4px; }
4604
+ .dm-orchestration-config__field span { font-size: 11px; font-weight: 650; color: #475569; }
4605
+ .dm-orchestration-config__field input,
4606
+ .dm-orchestration-config__field textarea,
4607
+ .dm-orchestration-config__field select { border: 1px solid #cbd5e1; border-radius: 5px; padding: 7px 9px; font-size: 12px; color: #111827; }
4608
+ .dm-orchestration-config__field-inline { grid-template-columns: auto 1fr; align-items: center; }
4609
+ .dm-orchestration-config__filter-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 6px; align-items: center; }
4610
+ .dm-orchestration-config__add-filter { justify-self: start; }
4611
+ .dm-orchestration-config__preview { margin: 0; padding: 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 5px; font-size: 10px; overflow: auto; max-height: 160px; }
4612
+ .dm-orchestration-config__hint { margin: 0; font-size: 11px; color: #6b7280; }
4613
+ .dm-orchestration-config__error { margin: 0; font-size: 12px; color: #b91c1c; }
4614
+ .dm-orchestration-runtime { border: 1px solid #e5e7eb; border-radius: 5px; background: #fafafa; }
4615
+ .dm-orchestration-runtime summary { cursor: pointer; padding: 8px 10px; font-size: 12px; font-weight: 650; color: #111827; }
4616
+ .dm-orchestration-runtime__fields { display: grid; gap: 8px; padding: 0 10px 10px; }
4617
+ .dm-orchestration-run-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e5e7eb; }
4618
+ .dm-orchestration-run-status__badge { font-size: 11px; font-weight: 600; text-transform: capitalize; color: #374151; }
4619
+ .dm-orchestration-run-status__badge.is-success { color: #166534; }
4620
+ .dm-orchestration-run-status__badge.is-failed { color: #b91c1c; }
4621
+ .dm-orchestration-run-status__badge.is-running { color: #1d4ed8; }
4622
+ .dm-orchestration-run-status__message { width: 100%; margin: 0; font-size: 11px; color: #4b5563; }
4623
+ .dm-orchestration-confirm__backdrop { position: fixed; inset: 0; z-index: 92; background: rgba(15, 23, 42, 0.35); display: flex; align-items: center; justify-content: center; padding: 16px; }
4624
+ .dm-orchestration-confirm__dialog { width: min(420px, 100%); background: #fff; border: 1px solid #e5e7eb; border-radius: 5px; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14); }
4625
+ .dm-orchestration-confirm__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #edf0f3; }
4626
+ .dm-orchestration-confirm__head p { margin: 0 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6b7280; }
4627
+ .dm-orchestration-confirm__head h2 { margin: 0; font-size: 16px; color: #111827; }
4628
+ .dm-orchestration-confirm__body { padding: 14px 16px; display: grid; gap: 10px; font-size: 13px; color: #374151; line-height: 1.5; }
4629
+ .dm-orchestration-confirm__list { margin: 0; padding-left: 18px; }
4630
+ .dm-orchestration-confirm__summary { margin: 0; padding: 10px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 5px; font-size: 12px; }
4631
+ .dm-orchestration-confirm__summary span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
4632
+ .dm-workflow-surface {
4633
+ display: flex;
4634
+ flex-direction: column;
4635
+ min-height: 0;
4636
+ width: 100%;
4637
+ padding: 0;
4638
+ background: #f7f7f8;
4639
+ overflow: hidden;
4640
+ }
4641
+ .dm-workflow-toolbar {
4642
+ height: 40px;
4643
+ min-height: 40px;
4644
+ align-items: center;
4645
+ flex-wrap: nowrap;
4646
+ gap: 12px;
4647
+ padding: 0 12px;
4648
+ margin: 0;
4649
+ border-bottom: 1px solid #ececef;
4650
+ background: #fbfbfc;
4651
+ overflow: hidden;
4652
+ }
4653
+ .dm-workflow-titlebar {
4654
+ display: flex;
4655
+ align-items: center;
4656
+ gap: 6px;
4657
+ min-width: 0;
4658
+ flex: 1;
4659
+ color: #8b8b91;
4660
+ font-size: 13px;
4661
+ font-weight: 500;
4662
+ }
4663
+ .dm-workflow-titlebar h1 {
4664
+ margin: 0;
4665
+ min-width: 0;
4666
+ max-width: 260px;
4667
+ overflow: hidden;
4668
+ text-overflow: ellipsis;
4669
+ white-space: nowrap;
4670
+ color: #4b4b52;
4671
+ font-size: 13px;
4672
+ font-weight: 600;
4673
+ letter-spacing: 0;
4674
+ }
4675
+ .dm-workflow-title-icon {
4676
+ display: grid;
4677
+ place-items: center;
4678
+ width: 18px;
4679
+ height: 18px;
4680
+ border: 1px solid #e1e1e5;
4681
+ border-radius: 4px;
4682
+ background: #f4f4f5;
4683
+ color: #a1a1aa;
4684
+ }
4685
+ .dm-workflow-title-muted,
4686
+ .dm-workflow-title-separator,
4687
+ .dm-workflow-count {
4688
+ color: #a1a1aa;
4689
+ }
4690
+ .dm-workflow-toolbar-actions {
4691
+ display: flex;
4692
+ align-items: center;
4693
+ gap: 6px;
4694
+ flex-shrink: 0;
4695
+ max-width: 66vw;
4696
+ overflow-x: auto;
4697
+ scrollbar-width: none;
4698
+ }
4699
+ .dm-workflow-toolbar-actions::-webkit-scrollbar { display: none; }
4700
+ .dm-workflow-icon-btn,
4701
+ .dm-workflow-chip-btn {
4702
+ height: 24px;
4703
+ display: inline-flex;
4704
+ align-items: center;
4705
+ justify-content: center;
4706
+ gap: 5px;
4707
+ border: 1px solid #dedee3;
4708
+ border-radius: 4px;
4709
+ background: transparent;
4710
+ color: #62626a;
4711
+ font: inherit;
4712
+ font-size: 12px;
4713
+ line-height: 1;
4714
+ text-decoration: none;
4715
+ cursor: pointer;
4716
+ }
4717
+ .dm-workflow-icon-btn {
4718
+ width: 24px;
4719
+ padding: 0;
4720
+ }
4721
+ .dm-workflow-chip-btn {
4722
+ padding: 0 9px;
4723
+ }
4724
+ .dm-workflow-icon-btn:hover:not(:disabled),
4725
+ .dm-workflow-chip-btn:hover:not(:disabled) {
4726
+ background: #ededf0;
4727
+ color: #303036;
4728
+ }
4729
+ .dm-workflow-icon-btn:disabled,
4730
+ .dm-workflow-chip-btn:disabled {
4731
+ opacity: .48;
4732
+ cursor: not-allowed;
4733
+ }
4734
+ .dm-workflow-orchestration {
4735
+ flex: 1;
4736
+ min-height: 0;
4737
+ height: calc(100vh - 40px);
4738
+ background: #f7f7f8;
4739
+ }
4740
+ .dm-workflow-empty { padding: 24px 16px; font-size: 13px; color: #6b7280; }
4741
+ .dm-workflow-error { color: #b91c1c; }
4742
+ .dm-workflow-status-msg { margin: 0 16px 16px; font-size: 12px; color: #374151; }
4743
+
4744
+ .dm-workflow-orchestration .dm-orchestration-sidecar__body {
4745
+ display: grid;
4746
+ grid-template-columns: minmax(0, 1fr) 0;
4747
+ gap: 8px;
4748
+ height: 100%;
4749
+ padding: 8px;
4750
+ overflow: hidden;
4751
+ }
4752
+ .dm-workflow-orchestration.has-panel .dm-orchestration-sidecar__body {
4753
+ grid-template-columns: minmax(420px, 1fr) minmax(360px, 480px);
4754
+ }
4755
+ .dm-workflow-orchestration .dm-orchestration-sidecar__canvas-col {
4756
+ min-width: 0;
4757
+ min-height: 0;
4758
+ overflow: hidden;
4759
+ border: 1px solid #ececef;
4760
+ border-radius: 6px;
4761
+ background: #fff;
4762
+ }
4763
+ .dm-workflow-orchestration .dm-orchestration-sidecar__config-col {
4764
+ min-width: 0;
4765
+ min-height: 0;
4766
+ display: flex;
4767
+ flex-direction: column;
4768
+ overflow: hidden;
4769
+ border: 1px solid #ececef;
4770
+ border-radius: 6px;
4771
+ background: #fff;
4772
+ }
4773
+ .dm-workflow-panel-head {
4774
+ height: 40px;
4775
+ display: flex;
4776
+ align-items: center;
4777
+ gap: 8px;
4778
+ padding: 0 12px;
4779
+ border-bottom: 1px solid #ececef;
4780
+ background: #fff;
4781
+ color: #303036;
4782
+ font-size: 13px;
4783
+ font-weight: 600;
4784
+ }
4785
+ .dm-workflow-panel-head em {
4786
+ color: #a1a1aa;
4787
+ font-size: 12px;
4788
+ font-style: normal;
4789
+ font-weight: 500;
4790
+ }
4791
+
4792
+ .dm-workflow-orchestration .dm-orchestration-canvas {
4793
+ height: 100%;
4794
+ min-height: 520px;
4795
+ align-items: center;
4796
+ justify-content: center;
4797
+ padding: 64px 24px;
4798
+ border: 0;
4799
+ border-radius: 0;
4800
+ background-color: #fff;
4801
+ background-image: radial-gradient(circle, #e7e7eb 1px, transparent 1px);
4802
+ background-size: 20px 20px;
4803
+ box-shadow: none;
4804
+ overflow: hidden;
4805
+ }
4806
+ .dm-workflow-orchestration .dm-orchestration-canvas__badge {
4807
+ top: 16px;
4808
+ left: 16px;
4809
+ height: 20px;
4810
+ display: inline-flex;
4811
+ align-items: center;
4812
+ padding: 0 8px;
4813
+ border: 0;
4814
+ border-radius: 4px;
4815
+ background: #fff5b8;
4816
+ color: #9a6b00;
4817
+ font-size: 12px;
4818
+ font-weight: 500;
4819
+ text-transform: none;
4820
+ letter-spacing: 0;
4821
+ }
4822
+ .dm-workflow-orchestration .dm-orchestration-canvas__badge.is-live {
4823
+ background: #dcfce7;
4824
+ color: #166534;
4825
+ }
4826
+ .dm-workflow-orchestration .dm-orchestration-canvas__badge.is-draft {
4827
+ background: #fff5b8;
4828
+ color: #9a6b00;
4829
+ }
4830
+ .dm-orchestration-floating-tools {
4831
+ position: absolute;
4832
+ right: 18px;
4833
+ top: 50%;
4834
+ transform: translateY(-50%);
4835
+ display: grid;
4836
+ gap: 2px;
4837
+ padding: 2px;
4838
+ border-radius: 6px;
4839
+ z-index: 3;
4840
+ }
4841
+ .dm-orchestration-floating-tools button {
4842
+ width: 28px;
4843
+ height: 28px;
4844
+ display: grid;
4845
+ place-items: center;
4846
+ border: 0;
4847
+ border-radius: 5px;
4848
+ background: transparent;
4849
+ color: #777780;
4850
+ cursor: pointer;
4851
+ }
4852
+ .dm-orchestration-floating-tools button:hover {
4853
+ background: #f0f0f2;
4854
+ color: #303036;
4855
+ }
4856
+ .dm-orchestration-canvas__viewport {
4857
+ display: flex;
4858
+ flex-direction: column;
4859
+ align-items: center;
4860
+ transform-origin: center top;
4861
+ transition: transform .12s ease;
4862
+ }
4863
+ .dm-workflow-orchestration .dm-orchestration-canvas__step {
4864
+ width: 173px;
4865
+ display: flex;
4866
+ flex-direction: column;
4867
+ align-items: center;
4868
+ }
4869
+ .dm-workflow-orchestration .dm-orchestration-node {
4870
+ position: relative;
4871
+ width: 173px;
4872
+ min-height: 50px;
4873
+ grid-template-columns: 28px minmax(0, 1fr);
4874
+ grid-template-rows: auto auto;
4875
+ gap: 1px 8px;
4876
+ align-items: center;
4877
+ align-content: center;
4878
+ padding: 8px 10px;
4879
+ border: 1px solid #dedee4;
4880
+ border-radius: 6px;
4881
+ background: #fff;
4882
+ box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 2px 7px rgba(15, 23, 42, .04);
4883
+ }
4884
+ .dm-workflow-orchestration .dm-orchestration-node:hover {
4885
+ border-color: #b9b9c1;
4886
+ box-shadow: 0 2px 5px rgba(15, 23, 42, .1), 0 6px 14px rgba(15, 23, 42, .06);
4887
+ }
4888
+ .dm-workflow-orchestration .dm-orchestration-node--selected {
4889
+ border-color: #5166f1;
4890
+ box-shadow: 0 0 0 1px #5166f1;
4891
+ }
4892
+ .dm-workflow-orchestration .dm-orchestration-node__icon {
4893
+ width: 28px;
4894
+ height: 28px;
4895
+ grid-row: 1 / span 2;
4896
+ align-self: center;
4897
+ display: grid;
4898
+ place-items: center;
4899
+ padding: 0;
4900
+ border-radius: 5px;
4901
+ background: #f2f2f4;
4902
+ color: #111;
4903
+ }
4904
+ .dm-workflow-orchestration .dm-orchestration-node__icon svg { stroke: currentColor; }
4905
+ .dm-workflow-orchestration .dm-orchestration-node__type {
4906
+ align-self: end;
4907
+ color: #7b7b84;
4908
+ font-size: 10px;
4909
+ line-height: 1.1;
4910
+ font-weight: 500;
4911
+ text-transform: none;
4912
+ letter-spacing: 0;
4913
+ }
4914
+ .dm-workflow-orchestration .dm-orchestration-node__title {
4915
+ align-self: start;
4916
+ color: #303036;
4917
+ font-size: 13px;
4918
+ line-height: 1.15;
4919
+ font-weight: 500;
4920
+ }
4921
+ .dm-workflow-orchestration .dm-orchestration-node__gear {
4922
+ position: absolute;
4923
+ top: 6px;
4924
+ right: 6px;
4925
+ display: grid;
4926
+ place-items: center;
4927
+ width: 18px;
4928
+ height: 18px;
4929
+ border-radius: 4px;
4930
+ color: #6b7280;
4931
+ background: #fff;
4932
+ opacity: 0;
4933
+ transition: opacity .1s ease, background .1s ease;
4934
+ }
4935
+ .dm-workflow-orchestration .dm-orchestration-node:hover .dm-orchestration-node__gear,
4936
+ .dm-workflow-orchestration .dm-orchestration-node:focus-within .dm-orchestration-node__gear,
4937
+ .dm-workflow-orchestration .dm-orchestration-node:focus-visible .dm-orchestration-node__gear {
4938
+ opacity: 1;
4939
+ }
4940
+ .dm-workflow-orchestration .dm-orchestration-node__gear:hover {
4941
+ background: #f3f4f6;
4942
+ color: #111;
4943
+ }
4944
+ .dm-workflow-orchestration .dm-orchestration-node__subtitle {
4945
+ display: none;
4946
+ }
4947
+ .dm-workflow-orchestration .dm-orchestration-connector {
4948
+ height: 60px;
4949
+ padding: 0;
4950
+ justify-content: center;
4951
+ }
4952
+ .dm-workflow-orchestration .dm-orchestration-connector__line {
4953
+ position: absolute;
4954
+ top: 5px;
4955
+ bottom: 8px;
4956
+ height: auto;
4957
+ width: 1px;
4958
+ background: #c4c4cc;
4959
+ }
4960
+ .dm-workflow-orchestration .dm-orchestration-connector__line::before {
4961
+ content: "";
4962
+ position: absolute;
4963
+ top: -8px;
4964
+ left: 50%;
4965
+ width: 7px;
4966
+ height: 7px;
4967
+ transform: translateX(-50%);
4968
+ border: 1px solid #c4c4cc;
4969
+ border-radius: 999px;
4970
+ background: #fff;
4971
+ }
4972
+ .dm-workflow-orchestration .dm-orchestration-connector__line::after {
4973
+ content: "";
4974
+ position: absolute;
4975
+ bottom: -6px;
4976
+ left: 50%;
4977
+ width: 9px;
4978
+ height: 7px;
4979
+ transform: translateX(-50%);
4980
+ border: 0;
4981
+ clip-path: polygon(0 0, 100% 0, 50% 100%);
4982
+ background: #c4c4cc;
4983
+ }
4984
+ .dm-workflow-orchestration .dm-orchestration-connector__add {
4985
+ position: relative;
4986
+ z-index: 2;
4987
+ width: 22px;
4988
+ height: 22px;
4989
+ display: grid;
4990
+ place-items: center;
4991
+ margin: 0;
4992
+ padding: 0;
4993
+ border-radius: 999px;
4994
+ background: #fff;
4995
+ border: 1px solid #d9d9df;
4996
+ color: #8b8b91;
4997
+ opacity: 0;
4998
+ box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
4999
+ transition: opacity .1s ease, background .1s ease, color .1s ease, border-color .1s ease;
5000
+ }
5001
+ .dm-workflow-orchestration .dm-orchestration-connector:hover .dm-orchestration-connector__add,
5002
+ .dm-workflow-orchestration .dm-orchestration-connector__add:focus-visible {
5003
+ opacity: 1;
5004
+ }
5005
+ .dm-workflow-orchestration .dm-orchestration-connector__add:hover {
5006
+ background: #f7f7f8;
5007
+ border-color: #c9c9d1;
5008
+ color: #111;
5009
+ }
5010
+ .dm-workflow-orchestration .dm-orchestration-config {
5011
+ flex: 1;
5012
+ min-height: 0;
5013
+ display: flex;
5014
+ flex-direction: column;
5015
+ overflow-y: auto;
5016
+ border: 0;
5017
+ border-radius: 0;
5018
+ padding: 16px;
5019
+ background: #fff;
5020
+ align-content: start;
5021
+ }
5022
+ .dm-workflow-orchestration .dm-orchestration-config__head {
5023
+ padding-bottom: 12px;
5024
+ border-bottom-color: #edf0f3;
5025
+ }
5026
+ .dm-workflow-orchestration .dm-orchestration-config__node-kind {
5027
+ font-size: 14px;
5028
+ font-weight: 650;
5029
+ }
5030
+ .dm-workflow-orchestration .dm-orchestration-config__node-sub,
5031
+ .dm-workflow-orchestration .dm-orchestration-config__hint {
5032
+ font-size: 12px;
5033
+ line-height: 1.35;
5034
+ color: #667085;
5035
+ }
5036
+ .dm-workflow-orchestration .dm-orchestration-config__tabs {
5037
+ gap: 6px;
5038
+ }
5039
+ .dm-workflow-orchestration .dm-orchestration-config__tabs button {
5040
+ height: 32px;
5041
+ padding: 0 12px;
5042
+ border: 1px solid #e0e0e0;
5043
+ border-radius: 6px;
5044
+ background: #fff;
5045
+ color: #4b5563;
5046
+ font-size: 13px;
5047
+ font-weight: 600;
5048
+ }
5049
+ .dm-workflow-orchestration .dm-orchestration-config__tabs button:hover {
5050
+ background: #f5f5f5;
5051
+ border-color: #bbb;
5052
+ }
5053
+ .dm-workflow-orchestration .dm-orchestration-config__tabs button.is-active {
5054
+ border-color: #111;
5055
+ background: #fff;
5056
+ color: #111;
5057
+ }
5058
+ .dm-workflow-orchestration .dm-orchestration-config__pane {
5059
+ gap: 12px;
5060
+ }
5061
+ .dm-workflow-orchestration .dm-orchestration-config__field {
5062
+ gap: 6px;
5063
+ }
5064
+ .dm-workflow-orchestration .dm-orchestration-config__field span {
5065
+ color: #475569;
5066
+ font-size: 11px;
5067
+ font-weight: 650;
5068
+ }
5069
+ .dm-workflow-orchestration .dm-orchestration-config__section {
5070
+ display: grid;
5071
+ gap: 10px;
5072
+ padding-top: 12px;
5073
+ border-top: 1px solid #edf0f3;
5074
+ }
5075
+ .dm-workflow-orchestration .dm-orchestration-config__pane > .dm-orchestration-config__section:first-child {
5076
+ padding-top: 0;
5077
+ border-top: 0;
5078
+ }
5079
+ .dm-workflow-orchestration .dm-orchestration-config__section > span,
5080
+ .dm-workflow-orchestration .dm-orchestration-config__field-label,
5081
+ .dm-workflow-action-group__label {
5082
+ color: #111827;
5083
+ font-weight: 650;
5084
+ }
5085
+ .dm-workflow-orchestration .dm-orchestration-config__field input,
5086
+ .dm-workflow-orchestration .dm-orchestration-config__field textarea,
5087
+ .dm-workflow-orchestration .dm-orchestration-config__field select {
5088
+ width: 100%;
5089
+ min-height: 32px;
5090
+ border: 1px solid #cbd5e1;
5091
+ border-radius: 6px;
5092
+ background: #fff;
5093
+ color: #111827;
5094
+ font: inherit;
5095
+ font-size: 12px;
5096
+ padding: 7px 9px;
5097
+ box-sizing: border-box;
5098
+ }
5099
+ .dm-workflow-orchestration .dm-orchestration-config__field input:focus,
5100
+ .dm-workflow-orchestration .dm-orchestration-config__field textarea:focus,
5101
+ .dm-workflow-orchestration .dm-orchestration-config__field select:focus {
5102
+ outline: none;
5103
+ border-color: #64748b;
5104
+ box-shadow: 0 0 0 3px rgba(100, 116, 139, .12);
5105
+ }
5106
+ .dm-workflow-orchestration .dm-orchestration-config__field input:disabled,
5107
+ .dm-workflow-orchestration .dm-orchestration-config__field textarea:disabled,
5108
+ .dm-workflow-orchestration .dm-orchestration-config__field select:disabled {
5109
+ background: #fff;
5110
+ color: #111827;
5111
+ -webkit-text-fill-color: #111827;
5112
+ opacity: 1;
5113
+ }
5114
+ .dm-workflow-orchestration .dm-orchestration-config__preview,
5115
+ .dm-workflow-orchestration .dm-orchestration-preview {
5116
+ border-color: #e5e7eb;
5117
+ border-radius: 6px;
5118
+ background: #fbfdff;
5119
+ }
5120
+ .dm-workflow-orchestration .dm-version-delta {
5121
+ gap: 12px;
5122
+ }
5123
+ .dm-workflow-orchestration .dm-version-delta__label-row {
5124
+ display: inline-flex;
5125
+ align-items: center;
5126
+ gap: 6px;
5127
+ }
5128
+ .dm-workflow-orchestration .dm-version-delta__info {
5129
+ width: 15px;
5130
+ height: 15px;
5131
+ display: inline-grid;
5132
+ place-items: center;
5133
+ border: 1px solid #d1d5db;
5134
+ border-radius: 999px;
5135
+ color: #667085;
5136
+ font-size: 10px;
5137
+ font-weight: 700;
5138
+ line-height: 1;
5139
+ opacity: 0;
5140
+ transition: opacity .12s ease, border-color .12s ease, color .12s ease;
5141
+ }
5142
+ .dm-workflow-orchestration .dm-version-delta:hover .dm-version-delta__info,
5143
+ .dm-workflow-orchestration .dm-version-delta__info:focus-visible {
5144
+ opacity: 1;
5145
+ }
5146
+ .dm-workflow-orchestration .dm-version-delta__info:hover {
5147
+ border-color: #9ca3af;
5148
+ color: #111827;
5149
+ }
5150
+ .dm-workflow-orchestration .dm-version-delta__tag-fields {
5151
+ display: grid;
5152
+ gap: 10px;
5153
+ }
5154
+ .dm-workflow-orchestration .dm-orchestration-config__node-json {
5155
+ border-top: 1px solid #e5e7eb;
5156
+ padding-top: 12px;
5157
+ }
5158
+ .dm-workflow-orchestration .dm-orchestration-config__node-json summary {
5159
+ width: fit-content;
5160
+ color: #475467;
5161
+ font-size: 12px;
5162
+ font-weight: 650;
5163
+ }
5164
+ .dm-workflow-orchestration .dm-orchestration-config__node-json .dm-orchestration-preview {
5165
+ margin-top: 8px;
5166
+ max-height: 220px;
5167
+ overflow: auto;
5168
+ border-color: #e5e7eb;
5169
+ background: #ffffff;
5170
+ color: #111827;
5171
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
5172
+ font-size: 11px;
5173
+ line-height: 1.45;
5174
+ white-space: pre;
5175
+ word-break: normal;
5176
+ }
5177
+ .dm-workflow-add-panel {
5178
+ display: grid;
5179
+ gap: 14px;
5180
+ padding: 16px;
5181
+ overflow-y: auto;
5182
+ background: #fff;
5183
+ }
5184
+ .dm-workflow-add-panel__context {
5185
+ display: grid;
5186
+ gap: 2px;
5187
+ padding-bottom: 12px;
5188
+ border-bottom: 1px solid #edf0f3;
5189
+ }
5190
+ .dm-workflow-add-panel__context span,
5191
+ .dm-workflow-action-group__label {
5192
+ color: #94a3b8;
5193
+ font-size: 11px;
5194
+ font-weight: 700;
5195
+ }
5196
+ .dm-workflow-add-panel__context strong {
5197
+ color: #111827;
5198
+ font-size: 13px;
5199
+ font-weight: 650;
5200
+ }
5201
+ .dm-workflow-add-panel__context em {
5202
+ color: #64748b;
5203
+ font-size: 12px;
5204
+ font-style: normal;
5205
+ }
5206
+ .dm-workflow-action-group {
5207
+ display: grid;
5208
+ gap: 4px;
5209
+ padding-top: 10px;
5210
+ border-top: 1px solid #edf0f3;
5211
+ }
5212
+ .dm-workflow-action-group:first-of-type {
5213
+ border-top: 0;
5214
+ padding-top: 0;
5215
+ }
5216
+ .dm-workflow-action-option {
5217
+ min-height: 34px;
5218
+ display: grid;
5219
+ grid-template-columns: 24px minmax(0, 1fr);
5220
+ gap: 8px;
5221
+ align-items: center;
5222
+ border: 0;
5223
+ border-radius: 6px;
5224
+ background: #fff;
5225
+ color: #666;
5226
+ font: inherit;
5227
+ font-size: 13px;
5228
+ padding: 5px 7px;
5229
+ text-align: left;
5230
+ cursor: pointer;
5231
+ }
5232
+ .dm-workflow-action-option:hover {
5233
+ background: #f5f5f5;
5234
+ color: #111;
5235
+ }
5236
+ .dm-workflow-action-option > span {
5237
+ width: 24px;
5238
+ height: 24px;
5239
+ display: grid;
5240
+ place-items: center;
5241
+ border-radius: 5px;
5242
+ background: #f3f4f6;
5243
+ color: #111;
5244
+ }
5245
+ .dm-workflow-action-option strong {
5246
+ min-width: 0;
5247
+ color: inherit;
5248
+ font-size: 13px;
5249
+ font-weight: 500;
5250
+ }
5251
+ .dm-workflow-action-option em,
5252
+ .dm-workflow-action-option small {
5253
+ grid-column: 2;
5254
+ color: #94a3b8;
5255
+ font-size: 11px;
5256
+ font-style: normal;
5257
+ }
5258
+ .dm-workflow-add-panel .dm-workflow-action-group__label {
5259
+ color: #111827;
5260
+ }
5261
+ .dm-workflow-node-config-foot {
5262
+ display: flex;
5263
+ justify-content: flex-end;
5264
+ gap: 8px;
5265
+ margin-top: auto;
5266
+ padding-top: 14px;
5267
+ border-top: 1px solid #edf0f3;
5268
+ }
5269
+ .dm-workflow-node-options,
5270
+ .dm-workflow-node-delete {
5271
+ height: 28px;
5272
+ display: inline-flex;
5273
+ align-items: center;
5274
+ justify-content: center;
5275
+ border: 1px solid #e5e7eb;
5276
+ border-radius: 6px;
5277
+ background: #fff;
5278
+ font: inherit;
5279
+ font-size: 12px;
5280
+ cursor: pointer;
5281
+ }
5282
+ .dm-workflow-node-options {
5283
+ color: #6b7280;
5284
+ padding: 0 10px;
5285
+ }
5286
+ .dm-workflow-node-delete {
5287
+ color: #ef4444;
5288
+ padding: 0 10px;
5289
+ }
5290
+ .dm-workflow-node-options:hover:not(:disabled),
5291
+ .dm-workflow-node-delete:hover:not(:disabled) {
5292
+ background: #f8fafc;
5293
+ }
5294
+ @media (max-width: 1100px) {
5295
+ .dm-workflow-orchestration.has-panel .dm-orchestration-sidecar__body {
5296
+ position: relative;
5297
+ grid-template-columns: minmax(0, 1fr);
5298
+ }
5299
+ .dm-workflow-orchestration.has-panel .dm-orchestration-sidecar__config-col {
5300
+ position: absolute;
5301
+ top: 8px;
5302
+ right: 8px;
5303
+ bottom: 8px;
5304
+ z-index: 6;
5305
+ width: min(420px, calc(100% - 16px));
5306
+ box-shadow: -10px 0 34px rgba(15, 23, 42, .16);
5307
+ }
5308
+ }
5309
+ .workspace-rail-folder-picker-item-text { display: grid; gap: 2px; text-align: left; min-width: 0; }
5310
+ .dm-orchestration-confirm__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #edf0f3; }
5311
+ .dm-orchestration-canvas--empty-state {
5312
+ background: #fff;
5313
+ background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px);
5314
+ background-size: 12px 12px;
5315
+ border: 1px solid #e5e7eb;
5316
+ border-radius: 5px;
5317
+ min-height: 220px;
5318
+ align-items: center;
5319
+ justify-content: center;
5320
+ }
5321
+ .dm-orchestration-canvas__empty-card {
5322
+ max-width: 360px;
5323
+ padding: 20px;
5324
+ text-align: center;
5325
+ background: #fff;
5326
+ border: 1px solid #edf0f3;
5327
+ border-radius: 5px;
5328
+ }
5329
+ .dm-orchestration-canvas__empty-card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 650; color: #111827; }
5330
+ .dm-orchestration-canvas__empty-card p { margin: 0 0 14px; font-size: 12px; line-height: 1.45; color: #6b7280; }
5331
+ .dm-orchestration-canvas__empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
5332
+ .dm-orchestration-canvas__paste { margin-top: 12px; text-align: left; font-size: 11px; color: #6b7280; }
5333
+ .dm-orchestration-canvas__paste textarea { width: 100%; margin-top: 6px; font-size: 11px; border: 1px solid #e5e7eb; border-radius: 5px; padding: 8px; }
5334
+ .dm-orchestration-canvas--blank-shell {
5335
+ background: #fff;
5336
+ background-image: radial-gradient(circle, #f3f4f6 1px, transparent 1px);
5337
+ background-size: 10px 10px;
5338
+ border: 1px solid #e5e7eb;
5339
+ border-radius: 5px;
5340
+ min-height: 180px;
5341
+ align-items: center;
5342
+ justify-content: center;
5343
+ gap: 10px;
5344
+ }
5345
+ .dm-orchestration-canvas__blank-hint { margin: 0; font-size: 12px; color: #6b7280; }
5346
+ .dm-orchestration-canvas__add-node { margin-top: 8px; align-self: center; }
5347
+ .dm-orchestration-trace { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
5348
+ .dm-orchestration-trace__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #edf0f3; flex-wrap: wrap; }
5349
+ .dm-orchestration-trace__head h2 { margin: 0; font-size: 15px; font-weight: 650; }
5350
+ .dm-orchestration-trace__head p { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
5351
+ .dm-orchestration-trace__body { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 12px; padding: 12px 16px 16px; overflow: hidden; flex: 1; min-height: 0; }
5352
+ @media (max-width: 720px) { .dm-orchestration-trace__body { grid-template-columns: 1fr; } }
5353
+ .dm-orchestration-trace__list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
5354
+ .dm-orchestration-trace__list-title { margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6b7280; }
5355
+ .dm-orchestration-trace__run { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; cursor: pointer; font-size: 11px; }
5356
+ .dm-orchestration-trace__run.is-active { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
5357
+ .dm-orchestration-trace__run span:first-child { font-weight: 650; color: #111827; word-break: break-all; }
5358
+ .dm-orchestration-trace__run span:last-child { color: #6b7280; }
5359
+ .dm-orchestration-trace__detail { overflow-y: auto; min-height: 0; display: grid; gap: 10px; align-content: start; }
5360
+ .dm-orchestration-trace__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; font-size: 11px; }
5361
+ .dm-orchestration-trace__meta dt { margin: 0; font-weight: 650; color: #6b7280; }
5362
+ .dm-orchestration-trace__meta dd { margin: 0; color: #111827; word-break: break-all; }
5363
+ .dm-orchestration-trace__error,
5364
+ .dm-orchestration-trace__output { display: grid; gap: 4px; }
5365
+ .dm-orchestration-trace__error span,
5366
+ .dm-orchestration-trace__output span { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6b7280; }
5367
+ .dm-orchestration-trace__error pre,
5368
+ .dm-orchestration-trace__output pre { margin: 0; padding: 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 5px; font-size: 10px; overflow: auto; max-height: 200px; white-space: pre-wrap; word-break: break-word; }
5369
+ .dm-field-link { gap: 6px; }
5370
+ .dm-field-link__btn { text-align: left; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 5px; background: #fafafa; font-size: 12px; color: #111827; cursor: pointer; width: 100%; }
5371
+ .dm-field-link__btn:hover:not(:disabled) { border-color: #2563eb; background: #fff; }
5372
+ .dm-field-link__btn:disabled { opacity: 0.5; cursor: default; }
5373
+ .dm-field-link__hint { font-size: 10px; color: #9ca3af; }
5374
+ .dm-field-link__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
5375
+ .dm-cell-link { display: block; width: 100%; text-align: left; padding: 0; border: none; background: transparent; font-size: inherit; color: #2563eb; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
5376
+ .dm-cell-link.dm-cell-empty { color: #9ca3af; text-decoration: none; cursor: default; }
5377
+ .dm-cell-link:not(:disabled):hover { color: #1d4ed8; }
5378
+ .dm-drawer-field { display: grid; gap: 4px; }
5379
+ .dm-drawer-field span { font-size: 11px; font-weight: 650; color: #475569; }
5380
+ .dm-drawer-field input,
5381
+ .dm-drawer-field textarea,
5382
+ .dm-drawer-field select { border: 1px solid #cbd5e1; border-radius: 5px; padding: 7px 9px; font-size: 12px; color: #111827; }
5383
+ .dm-drawer-field-inline { grid-template-columns: auto 1fr; align-items: center; }
5384
+ .dm-orch-canvas {
5385
+ display: flex;
5386
+ flex-direction: column;
5387
+ align-items: stretch;
5388
+ gap: 0;
5389
+ padding: 14px;
5390
+ background: #fff;
5391
+ border: 1px solid #e5e7eb;
5392
+ border-radius: 5px;
5393
+ box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
5394
+ }
5395
+ .dm-orch-canvas-empty { color: #6b7280; font-size: 12px; }
5396
+ .dm-orch-canvas-step { display: flex; flex-direction: column; align-items: center; }
5397
+ .dm-orch-canvas-arrow { width: 1px; height: 14px; background: #d1d5db; margin: 2px 0; }
5398
+ .dm-orch-node {
5399
+ width: 100%;
5400
+ display: grid;
5401
+ gap: 2px;
5402
+ text-align: left;
5403
+ padding: 10px 12px;
5404
+ border: 1px solid #e5e7eb;
5405
+ border-radius: 5px;
5406
+ background: #fff;
5407
+ box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
5408
+ cursor: pointer;
5409
+ transition: border-color 0.1s, box-shadow 0.1s;
5410
+ }
5411
+ .dm-orch-node:hover { border-color: #9ca3af; }
5412
+ .dm-orch-node.is-selected { border-color: #111827; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1); }
5413
+ .dm-orch-node-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
5414
+ .dm-orch-node-label { font-size: 13px; font-weight: 650; color: #111827; }
5415
+ .dm-orch-node-meta { font-size: 11px; color: #4b5563; font-family: ui-monospace, monospace; }
5416
+ .dm-orch-node-inspector { margin-top: 10px; padding: 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 5px; }
5417
+ .dm-orch-node-inspector-title { display: block; font-size: 11px; font-weight: 700; color: #374151; margin-bottom: 6px; }
5418
+ .dm-orch-node-inspector pre { margin: 0; font-size: 10px; color: #374151; overflow: auto; max-height: 120px; }
5419
+ .dm-orch-modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, 0.35); display: flex; align-items: center; justify-content: center; padding: 16px; }
5420
+ .dm-orch-modal { width: min(420px, 100%); background: #fff; border: 1px solid #e5e7eb; border-radius: 5px; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14); }
5421
+ .dm-orch-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #edf0f3; }
5422
+ .dm-orch-modal-head p { margin: 0 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6b7280; }
5423
+ .dm-orch-modal-head h2 { margin: 0; font-size: 16px; color: #111827; }
5424
+ .dm-orch-modal-body { padding: 14px 16px; display: grid; gap: 10px; font-size: 13px; color: #374151; line-height: 1.5; }
5425
+ .dm-orch-modal-list { margin: 0; padding-left: 18px; }
5426
+ .dm-orch-modal-summary { margin: 0; padding: 10px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 5px; font-size: 12px; }
5427
+ .dm-orch-modal-summary span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
5428
+ .dm-orch-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #edf0f3; }
5429
+ .dm-record-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #edf0f3; }
5430
+ .dm-record-drawer-actions { display: inline-flex; align-items: center; gap: 8px; }
5431
+ .dm-record-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 16px; border-top: 1px solid #edf0f3; background: #fff; }
5432
+ .dm-drawer-field-editor { display: grid; gap: 8px; }
5433
+ .dm-drawer-field-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 8px; align-items: center; }
5434
+ .dm-drawer-field-row input { width: 100%; height: 34px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 0 10px; }
5435
+ .dm-drawer-hidden-fields { display: grid; gap: 8px; margin-top: 10px; }
5436
+ .dm-drawer-hidden-fields > span { color: #64748b; font-size: 12px; font-weight: 600; }
5437
+ .dm-drawer-hidden-list { display: flex; flex-wrap: wrap; gap: 8px; }
5438
+ .dm-record-drawer-head p { margin: 0 0 3px; color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
5439
+ .dm-record-drawer-head h2 { margin: 0; color: #111827; font-size: 16px; font-weight: 650; }
5440
+ .dm-record-testbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid #edf0f3; background: #fbfdff; }
5441
+ .dm-record-testbar > span:last-child { min-width: 0; color: #64748b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
5442
+ .dm-record-fields { display: grid; gap: 8px; padding: 14px 16px 28px; overflow-y: auto; }
5443
+ .dm-record-field { display: grid; gap: 5px; }
5444
+ .dm-record-field span { color: #475569; font-size: 11px; font-weight: 650; }
5445
+ .dm-record-field input,
5446
+ .dm-record-field textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 7px 9px; box-sizing: border-box; }
5447
+ .dm-record-field textarea { resize: vertical; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; line-height: 1.45; }
5448
+ .dm-record-field input:focus,
5449
+ .dm-record-field textarea:focus { outline: none; border-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.12); }
5450
+ .dm-record-field input:disabled,
5451
+ .dm-record-field textarea:disabled { background: #f8fafc; color: #64748b; }
5452
+ .dm-record-field input { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #111827; font: inherit; font-size: 12px; padding: 7px 9px; box-sizing: border-box; }
5453
+ .dm-drawer-section { border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; overflow: visible; }
5454
+ .dm-drawer-section-toggle { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; background: #f8fafc; color: #334155; font: inherit; font-size: 12px; font-weight: 700; padding: 0 11px; text-align: left; cursor: pointer; }
5455
+ .dm-drawer-section-toggle svg { flex: 0 0 auto; color: #64748b; transition: transform .12s; }
5456
+ .dm-drawer-section.open .dm-drawer-section-toggle { border-bottom: 1px solid #e2e8f0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
5457
+ .dm-drawer-section.open .dm-drawer-section-toggle svg { transform: rotate(90deg); }
5458
+ .dm-drawer-section-body { display: grid; gap: 10px; padding: 11px; }
5459
+ .dm-sandbox-config { display: grid; gap: 8px; }
5460
+ .dm-radio-row { display: grid; gap: 8px; }
5461
+ .dm-radio-row label, .dm-check-row { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; column-gap: 8px; color: #1f2937; font-size: 12px; line-height: 1.35; }
5462
+ .dm-radio-row input[type="radio"], .dm-check-row input[type="checkbox"] { width: 14px; height: 14px; margin: 1px 0 0; padding: 0; box-shadow: none; accent-color: #111827; }
5463
+ .dm-radio-row span, .dm-check-row span { color: #1f2937; font-size: 12px; font-weight: 500; }
5464
+ .dm-check-row { cursor: pointer; }
5465
+ .dm-select { position: relative; width: 100%; min-width: 180px; font-size: 11px; }
5466
+ .dm-select-trigger { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(15,23,42,.05); font: inherit; font-size: 11px; padding: 6px 10px; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
5467
+ .dm-select-trigger:hover:not(:disabled) { border-color: #94a3b8; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
5468
+ .dm-select.open .dm-select-trigger { border-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,.12), 0 2px 8px rgba(15,23,42,.08); }
5469
+ .dm-select-trigger:disabled { background: #f8fafc; color: #64748b; cursor: not-allowed; }
5470
+ .dm-select-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111827; font-size: 11px; font-weight: 600; }
5471
+ .dm-select-trigger span.empty { color: #94a3b8; }
5472
+ .dm-select-trigger svg { flex: 0 0 auto; color: #64748b; transition: transform .12s; }
5473
+ .dm-select.open .dm-select-trigger svg { transform: rotate(180deg); }
5474
+ .dm-select-popover { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 120; display: grid; gap: 6px; min-width: 240px; padding: 8px; border: 1px solid #dbe2ea; border-radius: 8px; background: #fff; box-shadow: 0 18px 42px rgba(15,23,42,.18), 0 3px 10px rgba(15,23,42,.08); }
5475
+ .dm-select-search { display: flex; align-items: center; gap: 6px; height: 32px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; padding: 0 8px; color: #64748b; }
5476
+ .dm-select-search input { min-width: 0; flex: 1; border: 0; padding: 0; background: transparent; box-shadow: none; color: #111827; font: inherit; font-size: 11px; outline: none; }
5477
+ .dm-select-list { display: grid; gap: 2px; max-height: 232px; overflow-y: auto; padding: 2px 2px 2px 0; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
5478
+ .dm-select-list::-webkit-scrollbar { width: 8px; }
5479
+ .dm-select-list::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5e1; }
5480
+ .dm-select-option { display: grid; gap: 1px; width: 100%; border: 0; border-radius: 6px; background: transparent; color: #111827; font: inherit; font-size: 11px; line-height: 1.25; padding: 7px 9px; text-align: left; cursor: pointer; }
5481
+ .dm-select-option:hover { background: #f1f5f9; }
5482
+ .dm-select-option.selected { background: #eef2ff; color: #3730a3; font-weight: 650; }
5483
+ .dm-select-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: inherit; color: inherit; }
5484
+ .dm-select-option em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: 11px; font-style: normal; font-weight: 500; }
5485
+ .dm-select-empty { margin: 0; padding: 10px 8px; color: #94a3b8; font-size: 12px; }
5486
+ .dm-select-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid #f1f5f9; }
5487
+ .dm-select-pager button { height: 26px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 12px; padding: 0 8px; cursor: pointer; }
5488
+ .dm-select-pager button:disabled { opacity: .45; cursor: not-allowed; }
5489
+ .dm-select-pager span { color: #64748b; font-size: 12px; font-weight: 650; }
5490
+ .dm-db-grid td:has(.dm-select) { overflow: visible; padding-top: 5px; padding-bottom: 5px; }
5491
+ .dm-db-grid td .dm-select { min-width: 230px; }
5492
+ .dm-json-field { position: relative; }
5493
+ .dm-json-field > span { padding-right: 34px; }
5494
+ .dm-json-expand { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #64748b; box-shadow: 0 1px 2px rgba(15,23,42,.05); opacity: 0; cursor: pointer; transition: opacity .12s, border-color .12s, color .12s, box-shadow .12s; }
5495
+ .dm-json-field:hover .dm-json-expand, .dm-json-expand:focus-visible { opacity: 1; }
5496
+ .dm-json-expand:hover:not(:disabled) { border-color: #94a3b8; color: #111827; box-shadow: 0 3px 10px rgba(15,23,42,.1); }
5497
+ .dm-json-expand:disabled { cursor: not-allowed; opacity: 0; }
5498
+ .dm-json-modal-backdrop { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 24px; background: rgba(15,23,42,.38); }
5499
+ .dm-json-modal { width: min(920px, 96vw); max-height: min(760px, 90vh); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dbe2ea; border-radius: 8px; background: #fff; box-shadow: 0 28px 80px rgba(15,23,42,.28); }
5500
+ .dm-json-modal header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #edf0f3; background: #fbfdff; }
5501
+ .dm-json-modal header p { margin: 0 0 2px; color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
5502
+ .dm-json-modal header h2 { margin: 0; color: #111827; font-size: 15px; font-weight: 650; }
5503
+ .dm-json-modal pre { margin: 0; flex: 1; overflow: auto; padding: 16px; background: #0f172a; color: #e5edf8; font: 12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; word-break: break-word; scrollbar-width: thin; scrollbar-color: #64748b transparent; }
5504
+
5505
+ /* Relations tab */
5506
+ .dm-relations-tab { display: grid; gap: 16px; }
5507
+ .dm-relations-desc { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.55; }
5508
+ .dm-relation-card { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; }
5509
+ .dm-relation-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #f3f4f6; background: #fafafa; }
5510
+ .dm-relation-mode-label { font-size: 12px; color: #6b7280; font-weight: 600; }
5511
+ .dm-relation-props { display: grid; gap: 0; }
5512
+ .dm-relation-prop { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #f3f4f6; font-size: 12px; }
5513
+ .dm-relation-prop:last-child { border-bottom: 0; }
5514
+ .dm-relation-prop span { color: #9ca3af; font-weight: 600; }
5515
+ .dm-relation-prop code { font-size: 11px; color: #374151; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; word-break: break-all; }
5516
+ .dm-relation-flow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #f3f4f6; }
5517
+ .dm-relation-node { display: inline-flex; align-items: center; height: 26px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; color: #374151; font-size: 12px; font-weight: 600; padding: 0 10px; }
5518
+ .dm-relation-node.source { background: #f0f0f0; border-color: #d5d5d5; color: #333; }
5519
+ .dm-relation-arrow { color: #9ca3af; }
5520
+ .dm-relation-hint { margin: 0; padding: 10px 14px; font-size: 12px; color: #6b7280; border-top: 1px solid #f3f4f6; line-height: 1.5; }
5521
+ .dm-usage-section { display: grid; gap: 8px; }
5522
+ .dm-usage-label { margin: 0; font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
5523
+ .dm-usage-rows { display: grid; gap: 5px; }
5524
+ .dm-usage-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 7px; background: #fafafa; font-size: 12px; }
5525
+ .dm-usage-row strong { color: #111827; font-weight: 500; }
5526
+ .dm-usage-row span { color: #9ca3af; }
5527
+ .dm-usage-row code { font-size: 11px; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; color: #6b7280; }
5528
+
5529
+ /* Buttons v2 */
5530
+ .dm-btn-primary { display: inline-flex; align-items: center; gap: 5px; height: 32px; border: 0; border-radius: 6px; background: #111; color: #fff; font: inherit; font-size: 13px; padding: 0 13px; cursor: pointer; font-weight: 500; transition: background .12s; }
5531
+ .dm-btn-primary:hover { background: #333; }
5532
+ .dm-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
5533
+ .dm-btn-outline { display: inline-flex; align-items: center; gap: 5px; height: 32px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fff; color: #333; font: inherit; font-size: 13px; padding: 0 13px; cursor: pointer; transition: background .1s, border-color .1s; }
5534
+ .dm-btn-outline:hover { background: #f5f5f5; border-color: #bbb; }
5535
+
5536
+ /* Slide-out sidebar */
5537
+ .dm-sidebar-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(17,24,39,.2); }
5538
+ .dm-add-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; background: #fff; border-left: 1px solid #e5e7eb; box-shadow: -6px 0 32px rgba(15,23,42,.12); transform: translateX(100%); transition: transform .22s cubic-bezier(.22,1,.36,1); z-index: 81; display: flex; flex-direction: column; }
5539
+ .dm-add-sidebar.open { transform: translateX(0); }
5540
+ .dm-add-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; }
5541
+ .dm-add-sidebar-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: #111827; }
5542
+ .dm-sidebar-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280; cursor: pointer; }
5543
+ .dm-sidebar-close:hover { background: #f9fafb; color: #374151; }
5544
+ .dm-add-sidebar-body { display: grid; gap: 14px; padding: 20px; flex: 1; align-content: start; }
5545
+ .dm-add-sidebar-hint { margin: 0; font-size: 13px; color: #6b7280; line-height: 1.5; }
5546
+ .dm-field-label-v2 { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: #374151; }
5547
+ .dm-input-v2 { width: 100%; height: 34px; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; color: #111827; font: inherit; font-size: 13px; padding: 0 10px; box-sizing: border-box; }
5548
+ .dm-input-v2:focus { outline: none; border-color: #666; box-shadow: 0 0 0 3px rgba(0,0,0,.07); }
5549
+ .dm-add-sidebar-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
5550
+
5551
+ /* Object type badges */
5552
+ .dm-badge-registry { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
5553
+ .dm-badge-people { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
5554
+ .dm-badge-tasks { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
5555
+ .dm-badge-manual { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
5556
+ .dm-badge-belongs { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
5557
+ .dm-badge-hasmany { background: #f5f5f5; color: #444; border-color: #e0e0e0; }
5558
+
5559
+ /* Tab count pill */
5560
+ .dm-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; border-radius: 999px; background: #e5e7eb; color: #6b7280; font-size: 10px; font-weight: 700; padding: 0 5px; margin-left: 5px; }
5561
+ .dm-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 99px; background: #ebebeb; color: #666; font-size: 10px; font-weight: 600; padding: 0 4px; margin-left: 4px; }
5562
+ .dm-tab-v2.active .dm-tab-count { background: #222; color: #fff; }
5563
+
5564
+ /* Sidebar step: type-picker */
5565
+ .dm-type-picker { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
5566
+ .dm-type-picker-hint { margin: 0; padding: 14px 20px 8px; font-size: 13px; color: #6b7280; line-height: 1.5; }
5567
+ .dm-type-picker-list { display: grid; gap: 2px; padding: 4px 12px 16px; }
5568
+ .dm-type-card { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #e8e8e8; border-radius: 7px; background: #fff; cursor: pointer; text-align: left; font: inherit; transition: background .1s, border-color .1s; }
5569
+ .dm-type-card:hover { background: #fafafa; border-color: #ccc; }
4452
5570
  .dm-type-card-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 7px; background: #f2f2f2; color: #333; flex-shrink: 0; }
4453
5571
  .dm-type-card-body { flex: 1; min-width: 0; }
4454
5572
  .dm-type-card-body strong { display: block; font-size: 13px; color: #111; font-weight: 600; margin-bottom: 2px; }
4455
5573
  .dm-type-card-body span { font-size: 12px; color: #888; line-height: 1.4; }
4456
5574
  .dm-type-card-arrow { color: #bbb; flex-shrink: 0; }
4457
5575
 
4458
- /* Sidebar step: name + icon */
4459
- .dm-add-sidebar-head-left { display: flex; align-items: center; gap: 8px; }
4460
- .dm-sidebar-back { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280; cursor: pointer; font-size: 14px; }
4461
- .dm-sidebar-back:hover { background: #f9fafb; }
4462
- .dm-add-type-preview { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 4px; }
4463
- .dm-add-type-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: #f3f4f6; color: #374151; flex-shrink: 0; }
4464
- .dm-add-type-label { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: #111827; }
5576
+ /* Sidebar step: name + icon */
5577
+ .dm-add-sidebar-head-left { display: flex; align-items: center; gap: 8px; }
5578
+ .dm-sidebar-back { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280; cursor: pointer; font-size: 14px; }
5579
+ .dm-sidebar-back:hover { background: #f9fafb; }
5580
+ .dm-add-type-preview { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 4px; }
5581
+ .dm-add-type-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: #f3f4f6; color: #374151; flex-shrink: 0; }
5582
+ .dm-add-type-label { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: #111827; }
5583
+
5584
+ /* Icon picker grid */
5585
+ .dm-icon-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 4px; }
5586
+ .dm-icon-picker-btn { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; color: #555; cursor: pointer; transition: background .1s, border-color .1s; }
5587
+ .dm-icon-picker-btn:hover { background: #f5f5f5; border-color: #aaa; }
5588
+ .dm-icon-picker-btn.active { background: #111; border-color: #111; color: #fff; }
5589
+
5590
+ /* Preset fields + relations preview in sidebar */
5591
+ .dm-preset-fields-preview,.dm-preset-relations-preview { display: grid; gap: 8px; padding: 10px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 7px; }
5592
+ .dm-preset-fields-list { display: flex; flex-wrap: wrap; gap: 5px; }
5593
+ .dm-preset-field-chip { display: inline-flex; align-items: center; height: 22px; border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; color: #374151; font-size: 11px; font-weight: 500; padding: 0 8px; }
5594
+ .dm-preset-relation-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4b5563; }
5595
+ .dm-preset-rel-target { font-weight: 600; color: #333; }
5596
+
5597
+ /* Relation card v2 (typed) */
5598
+ .dm-relation-card-meta { display: flex; align-items: center; gap: 8px; flex: 1; }
5599
+ .dm-relation-name { font-size: 13px; font-weight: 600; color: #111827; }
5600
+ .dm-relation-target-type { font-size: 12px; color: #6b7280; }
5601
+ .dm-relation-desc-text { margin: 0; padding: 8px 14px 0; font-size: 12px; color: #6b7280; line-height: 1.5; }
5602
+ .dm-relation-props { display: grid; }
5603
+ .dm-relation-prop { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px 14px; border-top: 1px solid #f3f4f6; font-size: 12px; }
5604
+ .dm-relation-prop span { color: #9ca3af; font-weight: 600; }
5605
+ .dm-relation-prop code { font-size: 11px; color: #374151; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; word-break: break-all; }
5606
+
5607
+ /* Resolver chain block */
5608
+ .dm-resolver-chain { margin: 0; border-top: 1px solid #f3f4f6; padding: 12px 14px; display: grid; gap: 8px; }
5609
+ .dm-resolver-chain-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #374151; }
5610
+ .dm-resolver-chain-desc { margin: 0; font-size: 12px; color: #6b7280; line-height: 1.55; }
5611
+ .dm-resolver-chain-desc code { background: #f3f4f6; border-radius: 3px; padding: 1px 5px; font-size: 11px; color: #374151; }
5612
+ .dm-resolver-targets { display: grid; gap: 4px; }
5613
+ .dm-resolver-target-row { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fafafa; font-size: 12px; color: #374151; }
5614
+ .dm-resolver-target-row strong { flex: 1; font-weight: 500; }
5615
+ .dm-resolver-no-targets { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: 12px; color: #92400e; }
5616
+ .dm-detail-icon { color: #6b7280; }
5617
+
5618
+
5619
+ /* ─── Workspace Helper Sidecar ─────────────────────────────────────────────── */
5620
+ .dm-sidecar-backdrop { position: fixed; inset: 0; z-index: 79; }
5621
+ .dm-helper-sidecar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; background: #fff; border-left: 1px solid #e5e7eb; box-shadow: -8px 0 40px rgba(15,23,42,.13); display: flex; flex-direction: column; min-width: 320px; max-width: 80vw; }
5622
+ .dm-sidecar-drag-handle { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 2; background: transparent; }
5623
+ .dm-sidecar-drag-handle:hover { background: rgba(63,104,255,.12); }
5624
+ .dm-sidecar-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 18px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
5625
+ .dm-sidecar-header-left { display: flex; align-items: center; gap: 8px; }
5626
+ .dm-sidecar-icon { color: #3f68ff; }
5627
+ .dm-sidecar-title { font-size: 14px; font-weight: 600; color: #111827; }
5628
+ /* Header-right action cluster — single source for gear (Setup toggle) and
5629
+ close (X), replaces the old full-width Assistant/Setup tab strip. */
5630
+ .dm-sidecar-header-right {
5631
+ display: inline-flex;
5632
+ align-items: center;
5633
+ gap: 2px;
5634
+ }
5635
+ .dm-sidecar-icon-btn {
5636
+ display: inline-flex;
5637
+ align-items: center;
5638
+ justify-content: center;
5639
+ width: 28px;
5640
+ height: 28px;
5641
+ border: 1px solid #e5e7eb;
5642
+ border-radius: 6px;
5643
+ background: #ffffff;
5644
+ color: #6b7280;
5645
+ cursor: pointer;
5646
+ box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
5647
+ transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
5648
+ }
5649
+ .dm-sidecar-icon-btn:hover {
5650
+ background: #fafafa;
5651
+ border-color: #d1d5db;
5652
+ color: #111827;
5653
+ box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
5654
+ }
5655
+ /* No persistent active state — the icon itself swaps to ArrowLeft when
5656
+ the Setup surface is open, which is the user's cue. */
5657
+ .dm-sidecar-icon-btn:focus-visible {
5658
+ outline: 2px solid #bfdbfe;
5659
+ outline-offset: 1px;
5660
+ }
5661
+ /* Legacy `.dm-sidecar-tabs` / `.dm-sidecar-tab` / `.dm-sidecar-close`
5662
+ rules retired — the header cluster above owns both affordances now. */
5663
+ .dm-sidecar-body { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start; }
5664
+
5665
+ /* Streaming surface */
5666
+ .dm-helper-stream { padding: 12px 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; color: #374151; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
5667
+ @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
5668
+ .dm-stream-cursor { display: inline-block; width: 2px; height: 1em; background: #3f68ff; vertical-align: text-bottom; margin-left: 1px; animation: blink 1s step-end infinite; }
5669
+
5670
+ /* Proposals */
5671
+ .dm-helper-result { display: grid; gap: 10px; }
5672
+ .dm-helper-summary { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 13px; color: #1e40af; }
5673
+ .dm-helper-warnings { display: grid; gap: 4px; }
5674
+ .dm-helper-warning { display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: 12px; color: #92400e; }
5675
+ .dm-helper-error { display: flex; align-items: flex-start; gap: 6px; padding: 9px 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 7px; font-size: 13px; color: #dc2626; margin-top: 4px; }
5676
+ .dm-helper-proposals-header { display: flex; align-items: center; justify-content: space-between; }
5677
+ .dm-helper-proposals { display: grid; gap: 6px; }
5678
+ .dm-helper-proposal { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .1s, background .1s; }
5679
+ .dm-helper-proposal:hover { background: #f9fafb; border-color: #d1d5db; }
5680
+ .dm-helper-proposal.accepted { border-color: #3f68ff; background: #eff6ff; }
5681
+ .dm-helper-proposal input[type=checkbox] { margin-top: 2px; flex-shrink: 0; accent-color: #3f68ff; }
5682
+ .dm-helper-proposal-body { display: grid; gap: 2px; }
5683
+ .dm-helper-proposal-type { font-size: 12px; font-weight: 600; color: #111827; font-family: monospace; }
5684
+ .dm-helper-proposal-field { font-size: 11px; color: #6b7280; }
5685
+ .dm-helper-proposal-rationale { margin: 0; font-size: 12px; color: #4b5563; line-height: 1.4; }
5686
+ .dm-helper-apply-result { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #d1fae5; background: #ecfdf5; border-radius: 8px; font-size: 13px; color: #065f46; }
5687
+ .dm-helper-apply-result.is-error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
5688
+ .dm-helper-empty-hint { padding: 12px 14px; border: 1px dashed #e5e7eb; border-radius: 8px; background: #fafafa; color: #6b7280; font-size: 12px; line-height: 1.5; }
5689
+ .dm-helper-empty-hint p { margin: 0; }
5690
+ .dm-helper-proposal-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
5691
+ .dm-helper-proposal-payload { margin: 0; font-size: 11px; color: #374151; background: #f3f4f6; border-radius: 5px; padding: 3px 7px; display: inline-block; font-family: monospace; line-height: 1.4; word-break: break-all; }
5692
+ .dm-helper-proposal-confidence { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 99px; background: #eff6ff; border: 1px solid #bfdbfe; font-size: 11px; font-weight: 600; color: #1e40af; }
5693
+ .dm-helper-skipped { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #fde68a; background: #fffbeb; border-radius: 8px; }
5694
+ .dm-helper-skipped-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: #92400e; }
5695
+ .dm-helper-skipped-reason { color: #b45309; }
5696
+ .dm-thread-open-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: #3f68ff; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
5697
+ .dm-thread-open-link:hover { color: #1e40af; }
5698
+ .dm-thread-open-link:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 2px; border-radius: 3px; }
5699
+
5700
+ /* Helper sidecar — intent pills (4 primary + More dropdown). Visible only
5701
+ on a brand-new thread, before the user has sent any messages. */
5702
+ .dm-helper-intent-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
5703
+ .dm-helper-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid #e5e7eb; background: #fff; color: #374151; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .1s, border-color .1s, color .1s; }
5704
+ .dm-helper-pill:hover:not(:disabled) { background: #f9fafb; border-color: #d1d5db; }
5705
+ .dm-helper-pill.active { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
5706
+ .dm-helper-pill:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
5707
+ .dm-helper-pill:disabled { opacity: .55; cursor: not-allowed; }
5708
+ .dm-helper-pill-more-wrap { position: relative; display: inline-flex; }
5709
+ .dm-helper-pill-more { padding-right: 6px; }
5710
+ .dm-helper-pill-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); padding: 4px; display: flex; flex-direction: column; gap: 1px; z-index: 90; }
5711
+ .dm-helper-pill-menu-item { display: flex; align-items: center; height: 28px; padding: 0 10px; font-size: 12px; color: #374151; background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; }
5712
+ .dm-helper-pill-menu-item:hover { background: #f9fafb; color: #111827; }
5713
+ .dm-helper-pill-menu-item.active { background: #eff6ff; color: #1e40af; }
5714
+
5715
+ /* Active-mode indicator — shown after the thread has activated, replaces
5716
+ the pill row. Compact, non-cluttering. */
5717
+ .dm-helper-mode-row { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: #f3f4f6; border: 1px solid #e5e7eb; align-self: flex-start; }
5718
+ .dm-helper-mode-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
5719
+ .dm-helper-mode-value { font-size: 12px; font-weight: 600; color: #111827; }
5720
+
5721
+ /* Conversation list inside the sidecar. User turns right-aligned, assistant
5722
+ turns left-aligned. Pending assistant turn uses the existing blink cursor. */
5723
+ /* Multi-turn conversation — ChatGPT-grade simple. User bubble on the
5724
+ right (grey rounded chip, fits-content); assistant bubble on the left
5725
+ as a transparent full-width markdown block. Subtle horizontal divider
5726
+ between consecutive turns keeps the rhythm. */
5727
+ .dm-helper-messages { display: flex; flex-direction: column; gap: 0; }
5728
+ .dm-helper-turn {
5729
+ display: flex;
5730
+ flex-direction: column;
5731
+ padding: 12px 2px;
5732
+ border-bottom: 1px solid #f3f4f6;
5733
+ }
5734
+ .dm-helper-turn:last-child { border-bottom: 0; }
5735
+ .dm-helper-turn.role-user { align-items: flex-end; }
5736
+ .dm-helper-turn.role-assistant { align-items: stretch; }
5737
+ .dm-helper-turn.role-system { align-items: stretch; }
5738
+
5739
+ .dm-helper-bubble-user {
5740
+ max-width: 88%;
5741
+ padding: 7px 12px;
5742
+ border-radius: 14px;
5743
+ background: #f1f1f1;
5744
+ color: #2c2c2c;
5745
+ font-size: 13px;
5746
+ line-height: 1.5;
5747
+ white-space: pre-wrap;
5748
+ word-break: break-word;
5749
+ }
5750
+
5751
+ .dm-helper-bubble-assistant {
5752
+ width: 100%;
5753
+ color: #1f2937;
5754
+ font-size: 13.5px;
5755
+ line-height: 1.55;
5756
+ word-break: break-word;
5757
+ }
5758
+ .dm-helper-bubble-assistant > *:first-child { margin-top: 0; }
5759
+ .dm-helper-bubble-assistant > *:last-child { margin-bottom: 0; }
5760
+ .dm-helper-bubble-assistant p { margin: 0 0 8px; }
5761
+ .dm-helper-bubble-assistant h1,
5762
+ .dm-helper-bubble-assistant h2,
5763
+ .dm-helper-bubble-assistant h3,
5764
+ .dm-helper-bubble-assistant h4 {
5765
+ margin: 14px 0 6px;
5766
+ font-weight: 650;
5767
+ color: #111827;
5768
+ line-height: 1.3;
5769
+ }
5770
+ .dm-helper-bubble-assistant h1 { font-size: 16px; }
5771
+ .dm-helper-bubble-assistant h2 { font-size: 15px; }
5772
+ .dm-helper-bubble-assistant h3 { font-size: 14px; }
5773
+ .dm-helper-bubble-assistant h4 { font-size: 13px; }
5774
+ .dm-helper-bubble-assistant ul,
5775
+ .dm-helper-bubble-assistant ol { margin: 4px 0 8px; padding-left: 20px; }
5776
+ .dm-helper-bubble-assistant li { margin: 2px 0; }
5777
+ .dm-helper-bubble-assistant strong { font-weight: 650; color: #111827; }
5778
+ .dm-helper-bubble-assistant em { font-style: italic; }
5779
+ .dm-helper-bubble-assistant a { color: #1e40af; text-decoration: underline; text-underline-offset: 2px; }
5780
+ .dm-helper-bubble-assistant a:hover { color: #1e3a8a; }
5781
+ .dm-helper-bubble-assistant code {
5782
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
5783
+ font-size: 12.5px;
5784
+ padding: 1px 5px;
5785
+ border-radius: 4px;
5786
+ background: #f3f4f6;
5787
+ color: #111827;
5788
+ }
5789
+ .dm-helper-bubble-assistant pre {
5790
+ margin: 6px 0 10px;
5791
+ padding: 10px 12px;
5792
+ background: #0b1220;
5793
+ color: #e5e7eb;
5794
+ border-radius: 8px;
5795
+ overflow-x: auto;
5796
+ font-size: 12.5px;
5797
+ line-height: 1.55;
5798
+ }
5799
+ .dm-helper-bubble-assistant pre code {
5800
+ background: transparent;
5801
+ color: inherit;
5802
+ padding: 0;
5803
+ }
5804
+ .dm-helper-bubble-assistant blockquote {
5805
+ margin: 6px 0 10px;
5806
+ padding: 4px 12px;
5807
+ border-left: 3px solid #d1d5db;
5808
+ color: #4b5563;
5809
+ font-style: normal;
5810
+ }
5811
+ .dm-helper-bubble-assistant hr {
5812
+ margin: 10px 0;
5813
+ border: 0;
5814
+ border-top: 1px solid #e5e7eb;
5815
+ }
5816
+ .dm-helper-bubble-assistant table {
5817
+ border-collapse: collapse;
5818
+ width: 100%;
5819
+ margin: 6px 0 10px;
5820
+ font-size: 12.5px;
5821
+ }
5822
+ .dm-helper-bubble-assistant th,
5823
+ .dm-helper-bubble-assistant td {
5824
+ padding: 6px 8px;
5825
+ border: 1px solid #e5e7eb;
5826
+ text-align: left;
5827
+ vertical-align: top;
5828
+ }
5829
+ .dm-helper-bubble-assistant th { background: #f9fafb; font-weight: 600; color: #111827; }
5830
+
5831
+ .dm-helper-bubble-pending { color: #6b7280; font-style: normal; min-height: 24px; display: inline-flex; align-items: center; }
5832
+
5833
+ /* Three-dot typing indicator used while the assistant is streaming. */
5834
+ /* Tool-call card — one per applied proposal. Thin agnostic component:
5835
+ icon + dynamic title + chevron-accordion JSON + Open navigation.
5836
+ Closes the no-code success loop in the user's mental model. */
5837
+ .dm-helper-toolcall-stack {
5838
+ display: flex;
5839
+ flex-direction: column;
5840
+ gap: 6px;
5841
+ margin-top: 6px;
5842
+ }
5843
+ .dm-helper-toolcall {
5844
+ width: 100%;
5845
+ border: 1px solid #e5e7eb;
5846
+ border-radius: 5px;
5847
+ background: #ffffff;
5848
+ box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
5849
+ overflow: hidden;
5850
+ }
5851
+ .dm-helper-toolcall-row {
5852
+ width: 100%;
5853
+ min-height: 36px;
5854
+ display: grid;
5855
+ grid-template-columns: 20px 1fr auto;
5856
+ align-items: center;
5857
+ gap: 8px;
5858
+ padding: 8px 12px;
5859
+ background: transparent;
5860
+ border: 0;
5861
+ cursor: pointer;
5862
+ font: inherit;
5863
+ text-align: left;
5864
+ color: #111827;
5865
+ transition: background .12s ease;
5866
+ }
5867
+ .dm-helper-toolcall-row:hover { background: #fafafa; }
5868
+ .dm-helper-toolcall-icon { color: #9ca3af; flex-shrink: 0; }
5869
+ .dm-helper-toolcall-title {
5870
+ font-size: 13px;
5871
+ font-weight: 500;
5872
+ color: #2c2c2c;
5873
+ white-space: nowrap;
5874
+ overflow: hidden;
5875
+ text-overflow: ellipsis;
5876
+ }
5877
+ .dm-helper-toolcall-chevron {
5878
+ color: #9ca3af;
5879
+ transition: transform .15s ease;
5880
+ flex-shrink: 0;
5881
+ }
5882
+ .dm-helper-toolcall-chevron.is-open { transform: rotate(180deg); }
5883
+ .dm-helper-toolcall-body {
5884
+ background: #f9fafb;
5885
+ border-top: 1px solid #e5e7eb;
5886
+ padding: 8px 10px;
5887
+ box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
5888
+ }
5889
+ .dm-helper-toolcall-content {
5890
+ margin: 0 0 8px;
5891
+ padding: 6px 8px;
5892
+ background: #ffffff;
5893
+ border: 1px solid #e5e7eb;
5894
+ border-radius: 4px;
5895
+ font-size: 12px;
5896
+ line-height: 1.5;
5897
+ color: #4b5563;
5898
+ white-space: pre-wrap;
5899
+ word-break: break-word;
5900
+ max-height: 140px;
5901
+ overflow-y: auto;
5902
+ }
5903
+ .dm-helper-toolcall-json {
5904
+ margin: 0;
5905
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
5906
+ font-size: 11.5px;
5907
+ line-height: 1.5;
5908
+ color: #374151;
5909
+ white-space: pre-wrap;
5910
+ word-break: break-word;
5911
+ max-height: 240px;
5912
+ overflow-y: auto;
5913
+ }
5914
+ .dm-helper-toolcall-open {
5915
+ display: inline-flex;
5916
+ align-items: center;
5917
+ gap: 4px;
5918
+ height: 24px;
5919
+ padding: 0 9px;
5920
+ margin: 6px 10px 8px;
5921
+ border: 1px solid #d1d5db;
5922
+ border-radius: 5px;
5923
+ background: #ffffff;
5924
+ color: #2c2c2c;
5925
+ font: inherit;
5926
+ font-size: 11.5px;
5927
+ font-weight: 500;
5928
+ cursor: pointer;
5929
+ transition: background .12s ease, border-color .12s ease;
5930
+ }
5931
+ .dm-helper-toolcall-open:hover {
5932
+ background: #f5f5f5;
5933
+ border-color: #9ca3af;
5934
+ }
5935
+
5936
+ .dm-helper-typing {
5937
+ display: inline-flex;
5938
+ align-items: center;
5939
+ gap: 4px;
5940
+ padding: 2px 0;
5941
+ }
5942
+ .dm-helper-typing-dot {
5943
+ width: 6px;
5944
+ height: 6px;
5945
+ border-radius: 50%;
5946
+ background: #9ca3af;
5947
+ animation: dm-helper-typing-bounce 1.1s infinite ease-in-out both;
5948
+ }
5949
+ .dm-helper-typing-dot:nth-child(1) { animation-delay: -0.32s; }
5950
+ .dm-helper-typing-dot:nth-child(2) { animation-delay: -0.16s; }
5951
+ .dm-helper-typing-dot:nth-child(3) { animation-delay: 0s; }
5952
+ @keyframes dm-helper-typing-bounce {
5953
+ 0%, 80%, 100% { transform: scale(0.72); opacity: 0.55; }
5954
+ 40% { transform: scale(1); opacity: 1; }
5955
+ }
5956
+
5957
+ .dm-helper-bubble-system {
5958
+ display: inline-block;
5959
+ padding: 4px 10px;
5960
+ border-radius: 99px;
5961
+ background: #f3f4f6;
5962
+ color: #6b7280;
5963
+ border: 1px solid #e5e7eb;
5964
+ font-size: 11.5px;
5965
+ font-weight: 500;
5966
+ }
4465
5967
 
4466
- /* Icon picker grid */
4467
- .dm-icon-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 4px; }
4468
- .dm-icon-picker-btn { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; color: #555; cursor: pointer; transition: background .1s, border-color .1s; }
4469
- .dm-icon-picker-btn:hover { background: #f5f5f5; border-color: #aaa; }
4470
- .dm-icon-picker-btn.active { background: #111; border-color: #111; color: #fff; }
5968
+ /* ─── HelperSidecar Setup tab (state-driven, editable, ChatGPT-clean) ── */
5969
+ .dm-helper-setup-body {
5970
+ display: flex;
5971
+ flex-direction: column;
5972
+ gap: 14px;
5973
+ padding: 16px;
5974
+ overflow-y: auto;
5975
+ }
5976
+ .dm-helper-setup-intro {
5977
+ margin: 0;
5978
+ font-size: 12.5px;
5979
+ color: #6b7280;
5980
+ line-height: 1.5;
5981
+ }
4471
5982
 
4472
- /* Preset fields + relations preview in sidebar */
4473
- .dm-preset-fields-preview,.dm-preset-relations-preview { display: grid; gap: 8px; padding: 10px 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 7px; }
4474
- .dm-preset-fields-list { display: flex; flex-wrap: wrap; gap: 5px; }
4475
- .dm-preset-field-chip { display: inline-flex; align-items: center; height: 22px; border: 1px solid #e5e7eb; border-radius: 5px; background: #fff; color: #374151; font-size: 11px; font-weight: 500; padding: 0 8px; }
4476
- .dm-preset-relation-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4b5563; }
4477
- .dm-preset-rel-target { font-weight: 600; color: #333; }
5983
+ .dm-helper-setup-status {
5984
+ display: flex;
5985
+ flex-direction: column;
5986
+ gap: 4px;
5987
+ padding: 12px 14px;
5988
+ border: 1px solid #e5e7eb;
5989
+ border-radius: 10px;
5990
+ background: #fafafa;
5991
+ transition: background .12s ease, border-color .12s ease;
5992
+ }
5993
+ .dm-helper-setup-status.state-connected { background: #f0fdf4; border-color: #bbf7d0; }
5994
+ .dm-helper-setup-status.state-unreachable { background: #fffbeb; border-color: #fde68a; }
5995
+ .dm-helper-setup-status.state-unconfigured { background: #f5f3ff; border-color: #ddd6fe; }
5996
+ .dm-helper-setup-status.state-checking { background: #f9fafb; border-color: #e5e7eb; }
5997
+
5998
+ .dm-helper-setup-status-row {
5999
+ display: flex;
6000
+ align-items: center;
6001
+ gap: 8px;
6002
+ }
6003
+ .dm-helper-setup-status-label {
6004
+ flex: 1;
6005
+ font-size: 13px;
6006
+ font-weight: 600;
6007
+ color: #111827;
6008
+ }
6009
+ .dm-helper-setup-status-meta {
6010
+ font-size: 12px;
6011
+ color: #4b5563;
6012
+ line-height: 1.5;
6013
+ padding-left: 16px;
6014
+ }
6015
+ .dm-helper-setup-status.state-connected .dm-helper-setup-status-meta {
6016
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
6017
+ font-size: 11.5px;
6018
+ color: #15803d;
6019
+ }
6020
+
6021
+ .dm-helper-setup-recheck {
6022
+ height: 26px;
6023
+ padding: 0 10px;
6024
+ border: 1px solid #d1d5db;
6025
+ border-radius: 6px;
6026
+ background: #fff;
6027
+ color: #2c2c2c;
6028
+ font: inherit;
6029
+ font-size: 12px;
6030
+ cursor: pointer;
6031
+ transition: background .12s ease, border-color .12s ease;
6032
+ }
6033
+ .dm-helper-setup-recheck:hover:not(:disabled) {
6034
+ background: #f9fafb;
6035
+ border-color: #9ca3af;
6036
+ }
6037
+ .dm-helper-setup-recheck:disabled { opacity: .55; cursor: not-allowed; }
6038
+
6039
+ .dm-helper-setup-section {
6040
+ display: flex;
6041
+ flex-direction: column;
6042
+ gap: 6px;
6043
+ }
6044
+ .dm-helper-setup-label {
6045
+ margin: 0;
6046
+ font-size: 12px;
6047
+ font-weight: 600;
6048
+ color: #374151;
6049
+ }
6050
+ .dm-helper-setup-input,
6051
+ .dm-helper-setup-select {
6052
+ width: 100%;
6053
+ height: 34px;
6054
+ padding: 0 10px;
6055
+ border: 1px solid #d1d5db;
6056
+ border-radius: 7px;
6057
+ background: #ffffff;
6058
+ color: #111827;
6059
+ font: inherit;
6060
+ font-size: 13px;
6061
+ box-sizing: border-box;
6062
+ transition: border-color .12s ease, box-shadow .12s ease;
6063
+ }
6064
+ .dm-helper-setup-input::placeholder { color: #9ca3af; }
6065
+ .dm-helper-setup-input:focus,
6066
+ .dm-helper-setup-select:focus {
6067
+ outline: none;
6068
+ border-color: #6b7280;
6069
+ box-shadow: 0 0 0 3px rgba(0,0,0,.06);
6070
+ }
6071
+ .dm-helper-setup-input:disabled,
6072
+ .dm-helper-setup-select:disabled {
6073
+ background: #f9fafb;
6074
+ color: #6b7280;
6075
+ cursor: not-allowed;
6076
+ }
6077
+ .dm-helper-setup-select {
6078
+ appearance: none;
6079
+ -webkit-appearance: none;
6080
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
6081
+ background-repeat: no-repeat;
6082
+ background-position: right 10px center;
6083
+ padding-right: 32px;
6084
+ }
6085
+
6086
+ .dm-helper-setup-quick-row {
6087
+ display: flex;
6088
+ flex-wrap: wrap;
6089
+ align-items: center;
6090
+ gap: 4px;
6091
+ margin-top: 2px;
6092
+ }
6093
+ .dm-helper-setup-quick-label {
6094
+ font-size: 11px;
6095
+ color: #6b7280;
6096
+ margin-right: 4px;
6097
+ }
6098
+ .dm-helper-setup-quick-pill {
6099
+ height: 22px;
6100
+ padding: 0 8px;
6101
+ border: 1px solid #e5e7eb;
6102
+ border-radius: 99px;
6103
+ background: #fff;
6104
+ color: #4b5563;
6105
+ font: inherit;
6106
+ font-size: 11px;
6107
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
6108
+ cursor: pointer;
6109
+ transition: background .12s ease, border-color .12s ease, color .12s ease;
6110
+ }
6111
+ .dm-helper-setup-quick-pill:hover {
6112
+ background: #f9fafb;
6113
+ border-color: #d1d5db;
6114
+ color: #111827;
6115
+ }
6116
+ .dm-helper-setup-quick-pill.active {
6117
+ background: #eef2ff;
6118
+ border-color: #c7d2fe;
6119
+ color: #1e3a8a;
6120
+ }
6121
+
6122
+ .dm-helper-setup-helper-text {
6123
+ font-size: 11.5px;
6124
+ color: #6b7280;
6125
+ }
6126
+ .dm-helper-setup-helper-text strong { color: #111827; font-weight: 600; }
6127
+
6128
+ .dm-helper-setup-actions {
6129
+ display: flex;
6130
+ align-items: center;
6131
+ gap: 10px;
6132
+ flex-wrap: wrap;
6133
+ padding-top: 2px;
6134
+ }
6135
+ .dm-helper-setup-save {
6136
+ height: 34px;
6137
+ padding: 0 14px;
6138
+ border: 0;
6139
+ border-radius: 7px;
6140
+ background: #111827;
6141
+ color: #fff;
6142
+ font: inherit;
6143
+ font-size: 13px;
6144
+ font-weight: 500;
6145
+ cursor: pointer;
6146
+ transition: background .12s ease, opacity .12s ease;
6147
+ }
6148
+ .dm-helper-setup-save:hover:not(:disabled) { background: #000; }
6149
+ .dm-helper-setup-save:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 2px; }
6150
+ .dm-helper-setup-save:disabled {
6151
+ background: #d1d5db;
6152
+ color: #fff;
6153
+ cursor: not-allowed;
6154
+ }
6155
+ .dm-helper-setup-save-ok {
6156
+ font-size: 12px;
6157
+ color: #15803d;
6158
+ font-weight: 500;
6159
+ }
6160
+ .dm-helper-setup-save-error {
6161
+ font-size: 12px;
6162
+ color: #b91c1c;
6163
+ }
6164
+
6165
+ .dm-helper-setup-guide {
6166
+ display: flex;
6167
+ flex-direction: column;
6168
+ gap: 6px;
6169
+ margin-top: 4px;
6170
+ padding-top: 12px;
6171
+ border-top: 1px solid #f3f4f6;
6172
+ }
6173
+ .dm-helper-setup-command {
6174
+ margin: 0;
6175
+ padding: 10px 12px;
6176
+ background: #0b1220;
6177
+ color: #e5e7eb;
6178
+ border-radius: 7px;
6179
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
6180
+ font-size: 12.5px;
6181
+ overflow-x: auto;
6182
+ white-space: pre;
6183
+ }
6184
+ .dm-helper-setup-copy {
6185
+ align-self: flex-start;
6186
+ height: 28px;
6187
+ padding: 0 12px;
6188
+ border: 1px solid #d1d5db;
6189
+ border-radius: 6px;
6190
+ background: #fff;
6191
+ color: #2c2c2c;
6192
+ font: inherit;
6193
+ font-size: 12px;
6194
+ cursor: pointer;
6195
+ transition: background .12s ease, border-color .12s ease;
6196
+ }
6197
+ .dm-helper-setup-copy:hover {
6198
+ background: #f9fafb;
6199
+ border-color: #9ca3af;
6200
+ }
4478
6201
 
4479
- /* Relation card v2 (typed) */
4480
- .dm-relation-card-meta { display: flex; align-items: center; gap: 8px; flex: 1; }
4481
- .dm-relation-name { font-size: 13px; font-weight: 600; color: #111827; }
4482
- .dm-relation-target-type { font-size: 12px; color: #6b7280; }
4483
- .dm-relation-desc-text { margin: 0; padding: 8px 14px 0; font-size: 12px; color: #6b7280; line-height: 1.5; }
4484
- .dm-relation-props { display: grid; }
4485
- .dm-relation-prop { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px 14px; border-top: 1px solid #f3f4f6; font-size: 12px; }
4486
- .dm-relation-prop span { color: #9ca3af; font-weight: 600; }
4487
- .dm-relation-prop code { font-size: 11px; color: #374151; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; word-break: break-all; }
6202
+ /* Setup tab */
6203
+ .dm-helper-setup-section { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
6204
+ .dm-helper-setup-section:last-child { border-bottom: none; }
6205
+ .dm-helper-setup-value { display: block; font-size: 12px; color: #374151; background: #f3f4f6; border-radius: 5px; padding: 6px 10px; word-break: break-all; font-family: monospace; }
6206
+ .dm-helper-setup-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 99px; background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 600; }
6207
+ .dm-helper-setup-command { margin: 0; padding: 10px 12px; background: #1e293b; color: #e2e8f0; border-radius: 8px; font-size: 13px; font-family: monospace; white-space: pre; }
6208
+ .dm-helper-connection-row { display: flex; align-items: center; gap: 8px; }
6209
+ .dm-helper-connection-label { font-size: 13px; color: #374151; flex: 1; }
6210
+ .dm-helper-recheck { font-size: 12px !important; padding: 3px 8px !important; height: 26px !important; }
6211
+ .dm-connection-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
6212
+ .dm-connection-ok { background: #22c55e; }
6213
+ .dm-connection-amber { background: #f59e0b; }
6214
+ .dm-connection-checking { background: #d1d5db; animation: blink 1s step-end infinite; }
4488
6215
 
4489
- /* Resolver chain block */
4490
- .dm-resolver-chain { margin: 0; border-top: 1px solid #f3f4f6; padding: 12px 14px; display: grid; gap: 8px; }
4491
- .dm-resolver-chain-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #374151; }
4492
- .dm-resolver-chain-desc { margin: 0; font-size: 12px; color: #6b7280; line-height: 1.55; }
4493
- .dm-resolver-chain-desc code { background: #f3f4f6; border-radius: 3px; padding: 1px 5px; font-size: 11px; color: #374151; }
4494
- .dm-resolver-targets { display: grid; gap: 4px; }
4495
- .dm-resolver-target-row { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fafafa; font-size: 12px; color: #374151; }
4496
- .dm-resolver-target-row strong { flex: 1; font-weight: 500; }
4497
- .dm-resolver-no-targets { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: 12px; color: #92400e; }
4498
- .dm-detail-icon { color: #6b7280; }
6216
+ /* NavRail helper toggle */
6217
+ /* Legacy rail-helper-toggle classes removed in the rail unification:
6218
+ the Ask helper trigger now lives in the tab row as a pill that mirrors
6219
+ Twenty's "+ New chat" pill. See `app/workspace-rail.jsx`. */
4499
6220
 
6221
+ /* ─── Workspace rail — top row (brand + utility actions) ─────────────── */
6222
+ .workspace-rail-topbar {
6223
+ display: flex;
6224
+ align-items: center;
6225
+ justify-content: space-between;
6226
+ gap: 8px;
6227
+ min-height: 32px;
6228
+ }
6229
+ .workspace-rail-brand-button {
6230
+ display: inline-flex;
6231
+ align-items: center;
6232
+ gap: 8px;
6233
+ padding: 4px 6px;
6234
+ margin-left: -4px;
6235
+ border: 1px solid transparent;
6236
+ border-radius: 6px;
6237
+ background: transparent;
6238
+ color: inherit;
6239
+ font: inherit;
6240
+ font-size: 14px;
6241
+ font-weight: 650;
6242
+ cursor: pointer;
6243
+ min-width: 0;
6244
+ }
6245
+ .workspace-rail-brand-button:hover { background: #f3f4f6; }
6246
+ .workspace-rail-brand-button .workspace-brand-label {
6247
+ white-space: nowrap;
6248
+ overflow: hidden;
6249
+ text-overflow: ellipsis;
6250
+ max-width: 130px;
6251
+ }
6252
+ .workspace-brand-caret { color: #9ca3af; flex-shrink: 0; }
6253
+ .workspace-rail-topbar-actions { display: inline-flex; gap: 2px; flex-shrink: 0; }
6254
+ .workspace-rail-icon-btn {
6255
+ width: 26px;
6256
+ height: 26px;
6257
+ display: grid;
6258
+ place-items: center;
6259
+ border: 1px solid transparent;
6260
+ border-radius: 6px;
6261
+ background: transparent;
6262
+ color: #6b7280;
6263
+ cursor: pointer;
6264
+ transition: background .12s ease, color .12s ease, border-color .12s ease;
6265
+ }
6266
+ .workspace-rail-icon-btn:hover { background: #f3f4f6; color: #111827; }
6267
+ .workspace-rail-icon-btn:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
4500
6268
 
4501
- /* ─── Workspace Helper Sidecar ─────────────────────────────────────────────── */
4502
- .dm-sidecar-backdrop { position: fixed; inset: 0; z-index: 79; }
4503
- .dm-helper-sidecar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; background: #fff; border-left: 1px solid #e5e7eb; box-shadow: -8px 0 40px rgba(15,23,42,.13); display: flex; flex-direction: column; min-width: 320px; max-width: 80vw; }
4504
- .dm-sidecar-drag-handle { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 2; background: transparent; }
4505
- .dm-sidecar-drag-handle:hover { background: rgba(63,104,255,.12); }
4506
- .dm-sidecar-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 18px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
4507
- .dm-sidecar-header-left { display: flex; align-items: center; gap: 8px; }
4508
- .dm-sidecar-icon { color: #3f68ff; }
4509
- .dm-sidecar-title { font-size: 14px; font-weight: 600; color: #111827; }
4510
- /* Header-right action cluster — single source for gear (Setup toggle) and
4511
- close (X), replaces the old full-width Assistant/Setup tab strip. */
4512
- .dm-sidecar-header-right {
6269
+ /* ─── Workspace rail tab row (Home/Chat tabs + Ask helper pill) ────── */
6270
+ .workspace-rail-tabbar {
6271
+ display: flex;
6272
+ align-items: center;
6273
+ justify-content: space-between;
6274
+ gap: 8px;
6275
+ margin-top: -4px;
6276
+ }
6277
+ .workspace-rail-tabs {
4513
6278
  display: inline-flex;
4514
6279
  align-items: center;
4515
6280
  gap: 2px;
6281
+ padding: 2px;
6282
+ border-radius: 8px;
6283
+ background: transparent;
4516
6284
  }
4517
- .dm-sidecar-icon-btn {
6285
+ .workspace-rail-tab {
6286
+ width: 28px;
6287
+ height: 28px;
6288
+ display: grid;
6289
+ place-items: center;
6290
+ border: 1px solid transparent;
6291
+ border-radius: 6px;
6292
+ background: transparent;
6293
+ color: #9ca3af;
6294
+ cursor: pointer;
6295
+ transition: background .12s ease, color .12s ease;
6296
+ }
6297
+ .workspace-rail-tab:hover { background: #f3f4f6; color: #374151; }
6298
+ .workspace-rail-tab.active {
6299
+ background: #f1f1f1;
6300
+ color: #111827;
6301
+ }
6302
+ .workspace-rail-tab:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
6303
+
6304
+ .workspace-rail-helper-pill {
4518
6305
  display: inline-flex;
4519
6306
  align-items: center;
4520
- justify-content: center;
4521
- width: 28px;
6307
+ gap: 6px;
4522
6308
  height: 28px;
6309
+ padding: 0 12px;
4523
6310
  border: 1px solid #e5e7eb;
4524
- border-radius: 6px;
4525
- background: #ffffff;
4526
- color: #6b7280;
6311
+ border-radius: 5px;
6312
+ background: #fff;
6313
+ color: #111827;
6314
+ font: inherit;
6315
+ font-size: 12px;
6316
+ font-weight: 500;
4527
6317
  cursor: pointer;
4528
6318
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
4529
- transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
6319
+ transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
6320
+ flex-shrink: 0;
4530
6321
  }
4531
- .dm-sidecar-icon-btn:hover {
6322
+ .workspace-rail-helper-pill:hover {
4532
6323
  background: #fafafa;
4533
6324
  border-color: #d1d5db;
4534
- color: #111827;
4535
- box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
6325
+ box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
4536
6326
  }
4537
- /* No persistent active state — the icon itself swaps to ArrowLeft when
4538
- the Setup surface is open, which is the user's cue. */
4539
- .dm-sidecar-icon-btn:focus-visible {
4540
- outline: 2px solid #bfdbfe;
4541
- outline-offset: 1px;
6327
+ .workspace-rail-helper-pill.active {
6328
+ background: #f3f4f6;
6329
+ border-color: #d1d5db;
4542
6330
  }
4543
- /* Legacy `.dm-sidecar-tabs` / `.dm-sidecar-tab` / `.dm-sidecar-close`
4544
- rules retired the header cluster above owns both affordances now. */
4545
- .dm-sidecar-body { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start; }
4546
-
4547
- /* Streaming surface */
4548
- .dm-helper-stream { padding: 12px 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; color: #374151; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
4549
- @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
4550
- .dm-stream-cursor { display: inline-block; width: 2px; height: 1em; background: #3f68ff; vertical-align: text-bottom; margin-left: 1px; animation: blink 1s step-end infinite; }
4551
-
4552
- /* Proposals */
4553
- .dm-helper-result { display: grid; gap: 10px; }
4554
- .dm-helper-summary { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 13px; color: #1e40af; }
4555
- .dm-helper-warnings { display: grid; gap: 4px; }
4556
- .dm-helper-warning { display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: 12px; color: #92400e; }
4557
- .dm-helper-error { display: flex; align-items: flex-start; gap: 6px; padding: 9px 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 7px; font-size: 13px; color: #dc2626; margin-top: 4px; }
4558
- .dm-helper-proposals-header { display: flex; align-items: center; justify-content: space-between; }
4559
- .dm-helper-proposals { display: grid; gap: 6px; }
4560
- .dm-helper-proposal { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .1s, background .1s; }
4561
- .dm-helper-proposal:hover { background: #f9fafb; border-color: #d1d5db; }
4562
- .dm-helper-proposal.accepted { border-color: #3f68ff; background: #eff6ff; }
4563
- .dm-helper-proposal input[type=checkbox] { margin-top: 2px; flex-shrink: 0; accent-color: #3f68ff; }
4564
- .dm-helper-proposal-body { display: grid; gap: 2px; }
4565
- .dm-helper-proposal-type { font-size: 12px; font-weight: 600; color: #111827; font-family: monospace; }
4566
- .dm-helper-proposal-field { font-size: 11px; color: #6b7280; }
4567
- .dm-helper-proposal-rationale { margin: 0; font-size: 12px; color: #4b5563; line-height: 1.4; }
4568
- .dm-helper-apply-result { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #d1fae5; background: #ecfdf5; border-radius: 8px; font-size: 13px; color: #065f46; }
4569
- .dm-helper-apply-result.is-error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
4570
- .dm-helper-empty-hint { padding: 12px 14px; border: 1px dashed #e5e7eb; border-radius: 8px; background: #fafafa; color: #6b7280; font-size: 12px; line-height: 1.5; }
4571
- .dm-helper-empty-hint p { margin: 0; }
4572
- .dm-helper-proposal-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
4573
- .dm-helper-proposal-payload { margin: 0; font-size: 11px; color: #374151; background: #f3f4f6; border-radius: 5px; padding: 3px 7px; display: inline-block; font-family: monospace; line-height: 1.4; word-break: break-all; }
4574
- .dm-helper-proposal-confidence { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 99px; background: #eff6ff; border: 1px solid #bfdbfe; font-size: 11px; font-weight: 600; color: #1e40af; }
4575
- .dm-helper-skipped { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #fde68a; background: #fffbeb; border-radius: 8px; }
4576
- .dm-helper-skipped-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: #92400e; }
4577
- .dm-helper-skipped-reason { color: #b45309; }
4578
- .dm-thread-open-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: #3f68ff; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
4579
- .dm-thread-open-link:hover { color: #1e40af; }
4580
- .dm-thread-open-link:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 2px; border-radius: 3px; }
4581
-
4582
- /* Helper sidecar — intent pills (4 primary + More dropdown). Visible only
4583
- on a brand-new thread, before the user has sent any messages. */
4584
- .dm-helper-intent-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
4585
- .dm-helper-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid #e5e7eb; background: #fff; color: #374151; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .1s, border-color .1s, color .1s; }
4586
- .dm-helper-pill:hover:not(:disabled) { background: #f9fafb; border-color: #d1d5db; }
4587
- .dm-helper-pill.active { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
4588
- .dm-helper-pill:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
4589
- .dm-helper-pill:disabled { opacity: .55; cursor: not-allowed; }
4590
- .dm-helper-pill-more-wrap { position: relative; display: inline-flex; }
4591
- .dm-helper-pill-more { padding-right: 6px; }
4592
- .dm-helper-pill-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); padding: 4px; display: flex; flex-direction: column; gap: 1px; z-index: 90; }
4593
- .dm-helper-pill-menu-item { display: flex; align-items: center; height: 28px; padding: 0 10px; font-size: 12px; color: #374151; background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; }
4594
- .dm-helper-pill-menu-item:hover { background: #f9fafb; color: #111827; }
4595
- .dm-helper-pill-menu-item.active { background: #eff6ff; color: #1e40af; }
4596
-
4597
- /* Active-mode indicator — shown after the thread has activated, replaces
4598
- the pill row. Compact, non-cluttering. */
4599
- .dm-helper-mode-row { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: #f3f4f6; border: 1px solid #e5e7eb; align-self: flex-start; }
4600
- .dm-helper-mode-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
4601
- .dm-helper-mode-value { font-size: 12px; font-weight: 600; color: #111827; }
6331
+ .workspace-rail-helper-pill:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
6332
+ .workspace-rail-helper-pill svg { color: #6b7280; }
4602
6333
 
4603
- /* Conversation list inside the sidecar. User turns right-aligned, assistant
4604
- turns left-aligned. Pending assistant turn uses the existing blink cursor. */
4605
- /* Multi-turn conversation — ChatGPT-grade simple. User bubble on the
4606
- right (grey rounded chip, fits-content); assistant bubble on the left
4607
- as a transparent full-width markdown block. Subtle horizontal divider
4608
- between consecutive turns keeps the rhythm. */
4609
- .dm-helper-messages { display: flex; flex-direction: column; gap: 0; }
4610
- .dm-helper-turn {
6334
+ /* ─── Workspace rail chat tab body (Latest + thread list) ──────────── */
6335
+ .workspace-rail-chat {
4611
6336
  display: flex;
4612
6337
  flex-direction: column;
4613
- padding: 12px 2px;
4614
- border-bottom: 1px solid #f3f4f6;
6338
+ gap: 2px;
6339
+ min-height: 0;
6340
+ flex: 1;
4615
6341
  }
4616
- .dm-helper-turn:last-child { border-bottom: 0; }
4617
- .dm-helper-turn.role-user { align-items: flex-end; }
4618
- .dm-helper-turn.role-assistant { align-items: stretch; }
4619
- .dm-helper-turn.role-system { align-items: stretch; }
4620
6342
 
4621
- .dm-helper-bubble-user {
4622
- max-width: 88%;
4623
- padding: 7px 12px;
4624
- border-radius: 14px;
4625
- background: #f1f1f1;
4626
- color: #2c2c2c;
4627
- font-size: 13px;
4628
- line-height: 1.5;
4629
- white-space: pre-wrap;
4630
- word-break: break-word;
6343
+ /* Chat search bar — sits above the Latest label. Light, compact, inline */
6344
+ .workspace-rail-chat-search {
6345
+ display: flex;
6346
+ align-items: center;
6347
+ gap: 6px;
6348
+ height: 28px;
6349
+ padding: 0 8px;
6350
+ border: 1px solid #e5e7eb;
6351
+ border-radius: 7px;
6352
+ background: #fafafa;
6353
+ color: #6b7280;
6354
+ margin: 0;
4631
6355
  }
4632
-
4633
- .dm-helper-bubble-assistant {
4634
- width: 100%;
4635
- color: #1f2937;
4636
- font-size: 13.5px;
4637
- line-height: 1.55;
4638
- word-break: break-word;
6356
+ .workspace-rail-chat-search:focus-within {
6357
+ background: #ffffff;
6358
+ border-color: #9ca3af;
6359
+ box-shadow: 0 0 0 3px rgba(0,0,0,.04);
4639
6360
  }
4640
- .dm-helper-bubble-assistant > *:first-child { margin-top: 0; }
4641
- .dm-helper-bubble-assistant > *:last-child { margin-bottom: 0; }
4642
- .dm-helper-bubble-assistant p { margin: 0 0 8px; }
4643
- .dm-helper-bubble-assistant h1,
4644
- .dm-helper-bubble-assistant h2,
4645
- .dm-helper-bubble-assistant h3,
4646
- .dm-helper-bubble-assistant h4 {
4647
- margin: 14px 0 6px;
4648
- font-weight: 650;
6361
+ .workspace-rail-chat-search-input {
6362
+ flex: 1;
6363
+ min-width: 0;
6364
+ height: 22px;
6365
+ padding: 0;
6366
+ border: 0;
6367
+ background: transparent;
6368
+ outline: none;
4649
6369
  color: #111827;
4650
- line-height: 1.3;
4651
- }
4652
- .dm-helper-bubble-assistant h1 { font-size: 16px; }
4653
- .dm-helper-bubble-assistant h2 { font-size: 15px; }
4654
- .dm-helper-bubble-assistant h3 { font-size: 14px; }
4655
- .dm-helper-bubble-assistant h4 { font-size: 13px; }
4656
- .dm-helper-bubble-assistant ul,
4657
- .dm-helper-bubble-assistant ol { margin: 4px 0 8px; padding-left: 20px; }
4658
- .dm-helper-bubble-assistant li { margin: 2px 0; }
4659
- .dm-helper-bubble-assistant strong { font-weight: 650; color: #111827; }
4660
- .dm-helper-bubble-assistant em { font-style: italic; }
4661
- .dm-helper-bubble-assistant a { color: #1e40af; text-decoration: underline; text-underline-offset: 2px; }
4662
- .dm-helper-bubble-assistant a:hover { color: #1e3a8a; }
4663
- .dm-helper-bubble-assistant code {
4664
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
6370
+ font: inherit;
4665
6371
  font-size: 12.5px;
4666
- padding: 1px 5px;
6372
+ }
6373
+ .workspace-rail-chat-search-input::placeholder { color: #9ca3af; }
6374
+ .workspace-rail-chat-search-clear {
6375
+ width: 18px;
6376
+ height: 18px;
6377
+ display: grid;
6378
+ place-items: center;
6379
+ border: 0;
4667
6380
  border-radius: 4px;
4668
- background: #f3f4f6;
6381
+ background: transparent;
6382
+ color: #9ca3af;
6383
+ cursor: pointer;
6384
+ }
6385
+ .workspace-rail-chat-search-clear:hover { background: #ececec; color: #4b5563; }
6386
+
6387
+ /* Truncated state: hug the 10 visible rows, no fade-mask, no scroll —
6388
+ the "Show N more" pill is the affordance. Expanded state: bounded
6389
+ height + auto scroll so the list never bleeds past the fold. */
6390
+ .workspace-rail-thread-scroll {
6391
+ position: relative;
6392
+ flex: 1 1 auto;
6393
+ min-height: 0;
6394
+ max-height: calc(100vh - 260px);
6395
+ overflow-y: auto;
6396
+ scrollbar-gutter: stable;
6397
+ }
6398
+ .workspace-rail-thread-scroll.is-truncated {
6399
+ flex: 0 0 auto;
6400
+ max-height: none;
6401
+ overflow: visible;
6402
+ -webkit-mask-image: none;
6403
+ mask-image: none;
6404
+ }
6405
+ .workspace-rail-chat-show-more {
6406
+ align-self: center;
6407
+ height: 22px;
6408
+ padding: 0 12px;
6409
+ border: 1px solid #e5e7eb;
6410
+ border-radius: 99px;
6411
+ background: #fff;
6412
+ color: #4b5563;
6413
+ font: inherit;
6414
+ font-size: 11.5px;
6415
+ cursor: pointer;
6416
+ margin-top: 0;
6417
+ }
6418
+ .workspace-rail-chat-show-more:hover {
6419
+ background: #fafafa;
6420
+ border-color: #d1d5db;
4669
6421
  color: #111827;
4670
6422
  }
4671
- .dm-helper-bubble-assistant pre {
4672
- margin: 6px 0 10px;
4673
- padding: 10px 12px;
4674
- background: #0b1220;
4675
- color: #e5e7eb;
4676
- border-radius: 8px;
4677
- overflow-x: auto;
4678
- font-size: 12.5px;
4679
- line-height: 1.55;
6423
+ .workspace-rail-section-label {
6424
+ font-size: 11px;
6425
+ font-weight: 600;
6426
+ letter-spacing: 0.02em;
6427
+ color: #9ca3af;
6428
+ text-transform: none;
6429
+ padding: 4px 8px 2px;
4680
6430
  }
4681
- .dm-helper-bubble-assistant pre code {
6431
+ .workspace-rail-chat-empty {
6432
+ margin: 0;
6433
+ padding: 12px 10px;
6434
+ font-size: 12px;
6435
+ color: #6b7280;
6436
+ line-height: 1.45;
6437
+ }
6438
+ .workspace-rail-thread-list {
6439
+ list-style: none;
6440
+ margin: 0;
6441
+ padding: 0;
6442
+ display: flex;
6443
+ flex-direction: column;
6444
+ gap: 1px;
6445
+ overflow-y: auto;
6446
+ }
6447
+ .workspace-rail-thread-row {
6448
+ position: relative;
6449
+ display: flex;
6450
+ align-items: center;
6451
+ border-radius: 6px;
6452
+ transition: background .12s ease;
6453
+ }
6454
+ .workspace-rail-thread-row:hover { background: #f5f5f5; }
6455
+ .workspace-rail-thread-row:hover .workspace-rail-thread-menu-btn { opacity: 1; pointer-events: auto; }
6456
+ .workspace-rail-thread-row.is-active { background: #ececec; }
6457
+
6458
+ .workspace-rail-thread-main {
6459
+ flex: 1;
6460
+ display: grid;
6461
+ grid-template-columns: auto 1fr auto;
6462
+ align-items: center;
6463
+ gap: 8px;
6464
+ padding: 7px 8px 7px 9px;
4682
6465
  background: transparent;
6466
+ border: 0;
6467
+ cursor: pointer;
4683
6468
  color: inherit;
4684
- padding: 0;
6469
+ font: inherit;
6470
+ text-align: left;
6471
+ min-width: 0;
6472
+ border-radius: 6px;
4685
6473
  }
4686
- .dm-helper-bubble-assistant blockquote {
4687
- margin: 6px 0 10px;
4688
- padding: 4px 12px;
4689
- border-left: 3px solid #d1d5db;
4690
- color: #4b5563;
4691
- font-style: normal;
6474
+ .workspace-rail-thread-icon { color: #6b7280; flex-shrink: 0; }
6475
+ .workspace-rail-thread-title {
6476
+ font-size: 13px;
6477
+ font-weight: 500;
6478
+ color: #2c2c2c;
6479
+ white-space: nowrap;
6480
+ overflow: hidden;
6481
+ text-overflow: ellipsis;
6482
+ min-width: 0;
4692
6483
  }
4693
- .dm-helper-bubble-assistant hr {
4694
- margin: 10px 0;
6484
+ .workspace-rail-thread-time {
6485
+ font-size: 11px;
6486
+ color: #9ca3af;
6487
+ flex-shrink: 0;
6488
+ margin-right: 2px;
6489
+ }
6490
+ .workspace-rail-thread-rename {
6491
+ flex: 1;
6492
+ min-width: 0;
6493
+ height: 22px;
6494
+ padding: 0 6px;
6495
+ border: 1px solid #d1d5db;
6496
+ border-radius: 5px;
6497
+ background: #fff;
6498
+ color: #111827;
6499
+ font: inherit;
6500
+ font-size: 13px;
6501
+ outline: none;
6502
+ }
6503
+ .workspace-rail-thread-rename:focus { border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
6504
+
6505
+ .workspace-rail-thread-menu-wrap {
6506
+ position: relative;
6507
+ display: inline-flex;
6508
+ align-items: center;
6509
+ padding-right: 4px;
6510
+ }
6511
+ .workspace-rail-thread-menu-btn {
6512
+ width: 24px;
6513
+ height: 24px;
6514
+ display: grid;
6515
+ place-items: center;
4695
6516
  border: 0;
4696
- border-top: 1px solid #e5e7eb;
6517
+ border-radius: 5px;
6518
+ background: transparent;
6519
+ color: #6b7280;
6520
+ cursor: pointer;
6521
+ opacity: 0;
6522
+ pointer-events: none;
6523
+ transition: opacity .12s ease, background .12s ease;
4697
6524
  }
4698
- .dm-helper-bubble-assistant table {
4699
- border-collapse: collapse;
4700
- width: 100%;
4701
- margin: 6px 0 10px;
4702
- font-size: 12.5px;
6525
+ .workspace-rail-thread-menu-btn:hover { background: #e5e7eb; color: #111827; }
6526
+ .workspace-rail-thread-menu-btn:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid #bfdbfe; outline-offset: 1px; }
6527
+
6528
+ .workspace-rail-thread-menu {
6529
+ position: absolute;
6530
+ top: calc(100% + 4px);
6531
+ right: 0;
6532
+ min-width: 160px;
6533
+ background: #fff;
6534
+ border: 1px solid #e5e7eb;
6535
+ border-radius: 8px;
6536
+ box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
6537
+ padding: 4px;
6538
+ display: flex;
6539
+ flex-direction: column;
6540
+ gap: 1px;
6541
+ z-index: 90;
4703
6542
  }
4704
- .dm-helper-bubble-assistant th,
4705
- .dm-helper-bubble-assistant td {
4706
- padding: 6px 8px;
4707
- border: 1px solid #e5e7eb;
6543
+ .workspace-rail-thread-menu-item {
6544
+ display: inline-flex;
6545
+ align-items: center;
6546
+ gap: 8px;
6547
+ height: 30px;
6548
+ padding: 0 10px;
6549
+ font-size: 13px;
6550
+ color: #2c2c2c;
6551
+ background: transparent;
6552
+ border: 0;
6553
+ border-radius: 5px;
6554
+ cursor: pointer;
4708
6555
  text-align: left;
4709
- vertical-align: top;
4710
6556
  }
4711
- .dm-helper-bubble-assistant th { background: #f9fafb; font-weight: 600; color: #111827; }
4712
-
4713
- .dm-helper-bubble-pending { color: #6b7280; font-style: normal; min-height: 24px; display: inline-flex; align-items: center; }
6557
+ .workspace-rail-thread-menu-item:hover { background: #f5f5f5; }
6558
+ .workspace-rail-thread-menu-item.is-destructive { color: #b91c1c; }
6559
+ .workspace-rail-thread-menu-item.is-destructive:hover { background: #fef2f2; }
4714
6560
 
4715
- /* Three-dot typing indicator used while the assistant is streaming. */
4716
- /* Tool-call card — one per applied proposal. Thin agnostic component:
4717
- icon + dynamic title + chevron-accordion JSON + Open navigation.
4718
- Closes the no-code success loop in the user's mental model. */
4719
- .dm-helper-toolcall-stack {
6561
+ /* ─── Workspace rail Custom Folders Navigation Module ────────────────
6562
+ *
6563
+ * Twenty CRM-style sidebar folders: drag-to-reorder, three-dot menu,
6564
+ * collapsible folder body, dashboard/view items. Sits directly below
6565
+ * the tab row and above the Home / Chat body — mirrors the existing
6566
+ * thread-list visual treatment so the rail stays uniform.
6567
+ */
6568
+ .workspace-rail-folders {
6569
+ --nav-folder-row-h: 34px;
6570
+ --nav-item-row-h: 34px;
6571
+ --nav-max-folders: 10;
6572
+ --nav-max-items: 10;
4720
6573
  display: flex;
4721
6574
  flex-direction: column;
4722
- gap: 6px;
4723
- margin-top: 6px;
6575
+ gap: 2px;
6576
+ padding: 0 0 9px;
6577
+ border-bottom: 1px solid #f0f0f0;
6578
+ margin-top: -7px;
6579
+ margin-bottom: 0;
6580
+ flex-shrink: 0;
6581
+ min-height: 0;
6582
+ max-height: min(560px, 52vh);
4724
6583
  }
4725
- .dm-helper-toolcall {
4726
- width: 100%;
4727
- border: 1px solid #e5e7eb;
4728
- border-radius: 5px;
4729
- background: #ffffff;
4730
- box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
4731
- overflow: hidden;
6584
+ .workspace-rail-folders.is-section-collapsed {
6585
+ max-height: none;
6586
+ padding-bottom: 9px;
4732
6587
  }
4733
- .dm-helper-toolcall-row {
4734
- width: 100%;
4735
- min-height: 36px;
4736
- display: grid;
4737
- grid-template-columns: 20px 1fr auto;
6588
+ .workspace-rail-folders-head {
6589
+ display: flex;
4738
6590
  align-items: center;
4739
- gap: 8px;
4740
- padding: 8px 12px;
4741
- background: transparent;
6591
+ justify-content: space-between;
6592
+ gap: 4px;
6593
+ height: 32px;
6594
+ padding: 0 12px 0 0;
6595
+ flex-shrink: 0;
6596
+ }
6597
+ .workspace-rail-folders-section-toggle {
6598
+ flex: 1;
6599
+ display: flex;
6600
+ align-items: center;
6601
+ gap: 6px;
6602
+ min-width: 0;
6603
+ height: 28px;
6604
+ padding: 0 5px;
4742
6605
  border: 0;
6606
+ background: transparent;
4743
6607
  cursor: pointer;
6608
+ color: inherit;
4744
6609
  font: inherit;
6610
+ font-size: 13px;
6611
+ font-weight: 400;
4745
6612
  text-align: left;
4746
- color: #111827;
4747
- transition: background .12s ease;
6613
+ border-radius: 6px;
4748
6614
  }
4749
- .dm-helper-toolcall-row:hover { background: #fafafa; }
4750
- .dm-helper-toolcall-icon { color: #9ca3af; flex-shrink: 0; }
4751
- .dm-helper-toolcall-title {
6615
+ .workspace-rail-folders-section-toggle:hover { background: #f5f5f5; }
6616
+ .workspace-rail-folders-section-toggle:focus {
6617
+ outline: none;
6618
+ }
6619
+ .workspace-rail-folders-section-toggle:focus-visible {
6620
+ outline: 1px solid #d1d5db;
6621
+ outline-offset: 1px;
6622
+ }
6623
+ .workspace-rail-folders .workspace-rail-section-label {
6624
+ flex: 0 1 auto;
6625
+ min-width: 0;
6626
+ color: #686868;
4752
6627
  font-size: 13px;
4753
- font-weight: 500;
4754
- color: #2c2c2c;
4755
- white-space: nowrap;
4756
- overflow: hidden;
4757
- text-overflow: ellipsis;
6628
+ font-weight: 400;
6629
+ line-height: 1;
6630
+ padding: 0;
4758
6631
  }
4759
- .dm-helper-toolcall-chevron {
4760
- color: #9ca3af;
4761
- transition: transform .15s ease;
6632
+ .workspace-rail-folders-section-chevron {
6633
+ color: #6b7280;
4762
6634
  flex-shrink: 0;
6635
+ transition: transform .16s ease;
4763
6636
  }
4764
- .dm-helper-toolcall-chevron.is-open { transform: rotate(180deg); }
4765
- .dm-helper-toolcall-body {
4766
- background: #f9fafb;
4767
- border-top: 1px solid #e5e7eb;
4768
- padding: 8px 10px;
4769
- box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
4770
- }
4771
- .dm-helper-toolcall-content {
4772
- margin: 0 0 8px;
4773
- padding: 6px 8px;
4774
- background: #ffffff;
4775
- border: 1px solid #e5e7eb;
4776
- border-radius: 4px;
4777
- font-size: 12px;
4778
- line-height: 1.5;
4779
- color: #4b5563;
4780
- white-space: pre-wrap;
4781
- word-break: break-word;
4782
- max-height: 140px;
4783
- overflow-y: auto;
6637
+ .workspace-rail-folders-count {
6638
+ font-size: 10px;
6639
+ font-weight: 600;
6640
+ color: #9ca3af;
6641
+ padding: 1px 6px;
6642
+ border-radius: 99px;
6643
+ background: #f3f4f6;
4784
6644
  }
4785
- .dm-helper-toolcall-json {
4786
- margin: 0;
4787
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
4788
- font-size: 11.5px;
4789
- line-height: 1.5;
4790
- color: #374151;
4791
- white-space: pre-wrap;
4792
- word-break: break-word;
4793
- max-height: 240px;
4794
- overflow-y: auto;
6645
+ .workspace-rail-folders-filters {
6646
+ display: grid;
6647
+ grid-template-columns: minmax(0, 1fr) auto;
6648
+ align-items: center;
6649
+ gap: 6px;
6650
+ padding: 5px 12px 7px 2.5px;
6651
+ flex-shrink: 0;
4795
6652
  }
4796
- .dm-helper-toolcall-open {
4797
- display: inline-flex;
6653
+ .workspace-rail-folders-search {
6654
+ display: flex;
4798
6655
  align-items: center;
4799
- gap: 4px;
4800
- height: 24px;
4801
- padding: 0 9px;
4802
- margin: 6px 10px 8px;
4803
- border: 1px solid #d1d5db;
4804
- border-radius: 5px;
4805
- background: #ffffff;
4806
- color: #2c2c2c;
4807
- font: inherit;
4808
- font-size: 11.5px;
4809
- font-weight: 500;
4810
- cursor: pointer;
4811
- transition: background .12s ease, border-color .12s ease;
6656
+ gap: 6px;
6657
+ height: 28px;
6658
+ padding: 0 8px;
6659
+ border: 1px solid #e5e7eb;
6660
+ border-radius: 7px;
6661
+ background: #fafafa;
6662
+ color: #6b7280;
4812
6663
  }
4813
- .dm-helper-toolcall-open:hover {
4814
- background: #f5f5f5;
6664
+ .workspace-rail-folders-search:focus-within {
6665
+ background: #fff;
4815
6666
  border-color: #9ca3af;
4816
6667
  }
4817
-
4818
- .dm-helper-typing {
4819
- display: inline-flex;
4820
- align-items: center;
4821
- gap: 4px;
4822
- padding: 2px 0;
4823
- }
4824
- .dm-helper-typing-dot {
4825
- width: 6px;
4826
- height: 6px;
4827
- border-radius: 50%;
4828
- background: #9ca3af;
4829
- animation: dm-helper-typing-bounce 1.1s infinite ease-in-out both;
6668
+ .workspace-rail-folders-search-input {
6669
+ flex: 1;
6670
+ min-width: 0;
6671
+ height: 22px;
6672
+ padding: 0;
6673
+ border: 0;
6674
+ background: transparent;
6675
+ outline: none;
6676
+ color: #111827;
6677
+ font: inherit;
6678
+ font-size: 12px;
4830
6679
  }
4831
- .dm-helper-typing-dot:nth-child(1) { animation-delay: -0.32s; }
4832
- .dm-helper-typing-dot:nth-child(2) { animation-delay: -0.16s; }
4833
- .dm-helper-typing-dot:nth-child(3) { animation-delay: 0s; }
4834
- @keyframes dm-helper-typing-bounce {
4835
- 0%, 80%, 100% { transform: scale(0.72); opacity: 0.55; }
4836
- 40% { transform: scale(1); opacity: 1; }
6680
+ .workspace-rail-folders-search-input::placeholder { color: #9ca3af; }
6681
+ .workspace-rail-folders-filter-menu-wrap {
6682
+ position: relative;
6683
+ flex-shrink: 0;
4837
6684
  }
4838
-
4839
- .dm-helper-bubble-system {
4840
- display: inline-block;
4841
- padding: 4px 10px;
4842
- border-radius: 99px;
4843
- background: #f3f4f6;
6685
+ .workspace-rail-folders-filter-btn {
6686
+ position: relative;
6687
+ width: 30px;
6688
+ height: 30px;
6689
+ display: grid;
6690
+ place-items: center;
6691
+ border: 0;
6692
+ border-radius: 7px;
6693
+ background: #f5f5f5;
4844
6694
  color: #6b7280;
4845
- border: 1px solid #e5e7eb;
4846
- font-size: 11.5px;
4847
- font-weight: 500;
6695
+ cursor: pointer;
4848
6696
  }
4849
-
4850
- /* ─── HelperSidecar — Setup tab (state-driven, editable, ChatGPT-clean) ── */
4851
- .dm-helper-setup-body {
4852
- display: flex;
4853
- flex-direction: column;
4854
- gap: 14px;
4855
- padding: 16px;
4856
- overflow-y: auto;
6697
+ .workspace-rail-folders-filter-btn:hover {
6698
+ background: #ececec;
6699
+ color: #111827;
4857
6700
  }
4858
- .dm-helper-setup-intro {
4859
- margin: 0;
4860
- font-size: 12.5px;
6701
+ .workspace-rail-folders-filter-btn.is-open {
6702
+ background: #f5f5f5;
4861
6703
  color: #6b7280;
4862
- line-height: 1.5;
4863
6704
  }
4864
-
4865
- .dm-helper-setup-status {
4866
- display: flex;
4867
- flex-direction: column;
4868
- gap: 4px;
4869
- padding: 12px 14px;
4870
- border: 1px solid #e5e7eb;
4871
- border-radius: 10px;
4872
- background: #fafafa;
4873
- transition: background .12s ease, border-color .12s ease;
6705
+ .workspace-rail-folders-filter-btn:focus {
6706
+ outline: none;
4874
6707
  }
4875
- .dm-helper-setup-status.state-connected { background: #f0fdf4; border-color: #bbf7d0; }
4876
- .dm-helper-setup-status.state-unreachable { background: #fffbeb; border-color: #fde68a; }
4877
- .dm-helper-setup-status.state-unconfigured { background: #f5f3ff; border-color: #ddd6fe; }
4878
- .dm-helper-setup-status.state-checking { background: #f9fafb; border-color: #e5e7eb; }
4879
-
4880
- .dm-helper-setup-status-row {
4881
- display: flex;
4882
- align-items: center;
4883
- gap: 8px;
6708
+ .workspace-rail-folders-filter-btn:focus-visible {
6709
+ outline: 1px solid #d1d5db;
6710
+ outline-offset: 1px;
4884
6711
  }
4885
- .dm-helper-setup-status-label {
4886
- flex: 1;
4887
- font-size: 13px;
4888
- font-weight: 600;
4889
- color: #111827;
6712
+ .workspace-rail-folders-filter-btn.is-disabled {
6713
+ color: #9ca3af;
6714
+ cursor: default;
6715
+ opacity: .65;
4890
6716
  }
4891
- .dm-helper-setup-status-meta {
4892
- font-size: 12px;
4893
- color: #4b5563;
4894
- line-height: 1.5;
4895
- padding-left: 16px;
6717
+ .workspace-rail-folders-filter-btn.is-disabled:hover {
6718
+ background: #f5f5f5;
6719
+ color: #9ca3af;
4896
6720
  }
4897
- .dm-helper-setup-status.state-connected .dm-helper-setup-status-meta {
4898
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
4899
- font-size: 11.5px;
4900
- color: #15803d;
6721
+ .workspace-rail-folders-filter-state-dot {
6722
+ position: absolute;
6723
+ top: 5px;
6724
+ right: 5px;
6725
+ width: 6px;
6726
+ height: 6px;
6727
+ border-radius: 999px;
6728
+ background: #f97316;
6729
+ box-shadow: 0 0 0 2px #f5f5f5;
6730
+ pointer-events: none;
4901
6731
  }
4902
-
4903
- .dm-helper-setup-recheck {
4904
- height: 26px;
4905
- padding: 0 10px;
4906
- border: 1px solid #d1d5db;
4907
- border-radius: 6px;
4908
- background: #fff;
4909
- color: #2c2c2c;
4910
- font: inherit;
4911
- font-size: 12px;
4912
- cursor: pointer;
4913
- transition: background .12s ease, border-color .12s ease;
6732
+ .workspace-rail-folders-filter-btn:hover .workspace-rail-folders-filter-state-dot {
6733
+ box-shadow: 0 0 0 2px #ececec;
4914
6734
  }
4915
- .dm-helper-setup-recheck:hover:not(:disabled) {
4916
- background: #f9fafb;
4917
- border-color: #9ca3af;
6735
+ .workspace-rail-folders-filter-menu {
6736
+ position: absolute;
6737
+ top: calc(100% + 6px);
6738
+ left: auto;
6739
+ right: 0;
6740
+ z-index: 70;
6741
+ width: min(234.5px, calc(100vw - 36px));
6742
+ padding: 6px;
6743
+ border: 1px solid #d9d9d9;
6744
+ border-radius: 12px;
6745
+ background: #fff;
6746
+ box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
4918
6747
  }
4919
- .dm-helper-setup-recheck:disabled { opacity: .55; cursor: not-allowed; }
4920
-
4921
- .dm-helper-setup-section {
4922
- display: flex;
4923
- flex-direction: column;
4924
- gap: 6px;
6748
+ .workspace-rail-folders-filter-menu-group + .workspace-rail-folders-filter-menu-group {
6749
+ margin-top: 5px;
6750
+ padding-top: 5px;
6751
+ border-top: 1px solid #ededed;
4925
6752
  }
4926
- .dm-helper-setup-label {
6753
+ .workspace-rail-folders-filter-menu-label {
4927
6754
  margin: 0;
4928
- font-size: 12px;
4929
- font-weight: 600;
4930
- color: #374151;
6755
+ padding: 5px 7px 3px;
6756
+ font-size: 11px;
6757
+ line-height: 1;
6758
+ color: #9ca3af;
4931
6759
  }
4932
- .dm-helper-setup-input,
4933
- .dm-helper-setup-select {
6760
+ .workspace-rail-folders-filter-menu-item {
4934
6761
  width: 100%;
4935
- height: 34px;
4936
- padding: 0 10px;
4937
- border: 1px solid #d1d5db;
6762
+ height: 28px;
6763
+ display: grid;
6764
+ grid-template-columns: minmax(0, 1fr) auto auto;
6765
+ align-items: center;
6766
+ gap: 8px;
6767
+ padding: 0 7px;
6768
+ border: 0;
4938
6769
  border-radius: 7px;
4939
- background: #ffffff;
4940
- color: #111827;
6770
+ background: transparent;
6771
+ color: #252525;
4941
6772
  font: inherit;
4942
6773
  font-size: 13px;
4943
- box-sizing: border-box;
4944
- transition: border-color .12s ease, box-shadow .12s ease;
6774
+ text-align: left;
6775
+ cursor: pointer;
4945
6776
  }
4946
- .dm-helper-setup-input::placeholder { color: #9ca3af; }
4947
- .dm-helper-setup-input:focus,
4948
- .dm-helper-setup-select:focus {
4949
- outline: none;
4950
- border-color: #6b7280;
4951
- box-shadow: 0 0 0 3px rgba(0,0,0,.06);
6777
+ .workspace-rail-folders-filter-menu-item:hover {
6778
+ background: #f5f5f5;
4952
6779
  }
4953
- .dm-helper-setup-input:disabled,
4954
- .dm-helper-setup-select:disabled {
4955
- background: #f9fafb;
4956
- color: #6b7280;
4957
- cursor: not-allowed;
6780
+ .workspace-rail-folders-filter-menu-item.is-reset {
6781
+ color: #b45309;
4958
6782
  }
4959
- .dm-helper-setup-select {
4960
- appearance: none;
4961
- -webkit-appearance: none;
4962
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
4963
- background-repeat: no-repeat;
4964
- background-position: right 10px center;
4965
- padding-right: 32px;
6783
+ .workspace-rail-folders-filter-menu-item.is-reset:hover {
6784
+ background: #fff7ed;
4966
6785
  }
4967
-
4968
- .dm-helper-setup-quick-row {
6786
+ .workspace-rail-folders-filter-menu-value {
6787
+ color: #8c8c8c;
6788
+ white-space: nowrap;
6789
+ }
6790
+ .workspace-rail-folders-scroll {
6791
+ flex: 0 1 auto;
6792
+ min-height: 0;
6793
+ }
6794
+ .workspace-rail-folders-scroll.is-scrollable {
6795
+ max-height: calc(var(--nav-folder-row-h) * var(--nav-max-folders) + 12px);
6796
+ overflow-y: auto;
6797
+ scrollbar-gutter: stable;
6798
+ }
6799
+ .workspace-rail-folders-scroll-hint {
6800
+ margin: 0;
6801
+ padding: 4px 10px 2px;
6802
+ font-size: 10.5px;
6803
+ color: #9ca3af;
6804
+ text-align: center;
6805
+ }
6806
+ .workspace-rail-folder-items.is-scrollable {
6807
+ max-height: calc(var(--nav-item-row-h) * var(--nav-max-items));
6808
+ overflow-y: auto;
6809
+ scrollbar-gutter: stable;
6810
+ }
6811
+ .workspace-rail-nav-menu-stack {
4969
6812
  display: flex;
4970
- flex-wrap: wrap;
4971
- align-items: center;
4972
- gap: 4px;
4973
- margin-top: 2px;
6813
+ flex-direction: column;
6814
+ align-items: stretch;
6815
+ gap: 1px;
4974
6816
  }
4975
- .dm-helper-setup-quick-label {
4976
- font-size: 11px;
4977
- color: #6b7280;
4978
- margin-right: 4px;
6817
+ .workspace-rail-nav-menu-stack .workspace-rail-thread-menu-item {
6818
+ display: inline-flex;
6819
+ flex-direction: row;
6820
+ align-items: center;
6821
+ gap: 8px;
6822
+ width: 100%;
4979
6823
  }
4980
- .dm-helper-setup-quick-pill {
6824
+ .workspace-rail-folders-add-btn {
6825
+ width: 22px;
4981
6826
  height: 22px;
4982
- padding: 0 8px;
4983
- border: 1px solid #e5e7eb;
4984
- border-radius: 99px;
4985
- background: #fff;
4986
- color: #4b5563;
4987
- font: inherit;
4988
- font-size: 11px;
4989
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
6827
+ display: grid;
6828
+ place-items: center;
6829
+ border: 0;
6830
+ border-radius: 5px;
6831
+ background: transparent;
6832
+ color: #6b7280;
4990
6833
  cursor: pointer;
4991
- transition: background .12s ease, border-color .12s ease, color .12s ease;
4992
- }
4993
- .dm-helper-setup-quick-pill:hover {
4994
- background: #f9fafb;
4995
- border-color: #d1d5db;
4996
- color: #111827;
6834
+ opacity: 0;
6835
+ pointer-events: none;
6836
+ transition: background .12s ease, color .12s ease;
4997
6837
  }
4998
- .dm-helper-setup-quick-pill.active {
4999
- background: #eef2ff;
5000
- border-color: #c7d2fe;
5001
- color: #1e3a8a;
6838
+ .workspace-rail-folders-head:hover .workspace-rail-folders-add-btn,
6839
+ .workspace-rail-folders-add-btn:focus-visible {
6840
+ opacity: 1;
6841
+ pointer-events: auto;
5002
6842
  }
6843
+ .workspace-rail-folders-add-btn:hover { background: #f3f4f6; color: #111827; }
6844
+ .workspace-rail-folders-add-btn:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
5003
6845
 
5004
- .dm-helper-setup-helper-text {
6846
+ .workspace-rail-folders-empty {
6847
+ margin: 0;
6848
+ padding: 4px 10px 8px;
5005
6849
  font-size: 11.5px;
5006
- color: #6b7280;
6850
+ color: #9ca3af;
6851
+ line-height: 1.4;
5007
6852
  }
5008
- .dm-helper-setup-helper-text strong { color: #111827; font-weight: 600; }
5009
6853
 
5010
- .dm-helper-setup-actions {
6854
+ .workspace-rail-folder-create {
5011
6855
  display: flex;
5012
6856
  align-items: center;
5013
- gap: 10px;
5014
- flex-wrap: wrap;
5015
- padding-top: 2px;
5016
- }
5017
- .dm-helper-setup-save {
5018
- height: 34px;
5019
- padding: 0 14px;
5020
- border: 0;
5021
- border-radius: 7px;
5022
- background: #111827;
5023
- color: #fff;
5024
- font: inherit;
5025
- font-size: 13px;
5026
- font-weight: 500;
5027
- cursor: pointer;
5028
- transition: background .12s ease, opacity .12s ease;
5029
- }
5030
- .dm-helper-setup-save:hover:not(:disabled) { background: #000; }
5031
- .dm-helper-setup-save:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 2px; }
5032
- .dm-helper-setup-save:disabled {
5033
- background: #d1d5db;
5034
- color: #fff;
5035
- cursor: not-allowed;
5036
- }
5037
- .dm-helper-setup-save-ok {
5038
- font-size: 12px;
5039
- color: #15803d;
5040
- font-weight: 500;
6857
+ gap: 6px;
6858
+ padding: 4px 8px;
6859
+ color: #6b7280;
5041
6860
  }
5042
- .dm-helper-setup-save-error {
5043
- font-size: 12px;
5044
- color: #b91c1c;
6861
+
6862
+ .workspace-rail-folders-list {
6863
+ list-style: none;
6864
+ margin: 0;
6865
+ padding: 0;
6866
+ display: flex;
6867
+ flex-direction: column;
6868
+ gap: 1px;
5045
6869
  }
5046
6870
 
5047
- .dm-helper-setup-guide {
6871
+ .workspace-rail-folder {
5048
6872
  display: flex;
5049
6873
  flex-direction: column;
5050
- gap: 6px;
5051
- margin-top: 4px;
5052
- padding-top: 12px;
5053
- border-top: 1px solid #f3f4f6;
5054
6874
  }
5055
- .dm-helper-setup-command {
5056
- margin: 0;
5057
- padding: 10px 12px;
5058
- background: #0b1220;
5059
- color: #e5e7eb;
5060
- border-radius: 7px;
5061
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
5062
- font-size: 12.5px;
5063
- overflow-x: auto;
5064
- white-space: pre;
6875
+
6876
+ .workspace-rail-folder-accordion-panel {
6877
+ display: grid;
6878
+ grid-template-rows: 0fr;
6879
+ opacity: 0;
6880
+ transition:
6881
+ grid-template-rows 0.22s ease,
6882
+ opacity 0.18s ease;
5065
6883
  }
5066
- .dm-helper-setup-copy {
5067
- align-self: flex-start;
5068
- height: 28px;
5069
- padding: 0 12px;
5070
- border: 1px solid #d1d5db;
5071
- border-radius: 6px;
5072
- background: #fff;
5073
- color: #2c2c2c;
5074
- font: inherit;
5075
- font-size: 12px;
5076
- cursor: pointer;
5077
- transition: background .12s ease, border-color .12s ease;
6884
+ .workspace-rail-folder.is-expanded .workspace-rail-folder-accordion-panel {
6885
+ grid-template-rows: 1fr;
6886
+ opacity: 1;
5078
6887
  }
5079
- .dm-helper-setup-copy:hover {
5080
- background: #f9fafb;
5081
- border-color: #9ca3af;
6888
+ .workspace-rail-folder-accordion-inner {
6889
+ overflow: hidden;
6890
+ min-height: 0;
6891
+ }
6892
+ .workspace-rail-folder.is-drop-target {
6893
+ outline: 1px dashed #9ca3af;
6894
+ outline-offset: -1px;
6895
+ border-radius: 6px;
5082
6896
  }
5083
6897
 
5084
- /* Setup tab */
5085
- .dm-helper-setup-section { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
5086
- .dm-helper-setup-section:last-child { border-bottom: none; }
5087
- .dm-helper-setup-value { display: block; font-size: 12px; color: #374151; background: #f3f4f6; border-radius: 5px; padding: 6px 10px; word-break: break-all; font-family: monospace; }
5088
- .dm-helper-setup-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 99px; background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 600; }
5089
- .dm-helper-setup-command { margin: 0; padding: 10px 12px; background: #1e293b; color: #e2e8f0; border-radius: 8px; font-size: 13px; font-family: monospace; white-space: pre; }
5090
- .dm-helper-connection-row { display: flex; align-items: center; gap: 8px; }
5091
- .dm-helper-connection-label { font-size: 13px; color: #374151; flex: 1; }
5092
- .dm-helper-recheck { font-size: 12px !important; padding: 3px 8px !important; height: 26px !important; }
5093
- .dm-connection-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
5094
- .dm-connection-ok { background: #22c55e; }
5095
- .dm-connection-amber { background: #f59e0b; }
5096
- .dm-connection-checking { background: #d1d5db; animation: blink 1s step-end infinite; }
5097
-
5098
- /* NavRail helper toggle */
5099
- /* Legacy rail-helper-toggle classes removed in the rail unification:
5100
- the Ask helper trigger now lives in the tab row as a pill that mirrors
5101
- Twenty's "+ New chat" pill. See `app/workspace-rail.jsx`. */
5102
-
5103
- /* ─── Workspace rail — top row (brand + utility actions) ─────────────── */
5104
- .workspace-rail-topbar {
6898
+ .workspace-rail-folder-header {
6899
+ position: relative;
5105
6900
  display: flex;
5106
6901
  align-items: center;
5107
- justify-content: space-between;
5108
- gap: 8px;
5109
- min-height: 32px;
6902
+ border-radius: 6px;
6903
+ transition: background .12s ease;
5110
6904
  }
5111
- .workspace-rail-brand-button {
5112
- display: inline-flex;
6905
+ .workspace-rail-folder-header:hover { background: #f5f5f5; }
6906
+ .workspace-rail-folder-header:hover .workspace-rail-thread-menu-btn {
6907
+ opacity: 1;
6908
+ pointer-events: auto;
6909
+ }
6910
+
6911
+ .workspace-rail-folder-toggle {
6912
+ flex: 1;
6913
+ display: grid;
6914
+ grid-template-columns: auto auto 1fr;
5113
6915
  align-items: center;
5114
6916
  gap: 8px;
5115
- padding: 4px 6px;
5116
- margin-left: -4px;
5117
- border: 1px solid transparent;
5118
- border-radius: 6px;
6917
+ padding: 5px 8px 5px 9px;
5119
6918
  background: transparent;
6919
+ border: 0;
6920
+ cursor: pointer;
5120
6921
  color: inherit;
5121
6922
  font: inherit;
5122
- font-size: 14px;
5123
- font-weight: 650;
5124
- cursor: pointer;
6923
+ text-align: left;
5125
6924
  min-width: 0;
6925
+ border-radius: 6px;
5126
6926
  }
5127
- .workspace-rail-brand-button:hover { background: #f3f4f6; }
5128
- .workspace-rail-brand-button .workspace-brand-label {
6927
+ .workspace-rail-folder-icon { color: #6b7280; flex-shrink: 0; }
6928
+ .workspace-rail-folder-name {
6929
+ font-size: 13px;
6930
+ font-weight: 400;
6931
+ color: #5f6368;
5129
6932
  white-space: nowrap;
5130
6933
  overflow: hidden;
5131
6934
  text-overflow: ellipsis;
5132
- max-width: 130px;
5133
- }
5134
- .workspace-brand-caret { color: #9ca3af; flex-shrink: 0; }
5135
- .workspace-rail-topbar-actions { display: inline-flex; gap: 2px; flex-shrink: 0; }
5136
- .workspace-rail-icon-btn {
5137
- width: 26px;
5138
- height: 26px;
5139
- display: grid;
5140
- place-items: center;
5141
- border: 1px solid transparent;
5142
- border-radius: 6px;
5143
- background: transparent;
5144
- color: #6b7280;
5145
- cursor: pointer;
5146
- transition: background .12s ease, color .12s ease, border-color .12s ease;
6935
+ min-width: 0;
5147
6936
  }
5148
- .workspace-rail-icon-btn:hover { background: #f3f4f6; color: #111827; }
5149
- .workspace-rail-icon-btn:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
5150
6937
 
5151
- /* ─── Workspace rail — tab row (Home/Chat tabs + Ask helper pill) ────── */
5152
- .workspace-rail-tabbar {
6938
+ .workspace-rail-folder-items {
6939
+ position: relative;
6940
+ list-style: none;
6941
+ margin: 0;
6942
+ padding: 0 0 0 18px;
5153
6943
  display: flex;
5154
- align-items: center;
5155
- justify-content: space-between;
5156
- gap: 8px;
5157
- margin-top: -4px;
6944
+ flex-direction: column;
6945
+ gap: 1px;
5158
6946
  }
5159
- .workspace-rail-tabs {
5160
- display: inline-flex;
5161
- align-items: center;
5162
- gap: 2px;
5163
- padding: 2px;
5164
- border-radius: 8px;
5165
- background: transparent;
6947
+ .workspace-rail-folder-items:has(.workspace-rail-folder-item)::before {
6948
+ content: "";
6949
+ position: absolute;
6950
+ left: 13px;
6951
+ top: 0;
6952
+ bottom: 21px;
6953
+ width: 5px;
6954
+ border-left: 1px solid #e5e7eb;
6955
+ border-bottom: 1px solid #e5e7eb;
6956
+ border-bottom-left-radius: 5px;
6957
+ pointer-events: none;
5166
6958
  }
5167
- .workspace-rail-tab {
5168
- width: 28px;
5169
- height: 28px;
5170
- display: grid;
5171
- place-items: center;
5172
- border: 1px solid transparent;
6959
+
6960
+ .workspace-rail-folder-item {
6961
+ position: relative;
6962
+ display: flex;
6963
+ align-items: center;
5173
6964
  border-radius: 6px;
5174
- background: transparent;
5175
- color: #9ca3af;
5176
- cursor: pointer;
5177
- transition: background .12s ease, color .12s ease;
6965
+ transition: background .12s ease;
5178
6966
  }
5179
- .workspace-rail-tab:hover { background: #f3f4f6; color: #374151; }
5180
- .workspace-rail-tab.active {
5181
- background: #f1f1f1;
5182
- color: #111827;
6967
+ .workspace-rail-folder-item:hover { background: #f5f5f5; }
6968
+ .workspace-rail-folder-item:hover .workspace-rail-thread-menu-btn {
6969
+ opacity: 1;
6970
+ pointer-events: auto;
5183
6971
  }
5184
- .workspace-rail-tab:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
6972
+ .workspace-rail-folder-item.is-active { background: #ececec; }
5185
6973
 
5186
- .workspace-rail-helper-pill {
6974
+ .workspace-rail-folder-item-main {
6975
+ flex: 1;
5187
6976
  display: inline-flex;
5188
6977
  align-items: center;
5189
- gap: 6px;
5190
- height: 28px;
5191
- padding: 0 12px;
5192
- border: 1px solid #e5e7eb;
5193
- border-radius: 5px;
5194
- background: #fff;
5195
- color: #111827;
5196
- font: inherit;
5197
- font-size: 12px;
5198
- font-weight: 500;
6978
+ gap: 8px;
6979
+ padding: 6px 8px 6px 9px;
6980
+ background: transparent;
6981
+ border: 0;
5199
6982
  cursor: pointer;
5200
- box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
5201
- transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
5202
- flex-shrink: 0;
6983
+ color: inherit;
6984
+ font: inherit;
6985
+ text-align: left;
6986
+ min-width: 0;
6987
+ border-radius: 6px;
5203
6988
  }
5204
- .workspace-rail-helper-pill:hover {
5205
- background: #fafafa;
5206
- border-color: #d1d5db;
5207
- box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
6989
+ .workspace-rail-folder-item-icon { color: #6b7280; flex-shrink: 0; }
6990
+ .workspace-rail-folder-item-label {
6991
+ font-size: 13px;
6992
+ font-weight: 400;
6993
+ color: #5f6368;
6994
+ white-space: nowrap;
6995
+ overflow: hidden;
6996
+ text-overflow: ellipsis;
6997
+ min-width: 0;
5208
6998
  }
5209
- .workspace-rail-helper-pill.active {
5210
- background: #f3f4f6;
5211
- border-color: #d1d5db;
6999
+
7000
+ .workspace-rail-folder-empty {
7001
+ font-size: 11.5px;
7002
+ color: #9ca3af;
7003
+ padding: 4px 8px 6px;
7004
+ line-height: 1.35;
7005
+ }
7006
+ .workspace-rail-folder-empty-spacer {
7007
+ height: 8px;
7008
+ list-style: none;
7009
+ pointer-events: none;
5212
7010
  }
5213
- .workspace-rail-helper-pill:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
5214
- .workspace-rail-helper-pill svg { color: #6b7280; }
5215
7011
 
5216
- /* ─── Workspace rail chat tab body (Latest + thread list) ──────────── */
5217
- .workspace-rail-chat {
7012
+ /* Picker lightweight modal-ish overlay for "Add dashboard" / "Add view" */
7013
+ .workspace-rail-folder-picker-backdrop {
7014
+ position: fixed;
7015
+ inset: 0;
7016
+ background: rgba(15, 23, 42, 0.38);
7017
+ display: grid;
7018
+ align-items: start;
7019
+ justify-items: center;
7020
+ padding-top: 56px;
7021
+ z-index: 4990;
7022
+ backdrop-filter: blur(1px);
7023
+ }
7024
+ .workspace-rail-folder-picker {
7025
+ width: 360px;
7026
+ max-width: calc(100vw - 32px);
7027
+ max-height: 70vh;
5218
7028
  display: flex;
5219
7029
  flex-direction: column;
5220
- gap: 4px;
5221
- min-height: 0;
5222
- flex: 1;
7030
+ background: #fff;
7031
+ border: 1px solid #e5e7eb;
7032
+ border-radius: 10px;
7033
+ box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
7034
+ overflow: hidden;
5223
7035
  }
5224
-
5225
- /* Chat search bar — sits above the Latest label. Light, compact, inline */
5226
- .workspace-rail-chat-search {
7036
+ .workspace-rail-folder-picker-head {
5227
7037
  display: flex;
5228
7038
  align-items: center;
5229
- gap: 6px;
5230
- height: 28px;
5231
- padding: 0 8px;
5232
- border: 1px solid #e5e7eb;
5233
- border-radius: 7px;
5234
- background: #fafafa;
5235
- color: #6b7280;
5236
- margin: 2px 0 4px;
5237
- }
5238
- .workspace-rail-chat-search:focus-within {
5239
- background: #ffffff;
5240
- border-color: #9ca3af;
5241
- box-shadow: 0 0 0 3px rgba(0,0,0,.04);
5242
- }
5243
- .workspace-rail-chat-search-input {
5244
- flex: 1;
5245
- min-width: 0;
5246
- height: 22px;
5247
- padding: 0;
5248
- border: 0;
5249
- background: transparent;
5250
- outline: none;
7039
+ justify-content: space-between;
7040
+ padding: 10px 12px;
7041
+ border-bottom: 1px solid #f0f0f0;
7042
+ font-size: 13px;
5251
7043
  color: #111827;
5252
- font: inherit;
5253
- font-size: 12.5px;
5254
7044
  }
5255
- .workspace-rail-chat-search-input::placeholder { color: #9ca3af; }
5256
- .workspace-rail-chat-search-clear {
5257
- width: 18px;
5258
- height: 18px;
7045
+ .workspace-rail-folder-picker-close {
7046
+ width: 24px;
7047
+ height: 24px;
5259
7048
  display: grid;
5260
7049
  place-items: center;
5261
- border: 0;
5262
- border-radius: 4px;
5263
7050
  background: transparent;
5264
- color: #9ca3af;
7051
+ border: 0;
7052
+ border-radius: 5px;
7053
+ color: #6b7280;
5265
7054
  cursor: pointer;
5266
7055
  }
5267
- .workspace-rail-chat-search-clear:hover { background: #ececec; color: #4b5563; }
5268
-
5269
- /* Truncated state: hug the 10 visible rows, no fade-mask, no scroll —
5270
- the "Show N more" pill is the affordance. Expanded state: bounded
5271
- height + auto scroll so the list never bleeds past the fold. */
5272
- .workspace-rail-thread-scroll {
5273
- position: relative;
5274
- flex: 1 1 auto;
5275
- min-height: 0;
5276
- max-height: calc(100vh - 260px);
7056
+ .workspace-rail-folder-picker-close:hover { background: #f3f4f6; color: #111827; }
7057
+ .workspace-rail-folder-picker-list {
7058
+ list-style: none;
7059
+ margin: 0;
7060
+ padding: 6px;
5277
7061
  overflow-y: auto;
5278
- scrollbar-gutter: stable;
5279
- }
5280
- .workspace-rail-thread-scroll.is-truncated {
5281
- flex: 0 0 auto;
5282
- max-height: none;
5283
- overflow: visible;
5284
- -webkit-mask-image: none;
5285
- mask-image: none;
5286
7062
  }
5287
- .workspace-rail-chat-show-more {
5288
- align-self: center;
5289
- height: 22px;
5290
- padding: 0 12px;
5291
- border: 1px solid #e5e7eb;
5292
- border-radius: 99px;
5293
- background: #fff;
5294
- color: #4b5563;
7063
+ .workspace-rail-folder-picker-item {
7064
+ width: 100%;
7065
+ display: grid;
7066
+ grid-template-columns: auto 1fr auto;
7067
+ align-items: center;
7068
+ gap: 8px;
7069
+ padding: 8px 10px;
7070
+ background: transparent;
7071
+ border: 0;
7072
+ border-radius: 6px;
5295
7073
  font: inherit;
5296
- font-size: 11.5px;
7074
+ font-size: 13px;
7075
+ color: #2c2c2c;
7076
+ text-align: left;
5297
7077
  cursor: pointer;
5298
- margin-top: 0;
5299
- }
5300
- .workspace-rail-chat-show-more:hover {
5301
- background: #fafafa;
5302
- border-color: #d1d5db;
5303
- color: #111827;
5304
- }
5305
- .workspace-rail-section-label {
5306
- font-size: 11px;
5307
- font-weight: 600;
5308
- letter-spacing: 0.02em;
5309
- color: #9ca3af;
5310
- text-transform: none;
5311
- padding: 4px 8px 2px;
5312
- }
5313
- .workspace-rail-chat-empty {
5314
- margin: 0;
5315
- padding: 12px 10px;
5316
- font-size: 12px;
5317
- color: #6b7280;
5318
- line-height: 1.45;
5319
- }
5320
- .workspace-rail-thread-list {
5321
- list-style: none;
5322
- margin: 0;
5323
- padding: 0;
5324
- display: flex;
5325
- flex-direction: column;
5326
- gap: 1px;
5327
- overflow-y: auto;
5328
7078
  }
5329
- .workspace-rail-thread-row {
7079
+ .workspace-rail-folder-picker-item:hover { background: #f5f5f5; }
7080
+ .workspace-rail-folder-picker-hint {
7081
+ font-size: 11px;
7082
+ color: #9ca3af;
7083
+ }
7084
+
7085
+ /* Nav row layout — Twenty-style favorites tree + right-aligned ⋯ */
7086
+ .workspace-rail-nav-row {
5330
7087
  position: relative;
7088
+ list-style: none;
7089
+ }
7090
+ .workspace-rail-nav-row-body {
5331
7091
  display: flex;
5332
7092
  align-items: center;
7093
+ min-width: 0;
5333
7094
  border-radius: 6px;
5334
7095
  transition: background .12s ease;
5335
7096
  }
5336
- .workspace-rail-thread-row:hover { background: #f5f5f5; }
5337
- .workspace-rail-thread-row:hover .workspace-rail-thread-menu-btn { opacity: 1; pointer-events: auto; }
5338
- .workspace-rail-thread-row.is-active { background: #ececec; }
5339
-
5340
- .workspace-rail-thread-main {
7097
+ .workspace-rail-nav-row:hover > .workspace-rail-nav-row-body,
7098
+ .workspace-rail-nav-row.is-menu-open > .workspace-rail-nav-row-body {
7099
+ background: #f5f5f5;
7100
+ }
7101
+ .workspace-rail-nav-row:hover > .workspace-rail-nav-row-body .workspace-rail-nav-menu-btn,
7102
+ .workspace-rail-nav-row.is-menu-open > .workspace-rail-nav-row-body .workspace-rail-nav-menu-btn {
7103
+ opacity: 1;
7104
+ pointer-events: auto;
7105
+ }
7106
+ .workspace-rail-nav-row-main {
5341
7107
  flex: 1;
5342
- display: grid;
5343
- grid-template-columns: auto 1fr auto;
7108
+ display: flex;
5344
7109
  align-items: center;
5345
7110
  gap: 8px;
5346
- padding: 7px 8px 7px 9px;
5347
- background: transparent;
7111
+ min-width: 0;
7112
+ padding: 6px 4px 6px 6px;
5348
7113
  border: 0;
7114
+ background: transparent;
5349
7115
  cursor: pointer;
5350
7116
  color: inherit;
5351
7117
  font: inherit;
5352
7118
  text-align: left;
5353
- min-width: 0;
5354
7119
  border-radius: 6px;
5355
7120
  }
5356
- .workspace-rail-thread-icon { color: #6b7280; flex-shrink: 0; }
5357
- .workspace-rail-thread-title {
5358
- font-size: 13px;
5359
- font-weight: 500;
5360
- color: #2c2c2c;
5361
- white-space: nowrap;
5362
- overflow: hidden;
5363
- text-overflow: ellipsis;
7121
+ .workspace-rail-nav-icon-badge {
7122
+ flex-shrink: 0;
7123
+ width: 22px;
7124
+ height: 22px;
7125
+ display: grid;
7126
+ place-items: center;
7127
+ border-radius: 5px;
7128
+ }
7129
+ .workspace-rail-nav-row-text {
7130
+ flex: 1;
5364
7131
  min-width: 0;
7132
+ display: flex;
7133
+ flex-direction: column;
7134
+ gap: 1px;
5365
7135
  }
5366
- .workspace-rail-thread-time {
5367
- font-size: 11px;
7136
+ .workspace-rail-nav-row-meta {
7137
+ font-size: 10.5px;
5368
7138
  color: #9ca3af;
7139
+ line-height: 1.2;
7140
+ }
7141
+ .workspace-rail-nav-menu-wrap {
5369
7142
  flex-shrink: 0;
5370
- margin-right: 2px;
7143
+ padding-right: 2px;
5371
7144
  }
5372
- .workspace-rail-thread-rename {
5373
- flex: 1;
5374
- min-width: 0;
5375
- height: 22px;
5376
- padding: 0 6px;
5377
- border: 1px solid #d1d5db;
5378
- border-radius: 5px;
7145
+ .workspace-rail-nav-menu-btn {
7146
+ display: inline-flex;
7147
+ flex-direction: column;
7148
+ align-items: center;
7149
+ justify-content: center;
7150
+ width: 24px;
7151
+ height: 24px;
7152
+ opacity: 0;
7153
+ pointer-events: none;
7154
+ }
7155
+ .workspace-rail-nav-menu:not(.is-customize) {
7156
+ position: fixed;
7157
+ right: auto;
7158
+ width: 188px;
7159
+ min-width: 188px;
7160
+ z-index: 240;
7161
+ }
7162
+ .workspace-rail-nav-menu.is-customize {
7163
+ position: fixed;
7164
+ top: 48px;
7165
+ left: 16px;
7166
+ right: auto;
7167
+ width: min(520px, calc(100vw - 32px));
7168
+ max-width: min(520px, calc(100vw - 32px));
7169
+ max-height: calc(100vh - 72px);
7170
+ overflow-y: auto;
7171
+ padding: 14px;
7172
+ z-index: 5000;
5379
7173
  background: #fff;
5380
- color: #111827;
7174
+ border-radius: 12px;
7175
+ border: 1px solid #dbe2ea;
7176
+ box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
7177
+ }
7178
+ .workspace-rail-nav-customize {
7179
+ display: flex;
7180
+ flex-direction: column;
7181
+ gap: 8px;
7182
+ }
7183
+ .workspace-rail-nav-customize-field {
7184
+ display: flex;
7185
+ flex-direction: column;
7186
+ gap: 4px;
7187
+ font-size: 11px;
7188
+ color: #6b7280;
7189
+ }
7190
+ .workspace-rail-nav-customize-field input {
7191
+ height: 28px;
7192
+ padding: 0 8px;
7193
+ border: 1px solid #d1d5db;
7194
+ border-radius: 6px;
5381
7195
  font: inherit;
5382
7196
  font-size: 13px;
7197
+ color: #111827;
7198
+ background: #fff;
7199
+ caret-color: #111827;
7200
+ }
7201
+ .workspace-rail-nav-customize-field input:focus {
7202
+ border-color: #9ca3af;
5383
7203
  outline: none;
7204
+ box-shadow: 0 0 0 3px rgba(0,0,0,.05);
5384
7205
  }
5385
- .workspace-rail-thread-rename:focus { border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
5386
-
5387
- .workspace-rail-thread-menu-wrap {
5388
- position: relative;
5389
- display: inline-flex;
5390
- align-items: center;
5391
- padding-right: 4px;
7206
+ .workspace-rail-nav-customize-field input::selection {
7207
+ background: #dbeafe;
7208
+ color: #111827;
5392
7209
  }
5393
- .workspace-rail-thread-menu-btn {
5394
- width: 24px;
5395
- height: 24px;
7210
+ .workspace-rail-nav-customize-label {
7211
+ font-size: 11px;
7212
+ font-weight: 600;
7213
+ color: #9ca3af;
7214
+ letter-spacing: 0.02em;
7215
+ }
7216
+ .workspace-rail-nav-icon-picker {
7217
+ margin-top: 0;
7218
+ }
7219
+ .workspace-rail-nav-color-picker {
7220
+ display: flex;
7221
+ flex-direction: column;
7222
+ gap: 6px;
7223
+ }
7224
+ .workspace-rail-nav-color-swatches {
7225
+ display: flex;
7226
+ flex-wrap: wrap;
7227
+ gap: 4px;
7228
+ }
7229
+ .workspace-rail-nav-color-swatch {
7230
+ width: 28px;
7231
+ height: 28px;
5396
7232
  display: grid;
5397
7233
  place-items: center;
5398
- border: 0;
5399
- border-radius: 5px;
5400
- background: transparent;
7234
+ border: 1px solid #e5e7eb;
7235
+ border-radius: 6px;
7236
+ cursor: pointer;
7237
+ padding: 0;
7238
+ }
7239
+ .workspace-rail-nav-color-swatch.active {
7240
+ border-color: #111827;
7241
+ box-shadow: 0 0 0 1px #111827;
7242
+ }
7243
+ .workspace-rail-nav-color-swatch-dot {
7244
+ width: 10px;
7245
+ height: 10px;
7246
+ border-radius: 99px;
7247
+ }
7248
+ .workspace-rail-nav-color-custom {
7249
+ display: flex;
7250
+ align-items: center;
7251
+ gap: 8px;
7252
+ font-size: 11px;
5401
7253
  color: #6b7280;
7254
+ }
7255
+ .workspace-rail-nav-color-custom input[type="color"] {
7256
+ width: 32px;
7257
+ height: 24px;
7258
+ padding: 0;
7259
+ border: 1px solid #e5e7eb;
7260
+ border-radius: 4px;
5402
7261
  cursor: pointer;
5403
- opacity: 0;
5404
- pointer-events: none;
5405
- transition: opacity .12s ease, background .12s ease;
5406
7262
  }
5407
- .workspace-rail-thread-menu-btn:hover { background: #e5e7eb; color: #111827; }
5408
- .workspace-rail-thread-menu-btn:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid #bfdbfe; outline-offset: 1px; }
5409
-
5410
- .workspace-rail-thread-menu {
5411
- position: absolute;
5412
- top: calc(100% + 4px);
5413
- right: 0;
5414
- min-width: 160px;
5415
- background: #fff;
7263
+ .workspace-rail-nav-customize-actions {
7264
+ display: flex;
7265
+ justify-content: flex-end;
7266
+ gap: 6px;
7267
+ margin-top: 4px;
7268
+ }
7269
+ .workspace-rail-nav-btn-ghost,
7270
+ .workspace-rail-nav-btn-primary {
7271
+ height: 28px;
7272
+ padding: 0 10px;
7273
+ border-radius: 6px;
7274
+ font: inherit;
7275
+ font-size: 12px;
7276
+ cursor: pointer;
7277
+ }
7278
+ .workspace-rail-nav-btn-ghost {
5416
7279
  border: 1px solid #e5e7eb;
7280
+ background: #fff;
7281
+ color: #374151;
7282
+ }
7283
+ .workspace-rail-nav-btn-ghost:hover { background: #f9fafb; }
7284
+ .workspace-rail-nav-btn-primary {
7285
+ border: 1px solid #111827;
7286
+ background: #111827;
7287
+ color: #fff;
7288
+ }
7289
+ .workspace-rail-nav-btn-primary:hover { background: #252525; }
7290
+ .workspace-rail-nav-btn-primary.is-compact {
7291
+ height: 24px;
7292
+ padding: 0 8px;
7293
+ font-size: 11.5px;
7294
+ flex-shrink: 0;
7295
+ }
7296
+ .workspace-rail-nav-discard-warn {
7297
+ margin: 0;
7298
+ padding: 6px 8px;
7299
+ font-size: 11px;
7300
+ line-height: 1.35;
7301
+ color: #b45309;
7302
+ background: #fffbeb;
7303
+ border-radius: 6px;
7304
+ border: 1px solid #fde68a;
7305
+ }
7306
+ .workspace-rail-nav-discard-warn.is-inline {
7307
+ flex: 1 1 100%;
7308
+ margin-top: 2px;
7309
+ }
7310
+ .workspace-rail-tree-guide {
7311
+ position: absolute;
7312
+ left: -5px;
7313
+ top: calc(50% - 8px);
7314
+ width: 23px;
7315
+ height: 8px;
7316
+ border-left: 1px solid #e5e7eb;
7317
+ border-bottom: 1px solid #e5e7eb;
7318
+ border-bottom-left-radius: 4px;
7319
+ pointer-events: none;
7320
+ }
7321
+ .workspace-rail-folder-item.workspace-rail-nav-row {
7322
+ padding-left: 14px;
7323
+ position: relative;
7324
+ }
7325
+ .workspace-rail-folder-chevron {
7326
+ flex-shrink: 0;
7327
+ color: #9ca3af;
7328
+ transition: transform 0.2s ease, color 0.12s ease;
7329
+ }
7330
+ .workspace-rail-folder.is-expanded .workspace-rail-folder-chevron {
7331
+ transform: rotate(90deg);
7332
+ }
7333
+ .workspace-rail-folder-create {
7334
+ flex-wrap: wrap;
7335
+ align-items: center;
7336
+ gap: 6px;
7337
+ padding: 6px 8px;
7338
+ margin: 2px 4px 6px;
7339
+ border: 1px solid #bfdbfe;
5417
7340
  border-radius: 8px;
5418
- box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
5419
- padding: 4px;
7341
+ background: #f8fafc;
7342
+ }
7343
+ .workspace-rail-folder-create .workspace-rail-thread-rename {
7344
+ flex: 1;
7345
+ min-width: 80px;
7346
+ }
7347
+
7348
+ /* ─── Custom Folders View page — clean user-facing table renderer ──── */
7349
+ .workspace-view-surface {
7350
+ flex: 1;
5420
7351
  display: flex;
5421
7352
  flex-direction: column;
5422
- gap: 1px;
5423
- z-index: 90;
7353
+ min-height: 0;
7354
+ padding: 16px 24px 24px;
5424
7355
  }
5425
- .workspace-rail-thread-menu-item {
5426
- display: inline-flex;
5427
- align-items: center;
5428
- gap: 8px;
5429
- height: 30px;
5430
- padding: 0 10px;
7356
+ .workspace-view-empty {
7357
+ margin: 24px 0 0;
7358
+ font-size: 13px;
7359
+ color: #6b7280;
7360
+ }
7361
+ .workspace-view-error { color: #b91c1c; }
7362
+ .workspace-view-table-wrap {
7363
+ display: flex;
7364
+ flex-direction: column;
7365
+ min-height: 0;
7366
+ overflow: auto;
7367
+ border: 1px solid #ececec;
7368
+ border-radius: 10px;
7369
+ background: #fff;
7370
+ }
7371
+ .workspace-view-table {
7372
+ width: 100%;
7373
+ border-collapse: collapse;
5431
7374
  font-size: 13px;
5432
7375
  color: #2c2c2c;
5433
- background: transparent;
5434
- border: 0;
5435
- border-radius: 5px;
5436
- cursor: pointer;
7376
+ }
7377
+ .workspace-view-table th,
7378
+ .workspace-view-table td {
7379
+ padding: 9px 12px;
5437
7380
  text-align: left;
7381
+ border-bottom: 1px solid #f0f0f0;
7382
+ vertical-align: top;
7383
+ }
7384
+ .workspace-view-table th {
7385
+ font-weight: 600;
7386
+ font-size: 12px;
7387
+ color: #6b7280;
7388
+ background: #fafafa;
7389
+ position: sticky;
7390
+ top: 0;
7391
+ z-index: 1;
7392
+ }
7393
+ .workspace-view-table tbody tr:hover { background: #fafafa; }
7394
+ .workspace-view-table-empty {
7395
+ padding: 20px 12px;
7396
+ text-align: center;
7397
+ color: #9ca3af;
7398
+ font-size: 12.5px;
7399
+ }
7400
+ .workspace-view-footer {
7401
+ margin: 10px 2px 0;
7402
+ font-size: 11.5px;
7403
+ color: #9ca3af;
5438
7404
  }
5439
- .workspace-rail-thread-menu-item:hover { background: #f5f5f5; }
5440
- .workspace-rail-thread-menu-item.is-destructive { color: #b91c1c; }
5441
- .workspace-rail-thread-menu-item.is-destructive:hover { background: #fef2f2; }
5442
7405
 
5443
7406
  /* ─── HelperSidecar — clean light textarea (fix the dark-UA fallback) ─── */
5444
7407
  .dm-field-textarea {