@dwelle/excalidraw 0.5.0-e05a141 → 0.5.0-e2a82c4d8

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 (138) hide show
  1. package/dist/dev/{chunk-JCMFCSXV.js → chunk-7M7SVUYU.js} +121 -7
  2. package/dist/dev/chunk-7M7SVUYU.js.map +7 -0
  3. package/dist/dev/{chunk-P7XQCHXR.js → chunk-HJWER26G.js} +901 -439
  4. package/dist/dev/chunk-HJWER26G.js.map +7 -0
  5. package/dist/dev/{chunk-B7UQ5W6R.js → chunk-Q5BO7QEK.js} +2 -2
  6. package/dist/dev/{chunk-B7UQ5W6R.js.map → chunk-Q5BO7QEK.js.map} +1 -1
  7. package/dist/dev/components/TTDDialog/CodeMirrorEditor-4GD6MAJW.js +259 -0
  8. package/dist/dev/components/TTDDialog/CodeMirrorEditor-4GD6MAJW.js.map +7 -0
  9. package/dist/dev/data/{image-BUI6GQJR.js → image-UQK7BQY4.js} +3 -3
  10. package/dist/dev/index.css +2444 -173
  11. package/dist/dev/index.css.map +3 -3
  12. package/dist/dev/index.js +6875 -1415
  13. package/dist/dev/index.js.map +4 -4
  14. package/dist/dev/locales/{en-SEGQGVZN.js → en-IHKMFGHF.js} +6 -2
  15. package/dist/dev/subset-shared.chunk.js +1 -1
  16. package/dist/dev/subset-worker.chunk.js +1 -1
  17. package/dist/prod/chunk-QHCRJDAB.js +12 -0
  18. package/dist/prod/chunk-R2CZDOAE.js +34 -0
  19. package/dist/prod/{chunk-KDBB3MAO.js → chunk-XXRJJHWR.js} +1 -1
  20. package/dist/prod/components/TTDDialog/CodeMirrorEditor-P2CDXXOC.js +1 -0
  21. package/dist/prod/data/image-WAWRV65K.js +1 -0
  22. package/dist/prod/index.css +1 -1
  23. package/dist/prod/index.js +34 -25
  24. package/dist/prod/locales/en-QQWGF6XN.js +1 -0
  25. package/dist/prod/subset-shared.chunk.js +1 -1
  26. package/dist/prod/subset-worker.chunk.js +1 -1
  27. package/dist/types/common/src/utils.d.ts +5 -3
  28. package/dist/types/element/src/Scene.d.ts +2 -0
  29. package/dist/types/element/src/arrowheads.d.ts +3 -0
  30. package/dist/types/element/src/binding.d.ts +5 -4
  31. package/dist/types/element/src/bounds.d.ts +5 -3
  32. package/dist/types/element/src/elbowArrow.d.ts +2 -0
  33. package/dist/types/element/src/frame.d.ts +1 -1
  34. package/dist/types/element/src/index.d.ts +1 -0
  35. package/dist/types/element/src/linearElementEditor.d.ts +5 -2
  36. package/dist/types/element/src/mutateElement.d.ts +2 -0
  37. package/dist/types/element/src/selection.d.ts +7 -3
  38. package/dist/types/element/src/shape.d.ts +1 -1
  39. package/dist/types/element/src/textElement.d.ts +1 -1
  40. package/dist/types/element/src/textWrapping.d.ts +26 -0
  41. package/dist/types/element/src/types.d.ts +4 -1
  42. package/dist/types/element/src/utils.d.ts +2 -2
  43. package/dist/types/excalidraw/TTA/TTAChatEmptyState.d.ts +7 -0
  44. package/dist/types/excalidraw/TTA/TTAChatMessage.d.ts +15 -0
  45. package/dist/types/excalidraw/TTA/TTAComposer.d.ts +24 -0
  46. package/dist/types/excalidraw/TTA/TTADialog.d.ts +19 -0
  47. package/dist/types/excalidraw/TTA/TTADialogPanel.d.ts +46 -0
  48. package/dist/types/excalidraw/TTA/TTADialogTrigger.d.ts +10 -0
  49. package/dist/types/excalidraw/TTA/TTAHistory.d.ts +11 -0
  50. package/dist/types/excalidraw/TTA/TTAWarningMessage.d.ts +5 -0
  51. package/dist/types/excalidraw/TTA/chatErrors.d.ts +13 -0
  52. package/dist/types/excalidraw/TTA/chatHelpers.d.ts +26 -0
  53. package/dist/types/excalidraw/TTA/client.d.ts +74 -0
  54. package/dist/types/excalidraw/TTA/history.d.ts +2 -0
  55. package/dist/types/excalidraw/TTA/insertAISkeletons.d.ts +20 -0
  56. package/dist/types/excalidraw/TTA/types.d.ts +167 -0
  57. package/dist/types/excalidraw/TTA/useAIAssistantPreview.d.ts +18 -0
  58. package/dist/types/excalidraw/TTA/useAIStreamingCanvasPreview.d.ts +21 -0
  59. package/dist/types/excalidraw/TTA/useAIStreamingLifecycle.d.ts +34 -0
  60. package/dist/types/excalidraw/TTA/useTTAChatHistory.d.ts +18 -0
  61. package/dist/types/excalidraw/TTA/utils.d.ts +14 -0
  62. package/dist/types/excalidraw/actions/actionAddToLibrary.d.ts +15 -6
  63. package/dist/types/excalidraw/actions/actionBoundText.d.ts +11 -5
  64. package/dist/types/excalidraw/actions/actionCanvas.d.ts +50 -20
  65. package/dist/types/excalidraw/actions/actionClipboard.d.ts +10 -4
  66. package/dist/types/excalidraw/actions/actionCropEditor.d.ts +5 -2
  67. package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +15 -6
  68. package/dist/types/excalidraw/actions/actionDeselect.d.ts +161 -0
  69. package/dist/types/excalidraw/actions/actionElementLink.d.ts +5 -2
  70. package/dist/types/excalidraw/actions/actionElementLock.d.ts +10 -4
  71. package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +5 -2
  72. package/dist/types/excalidraw/actions/actionExport.d.ts +21 -8
  73. package/dist/types/excalidraw/actions/actionFrame.d.ts +20 -8
  74. package/dist/types/excalidraw/actions/actionGroup.d.ts +11 -5
  75. package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +5 -2
  76. package/dist/types/excalidraw/actions/actionLink.d.ts +5 -2
  77. package/dist/types/excalidraw/actions/actionMenu.d.ts +5 -2
  78. package/dist/types/excalidraw/actions/actionProperties.d.ts +12 -6
  79. package/dist/types/excalidraw/actions/actionSelectAll.d.ts +5 -2
  80. package/dist/types/excalidraw/actions/actionStyles.d.ts +6 -2
  81. package/dist/types/excalidraw/actions/actionTextAutoResize.d.ts +3 -3
  82. package/dist/types/excalidraw/actions/actionToggleArrowBinding.d.ts +174 -0
  83. package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +5 -2
  84. package/dist/types/excalidraw/actions/actionToggleMidpointSnapping.d.ts +174 -0
  85. package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +5 -2
  86. package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +5 -2
  87. package/dist/types/excalidraw/actions/actionToggleStats.d.ts +5 -2
  88. package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +5 -2
  89. package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +5 -2
  90. package/dist/types/excalidraw/actions/index.d.ts +3 -0
  91. package/dist/types/excalidraw/actions/types.d.ts +1 -1
  92. package/dist/types/excalidraw/aiWarnings.d.ts +7 -0
  93. package/dist/types/excalidraw/appState.d.ts +4 -0
  94. package/dist/types/excalidraw/components/AI/ChatMessage.d.ts +33 -0
  95. package/dist/types/excalidraw/components/AI/index.d.ts +2 -0
  96. package/dist/types/excalidraw/components/App.d.ts +11 -1
  97. package/dist/types/excalidraw/components/FilledButton.d.ts +1 -1
  98. package/dist/types/excalidraw/components/IconPicker.d.ts +14 -9
  99. package/dist/types/excalidraw/components/Range.d.ts +10 -4
  100. package/dist/types/excalidraw/components/TTDDialog/Chat/TTDRateLimitWarningContent.d.ts +5 -0
  101. package/dist/types/excalidraw/components/TTDDialog/CodeMirrorEditor.d.ts +11 -0
  102. package/dist/types/excalidraw/components/TTDDialog/TTDDialog.d.ts +2 -2
  103. package/dist/types/excalidraw/components/TTDDialog/TTDDialogInput.d.ts +3 -3
  104. package/dist/types/excalidraw/components/TTDDialog/TTDDialogOutput.d.ts +4 -1
  105. package/dist/types/excalidraw/components/TTDDialog/mermaid-lang-lite.d.ts +2 -0
  106. package/dist/types/excalidraw/components/TTDDialog/types.d.ts +5 -1
  107. package/dist/types/excalidraw/components/TTDDialog/utils/TTDStreamFetch.d.ts +24 -6
  108. package/dist/types/excalidraw/components/TTDDialog/utils/mermaidAutoFix.d.ts +1 -0
  109. package/dist/types/excalidraw/components/TTDDialog/utils/mermaidError.d.ts +10 -0
  110. package/dist/types/excalidraw/components/canvases/InteractiveCanvas.d.ts +1 -0
  111. package/dist/types/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.d.ts +2 -1
  112. package/dist/types/excalidraw/components/icons.d.ts +18 -8
  113. package/dist/types/excalidraw/components/main-menu/DefaultItems.d.ts +3 -0
  114. package/dist/types/excalidraw/context/tunnels.d.ts +1 -0
  115. package/dist/types/excalidraw/data/blob.d.ts +9 -3
  116. package/dist/types/excalidraw/data/filesystem.d.ts +3 -3
  117. package/dist/types/excalidraw/data/index.d.ts +1 -1
  118. package/dist/types/excalidraw/data/json.d.ts +6 -3
  119. package/dist/types/excalidraw/data/resave.d.ts +1 -1
  120. package/dist/types/excalidraw/data/sse.d.ts +15 -0
  121. package/dist/types/excalidraw/index.d.ts +15 -2
  122. package/dist/types/excalidraw/textAutoResizeHandle.d.ts +15 -0
  123. package/dist/types/excalidraw/types.d.ts +15 -2
  124. package/dist/types/excalidraw/wysiwyg/textWysiwyg.d.ts +5 -1
  125. package/dist/types/math/src/curve.d.ts +4 -1
  126. package/dist/types/math/src/point.d.ts +1 -1
  127. package/package.json +11 -5
  128. package/CHANGELOG.md +0 -2385
  129. package/dist/dev/chunk-JCMFCSXV.js.map +0 -7
  130. package/dist/dev/chunk-P7XQCHXR.js.map +0 -7
  131. package/dist/prod/chunk-FVPDTNSG.js +0 -12
  132. package/dist/prod/chunk-LRBVLW2I.js +0 -33
  133. package/dist/prod/data/image-KI7JN73E.js +0 -1
  134. package/dist/prod/locales/en-6237XDE7.js +0 -1
  135. package/dist/types/excalidraw/data/ai/types.d.ts +0 -242
  136. package/history.ts +0 -249
  137. /package/dist/dev/data/{image-BUI6GQJR.js.map → image-UQK7BQY4.js.map} +0 -0
  138. /package/dist/dev/locales/{en-SEGQGVZN.js.map → en-IHKMFGHF.js.map} +0 -0
@@ -285,9 +285,13 @@
285
285
  --popup-text-inverted-color: #fff;
286
286
  --select-highlight-color: #339af0;
287
287
  --shadow-island:
288
- 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
289
- 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
288
+ 0px 0px 1px 0px rgba(0, 0, 0, 0.17),
289
+ 0px 0px 3px 0px rgba(0, 0, 0, 0.08),
290
290
  0px 7px 14px 0px rgba(0, 0, 0, 0.05);
291
+ --shadow-island-stronger:
292
+ 0px 0px 1px 0px rgba(0, 0, 0, 0.17),
293
+ 0px 0px 3px 0px rgba(0, 0, 0, 0.08),
294
+ 0px 7px 14px 0px rgb(0 0 0 / 18%);
291
295
  --button-hover-bg: var(--color-surface-high);
292
296
  --button-active-bg: var(--color-surface-high);
293
297
  --button-active-border: var(--color-brand-active);
@@ -328,6 +332,7 @@
328
332
  --chat-msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
329
333
  --space-factor: 0.25rem;
330
334
  --text-primary-color: var(--color-on-surface);
335
+ --text-secondary-color: #6f6f78;
331
336
  --color-selection: #6965db;
332
337
  --color-icon-white: #fff;
333
338
  --color-primary: #6965db;
@@ -448,10 +453,6 @@
448
453
  --popup-text-color: #ced4da;
449
454
  --popup-text-inverted-color: #2c2c2c;
450
455
  --select-highlight-color: #4dabf7;
451
- --shadow-island:
452
- 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
453
- 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
454
- 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
455
456
  --modal-shadow:
456
457
  0px 100px 80px rgba(0, 0, 0, 0.07),
457
458
  0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
@@ -465,6 +466,7 @@
465
466
  --color-slider-track: hsl(244, 23%, 39%);
466
467
  --color-selection: #3530c4;
467
468
  --color-icon-white: var(--color-gray-90);
469
+ --text-secondary-color: #b8b7c6;
468
470
  --color-primary: #a8a5ff;
469
471
  --color-primary-darker: #b2aeff;
470
472
  --color-primary-darkest: #beb9ff;
@@ -1146,13 +1148,18 @@
1146
1148
  padding: 0.5rem;
1147
1149
  background: var(--popup-bg-color);
1148
1150
  border: 0 solid rgba(255, 255, 255, 0.25);
1149
- box-shadow: var(--shadow-island);
1151
+ box-shadow: var(--shadow-island-stronger);
1150
1152
  border-radius: 4px;
1151
- position: absolute;
1152
1153
  }
1153
1154
  :root[dir=rtl] .excalidraw .picker {
1154
1155
  padding: 0.4rem;
1155
1156
  }
1157
+ .excalidraw .picker-sections,
1158
+ .excalidraw .picker-section {
1159
+ display: flex;
1160
+ flex-direction: column;
1161
+ gap: 0.5rem;
1162
+ }
1156
1163
  .excalidraw .picker-container button,
1157
1164
  .excalidraw .picker button {
1158
1165
  position: relative;
@@ -1199,7 +1206,12 @@
1199
1206
  }
1200
1207
  .excalidraw .picker-collapsible {
1201
1208
  font-size: 0.75rem;
1202
- padding: 0.5rem 0;
1209
+ padding: 0;
1210
+ color: var(--text-primary-color);
1211
+ }
1212
+ .excalidraw .picker-section-label {
1213
+ font-size: 0.75rem;
1214
+ color: var(--text-primary-color);
1203
1215
  }
1204
1216
  .excalidraw .picker-keybinding {
1205
1217
  position: absolute;
@@ -1756,7 +1768,7 @@
1756
1768
 
1757
1769
  /* components/dropdownMenu/DropdownMenu.scss */
1758
1770
  .excalidraw .dropdown-menu {
1759
- max-width: 16rem;
1771
+ max-width: 20rem;
1760
1772
  z-index: 1;
1761
1773
  }
1762
1774
  .excalidraw .dropdown-menu--placement-top {
@@ -1898,6 +1910,18 @@
1898
1910
  background-color: var(--button-hover-bg);
1899
1911
  box-shadow: 0 0 0 1px var(--color-brand-active);
1900
1912
  }
1913
+ .excalidraw .dropdown-menu .dropdown-menu-item[disabled] {
1914
+ cursor: not-allowed;
1915
+ opacity: 0.5;
1916
+ pointer-events: none;
1917
+ }
1918
+ .excalidraw .dropdown-menu .dropdown-menu-item[disabled]:hover {
1919
+ background-color: transparent;
1920
+ }
1921
+ .excalidraw .dropdown-menu .dropdown-menu-item[disabled]:active {
1922
+ background-color: transparent;
1923
+ box-shadow: none;
1924
+ }
1901
1925
  .excalidraw .dropdown-menu .dropdown-menu-item svg {
1902
1926
  width: 1rem;
1903
1927
  height: 1rem;
@@ -2327,9 +2351,13 @@
2327
2351
  --popup-text-inverted-color: #fff;
2328
2352
  --select-highlight-color: #339af0;
2329
2353
  --shadow-island:
2330
- 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
2331
- 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
2354
+ 0px 0px 1px 0px rgba(0, 0, 0, 0.17),
2355
+ 0px 0px 3px 0px rgba(0, 0, 0, 0.08),
2332
2356
  0px 7px 14px 0px rgba(0, 0, 0, 0.05);
2357
+ --shadow-island-stronger:
2358
+ 0px 0px 1px 0px rgba(0, 0, 0, 0.17),
2359
+ 0px 0px 3px 0px rgba(0, 0, 0, 0.08),
2360
+ 0px 7px 14px 0px rgb(0 0 0 / 18%);
2333
2361
  --button-hover-bg: var(--color-surface-high);
2334
2362
  --button-active-bg: var(--color-surface-high);
2335
2363
  --button-active-border: var(--color-brand-active);
@@ -2370,6 +2398,7 @@
2370
2398
  --chat-msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
2371
2399
  --space-factor: 0.25rem;
2372
2400
  --text-primary-color: var(--color-on-surface);
2401
+ --text-secondary-color: #6f6f78;
2373
2402
  --color-selection: #6965db;
2374
2403
  --color-icon-white: #fff;
2375
2404
  --color-primary: #6965db;
@@ -2490,10 +2519,6 @@
2490
2519
  --popup-text-color: #ced4da;
2491
2520
  --popup-text-inverted-color: #2c2c2c;
2492
2521
  --select-highlight-color: #4dabf7;
2493
- --shadow-island:
2494
- 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
2495
- 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
2496
- 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
2497
2522
  --modal-shadow:
2498
2523
  0px 100px 80px rgba(0, 0, 0, 0.07),
2499
2524
  0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
@@ -2507,6 +2532,7 @@
2507
2532
  --color-slider-track: hsl(244, 23%, 39%);
2508
2533
  --color-selection: #3530c4;
2509
2534
  --color-icon-white: var(--color-gray-90);
2535
+ --text-secondary-color: #b8b7c6;
2510
2536
  --color-primary: #a8a5ff;
2511
2537
  --color-primary-darker: #b2aeff;
2512
2538
  --color-primary-darkest: #beb9ff;
@@ -4069,14 +4095,16 @@
4069
4095
  border-radius: 10px;
4070
4096
  background: var(--RadioGroup-background);
4071
4097
  border: 1px solid var(--RadioGroup-border);
4098
+ gap: 2px;
4072
4099
  }
4073
4100
  .excalidraw .RadioGroup__choice {
4074
4101
  position: relative;
4075
4102
  display: flex;
4076
4103
  align-items: center;
4077
4104
  justify-content: center;
4078
- width: 32px;
4105
+ min-width: 20px;
4079
4106
  height: 24px;
4107
+ padding: 0 0.375rem;
4080
4108
  color: var(--RadioGroup-choice-color-off);
4081
4109
  background: var(--RadioGroup-choice-background-off);
4082
4110
  border-radius: 8px;
@@ -4155,7 +4183,7 @@
4155
4183
  color: var(--text-color);
4156
4184
  background-color: var(--back-color);
4157
4185
  border-color: var(--border-color);
4158
- border-radius: 0.5rem;
4186
+ border-radius: var(--border-radius-lg);
4159
4187
  border-width: 1px;
4160
4188
  border-style: solid;
4161
4189
  font-family: var(--font-family);
@@ -4390,6 +4418,17 @@
4390
4418
  .excalidraw .ExcButton--size-medium .ExcButton__contents {
4391
4419
  gap: 0.5rem;
4392
4420
  }
4421
+ .excalidraw .ExcButton--size-small {
4422
+ font-weight: 600;
4423
+ font-size: 0.675rem;
4424
+ min-height: 2rem;
4425
+ padding: 0.25rem 0.75rem;
4426
+ letter-spacing: normal;
4427
+ border-radius: var(--border-radius-md);
4428
+ }
4429
+ .excalidraw .ExcButton--size-small .ExcButton__contents {
4430
+ gap: 0.375rem;
4431
+ }
4393
4432
  .excalidraw .ExcButton--variant-icon {
4394
4433
  padding: 0.5rem 0.75rem;
4395
4434
  width: 3rem;
@@ -4627,6 +4666,301 @@
4627
4666
  padding-inline: 2.5rem;
4628
4667
  }
4629
4668
 
4669
+ /* components/AI/ChatMessage.scss */
4670
+ .ai-chat-message {
4671
+ display: flex;
4672
+ flex-direction: column;
4673
+ gap: 0.35rem;
4674
+ position: relative;
4675
+ padding-bottom: 0.5rem;
4676
+ }
4677
+ .ai-chat-message--user {
4678
+ flex-direction: column;
4679
+ align-items: flex-end;
4680
+ gap: 0.5rem;
4681
+ }
4682
+ .ai-chat-message--user .ai-chat-message__bubble {
4683
+ align-self: flex-end;
4684
+ background: var(--color-primary-light);
4685
+ border-radius: 0.5rem;
4686
+ max-width: 80%;
4687
+ }
4688
+ .ai-chat-message--user .ai-chat-message__actions {
4689
+ opacity: 1;
4690
+ position: static;
4691
+ justify-content: flex-end;
4692
+ align-self: flex-end;
4693
+ }
4694
+ .ai-chat-message--assistant {
4695
+ flex-direction: column;
4696
+ align-items: flex-start;
4697
+ width: 100%;
4698
+ padding-bottom: 2.5rem;
4699
+ }
4700
+ .ai-chat-message--assistant .ai-chat-message__bubble {
4701
+ background: transparent;
4702
+ border-radius: 0.5rem;
4703
+ position: relative;
4704
+ width: 100%;
4705
+ box-sizing: border-box;
4706
+ padding-bottom: 0.75rem;
4707
+ user-select: text;
4708
+ -webkit-user-select: text;
4709
+ }
4710
+ .ai-chat-message--assistant .ai-chat-message__actions {
4711
+ justify-content: flex-start;
4712
+ width: 100%;
4713
+ pointer-events: auto;
4714
+ z-index: 1;
4715
+ margin-top: 0.5rem;
4716
+ }
4717
+ .ai-chat-message--system {
4718
+ justify-content: flex-start;
4719
+ }
4720
+ .ai-chat-message--system .ai-chat-message__bubble {
4721
+ background: var(--color-warning);
4722
+ color: var(--color-warning-color);
4723
+ border-radius: 0.5rem;
4724
+ min-width: 6rem;
4725
+ }
4726
+ .ai-chat-message--system .ai-chat-message__bubble .ai-chat-message__header-label,
4727
+ .ai-chat-message--system .ai-chat-message__bubble .ai-chat-message__header-timestamp {
4728
+ color: inherit;
4729
+ }
4730
+ .ai-chat-message--error:hover .ai-chat-message__actions {
4731
+ opacity: 1;
4732
+ }
4733
+ .ai-chat-message--error .ai-chat-message__bubble {
4734
+ background: transparent;
4735
+ border-radius: 0.5rem;
4736
+ position: relative;
4737
+ width: 100%;
4738
+ box-sizing: border-box;
4739
+ padding-bottom: 0.75rem;
4740
+ }
4741
+ .ai-chat-message--error .ai-chat-message__actions {
4742
+ justify-content: flex-start;
4743
+ width: 100%;
4744
+ opacity: 1;
4745
+ }
4746
+ .ai-chat-message__actions {
4747
+ display: flex;
4748
+ align-items: center;
4749
+ gap: 0.75rem;
4750
+ transition: opacity 0.2s ease;
4751
+ }
4752
+ .ai-chat-message__bubble {
4753
+ border-radius: var(--border-radius-md);
4754
+ padding: 0.75rem;
4755
+ display: flex;
4756
+ flex-direction: column;
4757
+ gap: 0.35rem;
4758
+ }
4759
+ .ai-chat-message__header {
4760
+ display: flex;
4761
+ align-items: center;
4762
+ justify-content: space-between;
4763
+ gap: 0.25rem;
4764
+ }
4765
+ .ai-chat-message__header-label {
4766
+ font-family: var(--ui-font, system-ui, sans-serif);
4767
+ font-size: 0.75rem;
4768
+ font-weight: 600;
4769
+ font-variation-settings: "wght" 600;
4770
+ color: var(--text-primary-color);
4771
+ white-space: nowrap;
4772
+ overflow: hidden;
4773
+ text-overflow: ellipsis;
4774
+ }
4775
+ .ai-chat-message__header-timestamp {
4776
+ font-size: 0.625rem;
4777
+ font-weight: 400;
4778
+ color: var(--color-on-surface, var(--text-secondary-color));
4779
+ white-space: nowrap;
4780
+ }
4781
+ .ai-chat-message__image {
4782
+ max-width: 100%;
4783
+ margin-bottom: 0.5rem;
4784
+ border-radius: 8px;
4785
+ overflow: hidden;
4786
+ cursor: pointer;
4787
+ background: var(--default-bg-color);
4788
+ }
4789
+ .ai-chat-message__image img {
4790
+ display: block;
4791
+ width: 100%;
4792
+ height: auto;
4793
+ object-fit: contain;
4794
+ max-height: 200px;
4795
+ }
4796
+ .ai-chat-message__image:hover {
4797
+ opacity: 0.9;
4798
+ }
4799
+ .ai-chat-message__image:focus-visible {
4800
+ outline: 2px solid var(--color-primary);
4801
+ outline-offset: 2px;
4802
+ }
4803
+ .ai-chat-message__content {
4804
+ white-space: pre-wrap;
4805
+ word-break: break-word;
4806
+ user-select: text;
4807
+ -webkit-user-select: text;
4808
+ line-height: 1.5;
4809
+ }
4810
+ .ai-chat-message__content--pending {
4811
+ color: var(--text-secondary-color);
4812
+ }
4813
+ .ai-chat-message__cursor {
4814
+ display: inline-block;
4815
+ margin-left: 2px;
4816
+ color: currentColor;
4817
+ animation: ai-chat-cursor-blink 1s infinite;
4818
+ }
4819
+ .ai-chat-message__preview {
4820
+ margin-top: 0.35rem;
4821
+ background: transparent;
4822
+ padding: 0;
4823
+ display: flex;
4824
+ align-items: center;
4825
+ justify-content: center;
4826
+ position: relative;
4827
+ cursor: pointer;
4828
+ outline: none;
4829
+ border-radius: var(--border-radius-md);
4830
+ overflow: hidden;
4831
+ }
4832
+ .ai-chat-message__preview img {
4833
+ width: 100%;
4834
+ height: auto;
4835
+ object-fit: contain;
4836
+ display: block;
4837
+ }
4838
+ .ai-chat-message__preview:focus-visible {
4839
+ outline: 2px solid var(--color-primary);
4840
+ outline-offset: 2px;
4841
+ }
4842
+ .ai-chat-message__action {
4843
+ display: inline-flex;
4844
+ align-items: center;
4845
+ justify-content: center;
4846
+ background: none;
4847
+ border: none;
4848
+ cursor: pointer;
4849
+ padding: 0.25rem 0;
4850
+ margin: 0;
4851
+ color: var(--text-secondary-color);
4852
+ transition: color 0.2s ease, transform 0.2s ease;
4853
+ flex-shrink: 0;
4854
+ gap: 0.25rem;
4855
+ }
4856
+ .ai-chat-message__action svg {
4857
+ width: 0.875rem;
4858
+ height: 0.875rem;
4859
+ opacity: 1;
4860
+ color: currentColor;
4861
+ }
4862
+ .ai-chat-message__action:hover:not(:disabled) {
4863
+ color: var(--color-primary);
4864
+ }
4865
+ .ai-chat-message__action:focus-visible {
4866
+ outline: none;
4867
+ box-shadow: 0 0 0 2px rgba(105, 101, 219, 0.35);
4868
+ }
4869
+ .ai-chat-message__action:disabled {
4870
+ opacity: 0.4;
4871
+ cursor: not-allowed;
4872
+ }
4873
+ .ai-chat-message__action__label {
4874
+ font-size: 12px;
4875
+ font-family: monospace;
4876
+ word-spacing: -2px;
4877
+ }
4878
+ .ai-chat-message__action--danger {
4879
+ margin-left: auto;
4880
+ }
4881
+ .ai-chat-message__action--danger:hover:not(:disabled) {
4882
+ color: var(--color-danger);
4883
+ }
4884
+ .ai-chat-message__action--invisible {
4885
+ visibility: hidden;
4886
+ pointer-events: none;
4887
+ }
4888
+ @keyframes ai-chat-cursor-blink {
4889
+ 0%, 50% {
4890
+ opacity: 1;
4891
+ }
4892
+ 51%, 100% {
4893
+ opacity: 0;
4894
+ }
4895
+ }
4896
+ .ai-chat-message__error-details {
4897
+ margin-top: 0.35rem;
4898
+ font-size: 0.85rem;
4899
+ }
4900
+ .ai-chat-message__error-message {
4901
+ color: var(--color-error, #d64045);
4902
+ line-height: 1.35;
4903
+ }
4904
+ .ai-chat-message__error-hint {
4905
+ margin-top: 0.2rem;
4906
+ color: var(--text-secondary-color);
4907
+ line-height: 1.35;
4908
+ }
4909
+ .ai-chat-message__error-text {
4910
+ color: var(--color-danger);
4911
+ font-weight: 500;
4912
+ white-space: pre-wrap;
4913
+ word-wrap: break-word;
4914
+ }
4915
+ .ai-chat-message__error-actions {
4916
+ display: flex;
4917
+ flex-direction: column;
4918
+ gap: 0;
4919
+ }
4920
+ .ai-chat-message__error-link {
4921
+ display: flex;
4922
+ align-items: center;
4923
+ background: none;
4924
+ border: none;
4925
+ cursor: pointer;
4926
+ font-size: 0.875rem;
4927
+ font-weight: 500;
4928
+ padding: 0;
4929
+ margin-top: 0.5rem;
4930
+ text-decoration: underline;
4931
+ font-family: inherit;
4932
+ color: var(--link-color);
4933
+ }
4934
+ .ai-chat-message__error-link:hover {
4935
+ color: var(--link-color-hover);
4936
+ }
4937
+ .ai-chat-message__error-link:active {
4938
+ color: var(--link-color-active);
4939
+ }
4940
+ .ai-chat-message__error-link:disabled {
4941
+ cursor: not-allowed;
4942
+ text-decoration: none;
4943
+ }
4944
+ .ai-chat-message__shimmer {
4945
+ background:
4946
+ linear-gradient(
4947
+ 90deg,
4948
+ var(--fg-muted) 0%,
4949
+ var(--text-primary-color) 25%,
4950
+ var(--color-primary) 50%,
4951
+ var(--text-primary-color) 75%,
4952
+ var(--fg-muted) 100%);
4953
+ background-size: 200% auto;
4954
+ -webkit-text-fill-color: transparent;
4955
+ animation: ai-shimmer 1.5s linear infinite;
4956
+ font-weight: 600;
4957
+ }
4958
+ @keyframes ai-shimmer {
4959
+ to {
4960
+ background-position: 200% center;
4961
+ }
4962
+ }
4963
+
4630
4964
  /* components/TTDDialog/TTDDialog.scss */
4631
4965
  .excalidraw.theme--dark .chat-message--assistant .chat-message__content {
4632
4966
  background: var(--color-surface-lowest);
@@ -4772,146 +5106,80 @@
4772
5106
  .excalidraw .chat-interface__send-button svg {
4773
5107
  transform: rotate(-90deg);
4774
5108
  }
4775
- .excalidraw .chat-message {
4776
- display: flex;
5109
+ .excalidraw .ai-chat-message--ttd {
5110
+ flex-direction: row;
4777
5111
  align-items: center;
4778
- gap: 0.5rem;
5112
+ padding-bottom: 0;
4779
5113
  }
4780
- .excalidraw .chat-message--user {
5114
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--user {
4781
5115
  justify-content: flex-end;
5116
+ flex-direction: row;
4782
5117
  }
4783
- .excalidraw .chat-message--user .chat-message__content {
5118
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--user .ai-chat-message__bubble {
4784
5119
  background: var(--color-primary-light);
4785
5120
  color: var(--text-primary-color);
4786
- border-radius: var(--border-radius-md);
5121
+ border: none;
5122
+ max-width: 80%;
4787
5123
  min-width: 6rem;
5124
+ padding: 0.75rem 1rem;
5125
+ box-shadow: var(--chat-msg-shadow);
4788
5126
  }
4789
- .excalidraw .chat-message--assistant {
5127
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--assistant {
4790
5128
  flex-direction: column;
4791
5129
  justify-content: flex-start;
4792
5130
  align-items: flex-start;
5131
+ padding-bottom: 0;
4793
5132
  }
4794
- .excalidraw .chat-message--assistant .chat-message__content {
5133
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--assistant .ai-chat-message__bubble {
4795
5134
  background: var(--color-surface-low);
4796
5135
  color: var(--color-on-surface);
4797
- border-radius: var(--border-radius-md);
5136
+ border: none;
5137
+ max-width: min(540px, 100%);
4798
5138
  min-width: 6rem;
5139
+ padding: 0.75rem 1rem;
5140
+ box-shadow: var(--chat-msg-shadow);
4799
5141
  }
4800
- .excalidraw .chat-message--assistant .chat-message__content .chat-message__body {
5142
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--assistant .ai-chat-message__bubble .ai-chat-message__content {
4801
5143
  font-family: monospace;
4802
5144
  }
4803
- .excalidraw .chat-message--system {
5145
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--assistant .ai-chat-message__actions {
5146
+ margin-top: 0;
5147
+ }
5148
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--system {
4804
5149
  justify-content: flex-start;
4805
- margin-bottom: 0;
4806
5150
  }
4807
- .excalidraw .chat-message--system .chat-message__content {
5151
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--system .ai-chat-message__bubble {
4808
5152
  background: var(--color-warning);
4809
- color: var(--color-on-surface);
4810
- border-radius: var(--border-radius-md);
5153
+ color: var(--color-warning-color);
5154
+ border: none;
5155
+ max-width: 80%;
4811
5156
  min-width: 6rem;
5157
+ padding: 0.75rem 1rem;
5158
+ box-shadow: var(--chat-msg-shadow);
5159
+ }
5160
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--system .ai-chat-message__bubble .ai-chat-message__header-label,
5161
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--system .ai-chat-message__bubble .ai-chat-message__header-timestamp {
5162
+ color: inherit;
4812
5163
  }
4813
- .excalidraw .chat-message--system .chat-message__content .chat-message__body {
5164
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--system .ai-chat-message__bubble .ai-chat-message__content {
4814
5165
  font-family: monospace;
4815
5166
  }
4816
- .excalidraw .chat-message__content {
5167
+ .excalidraw .ai-chat-message--ttd.ai-chat-message--error .ai-chat-message__bubble {
5168
+ background: var(--color-surface-low);
5169
+ border: none;
4817
5170
  max-width: 80%;
5171
+ min-width: 6rem;
4818
5172
  padding: 0.75rem 1rem;
4819
5173
  box-shadow: var(--chat-msg-shadow);
4820
5174
  }
4821
- .excalidraw .chat-message__header {
4822
- display: flex;
4823
- justify-content: space-between;
4824
- align-items: center;
4825
- gap: 1rem;
5175
+ .excalidraw .ai-chat-message--ttd .ai-chat-message__header {
4826
5176
  margin-bottom: 0.5rem;
4827
- font-size: 0.75rem;
4828
- }
4829
- .excalidraw .chat-message__role {
4830
- font-weight: 600;
4831
- }
4832
- .excalidraw .chat-message__timestamp {
4833
- font-size: 0.625rem;
4834
- }
4835
- .excalidraw .chat-message__actions {
4836
- display: flex;
4837
- align-items: center;
4838
- gap: 0.5rem;
4839
- }
4840
- .excalidraw .chat-message__action {
4841
- display: inline-flex;
4842
- align-items: center;
4843
- justify-content: center;
4844
- background: none;
4845
- border: none;
4846
- cursor: pointer;
4847
- padding: 0.25rem 0;
4848
- color: var(--color-gray-60);
4849
- transition: color 0.2s ease;
4850
- flex-shrink: 0;
4851
- }
4852
- .excalidraw .chat-message__action.invisible {
4853
- visibility: hidden;
4854
- pointer-events: none;
4855
- }
4856
- .excalidraw .chat-message__action:hover {
4857
- color: var(--color-primary);
4858
- }
4859
- .excalidraw .chat-message__action svg {
4860
- width: 14px;
4861
- height: 14px;
4862
- }
4863
- .excalidraw .chat-message__action--danger:hover {
4864
- color: var(--color-danger);
4865
- }
4866
- .excalidraw .chat-message__body {
4867
- line-height: 1.5;
4868
- }
4869
- .excalidraw .chat-message__text {
4870
- white-space: pre-wrap;
4871
- word-wrap: break-word;
4872
- }
4873
- .excalidraw .chat-message__cursor {
4874
- display: inline-block;
4875
- margin-left: 2px;
4876
- color: currentColor;
4877
- animation: blink 1s infinite;
4878
- }
4879
- .excalidraw .chat-message__loading {
4880
- display: flex;
4881
- align-items: center;
4882
- gap: 0.5rem;
4883
- }
4884
- .excalidraw .chat-message__typing-indicator {
4885
- display: flex;
4886
- gap: 0.25rem;
4887
- }
4888
- .excalidraw .chat-message__typing-indicator span {
4889
- width: 6px;
4890
- height: 6px;
4891
- border-radius: 50%;
4892
- background: currentColor;
4893
- opacity: 0.4;
4894
- animation: typing 1.4s infinite ease-in-out;
4895
- }
4896
- .excalidraw .chat-message__typing-indicator span:nth-child(1) {
4897
- animation-delay: -0.32s;
4898
- }
4899
- .excalidraw .chat-message__typing-indicator span:nth-child(2) {
4900
- animation-delay: -0.16s;
4901
- }
4902
- .excalidraw .chat-message__typing-indicator span:nth-child(3) {
4903
- animation-delay: 0s;
5177
+ gap: 1rem;
4904
5178
  }
4905
- .excalidraw .chat-message__error {
4906
- color: var(--color-danger);
4907
- font-weight: 500;
4908
- white-space: pre-wrap;
4909
- word-wrap: break-word;
4910
- display: flex;
4911
- flex-direction: column;
4912
- gap: 0.5rem;
5179
+ .excalidraw .ai-chat-message--ttd .ai-chat-message__action--danger {
5180
+ margin-left: 0;
4913
5181
  }
4914
- .excalidraw .chat-message__error_message {
5182
+ .excalidraw .ai-chat-message--ttd .ai-chat-message__error-message {
4915
5183
  background: var(--color-warning-background);
4916
5184
  color: var(--color-warning-color);
4917
5185
  padding: 0.5rem 0.75rem;
@@ -4919,47 +5187,11 @@
4919
5187
  margin-top: 1rem;
4920
5188
  font-size: 0.875rem;
4921
5189
  }
4922
- .excalidraw .chat-message__error-link {
4923
- display: flex;
4924
- align-items: center;
4925
- background: none;
4926
- border: none;
4927
- cursor: pointer;
4928
- font-size: 0.875rem;
4929
- font-weight: 500;
4930
- padding: 0;
4931
- margin-top: 1rem;
4932
- text-decoration: underline;
4933
- font-family: inherit;
4934
- color: var(--link-color);
4935
- }
4936
- .excalidraw .chat-message__error-link:hover {
4937
- color: var(--link-color-hover);
4938
- }
4939
- .excalidraw .chat-message__error-link:active {
4940
- color: var(--link-color-active);
4941
- }
4942
- .excalidraw .chat-message__error-link:disabled {
4943
- cursor: not-allowed;
4944
- text-decoration: none;
4945
- }
4946
- @keyframes typing {
4947
- 0%, 80%, 100% {
4948
- transform: scale(0.8);
4949
- opacity: 0.4;
4950
- }
4951
- 40% {
4952
- transform: scale(1);
4953
- opacity: 1;
4954
- }
5190
+ .excalidraw.theme--dark .ai-chat-message--ttd.ai-chat-message--assistant .ai-chat-message__bubble {
5191
+ background: var(--color-surface-lowest);
4955
5192
  }
4956
- @keyframes blink {
4957
- 0%, 50% {
4958
- opacity: 1;
4959
- }
4960
- 51%, 100% {
4961
- opacity: 0;
4962
- }
5193
+ .excalidraw.theme--dark .ai-chat-message--ttd.ai-chat-message--system .ai-chat-message__bubble {
5194
+ color: var(--color-warning-color);
4963
5195
  }
4964
5196
  .excalidraw .Modal.Dialog.ttd-dialog {
4965
5197
  padding: 1.25rem;
@@ -5157,6 +5389,39 @@
5157
5389
  height: 100%;
5158
5390
  }
5159
5391
  }
5392
+ .excalidraw .ttd-dialog-input--loading {
5393
+ display: flex;
5394
+ align-items: center;
5395
+ justify-content: center;
5396
+ }
5397
+ .excalidraw .ttd-dialog-input--codemirror {
5398
+ padding: 0;
5399
+ overflow: hidden;
5400
+ height: 0;
5401
+ flex: 1 1 0;
5402
+ min-height: 0;
5403
+ }
5404
+ .excalidraw .ttd-dialog-input--codemirror .cm-editor {
5405
+ height: 100%;
5406
+ font-family: monospace;
5407
+ }
5408
+ .excalidraw .ttd-dialog-input--codemirror .cm-editor.cm-focused {
5409
+ outline: none;
5410
+ }
5411
+ .excalidraw .ttd-dialog-input--codemirror .cm-scroller {
5412
+ padding: 0.85rem 0;
5413
+ overflow: auto;
5414
+ }
5415
+ .excalidraw .ttd-dialog-input--codemirror .cm-gutters {
5416
+ padding-left: 0.25rem;
5417
+ }
5418
+ .excalidraw .ttd-dialog-input--codemirror .cm-content {
5419
+ padding: 0;
5420
+ }
5421
+ .excalidraw .ttd-dialog-input--codemirror .cm-placeholder {
5422
+ color: var(--color-gray-40);
5423
+ font-style: italic;
5424
+ }
5160
5425
  .excalidraw .ttd-dialog-output-wrapper {
5161
5426
  display: flex;
5162
5427
  flex-direction: column;
@@ -5257,15 +5522,49 @@
5257
5522
  text-align: center;
5258
5523
  margin-top: 0.25rem;
5259
5524
  }
5525
+ .excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-summary {
5526
+ width: 100%;
5527
+ max-width: 640px;
5528
+ color: var(--color-gray-50);
5529
+ font-size: 0.9rem;
5530
+ text-align: left;
5531
+ }
5532
+ .excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-summary__headline {
5533
+ font-weight: 600;
5534
+ color: var(--color-gray-60);
5535
+ }
5536
+ .excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-summary__label {
5537
+ margin-top: 0.35rem;
5538
+ font-weight: 500;
5539
+ }
5540
+ .excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-summary__causes {
5541
+ margin: 0.35rem 0 0;
5542
+ padding-left: 2rem;
5543
+ }
5260
5544
  .excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-message {
5261
5545
  text-align: left;
5262
5546
  font-weight: 400;
5263
5547
  color: var(--color-gray-50);
5264
5548
  word-break: break-word;
5265
5549
  white-space: pre-wrap;
5266
- max-width: 100%;
5550
+ max-width: 640px;
5551
+ width: 100%;
5267
5552
  font-family: monospace;
5268
5553
  }
5554
+ .excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-message__caret {
5555
+ color: var(--color-danger);
5556
+ }
5557
+ .excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-autofix-slot {
5558
+ align-self: flex-start;
5559
+ margin-top: 0.35rem;
5560
+ min-height: 2.5rem;
5561
+ display: flex;
5562
+ align-items: flex-start;
5563
+ }
5564
+ .excalidraw .ttd-dialog-output-error .ttd-dialog-output-error-autofix {
5565
+ margin-top: 0;
5566
+ white-space: nowrap;
5567
+ }
5269
5568
  .excalidraw .ttd-dialog-panels {
5270
5569
  height: 100%;
5271
5570
  }
@@ -6339,6 +6638,9 @@
6339
6638
  .excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-right {
6340
6639
  margin-top: auto;
6341
6640
  margin-bottom: auto;
6641
+ display: flex;
6642
+ align-items: center;
6643
+ gap: 0.5rem;
6342
6644
  }
6343
6645
  .excalidraw .disable-view-mode {
6344
6646
  display: flex;
@@ -6908,9 +7210,13 @@
6908
7210
  --popup-text-inverted-color: #fff;
6909
7211
  --select-highlight-color: #339af0;
6910
7212
  --shadow-island:
6911
- 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
6912
- 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
7213
+ 0px 0px 1px 0px rgba(0, 0, 0, 0.17),
7214
+ 0px 0px 3px 0px rgba(0, 0, 0, 0.08),
6913
7215
  0px 7px 14px 0px rgba(0, 0, 0, 0.05);
7216
+ --shadow-island-stronger:
7217
+ 0px 0px 1px 0px rgba(0, 0, 0, 0.17),
7218
+ 0px 0px 3px 0px rgba(0, 0, 0, 0.08),
7219
+ 0px 7px 14px 0px rgb(0 0 0 / 18%);
6914
7220
  --button-hover-bg: var(--color-surface-high);
6915
7221
  --button-active-bg: var(--color-surface-high);
6916
7222
  --button-active-border: var(--color-brand-active);
@@ -6951,6 +7257,7 @@
6951
7257
  --chat-msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
6952
7258
  --space-factor: 0.25rem;
6953
7259
  --text-primary-color: var(--color-on-surface);
7260
+ --text-secondary-color: #6f6f78;
6954
7261
  --color-selection: #6965db;
6955
7262
  --color-icon-white: #fff;
6956
7263
  --color-primary: #6965db;
@@ -7071,10 +7378,6 @@
7071
7378
  --popup-text-color: #ced4da;
7072
7379
  --popup-text-inverted-color: #2c2c2c;
7073
7380
  --select-highlight-color: #4dabf7;
7074
- --shadow-island:
7075
- 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
7076
- 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
7077
- 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
7078
7381
  --modal-shadow:
7079
7382
  0px 100px 80px rgba(0, 0, 0, 0.07),
7080
7383
  0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
@@ -7088,6 +7391,7 @@
7088
7391
  --color-slider-track: hsl(244, 23%, 39%);
7089
7392
  --color-selection: #3530c4;
7090
7393
  --color-icon-white: var(--color-gray-90);
7394
+ --text-secondary-color: #b8b7c6;
7091
7395
  --color-primary: #a8a5ff;
7092
7396
  --color-primary-darker: #b2aeff;
7093
7397
  --color-primary-darkest: #beb9ff;
@@ -7144,6 +7448,7 @@
7144
7448
  --zIndex-ui-top: 100;
7145
7449
  --zIndex-ui-main-menu: 110;
7146
7450
  --zIndex-ui-library: 120;
7451
+ --zIndex-ui-tta-chat: 130;
7147
7452
  --zIndex-modal: 1000;
7148
7453
  --zIndex-popup: 1001;
7149
7454
  --zIndex-toast: 999999;
@@ -7620,6 +7925,24 @@ body.excalidraw-cursor-resize * {
7620
7925
  .excalidraw .scroll-back-to-content:active {
7621
7926
  border: 1px solid var(--button-active-border);
7622
7927
  }
7928
+ .excalidraw .floating-status-stack {
7929
+ position: absolute;
7930
+ left: 50%;
7931
+ bottom: 30px;
7932
+ transform: translateX(-50%);
7933
+ display: flex;
7934
+ flex-direction: column;
7935
+ align-items: center;
7936
+ gap: 0.5rem;
7937
+ pointer-events: none;
7938
+ }
7939
+ .excalidraw .floating-status-stack .scroll-back-to-content {
7940
+ position: static;
7941
+ left: auto;
7942
+ bottom: auto;
7943
+ transform: none;
7944
+ pointer-events: var(--ui-pointerEvents);
7945
+ }
7623
7946
  .excalidraw .help-icon {
7624
7947
  display: flex;
7625
7948
  justify-content: center;
@@ -7974,4 +8297,1952 @@ body.excalidraw-cursor-resize * {
7974
8297
  style: normal;
7975
8298
  display: swap;
7976
8299
  }
8300
+
8301
+ /* TTA/TTADialog.scss */
8302
+ .excalidraw,
8303
+ .exc-style {
8304
+ --theme-filter: none;
8305
+ --button-destructive-bg-color: #ffe3e3;
8306
+ --button-destructive-color: #c92a2a;
8307
+ --button-gray-1: #e9ecef;
8308
+ --button-gray-2: #ced4da;
8309
+ --button-gray-3: #adb5bd;
8310
+ --mobile-action-button-bg: rgba(255, 255, 255, 0.35);
8311
+ --mobile-color-border: var(--default-border-color);
8312
+ --button-special-active-bg-color: #ebfbee;
8313
+ --dialog-border-color: var(--color-gray-20);
8314
+ --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
8315
+ --focus-highlight-color: #a5d8ff;
8316
+ --icon-fill-color: var(--color-on-surface);
8317
+ --icon-green-fill-color: #2b8a3e;
8318
+ --default-bg-color: #fff;
8319
+ --input-bg-color: #fff;
8320
+ --input-border-color: #ced4da;
8321
+ --input-hover-bg-color: #f1f3f5;
8322
+ --input-label-color: #495057;
8323
+ --island-bg-color: #ffffff;
8324
+ --island-bg-color-alt: #fff;
8325
+ --keybinding-color: var(--color-gray-40);
8326
+ --link-color: #1c7ed6;
8327
+ --link-color-hover: #1971c2;
8328
+ --link-color-active: #a5d8ff;
8329
+ --overlay-bg-color: rgba(255, 255, 255, 0.88);
8330
+ --popup-bg-color: var(--island-bg-color);
8331
+ --popup-secondary-bg-color: #f1f3f5;
8332
+ --popup-text-color: #000;
8333
+ --popup-text-inverted-color: #fff;
8334
+ --select-highlight-color: #339af0;
8335
+ --shadow-island:
8336
+ 0px 0px 1px 0px rgba(0, 0, 0, 0.17),
8337
+ 0px 0px 3px 0px rgba(0, 0, 0, 0.08),
8338
+ 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
8339
+ --shadow-island-stronger:
8340
+ 0px 0px 1px 0px rgba(0, 0, 0, 0.17),
8341
+ 0px 0px 3px 0px rgba(0, 0, 0, 0.08),
8342
+ 0px 7px 14px 0px rgb(0 0 0 / 18%);
8343
+ --button-hover-bg: var(--color-surface-high);
8344
+ --button-active-bg: var(--color-surface-high);
8345
+ --button-active-border: var(--color-brand-active);
8346
+ --default-border-color: var(--color-surface-high);
8347
+ --default-button-size: 2rem;
8348
+ --default-icon-size: 1rem;
8349
+ --lg-button-size: 2.25rem;
8350
+ --lg-icon-size: 1rem;
8351
+ --editor-container-padding: 1rem;
8352
+ --mobile-action-button-size: 2rem;
8353
+ --scrollbar-thumb: var(--button-gray-2);
8354
+ --scrollbar-thumb-hover: var(--button-gray-3);
8355
+ --color-slider-track: hsl(240, 100%, 90%);
8356
+ --color-slider-thumb: var(--color-gray-80);
8357
+ --modal-shadow:
8358
+ 0px 100px 80px rgba(0, 0, 0, 0.07),
8359
+ 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
8360
+ 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
8361
+ 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
8362
+ 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
8363
+ 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
8364
+ --avatar-border-color: var(--color-gray-20);
8365
+ --sidebar-shadow:
8366
+ 0px 100px 80px rgba(0, 0, 0, 0.07),
8367
+ 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
8368
+ 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
8369
+ 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
8370
+ 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
8371
+ 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
8372
+ --sidebar-border-color: var(--color-surface-high);
8373
+ --sidebar-bg-color: var(--island-bg-color);
8374
+ --library-dropdown-shadow:
8375
+ 0px 15px 6px rgba(0, 0, 0, 0.01),
8376
+ 0px 8px 5px rgba(0, 0, 0, 0.05),
8377
+ 0px 4px 4px rgba(0, 0, 0, 0.09),
8378
+ 0px 1px 2px rgba(0, 0, 0, 0.1),
8379
+ 0px 0px 0px rgba(0, 0, 0, 0.1);
8380
+ --chat-msg-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
8381
+ --space-factor: 0.25rem;
8382
+ --text-primary-color: var(--color-on-surface);
8383
+ --text-secondary-color: #6f6f78;
8384
+ --color-selection: #6965db;
8385
+ --color-icon-white: #fff;
8386
+ --color-primary: #6965db;
8387
+ --color-primary-darker: #5b57d1;
8388
+ --color-primary-darkest: #4a47b1;
8389
+ --color-primary-light: #e3e2fe;
8390
+ --color-primary-light-darker: #d7d5ff;
8391
+ --color-primary-hover: #5753d0;
8392
+ --color-gray-10: #f5f5f5;
8393
+ --color-gray-20: #ebebeb;
8394
+ --color-gray-30: #d6d6d6;
8395
+ --color-gray-40: #b8b8b8;
8396
+ --color-gray-50: #999999;
8397
+ --color-gray-60: #7a7a7a;
8398
+ --color-gray-70: #5c5c5c;
8399
+ --color-gray-80: #3d3d3d;
8400
+ --color-gray-85: #242424;
8401
+ --color-gray-90: #1e1e1e;
8402
+ --color-gray-100: #121212;
8403
+ --color-disabled: var(--color-gray-40);
8404
+ --color-warning: #fceeca;
8405
+ --color-warning-dark: #f5c354;
8406
+ --color-warning-darker: #f3ab2c;
8407
+ --color-warning-darkest: #ec8b14;
8408
+ --color-text-warning: var(--text-primary-color);
8409
+ --color-danger: #db6965;
8410
+ --color-danger-dark: #db6965;
8411
+ --color-danger-darker: #d65550;
8412
+ --color-danger-darkest: #d1413c;
8413
+ --color-danger-text: black;
8414
+ --color-danger-background: #fff0f0;
8415
+ --color-danger-icon-background: #ffdad6;
8416
+ --color-danger-color: #700000;
8417
+ --color-danger-icon-color: #700000;
8418
+ --color-warning-background: var(--color-warning);
8419
+ --color-warning-icon-background: var(--color-warning-dark);
8420
+ --color-warning-color: var(--text-primary-color);
8421
+ --color-warning-icon-color: var(--text-primary-color);
8422
+ --color-muted: var(--color-gray-30);
8423
+ --color-muted-darker: var(--color-gray-60);
8424
+ --color-muted-darkest: var(--color-gray-100);
8425
+ --color-muted-background: var(--color-gray-80);
8426
+ --color-muted-background-darker: var(--color-gray-100);
8427
+ --color-promo: var(--color-primary);
8428
+ --color-success: #cafccc;
8429
+ --color-success-darker: #bafabc;
8430
+ --color-success-darkest: #a5eba8;
8431
+ --color-success-text: #268029;
8432
+ --color-success-contrast: #65bb6a;
8433
+ --color-success-contrast-hover: #6bcf70;
8434
+ --color-success-contrast-active: #6edf74;
8435
+ --color-logo-icon: var(--color-primary);
8436
+ --color-logo-text: #190064;
8437
+ --border-radius-md: 0.375rem;
8438
+ --border-radius-lg: 0.5rem;
8439
+ --color-surface-high: #f1f0ff;
8440
+ --color-surface-mid: #f6f6f9;
8441
+ --color-surface-low: #ececf4;
8442
+ --color-surface-lowest: #ffffff;
8443
+ --color-on-surface: #1b1b1f;
8444
+ --color-brand-hover: #5753d0;
8445
+ --color-on-primary-container: #030064;
8446
+ --color-surface-primary-container: #e0dfff;
8447
+ --color-brand-active: #4440bf;
8448
+ --color-border-outline: #767680;
8449
+ --color-border-outline-variant: #c5c5d0;
8450
+ --color-surface-primary-container: #e0dfff;
8451
+ --color-badge: #0b6513;
8452
+ --background-color-badge: #d3ffd2;
8453
+ }
8454
+ .excalidraw--mobile.excalidraw,
8455
+ .exc-style {
8456
+ --editor-container-padding: 0.75rem;
8457
+ }
8458
+ @media screen and (min-device-width: 1921px) {
8459
+ .excalidraw,
8460
+ .exc-style {
8461
+ --lg-button-size: 2.5rem;
8462
+ --lg-icon-size: 1.25rem;
8463
+ --default-button-size: 2.25rem;
8464
+ --default-icon-size: 1.25rem;
8465
+ }
8466
+ }
8467
+ .excalidraw.theme--dark.theme--dark-background-none,
8468
+ .dark .excalidraw.theme--dark-background-none,
8469
+ .exc-style.theme--dark.theme--dark-background-none,
8470
+ .dark .exc-style.theme--dark-background-none {
8471
+ background: none;
8472
+ }
8473
+ .excalidraw.theme--dark,
8474
+ .dark .excalidraw,
8475
+ .exc-style.theme--dark,
8476
+ .dark .exc-style {
8477
+ --theme-filter: invert(93%) hue-rotate(180deg);
8478
+ --button-destructive-bg-color: #5a0000;
8479
+ --button-destructive-color: #ffa8a8;
8480
+ --button-gray-1: #363636;
8481
+ --button-gray-2: #272727;
8482
+ --button-gray-3: #222;
8483
+ --mobile-action-button-bg: var(--island-bg-color);
8484
+ --mobile-color-border: rgba(255, 255, 255, 0.85);
8485
+ --button-special-active-bg-color: #204624;
8486
+ --dialog-border-color: var(--color-gray-80);
8487
+ --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
8488
+ --focus-highlight-color: #228be6;
8489
+ --icon-green-fill-color: #69db7c;
8490
+ --default-bg-color: #121212;
8491
+ --input-bg-color: #121212;
8492
+ --input-border-color: #2e2e2e;
8493
+ --input-hover-bg-color: #181818;
8494
+ --input-label-color: #e9ecef;
8495
+ --island-bg-color: #232329;
8496
+ --island-bg-color-alt: hsl(240, 12%, 12%);
8497
+ --keybinding-color: var(--color-gray-60);
8498
+ --link-color: #4dabf7;
8499
+ --overlay-bg-color: rgba(52, 58, 64, 0.12);
8500
+ --popup-secondary-bg-color: #222;
8501
+ --popup-text-color: #ced4da;
8502
+ --popup-text-inverted-color: #2c2c2c;
8503
+ --select-highlight-color: #4dabf7;
8504
+ --modal-shadow:
8505
+ 0px 100px 80px rgba(0, 0, 0, 0.07),
8506
+ 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
8507
+ 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
8508
+ 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
8509
+ 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
8510
+ 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
8511
+ --avatar-border-color: var(--color-gray-85);
8512
+ --scrollbar-thumb: #343a40;
8513
+ --scrollbar-thumb-hover: #495057;
8514
+ --color-slider-track: hsl(244, 23%, 39%);
8515
+ --color-selection: #3530c4;
8516
+ --color-icon-white: var(--color-gray-90);
8517
+ --text-secondary-color: #b8b7c6;
8518
+ --color-primary: #a8a5ff;
8519
+ --color-primary-darker: #b2aeff;
8520
+ --color-primary-darkest: #beb9ff;
8521
+ --color-primary-light: #4f4d6f;
8522
+ --color-primary-light-darker: #43415e;
8523
+ --color-primary-hover: #bbb8ff;
8524
+ --color-disabled: var(--color-gray-70);
8525
+ --color-text-warning: var(--color-gray-80);
8526
+ --color-danger: #ffa8a5;
8527
+ --color-danger-dark: #672120;
8528
+ --color-danger-darker: #8f2625;
8529
+ --color-danger-darkest: #ac2b29;
8530
+ --color-danger-text: #fbcbcc;
8531
+ --color-danger-background: #fbcbcc;
8532
+ --color-danger-icon-background: #672120;
8533
+ --color-danger-color: #261919;
8534
+ --color-danger-icon-color: #fbcbcc;
8535
+ --color-warning-background: var(--color-warning);
8536
+ --color-warning-icon-background: var(--color-warning-dark);
8537
+ --color-warning-color: var(--color-gray-80);
8538
+ --color-warning-icon-color: var(--color-gray-80);
8539
+ --color-muted: var(--color-gray-80);
8540
+ --color-muted-darker: var(--color-gray-60);
8541
+ --color-muted-darkest: var(--color-gray-20);
8542
+ --color-muted-background: var(--color-gray-40);
8543
+ --color-muted-background-darker: var(--color-gray-20);
8544
+ --color-logo-text: #e2dfff;
8545
+ --color-surface-high: #2e2d39;
8546
+ --color-surface-low: hsl(240, 8%, 15%);
8547
+ --color-surface-mid: hsl(240 6% 10%);
8548
+ --color-surface-lowest: hsl(0, 0%, 7%);
8549
+ --color-on-surface: #e3e3e8;
8550
+ --color-brand-hover: #bbb8ff;
8551
+ --color-on-primary-container: #e0dfff;
8552
+ --color-surface-primary-container: #403e6a;
8553
+ --color-brand-active: #d0ccff;
8554
+ --color-border-outline: #8e8d9c;
8555
+ --color-border-outline-variant: #46464f;
8556
+ --color-surface-primary-container: #403e6a;
8557
+ }
8558
+ :root {
8559
+ --zIndex-canvas: 1;
8560
+ --zIndex-interactiveCanvas: 2;
8561
+ --zIndex-svgLayer: 3;
8562
+ --zIndex-wysiwyg: 3;
8563
+ --zIndex-canvasButtons: 3;
8564
+ --zIndex-layerUI: 4;
8565
+ --zIndex-eyeDropperBackdrop: 5;
8566
+ --zIndex-eyeDropperPreview: 6;
8567
+ --zIndex-hyperlinkContainer: 7;
8568
+ --zIndex-ui-bottom: 60;
8569
+ --zIndex-ui-context-menu: 90;
8570
+ --zIndex-ui-styles-popup: 100;
8571
+ --zIndex-ui-top: 100;
8572
+ --zIndex-ui-main-menu: 110;
8573
+ --zIndex-ui-library: 120;
8574
+ --zIndex-ui-tta-chat: 130;
8575
+ --zIndex-modal: 1000;
8576
+ --zIndex-popup: 1001;
8577
+ --zIndex-toast: 999999;
8578
+ --sab: env(safe-area-inset-bottom);
8579
+ --sal: env(safe-area-inset-left);
8580
+ --sar: env(safe-area-inset-right);
8581
+ --sat: env(safe-area-inset-top);
8582
+ }
8583
+ body.excalidraw-cursor-resize,
8584
+ body.excalidraw-cursor-resize a:hover,
8585
+ body.excalidraw-cursor-resize * {
8586
+ cursor: ew-resize;
8587
+ }
8588
+ .exc-style,
8589
+ .excalidraw {
8590
+ color: var(--text-primary-color);
8591
+ --ui-font:
8592
+ Assistant,
8593
+ system-ui,
8594
+ BlinkMacSystemFont,
8595
+ -apple-system,
8596
+ Segoe UI,
8597
+ Roboto,
8598
+ Helvetica,
8599
+ Arial,
8600
+ sans-serif;
8601
+ font-family: var(--ui-font);
8602
+ position: relative;
8603
+ overflow: hidden;
8604
+ color: var(--text-primary-color);
8605
+ display: flex;
8606
+ top: 0;
8607
+ bottom: 0;
8608
+ left: 0;
8609
+ right: 0;
8610
+ height: 100%;
8611
+ width: 100%;
8612
+ user-select: none;
8613
+ }
8614
+ .exc-style button,
8615
+ .excalidraw button {
8616
+ font-size: 0.8333rem;
8617
+ }
8618
+ .exc-style button,
8619
+ .exc-style label,
8620
+ .excalidraw button,
8621
+ .excalidraw label {
8622
+ -webkit-tap-highlight-color: transparent;
8623
+ -webkit-touch-callout: none;
8624
+ user-select: none;
8625
+ }
8626
+ .exc-style button,
8627
+ .excalidraw button {
8628
+ cursor: pointer;
8629
+ user-select: none;
8630
+ }
8631
+ .exc-style:focus,
8632
+ .excalidraw:focus {
8633
+ outline: none;
8634
+ }
8635
+ .exc-style .excalidraw-link,
8636
+ .exc-style a,
8637
+ .excalidraw .excalidraw-link,
8638
+ .excalidraw a {
8639
+ font-weight: 500;
8640
+ text-decoration: none;
8641
+ color: var(--link-color);
8642
+ user-select: none;
8643
+ cursor: pointer;
8644
+ }
8645
+ .exc-style .excalidraw-link:hover,
8646
+ .exc-style a:hover,
8647
+ .excalidraw .excalidraw-link:hover,
8648
+ .excalidraw a:hover {
8649
+ text-decoration: underline;
8650
+ }
8651
+ .exc-style .excalidraw-link:active,
8652
+ .exc-style a:active,
8653
+ .excalidraw .excalidraw-link:active,
8654
+ .excalidraw a:active {
8655
+ text-decoration: none;
8656
+ }
8657
+ .excalidraw {
8658
+ position: relative;
8659
+ overflow: hidden;
8660
+ display: flex;
8661
+ top: 0;
8662
+ bottom: 0;
8663
+ left: 0;
8664
+ right: 0;
8665
+ height: 100%;
8666
+ width: 100%;
8667
+ user-select: none;
8668
+ }
8669
+ .excalidraw canvas {
8670
+ touch-action: none;
8671
+ image-rendering: pixelated;
8672
+ image-rendering: -moz-crisp-edges;
8673
+ z-index: var(--zIndex-canvas);
8674
+ }
8675
+ .excalidraw canvas.interactive {
8676
+ z-index: var(--zIndex-interactiveCanvas);
8677
+ filter: var(--theme-filter);
8678
+ }
8679
+ .excalidraw__canvas-wrapper,
8680
+ .excalidraw__canvas.static {
8681
+ pointer-events: none;
8682
+ }
8683
+ .excalidraw__canvas {
8684
+ position: absolute;
8685
+ }
8686
+ .excalidraw__embeddable {
8687
+ width: 100%;
8688
+ height: 100%;
8689
+ border: 0;
8690
+ }
8691
+ .excalidraw__embeddable-container {
8692
+ position: absolute;
8693
+ z-index: 2;
8694
+ transform-origin: top left;
8695
+ pointer-events: none;
8696
+ }
8697
+ .excalidraw .FixedSideContainer {
8698
+ padding-top: var(--sat, 0);
8699
+ padding-right: var(--sar, 0);
8700
+ padding-bottom: var(--sab, 0);
8701
+ padding-left: var(--sal, 0);
8702
+ }
8703
+ .excalidraw .panelRow {
8704
+ display: flex;
8705
+ justify-content: space-between;
8706
+ }
8707
+ .excalidraw .selected-shape-actions {
8708
+ display: flex;
8709
+ flex-direction: column;
8710
+ row-gap: 0.75rem;
8711
+ }
8712
+ .excalidraw .selected-shape-actions h3,
8713
+ .excalidraw .selected-shape-actions legend,
8714
+ .excalidraw .selected-shape-actions .control-label {
8715
+ margin: 0;
8716
+ margin-bottom: 0.25rem;
8717
+ font-size: 0.75rem;
8718
+ color: var(--text-primary-color);
8719
+ font-weight: 400;
8720
+ display: block;
8721
+ }
8722
+ .excalidraw .selected-shape-actions .control-label input {
8723
+ display: block;
8724
+ width: 100%;
8725
+ }
8726
+ .excalidraw .selected-shape-actions legend {
8727
+ padding: 0;
8728
+ }
8729
+ .excalidraw .selected-shape-actions .iconSelectList {
8730
+ flex-wrap: wrap;
8731
+ position: relative;
8732
+ }
8733
+ .excalidraw .selected-shape-actions .buttonList {
8734
+ flex-wrap: wrap;
8735
+ display: flex;
8736
+ column-gap: 0.5rem;
8737
+ row-gap: 0.5rem;
8738
+ }
8739
+ .excalidraw .selected-shape-actions .buttonList label {
8740
+ font-size: 0.75rem;
8741
+ }
8742
+ .excalidraw .selected-shape-actions .buttonList input[type=radio],
8743
+ .excalidraw .selected-shape-actions .buttonList input[type=button] {
8744
+ opacity: 0;
8745
+ position: absolute;
8746
+ pointer-events: none;
8747
+ }
8748
+ .excalidraw .selected-shape-actions .buttonList .iconRow {
8749
+ margin-top: 8px;
8750
+ }
8751
+ .excalidraw .selected-shape-actions fieldset {
8752
+ margin: 0;
8753
+ padding: 0;
8754
+ border: none;
8755
+ }
8756
+ .excalidraw .divider {
8757
+ width: 1px;
8758
+ background-color: #e9ecef;
8759
+ margin: 1px;
8760
+ }
8761
+ .excalidraw .welcome-screen-menu-item:focus-visible,
8762
+ .excalidraw .dropdown-menu-item:focus-visible,
8763
+ .excalidraw button:focus-visible,
8764
+ .excalidraw .buttonList label:focus-within,
8765
+ .excalidraw input:focus-visible {
8766
+ outline: transparent;
8767
+ box-shadow: 0 0 0 1px var(--color-brand-hover);
8768
+ }
8769
+ .excalidraw [data-radix-collection-item]:focus-visible {
8770
+ box-shadow: none !important;
8771
+ }
8772
+ .excalidraw .buttonList .ToolIcon__icon {
8773
+ all: unset !important;
8774
+ display: flex !important;
8775
+ }
8776
+ .excalidraw .buttonList button {
8777
+ background-color: transparent;
8778
+ }
8779
+ .excalidraw .buttonList label,
8780
+ .excalidraw .buttonList button,
8781
+ .excalidraw .buttonList .zIndexButton {
8782
+ display: flex;
8783
+ justify-content: center;
8784
+ align-items: center;
8785
+ padding: 0.625rem;
8786
+ width: var(--button-width, var(--default-button-size));
8787
+ height: var(--button-height, var(--default-button-size));
8788
+ box-sizing: border-box;
8789
+ border-width: 1px;
8790
+ border-style: solid;
8791
+ border-color: var(--button-border, var(--default-border-color));
8792
+ border-radius: var(--border-radius-lg);
8793
+ cursor: pointer;
8794
+ background-color: var(--button-bg, var(--island-bg-color));
8795
+ color: var(--button-color, var(--color-on-surface));
8796
+ font-family: var(--ui-font);
8797
+ }
8798
+ .excalidraw .buttonList label svg,
8799
+ .excalidraw .buttonList button svg,
8800
+ .excalidraw .buttonList .zIndexButton svg {
8801
+ width: var(--button-width, var(--lg-icon-size));
8802
+ height: var(--button-height, var(--lg-icon-size));
8803
+ }
8804
+ .excalidraw .buttonList label:hover,
8805
+ .excalidraw .buttonList button:hover,
8806
+ .excalidraw .buttonList .zIndexButton:hover {
8807
+ background-color: var(--button-hover-bg, var(--island-bg-color));
8808
+ border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
8809
+ color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
8810
+ }
8811
+ .excalidraw .buttonList label:active,
8812
+ .excalidraw .buttonList button:active,
8813
+ .excalidraw .buttonList .zIndexButton:active {
8814
+ background-color: var(--button-active-bg, var(--island-bg-color));
8815
+ border-color: var(--button-active-border, var(--color-primary-darkest));
8816
+ }
8817
+ .excalidraw .buttonList label.active,
8818
+ .excalidraw .buttonList button.active,
8819
+ .excalidraw .buttonList .zIndexButton.active {
8820
+ background-color: var(--button-selected-bg, var(--color-surface-primary-container));
8821
+ border-color: var(--button-selected-border, var(--color-surface-primary-container));
8822
+ }
8823
+ .excalidraw .buttonList label.active:hover,
8824
+ .excalidraw .buttonList button.active:hover,
8825
+ .excalidraw .buttonList .zIndexButton.active:hover {
8826
+ background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
8827
+ }
8828
+ .excalidraw .buttonList label.active svg,
8829
+ .excalidraw .buttonList button.active svg,
8830
+ .excalidraw .buttonList .zIndexButton.active svg {
8831
+ color: var(--button-color, var(--color-on-primary-container));
8832
+ }
8833
+ .excalidraw--mobile.excalidraw .buttonList label,
8834
+ .excalidraw .buttonList button,
8835
+ .excalidraw .buttonList .zIndexButton {
8836
+ width: var(--mobile-action-button-size, var(--default-button-size));
8837
+ height: var(--mobile-action-button-size, var(--default-button-size));
8838
+ }
8839
+ .excalidraw .buttonList label,
8840
+ .excalidraw .buttonList button,
8841
+ .excalidraw .buttonList .zIndexButton {
8842
+ padding: 0;
8843
+ }
8844
+ .excalidraw .buttonList label svg,
8845
+ .excalidraw .buttonList button svg,
8846
+ .excalidraw .buttonList .zIndexButton svg {
8847
+ width: var(--default-icon-size);
8848
+ height: var(--default-icon-size);
8849
+ }
8850
+ .excalidraw .App-top-bar {
8851
+ z-index: var(--zIndex-ui-top);
8852
+ display: flex;
8853
+ flex-direction: column;
8854
+ }
8855
+ .excalidraw .App-welcome-screen {
8856
+ z-index: var(--zIndex-layerUI);
8857
+ }
8858
+ .excalidraw .App-bottom-bar {
8859
+ position: absolute;
8860
+ width: calc(100% - 28px);
8861
+ max-width: 450px;
8862
+ bottom: 0;
8863
+ left: 50%;
8864
+ transform: translateX(-50%);
8865
+ --bar-padding: calc(4 * var(--space-factor));
8866
+ z-index: var(--zIndex-ui-bottom);
8867
+ display: flex;
8868
+ flex-direction: column;
8869
+ pointer-events: none;
8870
+ justify-content: center;
8871
+ }
8872
+ .excalidraw .App-bottom-bar > .Island {
8873
+ box-sizing: border-box;
8874
+ max-height: 100%;
8875
+ padding: 4px;
8876
+ display: flex;
8877
+ flex-direction: column;
8878
+ pointer-events: var(--ui-pointerEvents);
8879
+ }
8880
+ .excalidraw .App-toolbar {
8881
+ display: flex;
8882
+ justify-content: center;
8883
+ }
8884
+ .excalidraw .App-toolbar .eraser.ToolIcon:hover {
8885
+ --icon-fill-color: #fff;
8886
+ --keybinding-color: #fff;
8887
+ }
8888
+ .excalidraw .App-toolbar .eraser.active {
8889
+ background-color: var(--color-primary);
8890
+ }
8891
+ .excalidraw .excalidraw-ui-top-left,
8892
+ .excalidraw .excalidraw-ui-top-right {
8893
+ display: flex;
8894
+ align-items: center;
8895
+ gap: 0.5rem;
8896
+ }
8897
+ .excalidraw .App-toolbar-content {
8898
+ display: flex;
8899
+ flex-direction: column;
8900
+ pointer-events: none;
8901
+ }
8902
+ .excalidraw .App-toolbar-content > * {
8903
+ pointer-events: var(--ui-pointerEvents);
8904
+ }
8905
+ .excalidraw .App-mobile-menu {
8906
+ width: 100%;
8907
+ overflow-x: visible;
8908
+ overflow-y: auto;
8909
+ box-sizing: border-box;
8910
+ margin-bottom: var(--bar-padding);
8911
+ }
8912
+ .excalidraw .App-mobile-menu .selected-shape-actions {
8913
+ padding: 8px 8px 0 8px;
8914
+ }
8915
+ .excalidraw .App-menu {
8916
+ display: grid;
8917
+ color: var(--icon-fill-color);
8918
+ }
8919
+ .excalidraw .shapes-section {
8920
+ display: flex;
8921
+ justify-content: center;
8922
+ pointer-events: none !important;
8923
+ }
8924
+ .excalidraw .shapes-section > * {
8925
+ pointer-events: var(--ui-pointerEvents);
8926
+ }
8927
+ .excalidraw .App-menu_top {
8928
+ grid-template-columns: 1fr 2fr 1fr;
8929
+ grid-gap: 1rem;
8930
+ align-items: flex-start;
8931
+ cursor: default;
8932
+ pointer-events: none !important;
8933
+ }
8934
+ .excalidraw .App-menu_top > * {
8935
+ pointer-events: var(--ui-pointerEvents);
8936
+ }
8937
+ @media (min-width: 1536px) {
8938
+ .excalidraw .App-menu_top {
8939
+ grid-template-columns: 1fr 1fr 1fr;
8940
+ grid-gap: 3rem;
8941
+ }
8942
+ }
8943
+ .excalidraw .App-menu_top > *:first-child {
8944
+ justify-self: flex-start;
8945
+ }
8946
+ .excalidraw .selected-shape-actions-container {
8947
+ width: fit-content;
8948
+ }
8949
+ .excalidraw .selected-shape-actions-container--compact {
8950
+ min-width: 48px;
8951
+ }
8952
+ .excalidraw .App-menu_top > *:last-child {
8953
+ justify-self: flex-end;
8954
+ }
8955
+ .excalidraw .App-menu_bottom {
8956
+ position: absolute;
8957
+ bottom: 1rem;
8958
+ display: flex;
8959
+ justify-content: space-between;
8960
+ align-items: flex-start;
8961
+ cursor: default;
8962
+ pointer-events: none !important;
8963
+ box-sizing: border-box;
8964
+ padding: 0 1rem;
8965
+ }
8966
+ .excalidraw .App-menu_bottom--transition-left section {
8967
+ width: 185px;
8968
+ }
8969
+ .excalidraw .App-menu_bottom section {
8970
+ display: flex;
8971
+ }
8972
+ .excalidraw .App-menu_bottom > *:first-child {
8973
+ justify-self: flex-start;
8974
+ }
8975
+ .excalidraw .App-menu_bottom > *:last-child {
8976
+ justify-self: flex-end;
8977
+ }
8978
+ .excalidraw .App-menu_left {
8979
+ grid-template-rows: 1fr auto 1fr;
8980
+ height: 100%;
8981
+ }
8982
+ .excalidraw .App-menu_right {
8983
+ grid-template-rows: 1fr;
8984
+ height: 100%;
8985
+ }
8986
+ .excalidraw .App-menu__left {
8987
+ overflow-y: auto;
8988
+ padding: 0.75rem;
8989
+ width: 12.5rem;
8990
+ box-sizing: border-box;
8991
+ position: absolute;
8992
+ }
8993
+ .excalidraw .dropdown-select {
8994
+ height: 1.5rem;
8995
+ padding: 0;
8996
+ padding-inline-start: 0.5rem;
8997
+ padding-inline-end: 1.5rem;
8998
+ color: var(--icon-fill-color);
8999
+ background-color: var(--button-gray-1);
9000
+ border-radius: var(--space-factor);
9001
+ border: 1px solid var(--button-gray-2);
9002
+ font-size: 0.8rem;
9003
+ font-family: inherit;
9004
+ outline: none;
9005
+ appearance: none;
9006
+ background-image: var(--dropdown-icon);
9007
+ background-repeat: no-repeat;
9008
+ background-position: right 0.7rem top 50%, 0 0;
9009
+ background-size: 0.65em auto, 100%;
9010
+ }
9011
+ :root[dir=rtl] .excalidraw .dropdown-select {
9012
+ background-position: left 0.7rem top 50%, 0 0;
9013
+ }
9014
+ .excalidraw .dropdown-select:focus {
9015
+ box-shadow: 0 0 0 2px var(--focus-highlight-color);
9016
+ }
9017
+ .excalidraw .dropdown-select:hover {
9018
+ background-color: var(--button-gray-2);
9019
+ }
9020
+ .excalidraw .dropdown-select:active {
9021
+ background-color: var(--button-gray-2);
9022
+ }
9023
+ .excalidraw .dropdown-select__language {
9024
+ height: 2rem;
9025
+ background-color: var(--island-bg-color);
9026
+ border-color: var(--default-border-color) !important;
9027
+ cursor: pointer;
9028
+ }
9029
+ .excalidraw .dropdown-select__language:hover {
9030
+ background-color: var(--island-bg-color);
9031
+ }
9032
+ .excalidraw .scroll-back-to-content {
9033
+ border-radius: var(--border-radius-lg);
9034
+ background-color: var(--island-bg-color);
9035
+ color: var(--icon-fill-color);
9036
+ border: 1px solid var(--default-border-color);
9037
+ padding: 10px 20px;
9038
+ position: absolute;
9039
+ left: 50%;
9040
+ bottom: 30px;
9041
+ transform: translateX(-50%);
9042
+ pointer-events: var(--ui-pointerEvents);
9043
+ font-family: inherit;
9044
+ }
9045
+ .excalidraw .scroll-back-to-content:hover {
9046
+ background-color: var(--button-hover-bg);
9047
+ }
9048
+ .excalidraw .scroll-back-to-content:active {
9049
+ border: 1px solid var(--button-active-border);
9050
+ }
9051
+ .excalidraw .floating-status-stack {
9052
+ position: absolute;
9053
+ left: 50%;
9054
+ bottom: 30px;
9055
+ transform: translateX(-50%);
9056
+ display: flex;
9057
+ flex-direction: column;
9058
+ align-items: center;
9059
+ gap: 0.5rem;
9060
+ pointer-events: none;
9061
+ }
9062
+ .excalidraw .floating-status-stack .scroll-back-to-content {
9063
+ position: static;
9064
+ left: auto;
9065
+ bottom: auto;
9066
+ transform: none;
9067
+ pointer-events: var(--ui-pointerEvents);
9068
+ }
9069
+ .excalidraw .help-icon {
9070
+ display: flex;
9071
+ justify-content: center;
9072
+ align-items: center;
9073
+ padding: 0.625rem;
9074
+ width: var(--button-width, var(--default-button-size));
9075
+ height: var(--button-height, var(--default-button-size));
9076
+ box-sizing: border-box;
9077
+ border-width: 1px;
9078
+ border-style: solid;
9079
+ border-color: var(--button-border, var(--default-border-color));
9080
+ border-radius: var(--border-radius-lg);
9081
+ cursor: pointer;
9082
+ background-color: var(--button-bg, var(--island-bg-color));
9083
+ color: var(--button-color, var(--color-on-surface));
9084
+ font-family: var(--ui-font);
9085
+ border: none;
9086
+ box-shadow: 0 0 0 1px var(--color-surface-lowest);
9087
+ background-color: var(--color-surface-low);
9088
+ width: var(--lg-button-size);
9089
+ height: var(--lg-button-size);
9090
+ }
9091
+ .excalidraw .help-icon svg {
9092
+ width: var(--button-width, var(--lg-icon-size));
9093
+ height: var(--button-height, var(--lg-icon-size));
9094
+ }
9095
+ .excalidraw .help-icon:hover {
9096
+ background-color: var(--button-hover-bg, var(--island-bg-color));
9097
+ border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
9098
+ color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
9099
+ }
9100
+ .excalidraw .help-icon:active {
9101
+ background-color: var(--button-active-bg, var(--island-bg-color));
9102
+ border-color: var(--button-active-border, var(--color-primary-darkest));
9103
+ }
9104
+ .excalidraw .help-icon.active {
9105
+ background-color: var(--button-selected-bg, var(--color-surface-primary-container));
9106
+ border-color: var(--button-selected-border, var(--color-surface-primary-container));
9107
+ }
9108
+ .excalidraw .help-icon.active:hover {
9109
+ background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
9110
+ }
9111
+ .excalidraw .help-icon.active svg {
9112
+ color: var(--button-color, var(--color-on-primary-container));
9113
+ }
9114
+ .excalidraw--mobile.excalidraw .help-icon {
9115
+ width: var(--mobile-action-button-size, var(--default-button-size));
9116
+ height: var(--mobile-action-button-size, var(--default-button-size));
9117
+ }
9118
+ .excalidraw .help-icon:active {
9119
+ box-shadow: 0 0 0 1px var(--color-brand-active);
9120
+ }
9121
+ .excalidraw--mobile.excalidraw .help-icon {
9122
+ width: var(--mobile-action-button-size, 2rem);
9123
+ height: var(--mobile-action-button-size, 2rem);
9124
+ }
9125
+ .excalidraw .help-icon svg {
9126
+ width: var(--lg-icon-size);
9127
+ height: var(--lg-icon-size);
9128
+ }
9129
+ .excalidraw .reset-zoom-button {
9130
+ font-family: var(--ui-font);
9131
+ }
9132
+ .excalidraw .finalize-button {
9133
+ display: grid;
9134
+ grid-auto-flow: column;
9135
+ gap: 0.4em;
9136
+ margin-top: auto;
9137
+ margin-bottom: auto;
9138
+ margin-inline-start: 0.6em;
9139
+ }
9140
+ .excalidraw .undo-redo-buttons,
9141
+ .excalidraw .eraser-buttons {
9142
+ display: grid;
9143
+ grid-auto-flow: column;
9144
+ margin-top: auto;
9145
+ margin-bottom: auto;
9146
+ margin-inline-start: 0.6em;
9147
+ }
9148
+ .excalidraw--mobile.excalidraw aside {
9149
+ display: none;
9150
+ }
9151
+ .excalidraw--mobile.excalidraw .scroll-back-to-content {
9152
+ bottom: calc(100px + var(--sab, 0));
9153
+ z-index: -1;
9154
+ }
9155
+ :root[dir=rtl] .excalidraw .rtl-mirror {
9156
+ transform: scaleX(-1);
9157
+ }
9158
+ .excalidraw .zen-mode-visibility {
9159
+ visibility: visible;
9160
+ opacity: 1;
9161
+ height: auto;
9162
+ width: auto;
9163
+ transition: opacity 0.5s;
9164
+ }
9165
+ .excalidraw .zen-mode-visibility.zen-mode-visibility--hidden {
9166
+ visibility: hidden;
9167
+ opacity: 0;
9168
+ height: 0;
9169
+ width: 0;
9170
+ transition: opacity 0.5s;
9171
+ }
9172
+ .excalidraw .disable-pointerEvents {
9173
+ pointer-events: none !important;
9174
+ }
9175
+ .excalidraw.excalidraw--view-mode .App-menu {
9176
+ display: flex;
9177
+ justify-content: space-between;
9178
+ }
9179
+ .excalidraw input.is-redacted {
9180
+ -webkit-text-security: disc;
9181
+ }
9182
+ .excalidraw input[type=text],
9183
+ .excalidraw textarea:not(.excalidraw-wysiwyg) {
9184
+ color: var(--text-primary-color);
9185
+ border: 1.5px solid var(--input-border-color);
9186
+ padding: 0.75rem;
9187
+ white-space: nowrap;
9188
+ border-radius: var(--space-factor);
9189
+ background-color: var(--input-bg-color);
9190
+ }
9191
+ .excalidraw input[type=text]:not(:focus):hover,
9192
+ .excalidraw textarea:not(.excalidraw-wysiwyg):not(:focus):hover {
9193
+ border-color: var(--color-brand-hover);
9194
+ }
9195
+ .excalidraw input[type=text]:focus,
9196
+ .excalidraw textarea:not(.excalidraw-wysiwyg):focus {
9197
+ outline: none;
9198
+ border-color: var(--color-brand-hover);
9199
+ }
9200
+ @media print {
9201
+ .excalidraw .App-bottom-bar,
9202
+ .excalidraw .FixedSideContainer,
9203
+ .excalidraw .layer-ui__wrapper {
9204
+ display: none;
9205
+ }
9206
+ }
9207
+ .excalidraw ::-webkit-scrollbar {
9208
+ width: 4px;
9209
+ height: 3px;
9210
+ }
9211
+ .excalidraw select::-webkit-scrollbar {
9212
+ width: 10px;
9213
+ }
9214
+ .excalidraw ::-webkit-scrollbar-thumb {
9215
+ background: var(--scrollbar-thumb);
9216
+ border-radius: 10px;
9217
+ }
9218
+ .excalidraw ::-webkit-scrollbar-thumb:hover {
9219
+ background: var(--scrollbar-thumb-hover);
9220
+ }
9221
+ .excalidraw ::-webkit-scrollbar-thumb:active {
9222
+ background: var(--scrollbar-thumb);
9223
+ }
9224
+ .excalidraw .mobile-misc-tools-container {
9225
+ position: absolute;
9226
+ top: calc(5rem - var(--editor-container-padding));
9227
+ right: calc(var(--editor-container-padding) * -1);
9228
+ display: flex;
9229
+ flex-direction: column;
9230
+ border: 1px solid var(--sidebar-border-color);
9231
+ border-top-left-radius: var(--border-radius-lg);
9232
+ border-bottom-left-radius: var(--border-radius-lg);
9233
+ border-right: 0;
9234
+ overflow: hidden;
9235
+ background-color: var(--island-bg-color);
9236
+ }
9237
+ .excalidraw .mobile-misc-tools-container .ToolIcon__icon {
9238
+ width: 2rem;
9239
+ height: 2rem;
9240
+ border-radius: 0;
9241
+ }
9242
+ .excalidraw .mobile-misc-tools-container .default-sidebar-trigger {
9243
+ border: 0;
9244
+ }
9245
+ .excalidraw .mobile-misc-tools-container-left {
9246
+ position: fixed;
9247
+ top: 5rem;
9248
+ left: 0;
9249
+ display: flex;
9250
+ flex-direction: column;
9251
+ border: 1px solid var(--sidebar-border-color);
9252
+ border-top-right-radius: var(--border-radius-lg);
9253
+ border-bottom-right-radius: var(--border-radius-lg);
9254
+ border-left: 0;
9255
+ background-color: var(--island-bg-color);
9256
+ }
9257
+ .excalidraw .mobile-misc-tools-container-left .ToolIcon__icon {
9258
+ border-radius: 0;
9259
+ }
9260
+ .excalidraw .mobile-misc-tools-container-left .library-button {
9261
+ border: 0;
9262
+ }
9263
+ .excalidraw .App-toolbar--mobile {
9264
+ overflow: visible;
9265
+ max-width: 98vw;
9266
+ }
9267
+ .excalidraw .App-toolbar--mobile .ToolIcon__keybinding {
9268
+ display: none;
9269
+ }
9270
+ .excalidraw .UserList-Wrapper {
9271
+ margin: 0;
9272
+ padding: 0;
9273
+ border: none;
9274
+ text-align: left;
9275
+ }
9276
+ .excalidraw .UserList-Wrapper legend {
9277
+ display: block;
9278
+ font-size: 0.75rem;
9279
+ font-weight: 400;
9280
+ margin: 0 0 0.25rem;
9281
+ padding: 0;
9282
+ }
9283
+ .excalidraw .main-menu {
9284
+ z-index: var(--zIndex-ui-main-menu);
9285
+ }
9286
+ .excalidraw .main-menu-trigger {
9287
+ border: none;
9288
+ box-shadow: 0 0 0 1px var(--color-surface-lowest);
9289
+ background-color: var(--color-surface-low);
9290
+ }
9291
+ .excalidraw .main-menu-trigger:active {
9292
+ box-shadow: 0 0 0 1px var(--color-brand-active);
9293
+ }
9294
+ .excalidraw--mobile.excalidraw .main-menu-trigger {
9295
+ width: var(--mobile-action-button-size, 2rem);
9296
+ height: var(--mobile-action-button-size, 2rem);
9297
+ }
9298
+ .excalidraw .App-mobile-menu,
9299
+ .excalidraw .App-menu__left {
9300
+ --button-border: transparent;
9301
+ --button-bg: var(--color-surface-mid);
9302
+ }
9303
+ .excalidraw.theme--dark.excalidraw .App-mobile-menu,
9304
+ .excalidraw.theme--dark.excalidraw .App-menu__left {
9305
+ --button-hover-bg: #363541;
9306
+ --button-bg: var(--color-surface-high);
9307
+ }
9308
+ .excalidraw .App-menu__left .buttonList {
9309
+ padding: 0.25rem 0;
9310
+ }
9311
+ .excalidraw .excalidraw__paragraph {
9312
+ margin: 1rem 0;
9313
+ }
9314
+ .excalidraw .Modal__content .excalidraw__paragraph:first-child {
9315
+ margin-top: 0;
9316
+ }
9317
+ .excalidraw .Modal__content .excalidraw__paragraph + .excalidraw__paragraph {
9318
+ margin-top: 0rem;
9319
+ }
9320
+ .excalidraw .link-button {
9321
+ display: flex;
9322
+ text-decoration: none !important;
9323
+ }
9324
+ .ErrorSplash.excalidraw {
9325
+ min-height: 100vh;
9326
+ padding: 20px 0;
9327
+ overflow: auto;
9328
+ display: flex;
9329
+ align-items: center;
9330
+ justify-content: center;
9331
+ user-select: text;
9332
+ }
9333
+ .ErrorSplash.excalidraw .ErrorSplash-messageContainer {
9334
+ display: flex;
9335
+ flex-direction: column;
9336
+ align-items: center;
9337
+ justify-content: center;
9338
+ padding: 40px;
9339
+ background-color: #ffe3e3;
9340
+ border: 3px solid #c92a2a;
9341
+ }
9342
+ .ErrorSplash.excalidraw .ErrorSplash-paragraph {
9343
+ margin: 15px 0;
9344
+ max-width: 600px;
9345
+ }
9346
+ .ErrorSplash.excalidraw .ErrorSplash-paragraph.align-center {
9347
+ text-align: center;
9348
+ }
9349
+ .ErrorSplash.excalidraw .bigger,
9350
+ .ErrorSplash.excalidraw .bigger button {
9351
+ font-size: 1.1em;
9352
+ }
9353
+ .ErrorSplash.excalidraw .smaller,
9354
+ .ErrorSplash.excalidraw .smaller button {
9355
+ font-size: 0.9em;
9356
+ }
9357
+ .ErrorSplash.excalidraw .ErrorSplash-details {
9358
+ display: flex;
9359
+ flex-direction: column;
9360
+ align-items: flex-start;
9361
+ }
9362
+ .ErrorSplash.excalidraw .ErrorSplash-details textarea {
9363
+ width: 100%;
9364
+ margin: 10px 0;
9365
+ font-family: "Cascadia";
9366
+ font-size: 0.8em;
9367
+ }
9368
+ .excalidraw__embeddable-container .excalidraw__embeddable-container__inner {
9369
+ overflow: hidden;
9370
+ display: flex;
9371
+ align-items: center;
9372
+ justify-content: center;
9373
+ border-radius: var(--embeddable-radius);
9374
+ }
9375
+ .excalidraw__embeddable-container .excalidraw__embeddable__outer {
9376
+ width: 100%;
9377
+ height: 100%;
9378
+ }
9379
+ .excalidraw__embeddable-container .excalidraw__embeddable__outer > * {
9380
+ border-radius: var(--embeddable-radius);
9381
+ }
9382
+ .excalidraw__embeddable-container .excalidraw__embeddable-hint {
9383
+ position: absolute;
9384
+ z-index: 1;
9385
+ background: rgba(0, 0, 0, 0.5);
9386
+ padding: 1rem 1.6rem;
9387
+ border-radius: 12px;
9388
+ color: #fff;
9389
+ font-weight: 700;
9390
+ letter-spacing: 0.6px;
9391
+ font-family: "Assistant";
9392
+ }
9393
+ .tta-floating-launcher {
9394
+ position: fixed;
9395
+ bottom: 4.5rem;
9396
+ right: 1rem;
9397
+ display: flex;
9398
+ flex-direction: column;
9399
+ align-items: flex-end;
9400
+ gap: 0.75rem;
9401
+ pointer-events: none;
9402
+ z-index: var(--zIndex-ui-tta-chat);
9403
+ }
9404
+ @media (max-width: 768px) {
9405
+ .tta-floating-launcher {
9406
+ display: none;
9407
+ }
9408
+ }
9409
+ .tta-floating-inline {
9410
+ display: inline-flex;
9411
+ align-items: center;
9412
+ pointer-events: auto;
9413
+ }
9414
+ @media (max-width: 768px) {
9415
+ .tta-floating-inline {
9416
+ display: none;
9417
+ }
9418
+ }
9419
+ .tta-floating-inline .tta-floating-button {
9420
+ box-shadow: none;
9421
+ }
9422
+ .tta-floating-button {
9423
+ pointer-events: auto;
9424
+ border: none;
9425
+ border-radius: var(--border-radius-lg);
9426
+ padding: 0.65rem 1.25rem;
9427
+ display: inline-flex;
9428
+ align-items: center;
9429
+ gap: 0.5rem;
9430
+ font-weight: 600;
9431
+ background-color: var(--color-primary);
9432
+ color: var(--color-icon-white);
9433
+ box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.2);
9434
+ cursor: pointer;
9435
+ transition: transform 0.15s ease, box-shadow 0.15s ease;
9436
+ }
9437
+ .tta-floating-button:hover {
9438
+ background: var(--color-primary-darker);
9439
+ }
9440
+ .tta-floating-button--active {
9441
+ background: var(--color-primary-darker);
9442
+ }
9443
+ .tta-floating-button__icon {
9444
+ display: flex;
9445
+ align-items: center;
9446
+ justify-content: center;
9447
+ line-height: 0;
9448
+ width: 1rem;
9449
+ height: 1rem;
9450
+ }
9451
+ .tta-panel__surface {
9452
+ pointer-events: auto;
9453
+ background: var(--default-bg-color, #fff);
9454
+ border-radius: var(--border-radius-lg);
9455
+ width: min(400px, 100vw - 2.5rem);
9456
+ height: min(720px, 100vh - 10rem);
9457
+ box-shadow: var(--shadow-island);
9458
+ position: relative;
9459
+ overflow: hidden;
9460
+ }
9461
+ .tta-panel__header {
9462
+ display: flex;
9463
+ align-items: center;
9464
+ justify-content: space-between;
9465
+ gap: 0.5rem;
9466
+ padding: 0.75rem;
9467
+ border-bottom: 1px solid var(--sidebar-border-color);
9468
+ }
9469
+ .tta-panel__title {
9470
+ font-size: 1rem;
9471
+ font-weight: 600;
9472
+ color: var(--color-primary);
9473
+ }
9474
+ .tta-panel__header-actions {
9475
+ display: flex;
9476
+ align-items: center;
9477
+ gap: 0.75rem;
9478
+ margin-left: auto;
9479
+ }
9480
+ .tta-panel__icon-button {
9481
+ border: 1px solid transparent;
9482
+ background: transparent;
9483
+ color: var(--text-primary-color);
9484
+ padding: 0rem;
9485
+ display: inline-flex;
9486
+ align-items: center;
9487
+ justify-content: center;
9488
+ cursor: pointer;
9489
+ transition: background 0.15s ease, border-color 0.15s ease;
9490
+ }
9491
+ .tta-panel__icon-button svg {
9492
+ width: 1rem;
9493
+ height: 1rem;
9494
+ }
9495
+ .tta-panel__icon-button:hover {
9496
+ color: var(--color-primary);
9497
+ }
9498
+ .tta-panel__new-chat-icon {
9499
+ display: inline-flex;
9500
+ align-items: center;
9501
+ justify-content: center;
9502
+ }
9503
+ .tta-panel__new-chat-text {
9504
+ white-space: nowrap;
9505
+ }
9506
+ .tta-panel__icon-button--active {
9507
+ background: transparent;
9508
+ border-color: transparent;
9509
+ color: var(--color-primary);
9510
+ }
9511
+ .tta-panel__icon-button--active svg {
9512
+ fill: currentColor;
9513
+ }
9514
+ .tta-panel__icon-button--active:hover {
9515
+ background: var(--color-primary-light);
9516
+ }
9517
+ .tta-panel__body {
9518
+ flex: 1;
9519
+ display: flex;
9520
+ flex-direction: column;
9521
+ height: 100%;
9522
+ min-height: 0;
9523
+ overflow: hidden;
9524
+ }
9525
+ .tta-chat-panel {
9526
+ display: flex;
9527
+ flex-direction: column;
9528
+ height: 100%;
9529
+ width: 100%;
9530
+ font-family: "Assistant", var(--ui-font, system-ui, sans-serif);
9531
+ }
9532
+ .tta-chat-panel--floating {
9533
+ position: relative;
9534
+ box-shadow: var(--shadow-island);
9535
+ background-color: var(--island-bg-color);
9536
+ }
9537
+ .tta-chat-container {
9538
+ display: flex;
9539
+ flex-direction: column;
9540
+ gap: 0.5rem;
9541
+ flex: 1;
9542
+ min-height: 0;
9543
+ overflow: hidden;
9544
+ }
9545
+ .tta-chat-list {
9546
+ flex: 1;
9547
+ background-color: transparent;
9548
+ border-radius: var(--border-radius-md);
9549
+ padding: 0.75rem;
9550
+ overflow-y: auto;
9551
+ display: flex;
9552
+ flex-direction: column;
9553
+ gap: 0.75rem;
9554
+ }
9555
+ .tta-chat-empty-state {
9556
+ display: flex;
9557
+ flex: 1;
9558
+ flex-direction: column;
9559
+ gap: 1.1rem;
9560
+ padding: 1rem;
9561
+ }
9562
+ .tta-chat-empty-middle {
9563
+ flex: 1;
9564
+ display: flex;
9565
+ align-items: center;
9566
+ }
9567
+ .tta-chat-empty-intro {
9568
+ width: 100%;
9569
+ display: grid;
9570
+ gap: 0.55rem;
9571
+ }
9572
+ .tta-chat-empty-top {
9573
+ width: 100%;
9574
+ }
9575
+ .tta-chat-empty-resume-card {
9576
+ width: 100%;
9577
+ border: 1px solid var(--sidebar-border-color);
9578
+ background-color: transparent;
9579
+ border-radius: var(--border-radius-lg);
9580
+ padding: 0.65rem;
9581
+ color: inherit;
9582
+ display: grid;
9583
+ grid-template-columns: 88px 1fr;
9584
+ gap: 0.75rem;
9585
+ align-items: center;
9586
+ cursor: pointer;
9587
+ transition: border-color 0.2s ease, transform 0.2s ease;
9588
+ }
9589
+ .tta-chat-empty-resume-card:hover {
9590
+ border-color: var(--color-primary);
9591
+ transform: translateY(-0.5px);
9592
+ }
9593
+ .tta-chat-empty-resume-card:focus-visible {
9594
+ outline: none;
9595
+ box-shadow: 0 0 0 2px rgba(105, 101, 219, 0.35);
9596
+ }
9597
+ .tta-chat-empty-resume-card__preview {
9598
+ width: 88px;
9599
+ height: 62px;
9600
+ border-radius: var(--border-radius-lg);
9601
+ overflow: hidden;
9602
+ border: 1px solid var(--sidebar-border-color);
9603
+ background: var(--sidebar-bg-color);
9604
+ }
9605
+ .tta-chat-empty-resume-card__preview img {
9606
+ width: 100%;
9607
+ height: 100%;
9608
+ object-fit: cover;
9609
+ display: block;
9610
+ }
9611
+ .tta-chat-empty-resume-card__placeholder {
9612
+ width: 100%;
9613
+ height: 100%;
9614
+ background:
9615
+ linear-gradient(
9616
+ 135deg,
9617
+ var(--button-gray-1),
9618
+ var(--button-gray-2, var(--sidebar-border-color)));
9619
+ }
9620
+ .tta-chat-empty-resume-card__content {
9621
+ min-width: 0;
9622
+ text-align: left;
9623
+ }
9624
+ .tta-chat-empty-resume-card__label {
9625
+ font-size: 0.7rem;
9626
+ font-weight: 600;
9627
+ color: var(--color-primary);
9628
+ text-transform: uppercase;
9629
+ letter-spacing: 0.03em;
9630
+ }
9631
+ .tta-chat-empty-resume-card__title {
9632
+ margin-top: 0.1rem;
9633
+ font-size: 0.85rem;
9634
+ font-weight: 600;
9635
+ color: var(--text-primary-color);
9636
+ white-space: nowrap;
9637
+ overflow: hidden;
9638
+ text-overflow: ellipsis;
9639
+ }
9640
+ .tta-chat-empty-resume-card__meta {
9641
+ margin-top: 0.15rem;
9642
+ font-size: 0.7rem;
9643
+ color: var(--text-secondary-color);
9644
+ }
9645
+ .tta-chat-empty-how-it-works {
9646
+ width: 100%;
9647
+ max-width: 100%;
9648
+ box-sizing: border-box;
9649
+ background: var(--sidebar-bg-color);
9650
+ padding: 0.7rem 0.75rem;
9651
+ }
9652
+ .tta-chat-empty-how-it-works__title {
9653
+ font-size: 0.8rem;
9654
+ font-weight: 600;
9655
+ color: var(--text-primary-color);
9656
+ }
9657
+ .tta-chat-empty-how-it-works__steps {
9658
+ margin: 0.45rem 0 0;
9659
+ padding-left: 1rem;
9660
+ display: grid;
9661
+ gap: 0.3rem;
9662
+ font-size: 0.75rem;
9663
+ color: var(--text-secondary-color);
9664
+ }
9665
+ .tta-chat-empty-tagline {
9666
+ font-size: 0.9rem;
9667
+ padding: 0 4rem;
9668
+ color: var(--text-primary-color);
9669
+ line-height: 1.4;
9670
+ text-align: center;
9671
+ }
9672
+ .tta-chat-empty-storage-notice {
9673
+ font-size: 0.75rem;
9674
+ padding: 0 2rem;
9675
+ color: var(--text-secondary-color);
9676
+ line-height: 1.4;
9677
+ text-align: center;
9678
+ }
9679
+ .tta-chat-empty-storage-notice__more {
9680
+ border: 0;
9681
+ background: transparent;
9682
+ color: inherit !important;
9683
+ cursor: pointer;
9684
+ font: inherit !important;
9685
+ margin: 0;
9686
+ padding: 0;
9687
+ text-decoration-line: underline;
9688
+ text-decoration-style: dashed;
9689
+ text-decoration-color: #bbb;
9690
+ text-decoration-thickness: from-font;
9691
+ text-underline-offset: 0.2em;
9692
+ }
9693
+ .excalidraw.theme--dark .tta-chat-empty-storage-notice__more {
9694
+ text-decoration-color: #555;
9695
+ }
9696
+ .tta-chat-empty-storage-notice__more:hover {
9697
+ color: var(--text-primary-color);
9698
+ }
9699
+ .tta-chat-empty-storage-notice__more:focus-visible {
9700
+ outline: none;
9701
+ box-shadow: 0 1px 0 0 currentColor;
9702
+ }
9703
+ .tta-chat-empty-storage-dialog {
9704
+ color: var(--text-secondary-color);
9705
+ font-size: 0.875rem;
9706
+ line-height: 1.5;
9707
+ }
9708
+ .tta-chat-empty-storage-dialog p {
9709
+ margin: 0;
9710
+ }
9711
+ .tta-panel__support-banner {
9712
+ display: flex;
9713
+ align-items: center;
9714
+ gap: 0.5rem;
9715
+ min-height: 2.4rem;
9716
+ padding: 0.65rem 0.75rem;
9717
+ border-top: 1px solid var(--sidebar-border-color);
9718
+ background: var(--sidebar-bg-color);
9719
+ font-size: 0.75rem;
9720
+ }
9721
+ .tta-panel__support-banner-text {
9722
+ color: var(--text-secondary-color);
9723
+ flex: 1;
9724
+ min-width: 0;
9725
+ }
9726
+ .tta-panel__support-banner-links {
9727
+ display: flex;
9728
+ align-items: center;
9729
+ gap: 0.4rem;
9730
+ white-space: nowrap;
9731
+ }
9732
+ .tta-panel__support-banner-links a {
9733
+ color: var(--color-primary);
9734
+ text-decoration: underline;
9735
+ }
9736
+ .tta-panel__support-banner-dismiss {
9737
+ border: none;
9738
+ background: transparent;
9739
+ color: var(--text-secondary-color);
9740
+ display: inline-flex;
9741
+ align-items: center;
9742
+ justify-content: center;
9743
+ margin-left: 0.8rem;
9744
+ padding: 0;
9745
+ cursor: pointer;
9746
+ }
9747
+ .tta-panel__support-banner-dismiss svg {
9748
+ width: 0.9rem;
9749
+ height: 0.9rem;
9750
+ }
9751
+ .tta-panel__support-banner-dismiss:hover {
9752
+ color: var(--text-primary-color);
9753
+ }
9754
+ .tta-panel__footer {
9755
+ padding: 0 0.75rem 0.75rem;
9756
+ }
9757
+ .tta-preview-modal {
9758
+ display: flex;
9759
+ flex-direction: column;
9760
+ gap: 1rem;
9761
+ }
9762
+ .tta-preview-modal__header {
9763
+ display: flex;
9764
+ align-items: center;
9765
+ justify-content: space-between;
9766
+ padding: 0 0.85rem;
9767
+ }
9768
+ .tta-preview-modal__title {
9769
+ font-size: 1.25rem;
9770
+ font-weight: 600;
9771
+ }
9772
+ .tta-preview-modal__body {
9773
+ max-height: 70vh;
9774
+ overflow: auto;
9775
+ padding: 0.5rem;
9776
+ background: var(--sidebar-bg-color);
9777
+ }
9778
+ .tta-preview-modal img {
9779
+ width: 100%;
9780
+ height: auto;
9781
+ }
9782
+ .tta-preview-modal__close {
9783
+ border: none;
9784
+ background: transparent;
9785
+ cursor: pointer;
9786
+ display: inline-flex;
9787
+ align-items: center;
9788
+ justify-content: center;
9789
+ color: inherit;
9790
+ padding: 0.25rem;
9791
+ }
9792
+ .tta-history {
9793
+ position: absolute;
9794
+ inset: 0;
9795
+ z-index: 20;
9796
+ border-radius: inherit;
9797
+ background-color: var(--island-bg-color);
9798
+ padding: 0.75rem 0.75rem 0.75rem 1rem;
9799
+ display: flex;
9800
+ flex-direction: column;
9801
+ gap: 0.75rem;
9802
+ color: var(--text-primary-color);
9803
+ }
9804
+ .tta-history__header {
9805
+ display: flex;
9806
+ align-items: center;
9807
+ justify-content: space-between;
9808
+ gap: 0.5rem;
9809
+ }
9810
+ .tta-history__title {
9811
+ font-size: 1rem;
9812
+ font-weight: 600;
9813
+ }
9814
+ .tta-history__back-button {
9815
+ border: none;
9816
+ background: transparent;
9817
+ color: var(--text-primary-color);
9818
+ display: inline-flex;
9819
+ align-items: center;
9820
+ justify-content: center;
9821
+ cursor: pointer;
9822
+ border-radius: var(--border-radius-lg);
9823
+ height: 2.25rem;
9824
+ }
9825
+ .tta-history__back-button:hover {
9826
+ background-color: var(--button-hover-bg);
9827
+ }
9828
+ .tta-history__controls {
9829
+ display: flex;
9830
+ flex-direction: column;
9831
+ gap: 0.5rem;
9832
+ }
9833
+ .tta-history__search {
9834
+ border-radius: var(--border-radius-lg);
9835
+ padding: 0.85rem 0.6rem;
9836
+ background: rgba(99, 102, 241, 0.05);
9837
+ color: var(--text-primary-color);
9838
+ display: flex;
9839
+ align-items: center;
9840
+ gap: 0.4rem;
9841
+ }
9842
+ .tta-history__search input {
9843
+ flex: 1;
9844
+ border: none;
9845
+ background: transparent;
9846
+ font-size: 0.9rem;
9847
+ color: inherit;
9848
+ outline: none;
9849
+ }
9850
+ .tta-history__search input:focus,
9851
+ .tta-history__search input:focus-visible,
9852
+ .tta-history__search input:active {
9853
+ outline: none !important;
9854
+ border: none !important;
9855
+ box-shadow: none !important;
9856
+ }
9857
+ .tta-history__search-icon {
9858
+ font-size: 0.9rem;
9859
+ width: 0.875rem;
9860
+ height: 0.875rem;
9861
+ opacity: 0.7;
9862
+ }
9863
+ .tta-history__empty {
9864
+ color: var(--fg-muted);
9865
+ }
9866
+ .tta-history__list {
9867
+ flex: 1;
9868
+ overflow-y: auto;
9869
+ display: flex;
9870
+ flex-direction: column;
9871
+ gap: 0.5rem;
9872
+ margin-right: -0.75rem;
9873
+ padding-right: 0.75rem;
9874
+ }
9875
+ .tta-history__item {
9876
+ padding: 0.75rem;
9877
+ border-radius: var(--border-radius-lg);
9878
+ border: 1px solid var(--sidebar-border-color);
9879
+ background-color: transparent;
9880
+ color: var(--text-primary-color);
9881
+ display: flex;
9882
+ flex-direction: column;
9883
+ gap: 0.75rem;
9884
+ height: auto;
9885
+ position: relative;
9886
+ }
9887
+ .excalidraw.theme--light .tta-history__item {
9888
+ border-color: rgba(0, 0, 0, 0.06);
9889
+ }
9890
+ .tta-history__item:hover {
9891
+ background-color: rgba(99, 102, 241, 0.05);
9892
+ cursor: pointer;
9893
+ }
9894
+ .tta-history__item:hover .tta-history__actions {
9895
+ display: flex;
9896
+ }
9897
+ .tta-history__details {
9898
+ display: flex;
9899
+ flex-direction: column;
9900
+ width: 100%;
9901
+ }
9902
+ .tta-history__header-row {
9903
+ display: flex;
9904
+ align-items: center;
9905
+ justify-content: space-between;
9906
+ gap: 0.5rem;
9907
+ height: 2.25rem;
9908
+ }
9909
+ .tta-history__actions {
9910
+ display: none;
9911
+ align-items: center;
9912
+ gap: 0.35rem;
9913
+ }
9914
+ .tta-history__action-button--delete:hover {
9915
+ color: var(--color-danger);
9916
+ }
9917
+ .tta-history__edit-actions {
9918
+ display: flex;
9919
+ align-items: center;
9920
+ gap: 0.35rem;
9921
+ }
9922
+ .tta-history__edit-actions .tta-panel__icon-button--cancel:hover {
9923
+ color: var(--color-danger);
9924
+ }
9925
+ .tta-history__item-title-edit {
9926
+ display: flex;
9927
+ align-items: center;
9928
+ gap: 0.5rem;
9929
+ width: 100%;
9930
+ height: 100%;
9931
+ }
9932
+ .tta-history__rename-input {
9933
+ flex: 1;
9934
+ font-size: 0.95rem;
9935
+ padding: 0 0.25rem !important;
9936
+ height: 1.75rem;
9937
+ background: transparent !important;
9938
+ color: var(--text-primary-color);
9939
+ min-width: 0;
9940
+ }
9941
+ .tta-history__rename-input:focus,
9942
+ .tta-history__rename-input:focus-visible,
9943
+ .tta-history__rename-input:active {
9944
+ background: transparent !important;
9945
+ border-width: 1px;
9946
+ box-shadow: none !important;
9947
+ }
9948
+ .tta-history__item-title {
9949
+ flex: 1;
9950
+ white-space: nowrap;
9951
+ overflow: hidden;
9952
+ text-overflow: ellipsis;
9953
+ }
9954
+ .tta-history__thumb {
9955
+ width: 100%;
9956
+ height: 12rem;
9957
+ overflow: hidden;
9958
+ display: flex;
9959
+ align-items: center;
9960
+ justify-content: center;
9961
+ border-bottom: solid 1px var(--sidebar-border-color);
9962
+ padding-bottom: 0.75rem;
9963
+ }
9964
+ .tta-history__thumb img {
9965
+ width: 100%;
9966
+ height: 100%;
9967
+ object-fit: contain;
9968
+ padding: 0.5rem;
9969
+ }
9970
+
9971
+ /* TTA/TTAWarningMessage.scss */
9972
+ .tta-warning-message {
9973
+ width: min(100%, 21rem);
9974
+ margin: 0.5rem auto 0.75rem;
9975
+ padding: 0.625rem 1rem;
9976
+ border: 1px solid var(--color-warning-dark);
9977
+ border-radius: 8px;
9978
+ background: var(--color-warning);
9979
+ color: var(--color-warning-color);
9980
+ font-size: 0.8125rem;
9981
+ line-height: 1.35;
9982
+ }
9983
+
9984
+ /* TTA/TTAComposer.scss */
9985
+ .tta-composer {
9986
+ max-width: 48rem;
9987
+ margin: 0 auto;
9988
+ border-top: 1px solid var(--sidebar-border-color);
9989
+ padding-top: 1rem;
9990
+ }
9991
+ .tta-composer__container {
9992
+ --tta-composer-shadow: 0px 18px 35px rgba(15, 23, 42, 0.12);
9993
+ position: relative;
9994
+ display: flex;
9995
+ flex-direction: column;
9996
+ background: var(--island-bg-color);
9997
+ border-radius: 12px;
9998
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
9999
+ }
10000
+ .tta-composer__container:hover {
10001
+ border-color: var(--color-primary-light-darker);
10002
+ }
10003
+ .tta-composer__container:focus-within {
10004
+ border-color: #6965db;
10005
+ }
10006
+ .tta-composer__textarea-wrapper {
10007
+ position: relative;
10008
+ padding: 0 0 0.5rem;
10009
+ display: flex;
10010
+ }
10011
+ .tta-composer__textarea {
10012
+ flex: 1;
10013
+ resize: none;
10014
+ border: none !important;
10015
+ background: var(--island-bg-color) !important;
10016
+ color: var(--text-primary-color);
10017
+ font-family: inherit;
10018
+ font-size: 1rem;
10019
+ line-height: 1.5;
10020
+ padding: 0 !important;
10021
+ max-height: 240px;
10022
+ overflow-y: auto;
10023
+ white-space: pre-wrap !important;
10024
+ word-break: break-word !important;
10025
+ overflow-wrap: anywhere;
10026
+ scrollbar-width: none;
10027
+ scrollbar-color: transparent transparent;
10028
+ }
10029
+ .tta-composer__textarea::-webkit-scrollbar {
10030
+ width: 0;
10031
+ height: 0;
10032
+ }
10033
+ .tta-composer__textarea::placeholder {
10034
+ color: var(--color-muted-darker);
10035
+ }
10036
+ .tta-composer__textarea:focus {
10037
+ outline: none;
10038
+ }
10039
+ .tta-composer__textarea:is(:hover, :focus-visible, :active) {
10040
+ scrollbar-width: thin;
10041
+ scrollbar-color: rgba(105, 101, 219, 0.18) transparent;
10042
+ }
10043
+ .tta-composer__textarea:is(:hover, :focus-visible, :active)::-webkit-scrollbar {
10044
+ width: 0.35rem;
10045
+ height: 0.35rem;
10046
+ }
10047
+ .tta-composer__textarea:is(:hover, :focus-visible, :active)::-webkit-scrollbar-thumb {
10048
+ background-color: var(--island-bg-color);
10049
+ border-radius: 999px;
10050
+ }
10051
+ .tta-composer__toolbar {
10052
+ display: flex;
10053
+ align-items: center;
10054
+ justify-content: space-between;
10055
+ padding: 0 0 0.75rem;
10056
+ }
10057
+ .tta-composer__toolbar-section {
10058
+ display: flex;
10059
+ align-items: center;
10060
+ gap: 0.75rem;
10061
+ flex: 1;
10062
+ }
10063
+ .tta-composer__toolbar-section:last-child {
10064
+ justify-content: flex-end;
10065
+ }
10066
+ .tta-composer__icon-button {
10067
+ border: none;
10068
+ background: transparent;
10069
+ padding: 0.5rem;
10070
+ border-radius: 8px;
10071
+ color: var(--color-muted-darker);
10072
+ display: inline-flex;
10073
+ align-items: center;
10074
+ justify-content: center;
10075
+ cursor: pointer;
10076
+ transition:
10077
+ color 0.2s ease,
10078
+ background 0.2s ease,
10079
+ box-shadow 0.2s ease;
10080
+ }
10081
+ .tta-composer__icon-button:hover {
10082
+ color: var(--color-primary);
10083
+ background: var(--color-primary-light);
10084
+ }
10085
+ .tta-composer__icon-button:focus-visible {
10086
+ outline: none;
10087
+ box-shadow: 0 0 0 2px var(--color-primary-light-darker);
10088
+ }
10089
+ .tta-composer__image-icon {
10090
+ width: 1.25rem;
10091
+ height: 1.25rem;
10092
+ display: inline-flex;
10093
+ align-items: center;
10094
+ justify-content: center;
10095
+ transform: translateX(-1px);
10096
+ }
10097
+ .tta-composer__plus-icon {
10098
+ width: 1.25rem;
10099
+ height: 1.25rem;
10100
+ }
10101
+ .tta-composer__audio-btn {
10102
+ display: none;
10103
+ }
10104
+ .tta-composer__audio-btn svg {
10105
+ width: 1rem;
10106
+ height: 1rem;
10107
+ }
10108
+ .tta-composer__char-count {
10109
+ display: none;
10110
+ font-size: 0.75rem;
10111
+ color: var(--color-muted);
10112
+ font-weight: 500;
10113
+ }
10114
+ @media (min-width: 640px) {
10115
+ .tta-composer__char-count {
10116
+ display: inline-block;
10117
+ }
10118
+ }
10119
+ .tta-composer__send-btn {
10120
+ border: none;
10121
+ display: inline-flex;
10122
+ align-items: center;
10123
+ justify-content: center;
10124
+ width: 2.25rem;
10125
+ height: 2.25rem;
10126
+ border-radius: 8px;
10127
+ background-color: var(--sidebar-border-color);
10128
+ color: var(--color-muted-darker, #999);
10129
+ transition:
10130
+ transform 0.2s ease,
10131
+ background 0.2s ease,
10132
+ color 0.2s ease,
10133
+ box-shadow 0.2s ease;
10134
+ }
10135
+ .tta-composer__send-btn:disabled {
10136
+ cursor: not-allowed;
10137
+ color: var(--color-muted-darker, #999);
10138
+ }
10139
+ .tta-composer__send-btn:disabled .tta-composer__send-icon {
10140
+ color: var(--color-muted-darker, #999);
10141
+ }
10142
+ .tta-composer__send-btn--active {
10143
+ background-color: var(--color-primary);
10144
+ color: var(--color-icon-white);
10145
+ cursor: pointer;
10146
+ }
10147
+ .tta-composer__send-btn--active:hover {
10148
+ transform: scale(1.05) translateY(-1px);
10149
+ background-color: var(--color-primary-darker);
10150
+ }
10151
+ .tta-composer__send-btn--active:active {
10152
+ transform: scale(0.95);
10153
+ }
10154
+ .tta-composer__send-icon {
10155
+ width: 1.1rem;
10156
+ height: 1.1rem;
10157
+ transition: margin-left 0.2s ease;
10158
+ }
10159
+ .tta-composer__send-icon--active {
10160
+ }
10161
+ .tta-composer__stop-btn {
10162
+ border: none;
10163
+ display: inline-flex;
10164
+ align-items: center;
10165
+ justify-content: center;
10166
+ width: 2.25rem;
10167
+ height: 2.25rem;
10168
+ border-radius: 8px;
10169
+ background-color: var(--text-primary-color);
10170
+ color: var(--color-icon-white);
10171
+ cursor: pointer;
10172
+ transition: transform 0.2s ease, background 0.2s ease;
10173
+ }
10174
+ .tta-composer__stop-btn:hover {
10175
+ transform: scale(1.05);
10176
+ opacity: 0.9;
10177
+ }
10178
+ .tta-composer__stop-btn:active {
10179
+ transform: scale(0.95);
10180
+ }
10181
+ .tta-composer__stop-icon {
10182
+ width: 1rem;
10183
+ height: 1rem;
10184
+ }
10185
+ .tta-composer__container:focus-within .tta-composer__focus-glow {
10186
+ opacity: 1;
10187
+ }
10188
+ .tta-composer__disclaimer {
10189
+ margin-top: 0.75rem;
10190
+ text-align: center;
10191
+ font-size: 0.75rem;
10192
+ color: var(--color-muted-darker);
10193
+ }
10194
+ .tta-composer__preview {
10195
+ padding: 0.5rem 1rem;
10196
+ display: flex;
10197
+ gap: 0.5rem;
10198
+ overflow-x: auto;
10199
+ scrollbar-width: none;
10200
+ }
10201
+ .tta-composer__preview-image-container {
10202
+ position: relative;
10203
+ width: 60px;
10204
+ height: 60px;
10205
+ border-radius: 8px;
10206
+ overflow: hidden;
10207
+ border: 1px solid var(--sidebar-border-color);
10208
+ background: var(--default-bg-color);
10209
+ flex-shrink: 0;
10210
+ }
10211
+ .tta-composer__preview-image-container:hover .tta-composer__preview-close {
10212
+ opacity: 1;
10213
+ }
10214
+ .tta-composer__preview-image-container:focus-visible {
10215
+ outline: 2px solid var(--color-primary);
10216
+ outline-offset: 2px;
10217
+ }
10218
+ .tta-composer__preview-image {
10219
+ width: 100%;
10220
+ height: 100%;
10221
+ object-fit: cover;
10222
+ }
10223
+ .tta-composer__preview-close {
10224
+ position: absolute;
10225
+ top: 2px;
10226
+ right: 2px;
10227
+ width: 16px;
10228
+ height: 16px;
10229
+ border-radius: 50%;
10230
+ background: rgba(0, 0, 0, 0.6);
10231
+ color: #fff;
10232
+ border: none;
10233
+ cursor: pointer;
10234
+ display: flex;
10235
+ align-items: center;
10236
+ justify-content: center;
10237
+ padding: 2px;
10238
+ opacity: 0;
10239
+ transition: opacity 0.2s ease, background 0.2s ease;
10240
+ }
10241
+ .tta-composer__preview-close:hover {
10242
+ background: rgba(0, 0, 0, 0.8);
10243
+ }
10244
+ .tta-composer__preview-close svg {
10245
+ width: 100%;
10246
+ height: 100%;
10247
+ }
7977
10248
  /*# sourceMappingURL=index.css.map */