agentation 2.3.1 → 2.3.3

package/dist/index.js

@@ -84,14 +84,14 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/page-toolbar-css/index.tsx
-var import_react3 = require("react");
-var import_react_dom = require("react-dom");
+var import_react4 = require("react");
+var import_react_dom2 = require("react-dom");
 
 // src/components/annotation-popup-css/index.tsx
 var import_react = require("react");
 
 // src/components/annotation-popup-css/styles.module.scss
-var css = 'svg[fill=none] {\n  fill: none !important;\n}\n\n@keyframes styles-module__popupEnter___AuQDN {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) scale(0.95) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__popupExit___JJKQX {\n  from {\n    opacity: 1;\n    transform: translateX(-50%) scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(-50%) scale(0.95) translateY(4px);\n  }\n}\n@keyframes styles-module__shake___jdbWe {\n  0%, 100% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(0);\n  }\n  20% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(-3px);\n  }\n  40% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(3px);\n  }\n  60% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(-2px);\n  }\n  80% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(2px);\n  }\n}\n.styles-module__popup___IhzrD {\n  position: fixed;\n  transform: translateX(-50%);\n  width: 280px;\n  padding: 0.75rem 1rem 14px;\n  background: #1a1a1a;\n  border-radius: 16px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  cursor: default;\n  z-index: 100001;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  will-change: transform, opacity;\n  opacity: 0;\n}\n.styles-module__popup___IhzrD.styles-module__enter___L7U7N {\n  animation: styles-module__popupEnter___AuQDN 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n.styles-module__popup___IhzrD.styles-module__entered___COX-w {\n  opacity: 1;\n  transform: translateX(-50%) scale(1) translateY(0);\n}\n.styles-module__popup___IhzrD.styles-module__exit___5eGjE {\n  animation: styles-module__popupExit___JJKQX 0.15s ease-in forwards;\n}\n.styles-module__popup___IhzrD.styles-module__entered___COX-w.styles-module__shake___jdbWe {\n  animation: styles-module__shake___jdbWe 0.25s ease-out;\n}\n\n.styles-module__header___wWsSi {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.5625rem;\n}\n\n.styles-module__element___fTV2z {\n  font-size: 0.75rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.5);\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n.styles-module__headerToggle___WpW0b {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  flex: 1;\n  min-width: 0;\n  text-align: left;\n}\n.styles-module__headerToggle___WpW0b .styles-module__element___fTV2z {\n  flex: 1;\n}\n\n.styles-module__chevron___ZZJlR {\n  color: rgba(255, 255, 255, 0.5);\n  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n  flex-shrink: 0;\n}\n.styles-module__chevron___ZZJlR.styles-module__expanded___2Hxgv {\n  transform: rotate(90deg);\n}\n\n.styles-module__stylesWrapper___pnHgy {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.styles-module__stylesWrapper___pnHgy.styles-module__expanded___2Hxgv {\n  grid-template-rows: 1fr;\n}\n\n.styles-module__stylesInner___YYZe2 {\n  overflow: hidden;\n}\n\n.styles-module__stylesBlock___VfQKn {\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 0.375rem;\n  padding: 0.5rem 0.625rem;\n  margin-bottom: 0.5rem;\n  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;\n  font-size: 0.6875rem;\n  line-height: 1.5;\n}\n\n.styles-module__styleLine___1YQiD {\n  color: rgba(255, 255, 255, 0.85);\n  word-break: break-word;\n}\n\n.styles-module__styleProperty___84L1i {\n  color: #c792ea;\n}\n\n.styles-module__styleValue___q51-h {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.styles-module__timestamp___Dtpsv {\n  font-size: 0.625rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.35);\n  font-variant-numeric: tabular-nums;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n}\n\n.styles-module__quote___mcMmQ {\n  font-size: 12px;\n  font-style: italic;\n  color: rgba(255, 255, 255, 0.6);\n  margin-bottom: 0.5rem;\n  padding: 0.4rem 0.5rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 0.25rem;\n  line-height: 1.45;\n}\n\n.styles-module__textarea___jrSae {\n  width: 100%;\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  font-family: inherit;\n  background: rgba(255, 255, 255, 0.05);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 8px;\n  resize: none;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.styles-module__textarea___jrSae:focus {\n  border-color: #3c82f7;\n}\n.styles-module__textarea___jrSae.styles-module__green___99l3h:focus {\n  border-color: #34c759;\n}\n.styles-module__textarea___jrSae::placeholder {\n  color: rgba(255, 255, 255, 0.35);\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar {\n  width: 6px;\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar-track {\n  background: transparent;\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n}\n\n.styles-module__actions___D6x3f {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.styles-module__cancel___hRjnL,\n.styles-module__submit___K-mIR {\n  padding: 0.4rem 0.875rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  border-radius: 1rem;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;\n}\n\n.styles-module__cancel___hRjnL {\n  background: transparent;\n  color: rgba(255, 255, 255, 0.5);\n}\n.styles-module__cancel___hRjnL:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.styles-module__submit___K-mIR {\n  color: white;\n}\n.styles-module__submit___K-mIR:hover:not(:disabled) {\n  filter: brightness(0.9);\n}\n.styles-module__submit___K-mIR:disabled {\n  cursor: not-allowed;\n}\n\n.styles-module__deleteWrapper___oSjdo {\n  margin-right: auto;\n}\n\n.styles-module__deleteButton___4VuAE {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.4);\n  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;\n}\n.styles-module__deleteButton___4VuAE:hover {\n  background: rgba(255, 59, 48, 0.25);\n  color: #ff3b30;\n}\n.styles-module__deleteButton___4VuAE:active {\n  transform: scale(0.92);\n}\n\n.styles-module__light___6AaSQ.styles-module__popup___IhzrD {\n  background: #fff;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n}\n.styles-module__light___6AaSQ .styles-module__element___fTV2z {\n  color: rgba(0, 0, 0, 0.6);\n}\n.styles-module__light___6AaSQ .styles-module__timestamp___Dtpsv {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__chevron___ZZJlR {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__stylesBlock___VfQKn {\n  background: rgba(0, 0, 0, 0.03);\n}\n.styles-module__light___6AaSQ .styles-module__styleLine___1YQiD {\n  color: rgba(0, 0, 0, 0.75);\n}\n.styles-module__light___6AaSQ .styles-module__styleProperty___84L1i {\n  color: #7c3aed;\n}\n.styles-module__light___6AaSQ .styles-module__styleValue___q51-h {\n  color: rgba(0, 0, 0, 0.75);\n}\n.styles-module__light___6AaSQ .styles-module__quote___mcMmQ {\n  color: rgba(0, 0, 0, 0.55);\n  background: rgba(0, 0, 0, 0.04);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae {\n  background: rgba(0, 0, 0, 0.03);\n  color: #1a1a1a;\n  border-color: rgba(0, 0, 0, 0.12);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae::placeholder {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.15);\n}\n.styles-module__light___6AaSQ .styles-module__cancel___hRjnL {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___6AaSQ .styles-module__cancel___hRjnL:hover {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.75);\n}\n.styles-module__light___6AaSQ .styles-module__deleteButton___4VuAE {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__deleteButton___4VuAE:hover {\n  background: rgba(255, 59, 48, 0.15);\n  color: #ff3b30;\n}';
+var css = '.styles-module__popup___IhzrD svg[fill=none] {\n  fill: none !important;\n}\n.styles-module__popup___IhzrD svg[fill=none] :not([fill]) {\n  fill: none !important;\n}\n\n@keyframes styles-module__popupEnter___AuQDN {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) scale(0.95) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__popupExit___JJKQX {\n  from {\n    opacity: 1;\n    transform: translateX(-50%) scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(-50%) scale(0.95) translateY(4px);\n  }\n}\n@keyframes styles-module__shake___jdbWe {\n  0%, 100% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(0);\n  }\n  20% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(-3px);\n  }\n  40% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(3px);\n  }\n  60% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(-2px);\n  }\n  80% {\n    transform: translateX(-50%) scale(1) translateY(0) translateX(2px);\n  }\n}\n.styles-module__popup___IhzrD {\n  position: fixed;\n  transform: translateX(-50%);\n  width: 280px;\n  padding: 0.75rem 1rem 14px;\n  background: #1a1a1a;\n  border-radius: 16px;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  cursor: default;\n  z-index: 100001;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  will-change: transform, opacity;\n  opacity: 0;\n}\n.styles-module__popup___IhzrD.styles-module__enter___L7U7N {\n  animation: styles-module__popupEnter___AuQDN 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n.styles-module__popup___IhzrD.styles-module__entered___COX-w {\n  opacity: 1;\n  transform: translateX(-50%) scale(1) translateY(0);\n}\n.styles-module__popup___IhzrD.styles-module__exit___5eGjE {\n  animation: styles-module__popupExit___JJKQX 0.15s ease-in forwards;\n}\n.styles-module__popup___IhzrD.styles-module__entered___COX-w.styles-module__shake___jdbWe {\n  animation: styles-module__shake___jdbWe 0.25s ease-out;\n}\n\n.styles-module__header___wWsSi {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.5625rem;\n}\n\n.styles-module__element___fTV2z {\n  font-size: 0.75rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.5);\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n.styles-module__headerToggle___WpW0b {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  flex: 1;\n  min-width: 0;\n  text-align: left;\n}\n.styles-module__headerToggle___WpW0b .styles-module__element___fTV2z {\n  flex: 1;\n}\n\n.styles-module__chevron___ZZJlR {\n  color: rgba(255, 255, 255, 0.5);\n  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n  flex-shrink: 0;\n}\n.styles-module__chevron___ZZJlR.styles-module__expanded___2Hxgv {\n  transform: rotate(90deg);\n}\n\n.styles-module__stylesWrapper___pnHgy {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.styles-module__stylesWrapper___pnHgy.styles-module__expanded___2Hxgv {\n  grid-template-rows: 1fr;\n}\n\n.styles-module__stylesInner___YYZe2 {\n  overflow: hidden;\n}\n\n.styles-module__stylesBlock___VfQKn {\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 0.375rem;\n  padding: 0.5rem 0.625rem;\n  margin-bottom: 0.5rem;\n  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;\n  font-size: 0.6875rem;\n  line-height: 1.5;\n}\n\n.styles-module__styleLine___1YQiD {\n  color: rgba(255, 255, 255, 0.85);\n  word-break: break-word;\n}\n\n.styles-module__styleProperty___84L1i {\n  color: #c792ea;\n}\n\n.styles-module__styleValue___q51-h {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.styles-module__timestamp___Dtpsv {\n  font-size: 0.625rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.35);\n  font-variant-numeric: tabular-nums;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n}\n\n.styles-module__quote___mcMmQ {\n  font-size: 12px;\n  font-style: italic;\n  color: rgba(255, 255, 255, 0.6);\n  margin-bottom: 0.5rem;\n  padding: 0.4rem 0.5rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 0.25rem;\n  line-height: 1.45;\n}\n\n.styles-module__textarea___jrSae {\n  width: 100%;\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  font-family: inherit;\n  background: rgba(255, 255, 255, 0.05);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 8px;\n  resize: none;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.styles-module__textarea___jrSae:focus {\n  border-color: var(--agentation-color-blue);\n}\n.styles-module__textarea___jrSae.styles-module__green___99l3h:focus {\n  border-color: var(--agentation-color-green);\n}\n.styles-module__textarea___jrSae::placeholder {\n  color: rgba(255, 255, 255, 0.35);\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar {\n  width: 6px;\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar-track {\n  background: transparent;\n}\n.styles-module__textarea___jrSae::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n}\n\n.styles-module__actions___D6x3f {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.styles-module__cancel___hRjnL,\n.styles-module__submit___K-mIR {\n  padding: 0.4rem 0.875rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  border-radius: 1rem;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;\n}\n\n.styles-module__cancel___hRjnL {\n  background: transparent;\n  color: rgba(255, 255, 255, 0.5);\n}\n.styles-module__cancel___hRjnL:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.styles-module__submit___K-mIR {\n  color: white;\n}\n.styles-module__submit___K-mIR:hover:not(:disabled) {\n  filter: brightness(0.9);\n}\n.styles-module__submit___K-mIR:disabled {\n  cursor: not-allowed;\n}\n\n.styles-module__deleteWrapper___oSjdo {\n  margin-right: auto;\n}\n\n.styles-module__deleteButton___4VuAE {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.4);\n  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;\n}\n.styles-module__deleteButton___4VuAE:hover {\n  background-color: color-mix(in srgb, var(--agentation-color-red) 25%, transparent);\n  color: var(--agentation-color-red);\n}\n.styles-module__deleteButton___4VuAE:active {\n  transform: scale(0.92);\n}\n\n.styles-module__light___6AaSQ.styles-module__popup___IhzrD {\n  background: #fff;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n}\n.styles-module__light___6AaSQ .styles-module__element___fTV2z {\n  color: rgba(0, 0, 0, 0.6);\n}\n.styles-module__light___6AaSQ .styles-module__timestamp___Dtpsv {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__chevron___ZZJlR {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__stylesBlock___VfQKn {\n  background: rgba(0, 0, 0, 0.03);\n}\n.styles-module__light___6AaSQ .styles-module__styleLine___1YQiD {\n  color: rgba(0, 0, 0, 0.75);\n}\n.styles-module__light___6AaSQ .styles-module__styleProperty___84L1i {\n  color: #7c3aed;\n}\n.styles-module__light___6AaSQ .styles-module__styleValue___q51-h {\n  color: rgba(0, 0, 0, 0.75);\n}\n.styles-module__light___6AaSQ .styles-module__quote___mcMmQ {\n  color: rgba(0, 0, 0, 0.55);\n  background: rgba(0, 0, 0, 0.04);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae {\n  background: rgba(0, 0, 0, 0.03);\n  color: #1a1a1a;\n  border-color: rgba(0, 0, 0, 0.12);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae::placeholder {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__textarea___jrSae::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.15);\n}\n.styles-module__light___6AaSQ .styles-module__cancel___hRjnL {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___6AaSQ .styles-module__cancel___hRjnL:hover {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.75);\n}\n.styles-module__light___6AaSQ .styles-module__deleteButton___4VuAE {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___6AaSQ .styles-module__deleteButton___4VuAE:hover {\n  background-color: color-mix(in srgb, var(--agentation-color-red) 25%, transparent);\n  color: var(--agentation-color-red);\n}';
 var classNames = { "popup": "styles-module__popup___IhzrD", "enter": "styles-module__enter___L7U7N", "popupEnter": "styles-module__popupEnter___AuQDN", "entered": "styles-module__entered___COX-w", "exit": "styles-module__exit___5eGjE", "popupExit": "styles-module__popupExit___JJKQX", "shake": "styles-module__shake___jdbWe", "header": "styles-module__header___wWsSi", "element": "styles-module__element___fTV2z", "headerToggle": "styles-module__headerToggle___WpW0b", "chevron": "styles-module__chevron___ZZJlR", "expanded": "styles-module__expanded___2Hxgv", "stylesWrapper": "styles-module__stylesWrapper___pnHgy", "stylesInner": "styles-module__stylesInner___YYZe2", "stylesBlock": "styles-module__stylesBlock___VfQKn", "styleLine": "styles-module__styleLine___1YQiD", "styleProperty": "styles-module__styleProperty___84L1i", "styleValue": "styles-module__styleValue___q51-h", "timestamp": "styles-module__timestamp___Dtpsv", "quote": "styles-module__quote___mcMmQ", "textarea": "styles-module__textarea___jrSae", "green": "styles-module__green___99l3h", "actions": "styles-module__actions___D6x3f", "cancel": "styles-module__cancel___hRjnL", "submit": "styles-module__submit___K-mIR", "deleteWrapper": "styles-module__deleteWrapper___oSjdo", "deleteButton": "styles-module__deleteButton___4VuAE", "light": "styles-module__light___6AaSQ" };
 if (typeof document !== "undefined") {
   let style = document.getElementById("feedback-tool-styles-annotation-popup-css-styles");
@@ -104,6 +104,20 @@ if (typeof document !== "undefined") {
 }
 var styles_module_default = classNames;
 
+// src/components/icon-transitions.module.scss
+var css2 = ".icon-transitions-module__iconState___uqK9J {\n  transition: opacity 0.2s ease, transform 0.2s ease;\n  transform-origin: center;\n}\n\n.icon-transitions-module__iconStateFast___HxlMm {\n  transition: opacity 0.15s ease, transform 0.15s ease;\n  transform-origin: center;\n}\n\n.icon-transitions-module__iconFade___nPwXg {\n  transition: opacity 0.2s ease;\n}\n\n.icon-transitions-module__iconFadeFast___Ofb2t {\n  transition: opacity 0.15s ease;\n}\n\n.icon-transitions-module__visible___PlHsU {\n  opacity: 1 !important;\n}\n\n.icon-transitions-module__visibleScaled___8Qog- {\n  opacity: 1 !important;\n  transform: scale(1);\n}\n\n.icon-transitions-module__hidden___ETykt {\n  opacity: 0 !important;\n}\n\n.icon-transitions-module__hiddenScaled___JXn-m {\n  opacity: 0 !important;\n  transform: scale(0.8);\n}\n\n.icon-transitions-module__sending___uaLN- {\n  opacity: 0.5 !important;\n  transform: scale(0.8);\n}";
+var classNames2 = { "iconState": "icon-transitions-module__iconState___uqK9J", "iconStateFast": "icon-transitions-module__iconStateFast___HxlMm", "iconFade": "icon-transitions-module__iconFade___nPwXg", "iconFadeFast": "icon-transitions-module__iconFadeFast___Ofb2t", "visible": "icon-transitions-module__visible___PlHsU", "visibleScaled": "icon-transitions-module__visibleScaled___8Qog-", "hidden": "icon-transitions-module__hidden___ETykt", "hiddenScaled": "icon-transitions-module__hiddenScaled___JXn-m", "sending": "icon-transitions-module__sending___uaLN-" };
+if (typeof document !== "undefined") {
+  let style = document.getElementById("feedback-tool-styles-components-icon-transitions");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "feedback-tool-styles-components-icon-transitions";
+    style.textContent = css2;
+    document.head.appendChild(style);
+  }
+}
+var icon_transitions_module_default = classNames2;
+
 // src/components/icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var IconClose = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -191,28 +205,10 @@ var IconListSparkle = ({
   ] }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: "clip0_list_sparkle", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "24", height: "24", fill: "white" }) }) })
 ] });
-var IconHelp = ({ size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "circle",
-    {
-      cx: "10",
-      cy: "10.5",
-      r: "5.25",
-      stroke: "currentColor",
-      strokeWidth: "1.25"
-    }
-  ),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "path",
-    {
-      d: "M8.5 8.75C8.5 7.92 9.17 7.25 10 7.25C10.83 7.25 11.5 7.92 11.5 8.75C11.5 9.58 10.83 10.25 10 10.25V11",
-      stroke: "currentColor",
-      strokeWidth: "1.25",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "13", r: "0.75", fill: "currentColor" })
+var IconHelp = ({ size = 20, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "10", r: "6", stroke: "currentColor", strokeWidth: "1.25" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.24 8.19C8.38 7.78 8.66 7.44 9.03 7.23C9.4 7.01 9.84 6.93 10.26 7C10.68 7.07 11.06 7.29 11.34 7.62C11.61 7.95 11.76 8.36 11.76 8.79152C11.76 10 10 10.6 10 10.6V10.83", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "13", r: "0.625", fill: "currentColor" })
 ] });
 var IconCheckSmallAnimated = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 14 14", fill: "none", children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
@@ -279,12 +275,7 @@ var IconCopyAlt = ({ size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs
   )
 ] });
 var IconCopyAnimated = ({ size = 24, copied = false }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-      .copy-icon, .check-icon {
-        transition: opacity 0.2s ease, transform 0.2s ease;
-      }
-    ` }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "copy-icon", style: { opacity: copied ? 0 : 1, transform: copied ? "scale(0.8)" : "scale(1)", transformOrigin: "center" }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: `${icon_transitions_module_default.iconState} ${copied ? icon_transitions_module_default.hiddenScaled : icon_transitions_module_default.visibleScaled}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
@@ -303,12 +294,12 @@ var IconCopyAnimated = ({ size = 24, copied = false }) => /* @__PURE__ */ (0, im
       }
     )
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "check-icon", style: { opacity: copied ? 1 : 0, transform: copied ? "scale(1)" : "scale(0.8)", transformOrigin: "center" }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: `${icon_transitions_module_default.iconState} ${copied ? icon_transitions_module_default.visibleScaled : icon_transitions_module_default.hiddenScaled}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
         d: "M12 20C7.58172 20 4 16.4182 4 12C4 7.58172 7.58172 4 12 4C16.4182 4 20 7.58172 20 12C20 16.4182 16.4182 20 12 20Z",
-        stroke: "#22c55e",
+        stroke: "var(--agentation-color-green)",
         strokeWidth: "1.5",
         strokeLinecap: "round",
         strokeLinejoin: "round"
@@ -318,7 +309,7 @@ var IconCopyAnimated = ({ size = 24, copied = false }) => /* @__PURE__ */ (0, im
       "path",
       {
         d: "M15 10L11 14.25L9.25 12.25",
-        stroke: "#22c55e",
+        stroke: "var(--agentation-color-green)",
         strokeWidth: "1.5",
         strokeLinecap: "round",
         strokeLinejoin: "round"
@@ -335,16 +326,7 @@ var IconSendArrow = ({
   const showError = state === "failed";
   const isSending = state === "sending";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-        .send-arrow-icon, .send-check-icon, .send-error-icon {
-          transition: opacity 0.15s ease, transform 0.15s ease;
-        }
-      ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "send-arrow-icon", style: {
-      opacity: showArrow ? 1 : isSending ? 0.5 : 0,
-      transform: showArrow ? "scale(1)" : "scale(0.8)",
-      transformOrigin: "center"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: `${icon_transitions_module_default.iconStateFast} ${showArrow ? icon_transitions_module_default.visibleScaled : isSending ? icon_transitions_module_default.sending : icon_transitions_module_default.hiddenScaled}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
         d: "M9.875 14.125L12.3506 19.6951C12.7184 20.5227 13.9091 20.4741 14.2083 19.6193L18.8139 6.46032C19.0907 5.6695 18.3305 4.90933 17.5397 5.18611L4.38072 9.79174C3.52589 10.0909 3.47731 11.2816 4.30494 11.6494L9.875 14.125ZM9.875 14.125L13.375 10.625",
@@ -354,16 +336,12 @@ var IconSendArrow = ({
         strokeLinejoin: "round"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "send-check-icon", style: {
-      opacity: showCheck ? 1 : 0,
-      transform: showCheck ? "scale(1)" : "scale(0.8)",
-      transformOrigin: "center"
-    }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: `${icon_transitions_module_default.iconStateFast} ${showCheck ? icon_transitions_module_default.visibleScaled : icon_transitions_module_default.hiddenScaled}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "path",
         {
           d: "M12 20C7.58172 20 4 16.4182 4 12C4 7.58172 7.58172 4 12 4C16.4182 4 20 7.58172 20 12C20 16.4182 16.4182 20 12 20Z",
-          stroke: "#22c55e",
+          stroke: "var(--agentation-color-green)",
           strokeWidth: "1.5",
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -373,23 +351,19 @@ var IconSendArrow = ({
         "path",
         {
           d: "M15 10L11 14.25L9.25 12.25",
-          stroke: "#22c55e",
+          stroke: "var(--agentation-color-green)",
           strokeWidth: "1.5",
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "send-error-icon", style: {
-      opacity: showError ? 1 : 0,
-      transform: showError ? "scale(1)" : "scale(0.8)",
-      transformOrigin: "center"
-    }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: `${icon_transitions_module_default.iconStateFast} ${showError ? icon_transitions_module_default.visibleScaled : icon_transitions_module_default.hiddenScaled}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "path",
         {
           d: "M12 20C7.58172 20 4 16.4182 4 12C4 7.58172 7.58172 4 12 4C16.4182 4 20 7.58172 20 12C20 16.4182 16.4182 20 12 20Z",
-          stroke: "#ef4444",
+          stroke: "var(--agentation-color-red)",
           strokeWidth: "1.5",
           strokeLinecap: "round",
           strokeLinejoin: "round"
@@ -399,22 +373,17 @@ var IconSendArrow = ({
         "path",
         {
           d: "M12 8V12",
-          stroke: "#ef4444",
+          stroke: "var(--agentation-color-red)",
           strokeWidth: "1.5",
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "15", r: "0.5", fill: "#ef4444", stroke: "#ef4444", strokeWidth: "1" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "15", r: "0.5", fill: "var(--agentation-color-red)", stroke: "var(--agentation-color-red)", strokeWidth: "1" })
     ] })
   ] });
 };
 var IconSendAnimated = ({ size = 24, sent = false }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 22 21", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-      .send-icon, .sent-icon {
-        transition: opacity 0.2s ease, transform 0.2s ease;
-      }
-    ` }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "send-icon", style: { opacity: sent ? 0 : 1, transform: sent ? "scale(0.8)" : "scale(1)", transformOrigin: "center" }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: `${icon_transitions_module_default.iconState} ${sent ? icon_transitions_module_default.hiddenScaled : icon_transitions_module_default.visibleScaled}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
@@ -453,7 +422,7 @@ var IconSendAnimated = ({ size = 24, sent = false }) => /* @__PURE__ */ (0, impo
       }
     )
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "sent-icon", style: { opacity: sent ? 1 : 0, transform: sent ? "scale(1)" : "scale(0.8)", transformOrigin: "center" }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: `${icon_transitions_module_default.iconState} ${sent ? icon_transitions_module_default.visibleScaled : icon_transitions_module_default.hiddenScaled}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
@@ -539,12 +508,7 @@ var IconEyeClosed = ({ size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime.js
   )
 ] });
 var IconEyeAnimated = ({ size = 24, isOpen = true }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-      .eye-open, .eye-closed {
-        transition: opacity 0.2s ease;
-      }
-    ` }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "eye-open", style: { opacity: isOpen ? 1 : 0 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: `${icon_transitions_module_default.iconFade} ${isOpen ? icon_transitions_module_default.visible : icon_transitions_module_default.hidden}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
@@ -566,7 +530,7 @@ var IconEyeAnimated = ({ size = 24, isOpen = true }) => /* @__PURE__ */ (0, impo
       }
     )
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "eye-closed", style: { opacity: isOpen ? 0 : 1 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: `${icon_transitions_module_default.iconFade} ${isOpen ? icon_transitions_module_default.hidden : icon_transitions_module_default.visible}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "path",
       {
@@ -586,41 +550,33 @@ var IconEyeAnimated = ({ size = 24, isOpen = true }) => /* @__PURE__ */ (0, impo
   ] })
 ] });
 var IconPausePlayAnimated = ({ size = 24, isPaused = false }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
-      .pause-bar, .play-triangle {
-        transition: opacity 0.15s ease;
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: `${icon_transitions_module_default.iconFadeFast} ${isPaused ? icon_transitions_module_default.hidden : icon_transitions_module_default.visible}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M8 6L8 18",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
       }
-    ` }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "path",
-    {
-      className: "pause-bar",
-      d: "M8 6L8 18",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      style: { opacity: isPaused ? 0 : 1 }
-    }
-  ),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "path",
-    {
-      className: "pause-bar",
-      d: "M16 18L16 6",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      style: { opacity: isPaused ? 0 : 1 }
-    }
-  ),
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M16 18L16 6",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    )
+  ] }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "path",
     {
-      className: "play-triangle",
+      className: `${icon_transitions_module_default.iconFadeFast} ${isPaused ? icon_transitions_module_default.visible : icon_transitions_module_default.hidden}`,
       d: "M17.75 10.701C18.75 11.2783 18.75 12.7217 17.75 13.299L8.75 18.4952C7.75 19.0725 6.5 18.3509 6.5 17.1962L6.5 6.80384C6.5 5.64914 7.75 4.92746 8.75 5.50481L17.75 10.701Z",
       stroke: "currentColor",
-      strokeWidth: "1.5",
-      style: { opacity: isPaused ? 1 : 0 }
+      strokeWidth: "1.5"
     }
   )
 ] });
@@ -1226,6 +1182,18 @@ function unfreeze() {
 
 // src/components/annotation-popup-css/index.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function focusBypassingTraps(el) {
+  if (!el) return;
+  const trap = (e) => e.stopImmediatePropagation();
+  document.addEventListener("focusin", trap, true);
+  document.addEventListener("focusout", trap, true);
+  try {
+    el.focus();
+  } finally {
+    document.removeEventListener("focusin", trap, true);
+    document.removeEventListener("focusout", trap, true);
+  }
+}
 var AnnotationPopupCSS = (0, import_react.forwardRef)(
   function AnnotationPopupCSS2({
     element,
@@ -1267,7 +1235,7 @@ var AnnotationPopupCSS = (0, import_react.forwardRef)(
       const focusTimer = originalSetTimeout(() => {
         const textarea = textareaRef.current;
         if (textarea) {
-          textarea.focus();
+          focusBypassingTraps(textarea);
           textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
           textarea.scrollTop = textarea.scrollHeight;
         }
@@ -1284,7 +1252,7 @@ var AnnotationPopupCSS = (0, import_react.forwardRef)(
       setIsShaking(true);
       shakeTimerRef.current = originalSetTimeout(() => {
         setIsShaking(false);
-        textareaRef.current?.focus();
+        focusBypassingTraps(textareaRef.current);
       }, 250);
     }, []);
     (0, import_react.useImperativeHandle)(ref, () => ({
@@ -1340,7 +1308,7 @@ var AnnotationPopupCSS = (0, import_react.forwardRef)(
                   const wasExpanded = isStylesExpanded;
                   setIsStylesExpanded(!isStylesExpanded);
                   if (wasExpanded) {
-                    originalSetTimeout(() => textareaRef.current?.focus(), 0);
+                    originalSetTimeout(() => focusBypassingTraps(textareaRef.current), 0);
                   }
                 },
                 type: "button",
@@ -2080,6 +2048,10 @@ var DEFAULT_SKIP_PATTERNS = [
   // AppRouter, BrowserRouter
   /^Client(Page|Segment|Root)/,
   // ClientPageRoot, ClientSegmentRoot
+  /^Segment(ViewNode|Node)$/,
+  // Next.js App Router internals
+  /^LayoutSegment/,
+  // Next.js layout segment wrappers
   /^Server(Root|Component|Render)/,
   // ServerRoot (not ServerStatus)
   /^RSC/,
@@ -2743,21 +2715,136 @@ function findNearestComponentSource(element, maxAncestors = 10) {
 }
 
 // src/components/page-toolbar-css/styles.module.scss
-var css2 = 'svg[fill=none] {\n  fill: none !important;\n}\n\n.styles-module__toolbar___wNsdK :where(button, input, select, textarea, label) {\n  background: unset;\n  border: unset;\n  border-radius: unset;\n  padding: unset;\n  margin: unset;\n  color: unset;\n  font: unset;\n  letter-spacing: unset;\n  text-transform: unset;\n  text-decoration: unset;\n  box-shadow: unset;\n  outline: unset;\n}\n\n@keyframes styles-module__toolbarEnter___u8RRu {\n  from {\n    opacity: 0;\n    transform: scale(0.5) rotate(90deg);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) rotate(0deg);\n  }\n}\n@keyframes styles-module__toolbarHide___y8kaT {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n@keyframes styles-module__badgeEnter___mVQLj {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__scaleIn___c-r1K {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__scaleOut___Wctwz {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n}\n@keyframes styles-module__slideUp___kgD36 {\n  from {\n    opacity: 0;\n    transform: scale(0.85) translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__slideDown___zcdje {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.85) translateY(8px);\n  }\n}\n@keyframes styles-module__markerIn___5FaAP {\n  0% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.3);\n  }\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n@keyframes styles-module__markerOut___GU5jX {\n  0% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.3);\n  }\n}\n@keyframes styles-module__fadeIn___b9qmf {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes styles-module__fadeOut___6Ut6- {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes styles-module__tooltipIn___0N31w {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(2px) scale(0.891);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0) scale(0.909);\n  }\n}\n@keyframes styles-module__hoverHighlightIn___6WYHY {\n  from {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__hoverTooltipIn___FYGQx {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__settingsPanelIn___MGfO8 {\n  from {\n    opacity: 0;\n    transform: translateY(10px) scale(0.95);\n    filter: blur(5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    filter: blur(0px);\n  }\n}\n@keyframes styles-module__settingsPanelOut___Zfymi {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    filter: blur(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(20px) scale(0.95);\n    filter: blur(5px);\n  }\n}\n.styles-module__toolbar___wNsdK {\n  position: fixed;\n  bottom: 1.25rem;\n  right: 1.25rem;\n  width: 297px;\n  z-index: 100000;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  pointer-events: none;\n  transition: left 0s, top 0s, right 0s, bottom 0s;\n}\n\n.styles-module__toolbarContainer___dIhma {\n  user-select: none;\n  margin-left: auto;\n  align-self: flex-end;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #1a1a1a;\n  color: #fff;\n  border: none;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);\n  pointer-events: auto;\n  cursor: grab;\n  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__toolbarContainer___dIhma.styles-module__dragging___xrolZ {\n  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: grabbing;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__entrance___sgHd8 {\n  animation: styles-module__toolbarEnter___u8RRu 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__hiding___1td44 {\n  animation: styles-module__toolbarHide___y8kaT 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;\n  pointer-events: none;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn {\n  width: 44px;\n  height: 44px;\n  border-radius: 22px;\n  padding: 0;\n  cursor: pointer;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn svg {\n  margin-top: -1px;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn:hover {\n  background: #2a2a2a;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn:active {\n  transform: scale(0.95);\n}\n.styles-module__toolbarContainer___dIhma.styles-module__expanded___ofKPx {\n  height: 44px;\n  border-radius: 1.5rem;\n  padding: 0.375rem;\n  width: 257px;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__expanded___ofKPx.styles-module__serverConnected___Gfbou {\n  width: 297px;\n}\n\n.styles-module__toggleContent___0yfyP {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.1s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__toggleContent___0yfyP.styles-module__visible___KHwEW {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n.styles-module__toggleContent___0yfyP.styles-module__hidden___Ae8H4 {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.styles-module__controlsContent___9GJWU {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  transition: filter 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__controlsContent___9GJWU.styles-module__visible___KHwEW {\n  opacity: 1;\n  filter: blur(0px);\n  transform: scale(1);\n  visibility: visible;\n  pointer-events: auto;\n}\n.styles-module__controlsContent___9GJWU.styles-module__hidden___Ae8H4 {\n  pointer-events: none;\n  opacity: 0;\n  filter: blur(10px);\n  transform: scale(0.4);\n}\n\n.styles-module__badge___2XsgF {\n  position: absolute;\n  top: -13px;\n  right: -13px;\n  user-select: none;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  background: #3c82f7;\n  color: white;\n  font-size: 0.625rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n  opacity: 1;\n  transition: transform 0.3s ease, opacity 0.2s ease;\n  transform: scale(1);\n}\n.styles-module__badge___2XsgF.styles-module__fadeOut___6Ut6- {\n  opacity: 0;\n  transform: scale(0);\n  pointer-events: none;\n}\n.styles-module__badge___2XsgF.styles-module__entrance___sgHd8 {\n  animation: styles-module__badgeEnter___mVQLj 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) 0.4s both;\n}\n\n.styles-module__controlButton___8Q0jc {\n  position: relative;\n  cursor: pointer !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.85);\n  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.2s ease;\n}\n.styles-module__controlButton___8Q0jc:hover:not(:disabled):not([data-active=true]):not([data-failed=true]):not([data-auto-sync=true]):not([data-error=true]):not([data-no-hover=true]) {\n  background: rgba(255, 255, 255, 0.12);\n  color: #fff;\n}\n.styles-module__controlButton___8Q0jc:active:not(:disabled) {\n  transform: scale(0.92);\n}\n.styles-module__controlButton___8Q0jc:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n.styles-module__controlButton___8Q0jc[data-active=true] {\n  color: #3c82f7;\n  background: rgba(60, 130, 247, 0.25);\n}\n.styles-module__controlButton___8Q0jc[data-error=true] {\n  color: #ff3b30;\n  background: rgba(255, 59, 48, 0.25);\n}\n.styles-module__controlButton___8Q0jc[data-danger]:hover:not(:disabled):not([data-active=true]):not([data-failed=true]) {\n  background: rgba(255, 59, 48, 0.25);\n  color: #ff3b30;\n}\n.styles-module__controlButton___8Q0jc[data-no-hover=true], .styles-module__controlButton___8Q0jc.styles-module__statusShowing___te6iu {\n  cursor: default !important;\n  pointer-events: none;\n  background: transparent !important;\n}\n.styles-module__controlButton___8Q0jc[data-auto-sync=true] {\n  color: #34c759;\n  background: transparent;\n  cursor: default;\n}\n.styles-module__controlButton___8Q0jc[data-failed=true] {\n  color: #ff3b30;\n  background: rgba(255, 59, 48, 0.25);\n}\n\n.styles-module__buttonBadge___NeFWb {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: #3c82f7;\n  color: white;\n  font-size: 0.625rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 0 0 2px #1a1a1a, 0 1px 3px rgba(0, 0, 0, 0.2);\n  pointer-events: none;\n}\n.styles-module__buttonBadge___NeFWb.styles-module__light___r6n4Y {\n  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n@keyframes styles-module__mcpIndicatorPulseConnected___EDodZ {\n  0%, 100% {\n    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5);\n  }\n  50% {\n    box-shadow: 0 0 0 5px rgba(52, 199, 89, 0);\n  }\n}\n@keyframes styles-module__mcpIndicatorPulseConnecting___cCYte {\n  0%, 100% {\n    box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.5);\n  }\n  50% {\n    box-shadow: 0 0 0 5px rgba(245, 166, 35, 0);\n  }\n}\n.styles-module__mcpIndicator___zGJeL {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  pointer-events: none;\n  transition: background 0.3s ease, opacity 0.15s ease, transform 0.15s ease;\n  opacity: 1;\n  transform: scale(1);\n}\n.styles-module__mcpIndicator___zGJeL.styles-module__connected___7c28g {\n  background: #34c759;\n  animation: styles-module__mcpIndicatorPulseConnected___EDodZ 2.5s ease-in-out infinite;\n}\n.styles-module__mcpIndicator___zGJeL.styles-module__connecting___uo-CW {\n  background: #f5a623;\n  animation: styles-module__mcpIndicatorPulseConnecting___cCYte 1.5s ease-in-out infinite;\n}\n.styles-module__mcpIndicator___zGJeL.styles-module__hidden___Ae8H4 {\n  opacity: 0;\n  transform: scale(0);\n  animation: none;\n}\n\n@keyframes styles-module__connectionPulse___-Zycw {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.6;\n    transform: scale(0.9);\n  }\n}\n.styles-module__connectionIndicatorWrapper___L-e-3 {\n  width: 8px;\n  height: 34px;\n  margin-left: 6px;\n  margin-right: 6px;\n}\n\n.styles-module__connectionIndicator___afk9p {\n  position: relative;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.3s ease, background 0.3s ease;\n  cursor: default;\n}\n\n.styles-module__connectionIndicatorVisible___C-i5B {\n  opacity: 1;\n}\n\n.styles-module__connectionIndicatorConnected___IY8pR {\n  background: #34c759;\n  animation: styles-module__connectionPulse___-Zycw 2.5s ease-in-out infinite;\n}\n\n.styles-module__connectionIndicatorDisconnected___kmpaZ {\n  background: #ff3b30;\n  animation: none;\n}\n\n.styles-module__connectionIndicatorConnecting___QmSLH {\n  background: #f59e0b;\n  animation: styles-module__connectionPulse___-Zycw 1s ease-in-out infinite;\n}\n\n.styles-module__buttonWrapper___rBcdv {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module__buttonWrapper___rBcdv:hover .styles-module__buttonTooltip___Burd9 {\n  opacity: 1;\n  visibility: visible;\n  transform: translateX(-50%) scale(1);\n  transition-delay: 0.85s;\n}\n.styles-module__buttonWrapper___rBcdv:has(.styles-module__controlButton___8Q0jc:disabled):hover .styles-module__buttonTooltip___Burd9 {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.styles-module__tooltipsInSession___-0lHH .styles-module__buttonWrapper___rBcdv:hover .styles-module__buttonTooltip___Burd9 {\n  transition-delay: 0s;\n}\n\n.styles-module__sendButtonWrapper___UUxG6 {\n  width: 0;\n  opacity: 0;\n  overflow: hidden;\n  pointer-events: none;\n  margin-left: -0.375rem;\n  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1), margin 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__sendButtonWrapper___UUxG6 .styles-module__controlButton___8Q0jc {\n  transform: scale(0.8);\n  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__sendButtonWrapper___UUxG6.styles-module__sendButtonVisible___WPSQU {\n  width: 34px;\n  opacity: 1;\n  overflow: visible;\n  pointer-events: auto;\n  margin-left: 0;\n}\n.styles-module__sendButtonWrapper___UUxG6.styles-module__sendButtonVisible___WPSQU .styles-module__controlButton___8Q0jc {\n  transform: scale(1);\n}\n\n.styles-module__buttonTooltip___Burd9 {\n  position: absolute;\n  bottom: calc(100% + 14px);\n  left: 50%;\n  transform: translateX(-50%) scale(0.95);\n  padding: 6px 10px;\n  background: #1a1a1a;\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 8px;\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  z-index: 100001;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transition: opacity 0.135s ease, transform 0.135s ease, visibility 0.135s ease;\n}\n.styles-module__buttonTooltip___Burd9::after {\n  content: "";\n  position: absolute;\n  top: calc(100% - 4px);\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n  width: 8px;\n  height: 8px;\n  background: #1a1a1a;\n  border-radius: 0 0 2px 0;\n}\n\n.styles-module__shortcut___lEAQk {\n  margin-left: 4px;\n  opacity: 0.5;\n}\n\n.styles-module__tooltipBelow___m6ats .styles-module__buttonTooltip___Burd9 {\n  bottom: auto;\n  top: calc(100% + 14px);\n  transform: translateX(-50%) scale(0.95);\n}\n.styles-module__tooltipBelow___m6ats .styles-module__buttonTooltip___Burd9::after {\n  top: -4px;\n  bottom: auto;\n  border-radius: 2px 0 0 0;\n}\n\n.styles-module__tooltipBelow___m6ats .styles-module__buttonWrapper___rBcdv:hover .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(-50%) scale(1);\n}\n\n.styles-module__tooltipsHidden___VtLJG .styles-module__buttonTooltip___Burd9 {\n  opacity: 0 !important;\n  visibility: hidden !important;\n  transition: none !important;\n}\n\n.styles-module__tooltipVisible___0jcCv,\n.styles-module__tooltipsHidden___VtLJG .styles-module__tooltipVisible___0jcCv {\n  opacity: 1 !important;\n  visibility: visible !important;\n  transform: translateX(-50%) scale(1) !important;\n  transition-delay: 0s !important;\n}\n\n.styles-module__buttonWrapperAlignLeft___myzIp .styles-module__buttonTooltip___Burd9 {\n  left: 50%;\n  transform: translateX(-12px) scale(0.95);\n}\n.styles-module__buttonWrapperAlignLeft___myzIp .styles-module__buttonTooltip___Burd9::after {\n  left: 16px;\n}\n.styles-module__buttonWrapperAlignLeft___myzIp:hover .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(-12px) scale(1);\n}\n\n.styles-module__tooltipBelow___m6ats .styles-module__buttonWrapperAlignLeft___myzIp .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(-12px) scale(0.95);\n}\n.styles-module__tooltipBelow___m6ats .styles-module__buttonWrapperAlignLeft___myzIp:hover .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(-12px) scale(1);\n}\n\n.styles-module__buttonWrapperAlignRight___HCQFR .styles-module__buttonTooltip___Burd9 {\n  left: 50%;\n  transform: translateX(calc(-100% + 12px)) scale(0.95);\n}\n.styles-module__buttonWrapperAlignRight___HCQFR .styles-module__buttonTooltip___Burd9::after {\n  left: auto;\n  right: 8px;\n}\n.styles-module__buttonWrapperAlignRight___HCQFR:hover .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(calc(-100% + 12px)) scale(1);\n}\n\n.styles-module__tooltipBelow___m6ats .styles-module__buttonWrapperAlignRight___HCQFR .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(calc(-100% + 12px)) scale(0.95);\n}\n.styles-module__tooltipBelow___m6ats .styles-module__buttonWrapperAlignRight___HCQFR:hover .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(calc(-100% + 12px)) scale(1);\n}\n\n.styles-module__divider___c--s1 {\n  width: 1px;\n  height: 12px;\n  background: rgba(255, 255, 255, 0.15);\n  margin: 0 0.125rem;\n}\n\n.styles-module__overlay___Q1O9y {\n  position: fixed;\n  inset: 0;\n  z-index: 99997;\n  pointer-events: none;\n}\n.styles-module__overlay___Q1O9y > * {\n  pointer-events: auto;\n}\n\n.styles-module__hoverHighlight___ogakW {\n  position: fixed;\n  border: 2px solid rgba(60, 130, 247, 0.5);\n  border-radius: 4px;\n  pointer-events: none !important;\n  background: rgba(60, 130, 247, 0.04);\n  box-sizing: border-box;\n  will-change: opacity;\n  contain: layout style;\n}\n.styles-module__hoverHighlight___ogakW.styles-module__enter___WFIki {\n  animation: styles-module__hoverHighlightIn___6WYHY 0.12s ease-out forwards;\n}\n\n.styles-module__multiSelectOutline___cSJ-m {\n  position: fixed;\n  border: 2px dashed rgba(52, 199, 89, 0.6);\n  border-radius: 4px;\n  pointer-events: none !important;\n  background: rgba(52, 199, 89, 0.05);\n  box-sizing: border-box;\n  will-change: opacity;\n}\n.styles-module__multiSelectOutline___cSJ-m.styles-module__enter___WFIki {\n  animation: styles-module__fadeIn___b9qmf 0.15s ease-out forwards;\n}\n.styles-module__multiSelectOutline___cSJ-m.styles-module__exit___fyOJ0 {\n  animation: styles-module__fadeOut___6Ut6- 0.15s ease-out forwards;\n}\n\n.styles-module__singleSelectOutline___QhX-O {\n  position: fixed;\n  border: 2px solid rgba(60, 130, 247, 0.6);\n  border-radius: 4px;\n  pointer-events: none !important;\n  background: rgba(60, 130, 247, 0.05);\n  box-sizing: border-box;\n  will-change: opacity;\n}\n.styles-module__singleSelectOutline___QhX-O.styles-module__enter___WFIki {\n  animation: styles-module__fadeIn___b9qmf 0.15s ease-out forwards;\n}\n.styles-module__singleSelectOutline___QhX-O.styles-module__exit___fyOJ0 {\n  animation: styles-module__fadeOut___6Ut6- 0.15s ease-out forwards;\n}\n\n.styles-module__hoverTooltip___bvLk7 {\n  position: fixed;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: #fff;\n  background: rgba(0, 0, 0, 0.85);\n  padding: 0.35rem 0.6rem;\n  border-radius: 0.375rem;\n  pointer-events: none !important;\n  white-space: nowrap;\n  max-width: 280px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.styles-module__hoverTooltip___bvLk7.styles-module__enter___WFIki {\n  animation: styles-module__hoverTooltipIn___FYGQx 0.1s ease-out forwards;\n}\n\n.styles-module__hoverReactPath___gx1IJ {\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.6);\n  margin-bottom: 0.15rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__hoverElementName___QMLMl {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__markersLayer___-25j1 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 0;\n  z-index: 99998;\n  pointer-events: none;\n}\n.styles-module__markersLayer___-25j1 > * {\n  pointer-events: auto;\n}\n\n.styles-module__fixedMarkersLayer___ffyX6 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 99998;\n  pointer-events: none;\n}\n.styles-module__fixedMarkersLayer___ffyX6 > * {\n  pointer-events: auto;\n}\n\n.styles-module__marker___6sQrs {\n  position: absolute;\n  width: 22px;\n  height: 22px;\n  background: #3c82f7;\n  color: white;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 1;\n  cursor: pointer;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.04);\n  user-select: none;\n  will-change: transform, opacity;\n  contain: layout style;\n  z-index: 1;\n}\n.styles-module__marker___6sQrs:hover {\n  z-index: 2;\n}\n.styles-module__marker___6sQrs:not(.styles-module__enter___WFIki):not(.styles-module__exit___fyOJ0):not(.styles-module__clearing___FQ--7) {\n  transition: background-color 0.15s ease, transform 0.1s ease;\n}\n.styles-module__marker___6sQrs.styles-module__enter___WFIki {\n  animation: styles-module__markerIn___5FaAP 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.styles-module__marker___6sQrs.styles-module__exit___fyOJ0 {\n  animation: styles-module__markerOut___GU5jX 0.2s ease-out both;\n  pointer-events: none;\n}\n.styles-module__marker___6sQrs.styles-module__clearing___FQ--7 {\n  animation: styles-module__markerOut___GU5jX 0.15s ease-out both;\n  pointer-events: none;\n}\n.styles-module__marker___6sQrs:not(.styles-module__enter___WFIki):not(.styles-module__exit___fyOJ0):not(.styles-module__clearing___FQ--7):hover {\n  transform: translate(-50%, -50%) scale(1.1);\n}\n.styles-module__marker___6sQrs.styles-module__pending___2IHLC {\n  position: fixed;\n  background: #3c82f7;\n}\n.styles-module__marker___6sQrs.styles-module__fixed___dBMHC {\n  position: fixed;\n}\n.styles-module__marker___6sQrs.styles-module__multiSelect___YWiuz {\n  background: #34c759;\n  width: 26px;\n  height: 26px;\n  border-radius: 6px;\n  font-size: 0.75rem;\n}\n.styles-module__marker___6sQrs.styles-module__multiSelect___YWiuz.styles-module__pending___2IHLC {\n  background: #34c759;\n}\n.styles-module__marker___6sQrs.styles-module__hovered___ZgXIy {\n  background: #ff3b30;\n}\n\n.styles-module__renumber___nCTxD {\n  display: block;\n  animation: styles-module__renumberRoll___Wgbq3 0.2s ease-out;\n}\n\n@keyframes styles-module__renumberRoll___Wgbq3 {\n  0% {\n    transform: translateX(-40%);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n.styles-module__markerTooltip___aLJID {\n  position: absolute;\n  top: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%) scale(0.909);\n  z-index: 100002;\n  background: #1a1a1a;\n  padding: 8px 0.75rem;\n  border-radius: 0.75rem;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  font-weight: 400;\n  color: #fff;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  min-width: 120px;\n  max-width: 200px;\n  pointer-events: none;\n  cursor: default;\n}\n.styles-module__markerTooltip___aLJID.styles-module__enter___WFIki {\n  animation: styles-module__tooltipIn___0N31w 0.1s ease-out forwards;\n}\n\n.styles-module__markerQuote___FHmrz {\n  display: block;\n  font-size: 12px;\n  font-style: italic;\n  color: rgba(255, 255, 255, 0.6);\n  margin-bottom: 0.3125rem;\n  line-height: 1.4;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__markerNote___QkrrS {\n  display: block;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: #fff;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-bottom: 2px;\n}\n\n.styles-module__markerHint___2iF-6 {\n  display: block;\n  font-size: 0.625rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.6);\n  margin-top: 0.375rem;\n  white-space: nowrap;\n}\n\n.styles-module__settingsPanel___OxX3Y {\n  position: absolute;\n  right: 5px;\n  bottom: calc(100% + 0.5rem);\n  z-index: 1;\n  overflow: hidden;\n  background: #1c1c1c;\n  border-radius: 1rem;\n  padding: 13px 0 16px;\n  min-width: 205px;\n  cursor: default;\n  opacity: 1;\n  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);\n  transition: background 0.25s ease, box-shadow 0.25s ease;\n}\n.styles-module__settingsPanel___OxX3Y::before, .styles-module__settingsPanel___OxX3Y::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 16px;\n  z-index: 2;\n  pointer-events: none;\n}\n.styles-module__settingsPanel___OxX3Y::before {\n  left: 0;\n  background: linear-gradient(to right, #1c1c1c 0%, transparent 100%);\n}\n.styles-module__settingsPanel___OxX3Y::after {\n  right: 0;\n  background: linear-gradient(to left, #1c1c1c 0%, transparent 100%);\n}\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsHeader___pwDY9,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsBrand___0gJeM,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsBrandSlash___uTG18,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsVersion___TUcFq,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsSection___m-YM2,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsLabel___8UjfX,\n.styles-module__settingsPanel___OxX3Y .styles-module__cycleButton___FMKfw,\n.styles-module__settingsPanel___OxX3Y .styles-module__cycleDot___nPgLY,\n.styles-module__settingsPanel___OxX3Y .styles-module__dropdownButton___16NPz,\n.styles-module__settingsPanel___OxX3Y .styles-module__toggleLabel___Xm8Aa,\n.styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax,\n.styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr,\n.styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp,\n.styles-module__settingsPanel___OxX3Y .styles-module__helpIcon___xQg56,\n.styles-module__settingsPanel___OxX3Y .styles-module__themeToggle___2rUjA {\n  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__enter___WFIki {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n  filter: blur(0px);\n  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__exit___fyOJ0 {\n  opacity: 0;\n  transform: translateY(8px) scale(0.95);\n  filter: blur(5px);\n  pointer-events: none;\n  transition: opacity 0.1s ease, transform 0.1s ease, filter 0.1s ease;\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf {\n  background: #1a1a1a;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf .styles-module__settingsLabel___8UjfX {\n  color: rgba(255, 255, 255, 0.6);\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf .styles-module__settingsOption___UNa12 {\n  color: rgba(255, 255, 255, 0.85);\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf .styles-module__settingsOption___UNa12:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf .styles-module__settingsOption___UNa12.styles-module__selected___OwRqP {\n  background: rgba(255, 255, 255, 0.15);\n  color: #fff;\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__dark___ILIQf .styles-module__toggleLabel___Xm8Aa {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.styles-module__settingsPanelContainer___Xksv8 {\n  overflow: visible;\n  position: relative;\n  display: flex;\n  padding: 0 1rem;\n}\n.styles-module__settingsPanelContainer___Xksv8.styles-module__transitioning___qxzCk {\n  overflow-x: clip;\n  overflow-y: visible;\n}\n\n.styles-module__settingsPage___6YfHH {\n  min-width: 100%;\n  flex-shrink: 0;\n  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease-out;\n  opacity: 1;\n}\n\n.styles-module__settingsPage___6YfHH.styles-module__slideLeft___Ps01J {\n  transform: translateX(-100%);\n  opacity: 0;\n}\n\n.styles-module__automationsPage___uvCq6 {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  padding: 3px 1rem 0;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease-out 0.1s;\n  opacity: 0;\n}\n\n.styles-module__automationsPage___uvCq6.styles-module__slideIn___4-qXe {\n  transform: translateX(-100%);\n  opacity: 1;\n}\n\n.styles-module__settingsNavLink___wCzJt {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: 0.8125rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.5);\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.styles-module__settingsNavLink___wCzJt:hover {\n  color: rgba(255, 255, 255, 0.9);\n}\n.styles-module__settingsNavLink___wCzJt.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__settingsNavLink___wCzJt.styles-module__light___r6n4Y:hover {\n  color: rgba(0, 0, 0, 0.8);\n}\n.styles-module__settingsNavLink___wCzJt svg {\n  color: rgba(255, 255, 255, 0.4);\n  transition: color 0.15s ease;\n}\n.styles-module__settingsNavLink___wCzJt:hover svg {\n  color: #fff;\n}\n.styles-module__settingsNavLink___wCzJt.styles-module__light___r6n4Y svg {\n  color: rgba(0, 0, 0, 0.25);\n}\n.styles-module__settingsNavLink___wCzJt.styles-module__light___r6n4Y:hover svg {\n  color: rgba(0, 0, 0, 0.8);\n}\n\n.styles-module__settingsNavLinkRight___ZWwhj {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.styles-module__mcpNavIndicator___cl9pO {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n.styles-module__mcpNavIndicator___cl9pO.styles-module__connected___7c28g {\n  background: #34c759;\n  animation: styles-module__mcpPulse___uNggr 2.5s ease-in-out infinite;\n}\n.styles-module__mcpNavIndicator___cl9pO.styles-module__connecting___uo-CW {\n  background: #f5a623;\n  animation: styles-module__mcpPulse___uNggr 1.5s ease-in-out infinite;\n}\n\n.styles-module__settingsBackButton___bIe2j {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 0 12px 0;\n  margin: -6px 0 0.5rem 0;\n  border: none;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.07);\n  border-radius: 0;\n  background: transparent;\n  font-family: inherit;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  letter-spacing: -0.15px;\n  color: #fff;\n  cursor: pointer;\n  transition: transform 0.12s cubic-bezier(0.32, 0.72, 0, 1);\n}\n.styles-module__settingsBackButton___bIe2j svg {\n  opacity: 0.4;\n  flex-shrink: 0;\n  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);\n}\n.styles-module__settingsBackButton___bIe2j:hover {\n  border-bottom-color: rgba(255, 255, 255, 0.07);\n}\n.styles-module__settingsBackButton___bIe2j:hover svg {\n  opacity: 1;\n}\n.styles-module__settingsBackButton___bIe2j.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.85);\n  border-bottom-color: rgba(0, 0, 0, 0.08);\n}\n.styles-module__settingsBackButton___bIe2j.styles-module__light___r6n4Y:hover {\n  border-bottom-color: rgba(0, 0, 0, 0.08);\n}\n\n.styles-module__automationHeader___InP0r {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  font-size: 0.8125rem;\n  font-weight: 400;\n  color: #fff;\n}\n.styles-module__automationHeader___InP0r .styles-module__helpIcon___xQg56 svg {\n  transform: none;\n}\n.styles-module__automationHeader___InP0r.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.85);\n}\n\n.styles-module__automationDescription___NKlmo {\n  font-size: 0.6875rem;\n  font-weight: 300;\n  color: rgba(255, 255, 255, 0.5);\n  margin-top: 2px;\n  line-height: 14px;\n}\n.styles-module__automationDescription___NKlmo.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.5);\n}\n\n.styles-module__learnMoreLink___8xv-x {\n  color: rgba(255, 255, 255, 0.8);\n  text-decoration: underline dotted;\n  text-decoration-color: rgba(255, 255, 255, 0.2);\n  text-underline-offset: 2px;\n  transition: color 0.15s ease;\n}\n.styles-module__learnMoreLink___8xv-x:hover {\n  color: #fff;\n}\n.styles-module__learnMoreLink___8xv-x.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.6);\n  text-decoration-color: rgba(0, 0, 0, 0.2);\n}\n.styles-module__learnMoreLink___8xv-x.styles-module__light___r6n4Y:hover {\n  color: rgba(0, 0, 0, 0.85);\n}\n\n.styles-module__autoSendRow___UblX5 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.styles-module__autoSendLabel___icDc2 {\n  font-size: 0.6875rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.4);\n  transition: color 0.15s ease;\n}\n.styles-module__autoSendLabel___icDc2.styles-module__active___-zoN6 {\n  color: #66b8ff;\n}\n.styles-module__autoSendLabel___icDc2.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__autoSendLabel___icDc2.styles-module__light___r6n4Y.styles-module__active___-zoN6 {\n  color: #3c82f7;\n}\n\n.styles-module__webhookUrlInput___2375C {\n  display: block;\n  width: 100%;\n  flex: 1;\n  min-height: 60px;\n  box-sizing: border-box;\n  margin-top: 11px;\n  padding: 8px 10px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 6px;\n  background: rgba(255, 255, 255, 0.03);\n  font-family: inherit;\n  font-size: 0.75rem;\n  font-weight: 400;\n  color: #fff;\n  outline: none;\n  resize: none;\n  cursor: text !important;\n  user-select: text;\n  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;\n}\n.styles-module__webhookUrlInput___2375C::placeholder {\n  color: rgba(255, 255, 255, 0.3);\n}\n.styles-module__webhookUrlInput___2375C:focus {\n  border-color: rgba(255, 255, 255, 0.3);\n  background: rgba(255, 255, 255, 0.08);\n}\n.styles-module__webhookUrlInput___2375C.styles-module__light___r6n4Y {\n  border-color: rgba(0, 0, 0, 0.1);\n  background: rgba(0, 0, 0, 0.03);\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__webhookUrlInput___2375C.styles-module__light___r6n4Y::placeholder {\n  color: rgba(0, 0, 0, 0.3);\n}\n.styles-module__webhookUrlInput___2375C.styles-module__light___r6n4Y:focus {\n  border-color: rgba(0, 0, 0, 0.25);\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.styles-module__settingsHeader___pwDY9 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 24px;\n  margin-bottom: 0.5rem;\n  padding-bottom: 9px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.07);\n}\n\n.styles-module__settingsBrand___0gJeM {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  letter-spacing: -0.0094em;\n  color: #fff;\n}\n\n.styles-module__settingsBrandSlash___uTG18 {\n  color: rgba(255, 255, 255, 0.5);\n}\n\n.styles-module__settingsVersion___TUcFq {\n  font-size: 11px;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.4);\n  margin-left: auto;\n  letter-spacing: -0.0094em;\n}\n\n.styles-module__settingsSection___m-YM2 + .styles-module__settingsSection___m-YM2 {\n  margin-top: 0.5rem;\n  padding-top: 0.5rem;\n  border-top: 1px solid rgba(255, 255, 255, 0.07);\n}\n.styles-module__settingsSection___m-YM2.styles-module__settingsSectionExtraPadding___jdhFV {\n  padding-top: calc(0.5rem + 4px);\n}\n\n.styles-module__settingsSectionGrow___h-5HZ {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.styles-module__settingsRow___3sdhc {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 24px;\n}\n.styles-module__settingsRow___3sdhc.styles-module__settingsRowMarginTop___zA0Sp {\n  margin-top: 8px;\n}\n\n.styles-module__dropdownContainer___BVnxe {\n  position: relative;\n}\n\n.styles-module__dropdownButton___16NPz {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.25rem 0.5rem;\n  border: none;\n  border-radius: 0.375rem;\n  background: transparent;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: #fff;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  letter-spacing: -0.0094em;\n}\n.styles-module__dropdownButton___16NPz:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n.styles-module__dropdownButton___16NPz svg {\n  opacity: 0.6;\n}\n\n.styles-module__cycleButton___FMKfw {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: #fff;\n  cursor: pointer;\n  letter-spacing: -0.0094em;\n}\n.styles-module__cycleButton___FMKfw.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__cycleButton___FMKfw:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.styles-module__settingsRowDisabled___EgS0V .styles-module__settingsLabel___8UjfX {\n  color: rgba(255, 255, 255, 0.2);\n}\n.styles-module__settingsRowDisabled___EgS0V .styles-module__settingsLabel___8UjfX.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.2);\n}\n.styles-module__settingsRowDisabled___EgS0V .styles-module__toggleSwitch___l4Ygm {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n@keyframes styles-module__cycleTextIn___Q6zJf {\n  0% {\n    opacity: 0;\n    transform: translateY(-6px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.styles-module__cycleButtonText___fD1LR {\n  display: inline-block;\n  animation: styles-module__cycleTextIn___Q6zJf 0.2s ease-out;\n}\n\n.styles-module__cycleDots___LWuoQ {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.styles-module__cycleDot___nPgLY {\n  width: 3px;\n  height: 3px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.3);\n  transform: scale(0.667);\n  transition: background-color 0.25s ease-out, transform 0.25s ease-out;\n}\n.styles-module__cycleDot___nPgLY.styles-module__active___-zoN6 {\n  background: #fff;\n  transform: scale(1);\n}\n.styles-module__cycleDot___nPgLY.styles-module__light___r6n4Y {\n  background: rgba(0, 0, 0, 0.2);\n}\n.styles-module__cycleDot___nPgLY.styles-module__light___r6n4Y.styles-module__active___-zoN6 {\n  background: rgba(0, 0, 0, 0.7);\n}\n\n.styles-module__dropdownMenu___k73ER {\n  position: absolute;\n  right: 0;\n  top: calc(100% + 0.25rem);\n  background: #1a1a1a;\n  border-radius: 0.5rem;\n  padding: 0.25rem;\n  min-width: 120px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);\n  z-index: 10;\n  animation: styles-module__scaleIn___c-r1K 0.15s ease-out;\n}\n\n.styles-module__dropdownItem___ylsLj {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0.625rem;\n  border: none;\n  border-radius: 0.375rem;\n  background: transparent;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.85);\n  cursor: pointer;\n  text-align: left;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  letter-spacing: -0.0094em;\n}\n.styles-module__dropdownItem___ylsLj:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n.styles-module__dropdownItem___ylsLj.styles-module__selected___OwRqP {\n  background: rgba(255, 255, 255, 0.12);\n  color: #fff;\n  font-weight: 600;\n}\n\n.styles-module__settingsLabel___8UjfX {\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: -0.0094em;\n  color: rgba(255, 255, 255, 0.5);\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n}\n.styles-module__settingsLabel___8UjfX.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.5);\n}\n\n.styles-module__settingsLabelMarker___ewdtV {\n  padding-top: 3px;\n  margin-bottom: 10px;\n}\n\n.styles-module__settingsOptions___LyrBA {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.styles-module__settingsOption___UNa12 {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  padding: 0.375rem 0.5rem;\n  border: none;\n  border-radius: 0.375rem;\n  background: transparent;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.7);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.styles-module__settingsOption___UNa12:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n.styles-module__settingsOption___UNa12.styles-module__selected___OwRqP {\n  background: rgba(60, 130, 247, 0.15);\n  color: #3c82f7;\n}\n\n.styles-module__sliderContainer___ducXj {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.styles-module__slider___GLdxp {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 4px;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: 2px;\n  outline: none;\n  cursor: pointer;\n}\n.styles-module__slider___GLdxp::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  background: white;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n.styles-module__slider___GLdxp::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  background: white;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n.styles-module__slider___GLdxp:hover::-webkit-slider-thumb {\n  transform: scale(1.15);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n}\n.styles-module__slider___GLdxp:hover::-moz-range-thumb {\n  transform: scale(1.15);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n}\n\n.styles-module__sliderLabels___FhLDB {\n  display: flex;\n  justify-content: space-between;\n}\n\n.styles-module__sliderLabel___U8sPr {\n  font-size: 0.625rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.4);\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.styles-module__sliderLabel___U8sPr:hover {\n  color: rgba(255, 255, 255, 0.7);\n}\n.styles-module__sliderLabel___U8sPr.styles-module__active___-zoN6 {\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.styles-module__colorOptions___iHCNX {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 0.375rem;\n  margin-bottom: 1px;\n}\n\n.styles-module__colorOption___IodiY {\n  display: block;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 2px solid transparent;\n  cursor: pointer;\n  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);\n}\n.styles-module__colorOption___IodiY:hover {\n  transform: scale(1.15);\n}\n.styles-module__colorOption___IodiY.styles-module__selected___OwRqP {\n  transform: scale(0.83);\n}\n\n.styles-module__colorOptionRing___U2xpo {\n  display: flex;\n  width: 24px;\n  height: 24px;\n  border: 2px solid transparent;\n  border-radius: 50%;\n  transition: border-color 0.3s ease;\n}\n.styles-module__settingsToggle___fBrFn {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n}\n.styles-module__settingsToggle___fBrFn + .styles-module__settingsToggle___fBrFn {\n  margin-top: calc(0.5rem + 6px);\n}\n.styles-module__settingsToggle___fBrFn input[type=checkbox] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n.styles-module__settingsToggle___fBrFn.styles-module__settingsToggleMarginBottom___MZUyF {\n  margin-bottom: calc(0.5rem + 6px);\n}\n\n.styles-module__customCheckbox___U39ax {\n  position: relative;\n  width: 14px;\n  height: 14px;\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 4px;\n  background: rgba(255, 255, 255, 0.05);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: background 0.25s ease, border-color 0.25s ease;\n}\n.styles-module__customCheckbox___U39ax svg {\n  color: #1a1a1a;\n  opacity: 1;\n  transition: opacity 0.15s ease;\n}\ninput[type=checkbox]:checked + .styles-module__customCheckbox___U39ax {\n  border-color: rgba(255, 255, 255, 0.3);\n  background: rgb(255, 255, 255);\n}\n.styles-module__customCheckbox___U39ax.styles-module__light___r6n4Y {\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  background: #fff;\n}\n.styles-module__customCheckbox___U39ax.styles-module__light___r6n4Y.styles-module__checked___mnZLo {\n  border-color: #1a1a1a;\n  background: #1a1a1a;\n}\n.styles-module__customCheckbox___U39ax.styles-module__light___r6n4Y.styles-module__checked___mnZLo svg {\n  color: #fff;\n}\n\n.styles-module__toggleLabel___Xm8Aa {\n  font-size: 0.8125rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.5);\n  letter-spacing: -0.0094em;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.styles-module__toggleLabel___Xm8Aa.styles-module__light___r6n4Y {\n  color: rgba(0, 0, 0, 0.5);\n}\n\n.styles-module__toggleSwitch___l4Ygm {\n  position: relative;\n  display: inline-block;\n  width: 24px;\n  height: 16px;\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n.styles-module__toggleSwitch___l4Ygm input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n.styles-module__toggleSwitch___l4Ygm input:checked + .styles-module__toggleSlider___wprIn {\n  background: #3c82f7;\n}\n.styles-module__toggleSwitch___l4Ygm input:checked + .styles-module__toggleSlider___wprIn::before {\n  transform: translateX(8px);\n}\n.styles-module__toggleSwitch___l4Ygm.styles-module__disabled___332Jw {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.styles-module__toggleSwitch___l4Ygm.styles-module__disabled___332Jw .styles-module__toggleSlider___wprIn {\n  cursor: not-allowed;\n}\n\n.styles-module__toggleSlider___wprIn {\n  position: absolute;\n  cursor: pointer;\n  inset: 0;\n  border-radius: 16px;\n  background: #484848;\n}\n.styles-module__light___r6n4Y .styles-module__toggleSlider___wprIn {\n  background: #dddddd;\n}\n.styles-module__toggleSlider___wprIn::before {\n  content: "";\n  position: absolute;\n  height: 12px;\n  width: 12px;\n  left: 2px;\n  bottom: 2px;\n  background: white;\n  border-radius: 50%;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n}\n\n@keyframes styles-module__mcpPulse___uNggr {\n  0% {\n    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5);\n  }\n  70% {\n    box-shadow: 0 0 0 6px rgba(52, 199, 89, 0);\n  }\n  100% {\n    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);\n  }\n}\n@keyframes styles-module__mcpPulseError___fov9B {\n  0% {\n    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.5);\n  }\n  70% {\n    box-shadow: 0 0 0 6px rgba(255, 59, 48, 0);\n  }\n  100% {\n    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);\n  }\n}\n.styles-module__mcpStatusDot___ibgkc {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n.styles-module__mcpStatusDot___ibgkc.styles-module__connecting___uo-CW {\n  background: #f5a623;\n  animation: styles-module__mcpPulse___uNggr 1.5s infinite;\n}\n.styles-module__mcpStatusDot___ibgkc.styles-module__connected___7c28g {\n  background: #34c759;\n  animation: styles-module__mcpPulse___uNggr 2.5s ease-in-out infinite;\n}\n.styles-module__mcpStatusDot___ibgkc.styles-module__disconnected___cHPxR {\n  background: #ff3b30;\n  animation: styles-module__mcpPulseError___fov9B 2s infinite;\n}\n\n.styles-module__helpIcon___xQg56 {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: help;\n  margin-left: 0;\n}\n.styles-module__helpIcon___xQg56 svg {\n  display: block;\n  transform: translateY(1px);\n  color: rgba(255, 255, 255, 0.2);\n  transition: color 0.15s ease;\n}\n.styles-module__helpIcon___xQg56:hover svg {\n  color: rgba(255, 255, 255, 0.5);\n}\n.styles-module__helpIcon___xQg56.styles-module__helpIconNudgeDown___0cqpM svg {\n  transform: translateY(1px);\n}\n.styles-module__helpIcon___xQg56.styles-module__helpIconNoNudge___abogC svg {\n  transform: translateY(0.5px);\n}\n.styles-module__helpIcon___xQg56.styles-module__helpIconNudge1-5___DM2TQ svg {\n  transform: translateY(1.5px);\n}\n.styles-module__helpIcon___xQg56.styles-module__helpIconNudge2___TfWgC svg {\n  transform: translateY(2px);\n}\n\n.styles-module__dragSelection___kZLq2 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  border: 2px solid rgba(52, 199, 89, 0.6);\n  border-radius: 4px;\n  background: rgba(52, 199, 89, 0.08);\n  pointer-events: none;\n  z-index: 99997;\n  will-change: transform, width, height;\n  contain: layout style;\n}\n\n.styles-module__dragCount___KM90j {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: #34c759;\n  color: white;\n  font-size: 0.875rem;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem;\n  border-radius: 1rem;\n  min-width: 1.5rem;\n  text-align: center;\n}\n\n.styles-module__highlightsContainer___-0xzG {\n  position: fixed;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 99996;\n}\n\n.styles-module__selectedElementHighlight___fyVlI {\n  position: fixed;\n  top: 0;\n  left: 0;\n  border: 2px solid rgba(52, 199, 89, 0.5);\n  border-radius: 4px;\n  background: rgba(52, 199, 89, 0.06);\n  pointer-events: none;\n  will-change: transform, width, height;\n  contain: layout style;\n}\n\n.styles-module__light___r6n4Y.styles-module__toolbarContainer___dIhma {\n  background: #fff;\n  color: rgba(0, 0, 0, 0.85);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.styles-module__light___r6n4Y.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn:hover {\n  background: #f5f5f5;\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc:hover:not(:disabled):not([data-active=true]):not([data-failed=true]):not([data-auto-sync=true]):not([data-error=true]):not([data-no-hover=true]) {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc[data-active=true] {\n  color: #3c82f7;\n  background: rgba(60, 130, 247, 0.15);\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc[data-error=true] {\n  color: #ff3b30;\n  background: rgba(255, 59, 48, 0.15);\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc[data-danger]:hover:not(:disabled):not([data-active=true]):not([data-failed=true]) {\n  background: rgba(255, 59, 48, 0.15);\n  color: #ff3b30;\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc[data-auto-sync=true] {\n  color: #34c759;\n  background: transparent;\n}\n.styles-module__light___r6n4Y.styles-module__controlButton___8Q0jc[data-failed=true] {\n  color: #ff3b30;\n  background: rgba(255, 59, 48, 0.15);\n}\n.styles-module__light___r6n4Y.styles-module__buttonTooltip___Burd9 {\n  background: #fff;\n  color: rgba(0, 0, 0, 0.85);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.styles-module__light___r6n4Y.styles-module__buttonTooltip___Burd9::after {\n  background: #fff;\n}\n.styles-module__light___r6n4Y.styles-module__divider___c--s1 {\n  background: rgba(0, 0, 0, 0.1);\n}\n.styles-module__light___r6n4Y.styles-module__markerTooltip___aLJID {\n  background: #fff;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n}\n.styles-module__light___r6n4Y.styles-module__markerTooltip___aLJID .styles-module__markerQuote___FHmrz {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___r6n4Y.styles-module__markerTooltip___aLJID .styles-module__markerNote___QkrrS {\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__light___r6n4Y.styles-module__markerTooltip___aLJID .styles-module__markerHint___2iF-6 {\n  color: rgba(0, 0, 0, 0.35);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y {\n  background: #fff;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y::before {\n  background: linear-gradient(to right, #fff 0%, transparent 100%);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y::after {\n  background: linear-gradient(to left, #fff 0%, transparent 100%);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsHeader___pwDY9 {\n  border-bottom-color: rgba(0, 0, 0, 0.08);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsBrand___0gJeM {\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsBrandSlash___uTG18 {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsVersion___TUcFq {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsSection___m-YM2 {\n  border-top-color: rgba(0, 0, 0, 0.08);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__settingsLabel___8UjfX {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__cycleButton___FMKfw {\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__cycleDot___nPgLY {\n  background: rgba(0, 0, 0, 0.2);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__cycleDot___nPgLY.styles-module__active___-zoN6 {\n  background: rgba(0, 0, 0, 0.7);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__dropdownButton___16NPz {\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__dropdownButton___16NPz:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__toggleLabel___Xm8Aa {\n  color: rgba(0, 0, 0, 0.5);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax {\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  background: #fff;\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax.styles-module__checked___mnZLo {\n  border-color: #1a1a1a;\n  background: #1a1a1a;\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax.styles-module__checked___mnZLo svg {\n  color: #fff;\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr:hover {\n  color: rgba(0, 0, 0, 0.7);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr.styles-module__active___-zoN6 {\n  color: rgba(0, 0, 0, 0.9);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp {\n  background: rgba(0, 0, 0, 0.1);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp::-webkit-slider-thumb {\n  background: #1a1a1a;\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp::-moz-range-thumb {\n  background: #1a1a1a;\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__helpIcon___xQg56 svg {\n  color: rgba(0, 0, 0, 0.2);\n}\n.styles-module__light___r6n4Y.styles-module__settingsPanel___OxX3Y .styles-module__helpIcon___xQg56:hover svg {\n  color: rgba(0, 0, 0, 0.5);\n}\n\n.styles-module__themeToggle___2rUjA {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  margin-left: 0.5rem;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.4);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.styles-module__themeToggle___2rUjA:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.8);\n}\n.styles-module__light___r6n4Y .styles-module__themeToggle___2rUjA {\n  color: rgba(0, 0, 0, 0.4);\n}\n.styles-module__light___r6n4Y .styles-module__themeToggle___2rUjA:hover {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.7);\n}\n\n.styles-module__themeIconWrapper___LsJIM {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: 20px;\n  height: 20px;\n}\n\n.styles-module__themeIcon___lCCmo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: styles-module__themeIconIn___TU6ML 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n\n@keyframes styles-module__themeIconIn___TU6ML {\n  0% {\n    opacity: 0;\n    transform: scale(0.8) rotate(-30deg);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1) rotate(0deg);\n  }\n}';
-var classNames2 = { "toolbar": "styles-module__toolbar___wNsdK", "toolbarContainer": "styles-module__toolbarContainer___dIhma", "dragging": "styles-module__dragging___xrolZ", "entrance": "styles-module__entrance___sgHd8", "toolbarEnter": "styles-module__toolbarEnter___u8RRu", "hiding": "styles-module__hiding___1td44", "toolbarHide": "styles-module__toolbarHide___y8kaT", "collapsed": "styles-module__collapsed___Rydsn", "expanded": "styles-module__expanded___ofKPx", "serverConnected": "styles-module__serverConnected___Gfbou", "toggleContent": "styles-module__toggleContent___0yfyP", "visible": "styles-module__visible___KHwEW", "hidden": "styles-module__hidden___Ae8H4", "controlsContent": "styles-module__controlsContent___9GJWU", "badge": "styles-module__badge___2XsgF", "fadeOut": "styles-module__fadeOut___6Ut6-", "badgeEnter": "styles-module__badgeEnter___mVQLj", "controlButton": "styles-module__controlButton___8Q0jc", "statusShowing": "styles-module__statusShowing___te6iu", "buttonBadge": "styles-module__buttonBadge___NeFWb", "light": "styles-module__light___r6n4Y", "mcpIndicator": "styles-module__mcpIndicator___zGJeL", "connected": "styles-module__connected___7c28g", "mcpIndicatorPulseConnected": "styles-module__mcpIndicatorPulseConnected___EDodZ", "connecting": "styles-module__connecting___uo-CW", "mcpIndicatorPulseConnecting": "styles-module__mcpIndicatorPulseConnecting___cCYte", "connectionIndicatorWrapper": "styles-module__connectionIndicatorWrapper___L-e-3", "connectionIndicator": "styles-module__connectionIndicator___afk9p", "connectionIndicatorVisible": "styles-module__connectionIndicatorVisible___C-i5B", "connectionIndicatorConnected": "styles-module__connectionIndicatorConnected___IY8pR", "connectionPulse": "styles-module__connectionPulse___-Zycw", "connectionIndicatorDisconnected": "styles-module__connectionIndicatorDisconnected___kmpaZ", "connectionIndicatorConnecting": "styles-module__connectionIndicatorConnecting___QmSLH", "buttonWrapper": "styles-module__buttonWrapper___rBcdv", "buttonTooltip": "styles-module__buttonTooltip___Burd9", "tooltipsInSession": "styles-module__tooltipsInSession___-0lHH", "sendButtonWrapper": "styles-module__sendButtonWrapper___UUxG6", "sendButtonVisible": "styles-module__sendButtonVisible___WPSQU", "shortcut": "styles-module__shortcut___lEAQk", "tooltipBelow": "styles-module__tooltipBelow___m6ats", "tooltipsHidden": "styles-module__tooltipsHidden___VtLJG", "tooltipVisible": "styles-module__tooltipVisible___0jcCv", "buttonWrapperAlignLeft": "styles-module__buttonWrapperAlignLeft___myzIp", "buttonWrapperAlignRight": "styles-module__buttonWrapperAlignRight___HCQFR", "divider": "styles-module__divider___c--s1", "overlay": "styles-module__overlay___Q1O9y", "hoverHighlight": "styles-module__hoverHighlight___ogakW", "enter": "styles-module__enter___WFIki", "hoverHighlightIn": "styles-module__hoverHighlightIn___6WYHY", "multiSelectOutline": "styles-module__multiSelectOutline___cSJ-m", "fadeIn": "styles-module__fadeIn___b9qmf", "exit": "styles-module__exit___fyOJ0", "singleSelectOutline": "styles-module__singleSelectOutline___QhX-O", "hoverTooltip": "styles-module__hoverTooltip___bvLk7", "hoverTooltipIn": "styles-module__hoverTooltipIn___FYGQx", "hoverReactPath": "styles-module__hoverReactPath___gx1IJ", "hoverElementName": "styles-module__hoverElementName___QMLMl", "markersLayer": "styles-module__markersLayer___-25j1", "fixedMarkersLayer": "styles-module__fixedMarkersLayer___ffyX6", "marker": "styles-module__marker___6sQrs", "clearing": "styles-module__clearing___FQ--7", "markerIn": "styles-module__markerIn___5FaAP", "markerOut": "styles-module__markerOut___GU5jX", "pending": "styles-module__pending___2IHLC", "fixed": "styles-module__fixed___dBMHC", "multiSelect": "styles-module__multiSelect___YWiuz", "hovered": "styles-module__hovered___ZgXIy", "renumber": "styles-module__renumber___nCTxD", "renumberRoll": "styles-module__renumberRoll___Wgbq3", "markerTooltip": "styles-module__markerTooltip___aLJID", "tooltipIn": "styles-module__tooltipIn___0N31w", "markerQuote": "styles-module__markerQuote___FHmrz", "markerNote": "styles-module__markerNote___QkrrS", "markerHint": "styles-module__markerHint___2iF-6", "settingsPanel": "styles-module__settingsPanel___OxX3Y", "settingsHeader": "styles-module__settingsHeader___pwDY9", "settingsBrand": "styles-module__settingsBrand___0gJeM", "settingsBrandSlash": "styles-module__settingsBrandSlash___uTG18", "settingsVersion": "styles-module__settingsVersion___TUcFq", "settingsSection": "styles-module__settingsSection___m-YM2", "settingsLabel": "styles-module__settingsLabel___8UjfX", "cycleButton": "styles-module__cycleButton___FMKfw", "cycleDot": "styles-module__cycleDot___nPgLY", "dropdownButton": "styles-module__dropdownButton___16NPz", "toggleLabel": "styles-module__toggleLabel___Xm8Aa", "customCheckbox": "styles-module__customCheckbox___U39ax", "sliderLabel": "styles-module__sliderLabel___U8sPr", "slider": "styles-module__slider___GLdxp", "helpIcon": "styles-module__helpIcon___xQg56", "themeToggle": "styles-module__themeToggle___2rUjA", "dark": "styles-module__dark___ILIQf", "settingsOption": "styles-module__settingsOption___UNa12", "selected": "styles-module__selected___OwRqP", "settingsPanelContainer": "styles-module__settingsPanelContainer___Xksv8", "transitioning": "styles-module__transitioning___qxzCk", "settingsPage": "styles-module__settingsPage___6YfHH", "slideLeft": "styles-module__slideLeft___Ps01J", "automationsPage": "styles-module__automationsPage___uvCq6", "slideIn": "styles-module__slideIn___4-qXe", "settingsNavLink": "styles-module__settingsNavLink___wCzJt", "settingsNavLinkRight": "styles-module__settingsNavLinkRight___ZWwhj", "mcpNavIndicator": "styles-module__mcpNavIndicator___cl9pO", "mcpPulse": "styles-module__mcpPulse___uNggr", "settingsBackButton": "styles-module__settingsBackButton___bIe2j", "automationHeader": "styles-module__automationHeader___InP0r", "automationDescription": "styles-module__automationDescription___NKlmo", "learnMoreLink": "styles-module__learnMoreLink___8xv-x", "autoSendRow": "styles-module__autoSendRow___UblX5", "autoSendLabel": "styles-module__autoSendLabel___icDc2", "active": "styles-module__active___-zoN6", "webhookUrlInput": "styles-module__webhookUrlInput___2375C", "settingsSectionExtraPadding": "styles-module__settingsSectionExtraPadding___jdhFV", "settingsSectionGrow": "styles-module__settingsSectionGrow___h-5HZ", "settingsRow": "styles-module__settingsRow___3sdhc", "settingsRowMarginTop": "styles-module__settingsRowMarginTop___zA0Sp", "dropdownContainer": "styles-module__dropdownContainer___BVnxe", "settingsRowDisabled": "styles-module__settingsRowDisabled___EgS0V", "toggleSwitch": "styles-module__toggleSwitch___l4Ygm", "cycleButtonText": "styles-module__cycleButtonText___fD1LR", "cycleTextIn": "styles-module__cycleTextIn___Q6zJf", "cycleDots": "styles-module__cycleDots___LWuoQ", "dropdownMenu": "styles-module__dropdownMenu___k73ER", "scaleIn": "styles-module__scaleIn___c-r1K", "dropdownItem": "styles-module__dropdownItem___ylsLj", "settingsLabelMarker": "styles-module__settingsLabelMarker___ewdtV", "settingsOptions": "styles-module__settingsOptions___LyrBA", "sliderContainer": "styles-module__sliderContainer___ducXj", "sliderLabels": "styles-module__sliderLabels___FhLDB", "colorOptions": "styles-module__colorOptions___iHCNX", "colorOption": "styles-module__colorOption___IodiY", "colorOptionRing": "styles-module__colorOptionRing___U2xpo", "settingsToggle": "styles-module__settingsToggle___fBrFn", "settingsToggleMarginBottom": "styles-module__settingsToggleMarginBottom___MZUyF", "checked": "styles-module__checked___mnZLo", "toggleSlider": "styles-module__toggleSlider___wprIn", "disabled": "styles-module__disabled___332Jw", "mcpStatusDot": "styles-module__mcpStatusDot___ibgkc", "disconnected": "styles-module__disconnected___cHPxR", "mcpPulseError": "styles-module__mcpPulseError___fov9B", "helpIconNudgeDown": "styles-module__helpIconNudgeDown___0cqpM", "helpIconNoNudge": "styles-module__helpIconNoNudge___abogC", "helpIconNudge1-5": "styles-module__helpIconNudge1-5___DM2TQ", "helpIconNudge2": "styles-module__helpIconNudge2___TfWgC", "dragSelection": "styles-module__dragSelection___kZLq2", "dragCount": "styles-module__dragCount___KM90j", "highlightsContainer": "styles-module__highlightsContainer___-0xzG", "selectedElementHighlight": "styles-module__selectedElementHighlight___fyVlI", "themeIconWrapper": "styles-module__themeIconWrapper___LsJIM", "themeIcon": "styles-module__themeIcon___lCCmo", "themeIconIn": "styles-module__themeIconIn___TU6ML", "scaleOut": "styles-module__scaleOut___Wctwz", "slideUp": "styles-module__slideUp___kgD36", "slideDown": "styles-module__slideDown___zcdje", "settingsPanelIn": "styles-module__settingsPanelIn___MGfO8", "settingsPanelOut": "styles-module__settingsPanelOut___Zfymi" };
+var css3 = '.styles-module__toolbar___wNsdK svg[fill=none],\n.styles-module__markersLayer___-25j1 svg[fill=none],\n.styles-module__fixedMarkersLayer___ffyX6 svg[fill=none] {\n  fill: none !important;\n}\n.styles-module__toolbar___wNsdK svg[fill=none] :not([fill]),\n.styles-module__markersLayer___-25j1 svg[fill=none] :not([fill]),\n.styles-module__fixedMarkersLayer___ffyX6 svg[fill=none] :not([fill]) {\n  fill: none !important;\n}\n\n.styles-module__toolbar___wNsdK :where(button, input, select, textarea, label) {\n  background: unset;\n  border: unset;\n  border-radius: unset;\n  padding: unset;\n  margin: unset;\n  color: unset;\n  font: unset;\n  letter-spacing: unset;\n  text-transform: unset;\n  text-decoration: unset;\n  box-shadow: unset;\n  outline: unset;\n}\n\n@keyframes styles-module__toolbarEnter___u8RRu {\n  from {\n    opacity: 0;\n    transform: scale(0.5) rotate(90deg);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) rotate(0deg);\n  }\n}\n@keyframes styles-module__toolbarHide___y8kaT {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n@keyframes styles-module__badgeEnter___mVQLj {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__scaleIn___c-r1K {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__scaleOut___Wctwz {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n}\n@keyframes styles-module__slideUp___kgD36 {\n  from {\n    opacity: 0;\n    transform: scale(0.85) translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__slideDown___zcdje {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.85) translateY(8px);\n  }\n}\n@keyframes styles-module__markerIn___5FaAP {\n  0% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.3);\n  }\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n@keyframes styles-module__markerOut___GU5jX {\n  0% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.3);\n  }\n}\n@keyframes styles-module__fadeIn___b9qmf {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes styles-module__fadeOut___6Ut6- {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes styles-module__tooltipIn___0N31w {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(2px) scale(0.891);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0) scale(0.909);\n  }\n}\n@keyframes styles-module__hoverHighlightIn___6WYHY {\n  from {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes styles-module__hoverTooltipIn___FYGQx {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__settingsPanelIn___MGfO8 {\n  from {\n    opacity: 0;\n    transform: translateY(10px) scale(0.95);\n    filter: blur(5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    filter: blur(0px);\n  }\n}\n@keyframes styles-module__settingsPanelOut___Zfymi {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    filter: blur(0px);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(20px) scale(0.95);\n    filter: blur(5px);\n  }\n}\n.styles-module__disableTransitions___EopxO :is(*, *::before, *::after) {\n  transition: none !important;\n}\n\n.styles-module__toolbar___wNsdK {\n  position: fixed;\n  width: 297px;\n  z-index: 100000;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  pointer-events: none;\n  transition: left 0s, top 0s, right 0s, bottom 0s;\n}\n\n:where(.styles-module__toolbar___wNsdK) {\n  bottom: 1.25rem;\n  right: 1.25rem;\n}\n\n.styles-module__toolbarContainer___dIhma {\n  user-select: none;\n  margin-left: auto;\n  align-self: flex-end;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #1a1a1a;\n  color: #fff;\n  border: none;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);\n  pointer-events: auto;\n  cursor: grab;\n  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__toolbarContainer___dIhma.styles-module__dragging___xrolZ {\n  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: grabbing;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__entrance___sgHd8 {\n  animation: styles-module__toolbarEnter___u8RRu 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__hiding___1td44 {\n  animation: styles-module__toolbarHide___y8kaT 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;\n  pointer-events: none;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn {\n  width: 44px;\n  height: 44px;\n  border-radius: 22px;\n  padding: 0;\n  cursor: pointer;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn svg {\n  margin-top: -1px;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn:hover {\n  background: #2a2a2a;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn:active {\n  transform: scale(0.95);\n}\n.styles-module__toolbarContainer___dIhma.styles-module__expanded___ofKPx {\n  height: 44px;\n  border-radius: 1.5rem;\n  padding: 0.375rem;\n  width: 257px;\n}\n.styles-module__toolbarContainer___dIhma.styles-module__expanded___ofKPx.styles-module__serverConnected___Gfbou {\n  width: 297px;\n}\n\n.styles-module__toggleContent___0yfyP {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.1s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__toggleContent___0yfyP.styles-module__visible___KHwEW {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n.styles-module__toggleContent___0yfyP.styles-module__hidden___Ae8H4 {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.styles-module__controlsContent___9GJWU {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  transition: filter 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__controlsContent___9GJWU.styles-module__visible___KHwEW {\n  opacity: 1;\n  filter: blur(0px);\n  transform: scale(1);\n  visibility: visible;\n  pointer-events: auto;\n}\n.styles-module__controlsContent___9GJWU.styles-module__hidden___Ae8H4 {\n  pointer-events: none;\n  opacity: 0;\n  filter: blur(10px);\n  transform: scale(0.4);\n}\n\n.styles-module__badge___2XsgF {\n  position: absolute;\n  top: -13px;\n  right: -13px;\n  user-select: none;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  background-color: var(--agentation-color-accent);\n  color: white;\n  font-size: 0.625rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.04);\n  opacity: 1;\n  transition: transform 0.3s ease, opacity 0.2s ease;\n  transform: scale(1);\n}\n.styles-module__badge___2XsgF.styles-module__fadeOut___6Ut6- {\n  opacity: 0;\n  transform: scale(0);\n  pointer-events: none;\n}\n.styles-module__badge___2XsgF.styles-module__entrance___sgHd8 {\n  animation: styles-module__badgeEnter___mVQLj 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) 0.4s both;\n}\n\n.styles-module__controlButton___8Q0jc {\n  position: relative;\n  cursor: pointer !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n  border: none;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.85);\n  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.2s ease;\n}\n.styles-module__controlButton___8Q0jc:hover:not(:disabled):not([data-active=true]):not([data-failed=true]):not([data-auto-sync=true]):not([data-error=true]):not([data-no-hover=true]) {\n  background: rgba(255, 255, 255, 0.12);\n  color: #fff;\n}\n.styles-module__controlButton___8Q0jc:active:not(:disabled) {\n  transform: scale(0.92);\n}\n.styles-module__controlButton___8Q0jc:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n.styles-module__controlButton___8Q0jc[data-active=true] {\n  color: var(--agentation-color-blue);\n  background-color: color-mix(in srgb, var(--agentation-color-blue) 25%, transparent);\n}\n.styles-module__controlButton___8Q0jc[data-error=true] {\n  color: var(--agentation-color-red);\n  background-color: color-mix(in srgb, var(--agentation-color-red) 25%, transparent);\n}\n.styles-module__controlButton___8Q0jc[data-danger]:hover:not(:disabled):not([data-active=true]):not([data-failed=true]) {\n  background-color: color-mix(in srgb, var(--agentation-color-red) 25%, transparent);\n  color: var(--agentation-color-red);\n}\n.styles-module__controlButton___8Q0jc[data-no-hover=true], .styles-module__controlButton___8Q0jc.styles-module__statusShowing___te6iu {\n  cursor: default !important;\n  pointer-events: none;\n  background: transparent !important;\n}\n.styles-module__controlButton___8Q0jc[data-auto-sync=true] {\n  color: var(--agentation-color-green);\n  background: transparent;\n  cursor: default;\n}\n.styles-module__controlButton___8Q0jc[data-failed=true] {\n  color: var(--agentation-color-red);\n  background-color: color-mix(in srgb, var(--agentation-color-red) 25%, transparent);\n}\n\n.styles-module__buttonBadge___NeFWb {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background-color: var(--agentation-color-accent);\n  color: white;\n  font-size: 0.625rem;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 0 0 2px #1a1a1a, 0 1px 3px rgba(0, 0, 0, 0.2);\n  pointer-events: none;\n}\n[data-agentation-theme=light] .styles-module__buttonBadge___NeFWb {\n  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n@keyframes styles-module__mcpIndicatorPulseConnected___EDodZ {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--agentation-color-green) 50%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--agentation-color-green) 0%, transparent);\n  }\n}\n@keyframes styles-module__mcpIndicatorPulseConnecting___cCYte {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--agentation-color-yellow) 50%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--agentation-color-yellow) 0%, transparent);\n  }\n}\n.styles-module__mcpIndicator___zGJeL {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  pointer-events: none;\n  transition: background-color 0.3s ease, opacity 0.15s ease, transform 0.15s ease;\n  opacity: 1;\n  transform: scale(1);\n}\n.styles-module__mcpIndicator___zGJeL.styles-module__connected___7c28g {\n  background-color: var(--agentation-color-green);\n  animation: styles-module__mcpIndicatorPulseConnected___EDodZ 2.5s ease-in-out infinite;\n}\n.styles-module__mcpIndicator___zGJeL.styles-module__connecting___uo-CW {\n  background-color: var(--agentation-color-yellow);\n  animation: styles-module__mcpIndicatorPulseConnecting___cCYte 1.5s ease-in-out infinite;\n}\n.styles-module__mcpIndicator___zGJeL.styles-module__hidden___Ae8H4 {\n  opacity: 0;\n  transform: scale(0);\n  animation: none;\n}\n\n@keyframes styles-module__connectionPulse___-Zycw {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.6;\n    transform: scale(0.9);\n  }\n}\n.styles-module__connectionIndicatorWrapper___L-e-3 {\n  width: 8px;\n  height: 34px;\n  margin-left: 6px;\n  margin-right: 6px;\n}\n\n.styles-module__connectionIndicator___afk9p {\n  position: relative;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.3s ease, background-color 0.3s ease;\n  cursor: default;\n}\n\n.styles-module__connectionIndicatorVisible___C-i5B {\n  opacity: 1;\n}\n\n.styles-module__connectionIndicatorConnected___IY8pR {\n  background-color: var(--agentation-color-green);\n  animation: styles-module__connectionPulse___-Zycw 2.5s ease-in-out infinite;\n}\n\n.styles-module__connectionIndicatorDisconnected___kmpaZ {\n  background-color: var(--agentation-color-red);\n  animation: none;\n}\n\n.styles-module__connectionIndicatorConnecting___QmSLH {\n  background-color: var(--agentation-color-yellow);\n  animation: styles-module__connectionPulse___-Zycw 1s ease-in-out infinite;\n}\n\n.styles-module__buttonWrapper___rBcdv {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.styles-module__buttonWrapper___rBcdv:hover .styles-module__buttonTooltip___Burd9 {\n  opacity: 1;\n  visibility: visible;\n  transform: translateX(-50%) scale(1);\n  transition-delay: 0.85s;\n}\n.styles-module__buttonWrapper___rBcdv:has(.styles-module__controlButton___8Q0jc:disabled):hover .styles-module__buttonTooltip___Burd9 {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.styles-module__tooltipsInSession___-0lHH .styles-module__buttonWrapper___rBcdv:hover .styles-module__buttonTooltip___Burd9 {\n  transition-delay: 0s;\n}\n\n.styles-module__sendButtonWrapper___UUxG6 {\n  width: 0;\n  opacity: 0;\n  overflow: hidden;\n  pointer-events: none;\n  margin-left: -0.375rem;\n  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1), margin 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__sendButtonWrapper___UUxG6 .styles-module__controlButton___8Q0jc {\n  transform: scale(0.8);\n  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.styles-module__sendButtonWrapper___UUxG6.styles-module__sendButtonVisible___WPSQU {\n  width: 34px;\n  opacity: 1;\n  overflow: visible;\n  pointer-events: auto;\n  margin-left: 0;\n}\n.styles-module__sendButtonWrapper___UUxG6.styles-module__sendButtonVisible___WPSQU .styles-module__controlButton___8Q0jc {\n  transform: scale(1);\n}\n\n.styles-module__buttonTooltip___Burd9 {\n  position: absolute;\n  bottom: calc(100% + 14px);\n  left: 50%;\n  transform: translateX(-50%) scale(0.95);\n  padding: 6px 10px;\n  background: #1a1a1a;\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 8px;\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  z-index: 100001;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transition: opacity 0.135s ease, transform 0.135s ease, visibility 0.135s ease;\n}\n.styles-module__buttonTooltip___Burd9::after {\n  content: "";\n  position: absolute;\n  top: calc(100% - 4px);\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n  width: 8px;\n  height: 8px;\n  background: #1a1a1a;\n  border-radius: 0 0 2px 0;\n}\n\n.styles-module__shortcut___lEAQk {\n  margin-left: 4px;\n  opacity: 0.5;\n}\n\n.styles-module__tooltipBelow___m6ats .styles-module__buttonTooltip___Burd9 {\n  bottom: auto;\n  top: calc(100% + 14px);\n  transform: translateX(-50%) scale(0.95);\n}\n.styles-module__tooltipBelow___m6ats .styles-module__buttonTooltip___Burd9::after {\n  top: -4px;\n  bottom: auto;\n  border-radius: 2px 0 0 0;\n}\n\n.styles-module__tooltipBelow___m6ats .styles-module__buttonWrapper___rBcdv:hover .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(-50%) scale(1);\n}\n\n.styles-module__tooltipsHidden___VtLJG .styles-module__buttonTooltip___Burd9 {\n  opacity: 0 !important;\n  visibility: hidden !important;\n  transition: none !important;\n}\n\n.styles-module__tooltipVisible___0jcCv,\n.styles-module__tooltipsHidden___VtLJG .styles-module__tooltipVisible___0jcCv {\n  opacity: 1 !important;\n  visibility: visible !important;\n  transform: translateX(-50%) scale(1) !important;\n  transition-delay: 0s !important;\n}\n\n.styles-module__buttonWrapperAlignLeft___myzIp .styles-module__buttonTooltip___Burd9 {\n  left: 50%;\n  transform: translateX(-12px) scale(0.95);\n}\n.styles-module__buttonWrapperAlignLeft___myzIp .styles-module__buttonTooltip___Burd9::after {\n  left: 16px;\n}\n.styles-module__buttonWrapperAlignLeft___myzIp:hover .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(-12px) scale(1);\n}\n\n.styles-module__tooltipBelow___m6ats .styles-module__buttonWrapperAlignLeft___myzIp .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(-12px) scale(0.95);\n}\n.styles-module__tooltipBelow___m6ats .styles-module__buttonWrapperAlignLeft___myzIp:hover .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(-12px) scale(1);\n}\n\n.styles-module__buttonWrapperAlignRight___HCQFR .styles-module__buttonTooltip___Burd9 {\n  left: 50%;\n  transform: translateX(calc(-100% + 12px)) scale(0.95);\n}\n.styles-module__buttonWrapperAlignRight___HCQFR .styles-module__buttonTooltip___Burd9::after {\n  left: auto;\n  right: 8px;\n}\n.styles-module__buttonWrapperAlignRight___HCQFR:hover .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(calc(-100% + 12px)) scale(1);\n}\n\n.styles-module__tooltipBelow___m6ats .styles-module__buttonWrapperAlignRight___HCQFR .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(calc(-100% + 12px)) scale(0.95);\n}\n.styles-module__tooltipBelow___m6ats .styles-module__buttonWrapperAlignRight___HCQFR:hover .styles-module__buttonTooltip___Burd9 {\n  transform: translateX(calc(-100% + 12px)) scale(1);\n}\n\n.styles-module__divider___c--s1 {\n  width: 1px;\n  height: 12px;\n  background: rgba(255, 255, 255, 0.15);\n  margin: 0 0.125rem;\n}\n\n.styles-module__overlay___Q1O9y {\n  position: fixed;\n  inset: 0;\n  z-index: 99997;\n  pointer-events: none;\n}\n.styles-module__overlay___Q1O9y > * {\n  pointer-events: auto;\n}\n\n.styles-module__hoverHighlight___ogakW {\n  position: fixed;\n  border: 2px solid color-mix(in srgb, var(--agentation-color-accent) 50%, transparent);\n  border-radius: 4px;\n  background-color: color-mix(in srgb, var(--agentation-color-accent) 4%, transparent);\n  pointer-events: none !important;\n  box-sizing: border-box;\n  will-change: opacity;\n  contain: layout style;\n}\n.styles-module__hoverHighlight___ogakW.styles-module__enter___WFIki {\n  animation: styles-module__hoverHighlightIn___6WYHY 0.12s ease-out forwards;\n}\n\n.styles-module__multiSelectOutline___cSJ-m {\n  position: fixed;\n  border: 2px dashed color-mix(in srgb, var(--agentation-color-green) 60%, transparent);\n  border-radius: 4px;\n  pointer-events: none !important;\n  background-color: color-mix(in srgb, var(--agentation-color-green) 5%, transparent);\n  box-sizing: border-box;\n  will-change: opacity;\n}\n.styles-module__multiSelectOutline___cSJ-m.styles-module__enter___WFIki {\n  animation: styles-module__fadeIn___b9qmf 0.15s ease-out forwards;\n}\n.styles-module__multiSelectOutline___cSJ-m.styles-module__exit___fyOJ0 {\n  animation: styles-module__fadeOut___6Ut6- 0.15s ease-out forwards;\n}\n\n.styles-module__singleSelectOutline___QhX-O {\n  position: fixed;\n  border: 2px solid color-mix(in srgb, var(--agentation-color-blue) 60%, transparent);\n  border-radius: 4px;\n  pointer-events: none !important;\n  background-color: color-mix(in srgb, var(--agentation-color-blue) 5%, transparent);\n  box-sizing: border-box;\n  will-change: opacity;\n}\n.styles-module__singleSelectOutline___QhX-O.styles-module__enter___WFIki {\n  animation: styles-module__fadeIn___b9qmf 0.15s ease-out forwards;\n}\n.styles-module__singleSelectOutline___QhX-O.styles-module__exit___fyOJ0 {\n  animation: styles-module__fadeOut___6Ut6- 0.15s ease-out forwards;\n}\n\n.styles-module__hoverTooltip___bvLk7 {\n  position: fixed;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: #fff;\n  background: rgba(0, 0, 0, 0.85);\n  padding: 0.35rem 0.6rem;\n  border-radius: 0.375rem;\n  pointer-events: none !important;\n  white-space: nowrap;\n  max-width: 280px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.styles-module__hoverTooltip___bvLk7.styles-module__enter___WFIki {\n  animation: styles-module__hoverTooltipIn___FYGQx 0.1s ease-out forwards;\n}\n\n.styles-module__hoverReactPath___gx1IJ {\n  font-size: 0.625rem;\n  color: rgba(255, 255, 255, 0.6);\n  margin-bottom: 0.15rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__hoverElementName___QMLMl {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__markersLayer___-25j1 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 0;\n  z-index: 99998;\n  pointer-events: none;\n}\n.styles-module__markersLayer___-25j1 > * {\n  pointer-events: auto;\n}\n\n.styles-module__fixedMarkersLayer___ffyX6 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 99998;\n  pointer-events: none;\n}\n.styles-module__fixedMarkersLayer___ffyX6 > * {\n  pointer-events: auto;\n}\n\n.styles-module__marker___6sQrs {\n  position: absolute;\n  width: 22px;\n  height: 22px;\n  background: var(--agentation-color-blue);\n  color: white;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 1;\n  cursor: pointer;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.04);\n  user-select: none;\n  will-change: transform, opacity;\n  contain: layout style;\n  z-index: 1;\n}\n.styles-module__marker___6sQrs:hover {\n  z-index: 2;\n}\n.styles-module__marker___6sQrs:not(.styles-module__enter___WFIki):not(.styles-module__exit___fyOJ0):not(.styles-module__clearing___FQ--7) {\n  transition: background-color 0.15s ease, transform 0.1s ease;\n}\n.styles-module__marker___6sQrs.styles-module__enter___WFIki {\n  animation: styles-module__markerIn___5FaAP 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.styles-module__marker___6sQrs.styles-module__exit___fyOJ0 {\n  animation: styles-module__markerOut___GU5jX 0.2s ease-out both;\n  pointer-events: none;\n}\n.styles-module__marker___6sQrs.styles-module__clearing___FQ--7 {\n  animation: styles-module__markerOut___GU5jX 0.15s ease-out both;\n  pointer-events: none;\n}\n.styles-module__marker___6sQrs:not(.styles-module__enter___WFIki):not(.styles-module__exit___fyOJ0):not(.styles-module__clearing___FQ--7):hover {\n  transform: translate(-50%, -50%) scale(1.1);\n}\n.styles-module__marker___6sQrs.styles-module__pending___2IHLC {\n  position: fixed;\n  background-color: var(--agentation-color-blue);\n}\n.styles-module__marker___6sQrs.styles-module__fixed___dBMHC {\n  position: fixed;\n}\n.styles-module__marker___6sQrs.styles-module__multiSelect___YWiuz {\n  background-color: var(--agentation-color-green);\n  width: 26px;\n  height: 26px;\n  border-radius: 6px;\n  font-size: 0.75rem;\n}\n.styles-module__marker___6sQrs.styles-module__multiSelect___YWiuz.styles-module__pending___2IHLC {\n  background-color: var(--agentation-color-green);\n}\n.styles-module__marker___6sQrs.styles-module__hovered___ZgXIy {\n  background-color: var(--agentation-color-red);\n}\n\n.styles-module__renumber___nCTxD {\n  display: block;\n  animation: styles-module__renumberRoll___Wgbq3 0.2s ease-out;\n}\n\n@keyframes styles-module__renumberRoll___Wgbq3 {\n  0% {\n    transform: translateX(-40%);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n.styles-module__markerTooltip___aLJID {\n  position: absolute;\n  top: calc(100% + 10px);\n  left: 50%;\n  transform: translateX(-50%) scale(0.909);\n  z-index: 100002;\n  background: #1a1a1a;\n  padding: 8px 0.75rem;\n  border-radius: 0.75rem;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  font-weight: 400;\n  color: #fff;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  min-width: 120px;\n  max-width: 200px;\n  pointer-events: none;\n  cursor: default;\n}\n.styles-module__markerTooltip___aLJID.styles-module__enter___WFIki {\n  animation: styles-module__tooltipIn___0N31w 0.1s ease-out forwards;\n}\n\n.styles-module__markerQuote___FHmrz {\n  display: block;\n  font-size: 12px;\n  font-style: italic;\n  color: rgba(255, 255, 255, 0.6);\n  margin-bottom: 0.3125rem;\n  line-height: 1.4;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.styles-module__markerNote___QkrrS {\n  display: block;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: #fff;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-bottom: 2px;\n}\n\n.styles-module__markerHint___2iF-6 {\n  display: block;\n  font-size: 0.625rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.6);\n  margin-top: 0.375rem;\n  white-space: nowrap;\n}\n\n.styles-module__settingsPanel___OxX3Y {\n  position: absolute;\n  right: 5px;\n  bottom: calc(100% + 0.5rem);\n  z-index: 1;\n  overflow: hidden;\n  background: #1c1c1c;\n  border-radius: 1rem;\n  padding: 13px 0 16px;\n  min-width: 205px;\n  cursor: default;\n  opacity: 1;\n  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);\n  transition: background-color 0.25s ease, box-shadow 0.25s ease;\n}\n.styles-module__settingsPanel___OxX3Y::before, .styles-module__settingsPanel___OxX3Y::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 16px;\n  z-index: 2;\n  pointer-events: none;\n}\n.styles-module__settingsPanel___OxX3Y::before {\n  left: 0;\n  background: linear-gradient(to right, #1c1c1c 0%, transparent 100%);\n}\n.styles-module__settingsPanel___OxX3Y::after {\n  right: 0;\n  background: linear-gradient(to left, #1c1c1c 0%, transparent 100%);\n}\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsHeader___pwDY9,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsBrand___0gJeM,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsBrandSlash___uTG18,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsVersion___TUcFq,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsSection___m-YM2,\n.styles-module__settingsPanel___OxX3Y .styles-module__settingsLabel___8UjfX,\n.styles-module__settingsPanel___OxX3Y .styles-module__cycleButton___FMKfw,\n.styles-module__settingsPanel___OxX3Y .styles-module__cycleDot___nPgLY,\n.styles-module__settingsPanel___OxX3Y .styles-module__dropdownButton___16NPz,\n.styles-module__settingsPanel___OxX3Y .styles-module__toggleLabel___Xm8Aa,\n.styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax,\n.styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr,\n.styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp,\n.styles-module__settingsPanel___OxX3Y .styles-module__themeToggle___2rUjA {\n  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__enter___WFIki {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n  filter: blur(0px);\n  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;\n}\n.styles-module__settingsPanel___OxX3Y.styles-module__exit___fyOJ0 {\n  opacity: 0;\n  transform: translateY(8px) scale(0.95);\n  filter: blur(5px);\n  pointer-events: none;\n  transition: opacity 0.1s ease, transform 0.1s ease, filter 0.1s ease;\n}\n[data-agentation-theme=dark] .styles-module__settingsPanel___OxX3Y {\n  background: #1a1a1a;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);\n}\n[data-agentation-theme=dark] .styles-module__settingsPanel___OxX3Y .styles-module__settingsLabel___8UjfX {\n  color: rgba(255, 255, 255, 0.6);\n}\n[data-agentation-theme=dark] .styles-module__settingsPanel___OxX3Y .styles-module__settingsOption___UNa12 {\n  color: rgba(255, 255, 255, 0.85);\n}\n[data-agentation-theme=dark] .styles-module__settingsPanel___OxX3Y .styles-module__settingsOption___UNa12:hover {\n  background: rgba(255, 255, 255, 0.1);\n}\n[data-agentation-theme=dark] .styles-module__settingsPanel___OxX3Y .styles-module__settingsOption___UNa12.styles-module__selected___OwRqP {\n  background: rgba(255, 255, 255, 0.15);\n  color: #fff;\n}\n[data-agentation-theme=dark] .styles-module__settingsPanel___OxX3Y .styles-module__toggleLabel___Xm8Aa {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.styles-module__settingsPanelContainer___Xksv8 {\n  overflow: visible;\n  position: relative;\n  display: flex;\n  padding: 0 1rem;\n}\n\n.styles-module__settingsPage___6YfHH {\n  min-width: 100%;\n  flex-shrink: 0;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n  transition-delay: 0s;\n  opacity: 1;\n}\n\n.styles-module__settingsPage___6YfHH.styles-module__slideLeft___Ps01J {\n  transform: translateX(-24px);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.styles-module__automationsPage___uvCq6 {\n  position: absolute;\n  top: 0;\n  left: 24px;\n  width: 100%;\n  height: 100%;\n  padding: 3px 1rem 0;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.styles-module__automationsPage___uvCq6.styles-module__slideIn___4-qXe {\n  transform: translateX(-24px);\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.styles-module__settingsNavLink___wCzJt {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: 0.8125rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.5);\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.styles-module__settingsNavLink___wCzJt:hover {\n  color: rgba(255, 255, 255, 0.9);\n}\n[data-agentation-theme=light] .styles-module__settingsNavLink___wCzJt {\n  color: rgba(0, 0, 0, 0.5);\n}\n[data-agentation-theme=light] .styles-module__settingsNavLink___wCzJt:hover {\n  color: rgba(0, 0, 0, 0.8);\n}\n.styles-module__settingsNavLink___wCzJt svg {\n  color: rgba(255, 255, 255, 0.4);\n  transition: color 0.15s ease;\n}\n.styles-module__settingsNavLink___wCzJt:hover svg {\n  color: #fff;\n}\n[data-agentation-theme=light] .styles-module__settingsNavLink___wCzJt svg {\n  color: rgba(0, 0, 0, 0.25);\n}\n[data-agentation-theme=light] .styles-module__settingsNavLink___wCzJt:hover svg {\n  color: rgba(0, 0, 0, 0.8);\n}\n\n.styles-module__settingsNavLinkRight___ZWwhj {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.styles-module__mcpNavIndicator___cl9pO {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n.styles-module__mcpNavIndicator___cl9pO.styles-module__connected___7c28g {\n  background-color: var(--agentation-color-green);\n  animation: styles-module__mcpPulse___uNggr 2.5s ease-in-out infinite;\n}\n.styles-module__mcpNavIndicator___cl9pO.styles-module__connecting___uo-CW {\n  background-color: var(--agentation-color-yellow);\n  animation: styles-module__mcpPulse___uNggr 1.5s ease-in-out infinite;\n}\n\n.styles-module__settingsBackButton___bIe2j {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 0 12px 0;\n  margin: -6px 0 0.5rem 0;\n  border: none;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.07);\n  border-radius: 0;\n  background: transparent;\n  font-family: inherit;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  letter-spacing: -0.15px;\n  color: #fff;\n  cursor: pointer;\n  transition: transform 0.12s cubic-bezier(0.32, 0.72, 0, 1);\n}\n.styles-module__settingsBackButton___bIe2j svg {\n  opacity: 0.4;\n  flex-shrink: 0;\n  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);\n}\n.styles-module__settingsBackButton___bIe2j:hover {\n  border-bottom-color: rgba(255, 255, 255, 0.07);\n}\n.styles-module__settingsBackButton___bIe2j:hover svg {\n  opacity: 1;\n}\n[data-agentation-theme=light] .styles-module__settingsBackButton___bIe2j {\n  color: rgba(0, 0, 0, 0.85);\n  border-bottom-color: rgba(0, 0, 0, 0.08);\n}\n[data-agentation-theme=light] .styles-module__settingsBackButton___bIe2j:hover {\n  border-bottom-color: rgba(0, 0, 0, 0.08);\n}\n\n.styles-module__automationHeader___InP0r {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  font-size: 0.8125rem;\n  font-weight: 400;\n  color: #fff;\n}\n[data-agentation-theme=light] .styles-module__automationHeader___InP0r {\n  color: rgba(0, 0, 0, 0.85);\n}\n\n.styles-module__automationDescription___NKlmo {\n  font-size: 0.6875rem;\n  font-weight: 300;\n  color: rgba(255, 255, 255, 0.5);\n  margin-top: 2px;\n  line-height: 14px;\n}\n[data-agentation-theme=light] .styles-module__automationDescription___NKlmo {\n  color: rgba(0, 0, 0, 0.5);\n}\n\n.styles-module__learnMoreLink___8xv-x {\n  color: rgba(255, 255, 255, 0.8);\n  text-decoration: underline dotted;\n  text-decoration-color: rgba(255, 255, 255, 0.2);\n  text-underline-offset: 2px;\n  transition: color 0.15s ease;\n}\n.styles-module__learnMoreLink___8xv-x:hover {\n  color: #fff;\n}\n[data-agentation-theme=light] .styles-module__learnMoreLink___8xv-x {\n  color: rgba(0, 0, 0, 0.6);\n  text-decoration-color: rgba(0, 0, 0, 0.2);\n}\n[data-agentation-theme=light] .styles-module__learnMoreLink___8xv-x:hover {\n  color: rgba(0, 0, 0, 0.85);\n}\n\n.styles-module__autoSendRow___UblX5 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.styles-module__autoSendLabel___icDc2 {\n  font-size: 0.6875rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.4);\n  transition: color 0.15s ease;\n}\n.styles-module__autoSendLabel___icDc2.styles-module__active___-zoN6 {\n  color: #66b8ff;\n  color: color(display-p3 0.4 0.72 1);\n}\n[data-agentation-theme=light] .styles-module__autoSendLabel___icDc2 {\n  color: rgba(0, 0, 0, 0.4);\n}\n[data-agentation-theme=light] .styles-module__autoSendLabel___icDc2.styles-module__active___-zoN6 {\n  color: var(--agentation-color-blue);\n}\n\n.styles-module__webhookUrlInput___2375C {\n  display: block;\n  width: 100%;\n  flex: 1;\n  min-height: 60px;\n  box-sizing: border-box;\n  margin-top: 11px;\n  padding: 8px 10px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 6px;\n  background: rgba(255, 255, 255, 0.03);\n  font-family: inherit;\n  font-size: 0.75rem;\n  font-weight: 400;\n  color: #fff;\n  outline: none;\n  resize: none;\n  cursor: text !important;\n  user-select: text;\n  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;\n}\n.styles-module__webhookUrlInput___2375C::placeholder {\n  color: rgba(255, 255, 255, 0.3);\n}\n.styles-module__webhookUrlInput___2375C:focus {\n  border-color: rgba(255, 255, 255, 0.3);\n  background: rgba(255, 255, 255, 0.08);\n}\n[data-agentation-theme=light] .styles-module__webhookUrlInput___2375C {\n  border-color: rgba(0, 0, 0, 0.1);\n  background: rgba(0, 0, 0, 0.03);\n  color: rgba(0, 0, 0, 0.85);\n}\n[data-agentation-theme=light] .styles-module__webhookUrlInput___2375C::placeholder {\n  color: rgba(0, 0, 0, 0.3);\n}\n[data-agentation-theme=light] .styles-module__webhookUrlInput___2375C:focus {\n  border-color: rgba(0, 0, 0, 0.25);\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.styles-module__settingsHeader___pwDY9 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 24px;\n  margin-bottom: 0.5rem;\n  padding-bottom: 9px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.07);\n}\n\n.styles-module__settingsBrand___0gJeM {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  letter-spacing: -0.0094em;\n  color: #fff;\n}\n\n.styles-module__settingsBrandSlash___uTG18 {\n  color: var(--agentation-color-accent);\n  transition: color 0.2s ease;\n}\n\n.styles-module__settingsVersion___TUcFq {\n  font-size: 11px;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.4);\n  margin-left: auto;\n  letter-spacing: -0.0094em;\n}\n\n.styles-module__settingsSection___m-YM2 + .styles-module__settingsSection___m-YM2 {\n  margin-top: 0.5rem;\n  padding-top: 0.5rem;\n  border-top: 1px solid rgba(255, 255, 255, 0.07);\n}\n.styles-module__settingsSection___m-YM2.styles-module__settingsSectionExtraPadding___jdhFV {\n  padding-top: calc(0.5rem + 4px);\n}\n\n.styles-module__settingsSectionGrow___h-5HZ {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.styles-module__settingsRow___3sdhc {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 24px;\n}\n.styles-module__settingsRow___3sdhc.styles-module__settingsRowMarginTop___zA0Sp {\n  margin-top: 8px;\n}\n\n.styles-module__dropdownContainer___BVnxe {\n  position: relative;\n}\n\n.styles-module__dropdownButton___16NPz {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.25rem 0.5rem;\n  border: none;\n  border-radius: 0.375rem;\n  background: transparent;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: #fff;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  letter-spacing: -0.0094em;\n}\n.styles-module__dropdownButton___16NPz:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n.styles-module__dropdownButton___16NPz svg {\n  opacity: 0.6;\n}\n\n.styles-module__cycleButton___FMKfw {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: #fff;\n  cursor: pointer;\n  letter-spacing: -0.0094em;\n}\n[data-agentation-theme=light] .styles-module__cycleButton___FMKfw {\n  color: rgba(0, 0, 0, 0.85);\n}\n.styles-module__cycleButton___FMKfw:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.styles-module__settingsRowDisabled___EgS0V .styles-module__settingsLabel___8UjfX {\n  color: rgba(255, 255, 255, 0.2);\n}\n[data-agentation-theme=light] .styles-module__settingsRowDisabled___EgS0V .styles-module__settingsLabel___8UjfX {\n  color: rgba(0, 0, 0, 0.2);\n}\n.styles-module__settingsRowDisabled___EgS0V .styles-module__toggleSwitch___l4Ygm {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n@keyframes styles-module__cycleTextIn___Q6zJf {\n  0% {\n    opacity: 0;\n    transform: translateY(-6px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.styles-module__cycleButtonText___fD1LR {\n  display: inline-block;\n  animation: styles-module__cycleTextIn___Q6zJf 0.2s ease-out;\n}\n\n.styles-module__cycleDots___LWuoQ {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.styles-module__cycleDot___nPgLY {\n  width: 3px;\n  height: 3px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.3);\n  transform: scale(0.667);\n  transition: background-color 0.25s ease-out, transform 0.25s ease-out;\n}\n.styles-module__cycleDot___nPgLY.styles-module__active___-zoN6 {\n  background: #fff;\n  transform: scale(1);\n}\n[data-agentation-theme=light] .styles-module__cycleDot___nPgLY {\n  background: rgba(0, 0, 0, 0.2);\n}\n[data-agentation-theme=light] .styles-module__cycleDot___nPgLY.styles-module__active___-zoN6 {\n  background: rgba(0, 0, 0, 0.7);\n}\n\n.styles-module__dropdownMenu___k73ER {\n  position: absolute;\n  right: 0;\n  top: calc(100% + 0.25rem);\n  background: #1a1a1a;\n  border-radius: 0.5rem;\n  padding: 0.25rem;\n  min-width: 120px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);\n  z-index: 10;\n  animation: styles-module__scaleIn___c-r1K 0.15s ease-out;\n}\n\n.styles-module__dropdownItem___ylsLj {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0.625rem;\n  border: none;\n  border-radius: 0.375rem;\n  background: transparent;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.85);\n  cursor: pointer;\n  text-align: left;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  letter-spacing: -0.0094em;\n}\n.styles-module__dropdownItem___ylsLj:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n.styles-module__dropdownItem___ylsLj.styles-module__selected___OwRqP {\n  background: rgba(255, 255, 255, 0.12);\n  color: #fff;\n  font-weight: 600;\n}\n\n.styles-module__settingsLabel___8UjfX {\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: -0.0094em;\n  color: rgba(255, 255, 255, 0.5);\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n}\n[data-agentation-theme=light] .styles-module__settingsLabel___8UjfX {\n  color: rgba(0, 0, 0, 0.5);\n}\n\n.styles-module__settingsLabelMarker___ewdtV {\n  padding-top: 3px;\n  margin-bottom: 10px;\n}\n\n.styles-module__settingsOptions___LyrBA {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.styles-module__settingsOption___UNa12 {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  padding: 0.375rem 0.5rem;\n  border: none;\n  border-radius: 0.375rem;\n  background: transparent;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.7);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.styles-module__settingsOption___UNa12:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n.styles-module__settingsOption___UNa12.styles-module__selected___OwRqP {\n  background: color-mix(in srgb, var(--agentation-color-blue) 15%, transparent);\n  color: var(--agentation-color-blue);\n}\n\n.styles-module__sliderContainer___ducXj {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.styles-module__slider___GLdxp {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 4px;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: 2px;\n  outline: none;\n  cursor: pointer;\n}\n.styles-module__slider___GLdxp::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  background: white;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n.styles-module__slider___GLdxp::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  background: white;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n.styles-module__slider___GLdxp:hover::-webkit-slider-thumb {\n  transform: scale(1.15);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n}\n.styles-module__slider___GLdxp:hover::-moz-range-thumb {\n  transform: scale(1.15);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);\n}\n\n.styles-module__sliderLabels___FhLDB {\n  display: flex;\n  justify-content: space-between;\n}\n\n.styles-module__sliderLabel___U8sPr {\n  font-size: 0.625rem;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.4);\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.styles-module__sliderLabel___U8sPr:hover {\n  color: rgba(255, 255, 255, 0.7);\n}\n.styles-module__sliderLabel___U8sPr.styles-module__active___-zoN6 {\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.styles-module__colorOptions___iHCNX {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 0.375rem;\n  margin-bottom: 1px;\n}\n\n.styles-module__colorOption___IodiY {\n  display: block;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 2px solid transparent;\n  background-color: var(--swatch);\n  cursor: pointer;\n  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);\n}\n@supports (color: color(display-p3 0 0 0)) {\n  .styles-module__colorOption___IodiY {\n    background-color: var(--swatch-p3);\n  }\n}\n.styles-module__colorOption___IodiY:hover {\n  transform: scale(1.15);\n}\n.styles-module__colorOption___IodiY.styles-module__selected___OwRqP {\n  transform: scale(0.83);\n}\n\n.styles-module__colorOptionRing___U2xpo {\n  display: flex;\n  width: 24px;\n  height: 24px;\n  border: 2px solid transparent;\n  border-radius: 50%;\n  transition: border-color 0.3s ease;\n}\n.styles-module__colorOptionRing___U2xpo.styles-module__selected___OwRqP {\n  border-color: var(--swatch);\n}\n@supports (color: color(display-p3 0 0 0)) {\n  .styles-module__colorOptionRing___U2xpo.styles-module__selected___OwRqP {\n    border-color: var(--swatch-p3);\n  }\n}\n\n.styles-module__settingsToggle___fBrFn {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n}\n.styles-module__settingsToggle___fBrFn + .styles-module__settingsToggle___fBrFn {\n  margin-top: calc(0.5rem + 6px);\n}\n.styles-module__settingsToggle___fBrFn input[type=checkbox] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n.styles-module__settingsToggle___fBrFn.styles-module__settingsToggleMarginBottom___MZUyF {\n  margin-bottom: calc(0.5rem + 6px);\n}\n\n.styles-module__customCheckbox___U39ax {\n  position: relative;\n  width: 14px;\n  height: 14px;\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 4px;\n  background: rgba(255, 255, 255, 0.05);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: background-color 0.25s ease, border-color 0.25s ease;\n}\n.styles-module__customCheckbox___U39ax svg {\n  color: #1a1a1a;\n  opacity: 1;\n  transition: opacity 0.15s ease;\n}\ninput[type=checkbox]:checked + .styles-module__customCheckbox___U39ax {\n  border-color: rgba(255, 255, 255, 0.3);\n  background: rgb(255, 255, 255);\n}\n[data-agentation-theme=light] .styles-module__customCheckbox___U39ax {\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  background: #fff;\n}\n[data-agentation-theme=light] .styles-module__customCheckbox___U39ax.styles-module__checked___mnZLo {\n  border-color: #1a1a1a;\n  background: #1a1a1a;\n}\n[data-agentation-theme=light] .styles-module__customCheckbox___U39ax.styles-module__checked___mnZLo svg {\n  color: #fff;\n}\n\n.styles-module__toggleLabel___Xm8Aa {\n  font-size: 0.8125rem;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.5);\n  letter-spacing: -0.0094em;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n[data-agentation-theme=light] .styles-module__toggleLabel___Xm8Aa {\n  color: rgba(0, 0, 0, 0.5);\n}\n\n.styles-module__toggleSwitch___l4Ygm {\n  position: relative;\n  display: inline-block;\n  width: 24px;\n  height: 16px;\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.styles-module__toggleSwitch___l4Ygm input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n.styles-module__toggleSwitch___l4Ygm input:checked + .styles-module__toggleSlider___wprIn {\n  background-color: var(--agentation-color-blue);\n}\n.styles-module__toggleSwitch___l4Ygm input:checked + .styles-module__toggleSlider___wprIn::before {\n  transform: translateX(8px);\n}\n.styles-module__toggleSwitch___l4Ygm.styles-module__disabled___332Jw {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.styles-module__toggleSwitch___l4Ygm.styles-module__disabled___332Jw .styles-module__toggleSlider___wprIn {\n  cursor: not-allowed;\n}\n\n.styles-module__toggleSlider___wprIn {\n  position: absolute;\n  cursor: pointer;\n  inset: 0;\n  border-radius: 16px;\n  background: #484848;\n}\n[data-agentation-theme=light] .styles-module__toggleSlider___wprIn {\n  background: #dddddd;\n}\n.styles-module__toggleSlider___wprIn::before {\n  content: "";\n  position: absolute;\n  height: 12px;\n  width: 12px;\n  left: 2px;\n  bottom: 2px;\n  background: white;\n  border-radius: 50%;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes styles-module__mcpPulse___uNggr {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--agentation-color-green) 50%, transparent);\n  }\n  70% {\n    box-shadow: 0 0 0 6px color-mix(in srgb, var(--agentation-color-green) 0%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--agentation-color-green) 0%, transparent);\n  }\n}\n@keyframes styles-module__mcpPulseError___fov9B {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--agentation-color-red) 50%, transparent);\n  }\n  70% {\n    box-shadow: 0 0 0 6px color-mix(in srgb, var(--agentation-color-red) 0%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--agentation-color-red) 0%, transparent);\n  }\n}\n.styles-module__mcpStatusDot___ibgkc {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n.styles-module__mcpStatusDot___ibgkc.styles-module__connecting___uo-CW {\n  background-color: var(--agentation-color-yellow);\n  animation: styles-module__mcpPulse___uNggr 1.5s infinite;\n}\n.styles-module__mcpStatusDot___ibgkc.styles-module__connected___7c28g {\n  background-color: var(--agentation-color-green);\n  animation: styles-module__mcpPulse___uNggr 2.5s ease-in-out infinite;\n}\n.styles-module__mcpStatusDot___ibgkc.styles-module__disconnected___cHPxR {\n  background-color: var(--agentation-color-red);\n  animation: styles-module__mcpPulseError___fov9B 2s infinite;\n}\n\n.styles-module__dragSelection___kZLq2 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  border: 2px solid color-mix(in srgb, var(--agentation-color-green) 60%, transparent);\n  border-radius: 4px;\n  background-color: color-mix(in srgb, var(--agentation-color-green) 8%, transparent);\n  pointer-events: none;\n  z-index: 99997;\n  will-change: transform, width, height;\n  contain: layout style;\n}\n\n.styles-module__dragCount___KM90j {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--agentation-color-green);\n  color: white;\n  font-size: 0.875rem;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem;\n  border-radius: 1rem;\n  min-width: 1.5rem;\n  text-align: center;\n}\n\n.styles-module__highlightsContainer___-0xzG {\n  position: fixed;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 99996;\n}\n\n.styles-module__selectedElementHighlight___fyVlI {\n  position: fixed;\n  top: 0;\n  left: 0;\n  border: 2px solid color-mix(in srgb, var(--agentation-color-green) 50%, transparent);\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--agentation-color-green) 6%, transparent);\n  pointer-events: none;\n  will-change: transform, width, height;\n  contain: layout style;\n}\n\n[data-agentation-theme=light] .styles-module__toolbarContainer___dIhma {\n  background: #fff;\n  color: rgba(0, 0, 0, 0.85);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n[data-agentation-theme=light] .styles-module__toolbarContainer___dIhma.styles-module__collapsed___Rydsn:hover {\n  background: #f5f5f5;\n}\n[data-agentation-theme=light] .styles-module__controlButton___8Q0jc {\n  color: rgba(0, 0, 0, 0.5);\n}\n[data-agentation-theme=light] .styles-module__controlButton___8Q0jc:hover:not(:disabled):not([data-active=true]):not([data-failed=true]):not([data-auto-sync=true]):not([data-error=true]):not([data-no-hover=true]) {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.85);\n}\n[data-agentation-theme=light] .styles-module__controlButton___8Q0jc[data-active=true] {\n  color: var(--agentation-color-blue);\n  background: color-mix(in srgb, var(--agentation-color-blue) 15%, transparent);\n}\n[data-agentation-theme=light] .styles-module__controlButton___8Q0jc[data-error=true] {\n  color: var(--agentation-color-red);\n  background: color-mix(in srgb, var(--agentation-color-red) 15%, transparent);\n}\n[data-agentation-theme=light] .styles-module__controlButton___8Q0jc[data-danger]:hover:not(:disabled):not([data-active=true]):not([data-failed=true]) {\n  color: var(--agentation-color-red);\n  background: color-mix(in srgb, var(--agentation-color-red) 15%, transparent);\n}\n[data-agentation-theme=light] .styles-module__controlButton___8Q0jc[data-auto-sync=true] {\n  color: var(--agentation-color-green);\n  background: transparent;\n}\n[data-agentation-theme=light] .styles-module__controlButton___8Q0jc[data-failed=true] {\n  color: var(--agentation-color-red);\n  background: color-mix(in srgb, var(--agentation-color-red) 15%, transparent);\n}\n[data-agentation-theme=light] .styles-module__buttonTooltip___Burd9 {\n  background: #fff;\n  color: rgba(0, 0, 0, 0.85);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n[data-agentation-theme=light] .styles-module__buttonTooltip___Burd9::after {\n  background: #fff;\n}\n[data-agentation-theme=light] .styles-module__divider___c--s1 {\n  background: rgba(0, 0, 0, 0.1);\n}\n[data-agentation-theme=light] .styles-module__markerTooltip___aLJID {\n  background: #fff;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n}\n[data-agentation-theme=light] .styles-module__markerTooltip___aLJID .styles-module__markerQuote___FHmrz {\n  color: rgba(0, 0, 0, 0.5);\n}\n[data-agentation-theme=light] .styles-module__markerTooltip___aLJID .styles-module__markerNote___QkrrS {\n  color: rgba(0, 0, 0, 0.85);\n}\n[data-agentation-theme=light] .styles-module__markerTooltip___aLJID .styles-module__markerHint___2iF-6 {\n  color: rgba(0, 0, 0, 0.35);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y {\n  background: #fff;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y::before {\n  background: linear-gradient(to right, #fff 0%, transparent 100%);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y::after {\n  background: linear-gradient(to left, #fff 0%, transparent 100%);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__settingsHeader___pwDY9 {\n  border-bottom-color: rgba(0, 0, 0, 0.08);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__settingsBrand___0gJeM {\n  color: rgba(0, 0, 0, 0.85);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__settingsVersion___TUcFq {\n  color: rgba(0, 0, 0, 0.4);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__settingsSection___m-YM2 {\n  border-top-color: rgba(0, 0, 0, 0.08);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__settingsLabel___8UjfX {\n  color: rgba(0, 0, 0, 0.5);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__cycleButton___FMKfw {\n  color: rgba(0, 0, 0, 0.85);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__cycleDot___nPgLY {\n  background: rgba(0, 0, 0, 0.2);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__cycleDot___nPgLY.styles-module__active___-zoN6 {\n  background: rgba(0, 0, 0, 0.7);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__dropdownButton___16NPz {\n  color: rgba(0, 0, 0, 0.85);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__dropdownButton___16NPz:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__toggleLabel___Xm8Aa {\n  color: rgba(0, 0, 0, 0.5);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax {\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  background: #fff;\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax.styles-module__checked___mnZLo {\n  border-color: #1a1a1a;\n  background: #1a1a1a;\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__customCheckbox___U39ax.styles-module__checked___mnZLo svg {\n  color: #fff;\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr {\n  color: rgba(0, 0, 0, 0.4);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr:hover {\n  color: rgba(0, 0, 0, 0.7);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__sliderLabel___U8sPr.styles-module__active___-zoN6 {\n  color: rgba(0, 0, 0, 0.9);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp {\n  background: rgba(0, 0, 0, 0.1);\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp::-webkit-slider-thumb {\n  background: #1a1a1a;\n}\n[data-agentation-theme=light] .styles-module__settingsPanel___OxX3Y .styles-module__slider___GLdxp::-moz-range-thumb {\n  background: #1a1a1a;\n}\n\n.styles-module__themeToggle___2rUjA {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  margin-left: 0.5rem;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.4);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.styles-module__themeToggle___2rUjA:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.8);\n}\n[data-agentation-theme=light] .styles-module__themeToggle___2rUjA {\n  color: rgba(0, 0, 0, 0.4);\n}\n[data-agentation-theme=light] .styles-module__themeToggle___2rUjA:hover {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.7);\n}\n\n.styles-module__themeIconWrapper___LsJIM {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: 20px;\n  height: 20px;\n}\n\n.styles-module__themeIcon___lCCmo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: styles-module__themeIconIn___TU6ML 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n\n@keyframes styles-module__themeIconIn___TU6ML {\n  0% {\n    opacity: 0;\n    transform: scale(0.8) rotate(-30deg);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1) rotate(0deg);\n  }\n}';
+var classNames3 = { "toolbar": "styles-module__toolbar___wNsdK", "markersLayer": "styles-module__markersLayer___-25j1", "fixedMarkersLayer": "styles-module__fixedMarkersLayer___ffyX6", "disableTransitions": "styles-module__disableTransitions___EopxO", "toolbarContainer": "styles-module__toolbarContainer___dIhma", "dragging": "styles-module__dragging___xrolZ", "entrance": "styles-module__entrance___sgHd8", "toolbarEnter": "styles-module__toolbarEnter___u8RRu", "hiding": "styles-module__hiding___1td44", "toolbarHide": "styles-module__toolbarHide___y8kaT", "collapsed": "styles-module__collapsed___Rydsn", "expanded": "styles-module__expanded___ofKPx", "serverConnected": "styles-module__serverConnected___Gfbou", "toggleContent": "styles-module__toggleContent___0yfyP", "visible": "styles-module__visible___KHwEW", "hidden": "styles-module__hidden___Ae8H4", "controlsContent": "styles-module__controlsContent___9GJWU", "badge": "styles-module__badge___2XsgF", "fadeOut": "styles-module__fadeOut___6Ut6-", "badgeEnter": "styles-module__badgeEnter___mVQLj", "controlButton": "styles-module__controlButton___8Q0jc", "statusShowing": "styles-module__statusShowing___te6iu", "buttonBadge": "styles-module__buttonBadge___NeFWb", "mcpIndicator": "styles-module__mcpIndicator___zGJeL", "connected": "styles-module__connected___7c28g", "mcpIndicatorPulseConnected": "styles-module__mcpIndicatorPulseConnected___EDodZ", "connecting": "styles-module__connecting___uo-CW", "mcpIndicatorPulseConnecting": "styles-module__mcpIndicatorPulseConnecting___cCYte", "connectionIndicatorWrapper": "styles-module__connectionIndicatorWrapper___L-e-3", "connectionIndicator": "styles-module__connectionIndicator___afk9p", "connectionIndicatorVisible": "styles-module__connectionIndicatorVisible___C-i5B", "connectionIndicatorConnected": "styles-module__connectionIndicatorConnected___IY8pR", "connectionPulse": "styles-module__connectionPulse___-Zycw", "connectionIndicatorDisconnected": "styles-module__connectionIndicatorDisconnected___kmpaZ", "connectionIndicatorConnecting": "styles-module__connectionIndicatorConnecting___QmSLH", "buttonWrapper": "styles-module__buttonWrapper___rBcdv", "buttonTooltip": "styles-module__buttonTooltip___Burd9", "tooltipsInSession": "styles-module__tooltipsInSession___-0lHH", "sendButtonWrapper": "styles-module__sendButtonWrapper___UUxG6", "sendButtonVisible": "styles-module__sendButtonVisible___WPSQU", "shortcut": "styles-module__shortcut___lEAQk", "tooltipBelow": "styles-module__tooltipBelow___m6ats", "tooltipsHidden": "styles-module__tooltipsHidden___VtLJG", "tooltipVisible": "styles-module__tooltipVisible___0jcCv", "buttonWrapperAlignLeft": "styles-module__buttonWrapperAlignLeft___myzIp", "buttonWrapperAlignRight": "styles-module__buttonWrapperAlignRight___HCQFR", "divider": "styles-module__divider___c--s1", "overlay": "styles-module__overlay___Q1O9y", "hoverHighlight": "styles-module__hoverHighlight___ogakW", "enter": "styles-module__enter___WFIki", "hoverHighlightIn": "styles-module__hoverHighlightIn___6WYHY", "multiSelectOutline": "styles-module__multiSelectOutline___cSJ-m", "fadeIn": "styles-module__fadeIn___b9qmf", "exit": "styles-module__exit___fyOJ0", "singleSelectOutline": "styles-module__singleSelectOutline___QhX-O", "hoverTooltip": "styles-module__hoverTooltip___bvLk7", "hoverTooltipIn": "styles-module__hoverTooltipIn___FYGQx", "hoverReactPath": "styles-module__hoverReactPath___gx1IJ", "hoverElementName": "styles-module__hoverElementName___QMLMl", "marker": "styles-module__marker___6sQrs", "clearing": "styles-module__clearing___FQ--7", "markerIn": "styles-module__markerIn___5FaAP", "markerOut": "styles-module__markerOut___GU5jX", "pending": "styles-module__pending___2IHLC", "fixed": "styles-module__fixed___dBMHC", "multiSelect": "styles-module__multiSelect___YWiuz", "hovered": "styles-module__hovered___ZgXIy", "renumber": "styles-module__renumber___nCTxD", "renumberRoll": "styles-module__renumberRoll___Wgbq3", "markerTooltip": "styles-module__markerTooltip___aLJID", "tooltipIn": "styles-module__tooltipIn___0N31w", "markerQuote": "styles-module__markerQuote___FHmrz", "markerNote": "styles-module__markerNote___QkrrS", "markerHint": "styles-module__markerHint___2iF-6", "settingsPanel": "styles-module__settingsPanel___OxX3Y", "settingsHeader": "styles-module__settingsHeader___pwDY9", "settingsBrand": "styles-module__settingsBrand___0gJeM", "settingsBrandSlash": "styles-module__settingsBrandSlash___uTG18", "settingsVersion": "styles-module__settingsVersion___TUcFq", "settingsSection": "styles-module__settingsSection___m-YM2", "settingsLabel": "styles-module__settingsLabel___8UjfX", "cycleButton": "styles-module__cycleButton___FMKfw", "cycleDot": "styles-module__cycleDot___nPgLY", "dropdownButton": "styles-module__dropdownButton___16NPz", "toggleLabel": "styles-module__toggleLabel___Xm8Aa", "customCheckbox": "styles-module__customCheckbox___U39ax", "sliderLabel": "styles-module__sliderLabel___U8sPr", "slider": "styles-module__slider___GLdxp", "themeToggle": "styles-module__themeToggle___2rUjA", "settingsOption": "styles-module__settingsOption___UNa12", "selected": "styles-module__selected___OwRqP", "settingsPanelContainer": "styles-module__settingsPanelContainer___Xksv8", "settingsPage": "styles-module__settingsPage___6YfHH", "slideLeft": "styles-module__slideLeft___Ps01J", "automationsPage": "styles-module__automationsPage___uvCq6", "slideIn": "styles-module__slideIn___4-qXe", "settingsNavLink": "styles-module__settingsNavLink___wCzJt", "settingsNavLinkRight": "styles-module__settingsNavLinkRight___ZWwhj", "mcpNavIndicator": "styles-module__mcpNavIndicator___cl9pO", "mcpPulse": "styles-module__mcpPulse___uNggr", "settingsBackButton": "styles-module__settingsBackButton___bIe2j", "automationHeader": "styles-module__automationHeader___InP0r", "automationDescription": "styles-module__automationDescription___NKlmo", "learnMoreLink": "styles-module__learnMoreLink___8xv-x", "autoSendRow": "styles-module__autoSendRow___UblX5", "autoSendLabel": "styles-module__autoSendLabel___icDc2", "active": "styles-module__active___-zoN6", "webhookUrlInput": "styles-module__webhookUrlInput___2375C", "settingsSectionExtraPadding": "styles-module__settingsSectionExtraPadding___jdhFV", "settingsSectionGrow": "styles-module__settingsSectionGrow___h-5HZ", "settingsRow": "styles-module__settingsRow___3sdhc", "settingsRowMarginTop": "styles-module__settingsRowMarginTop___zA0Sp", "dropdownContainer": "styles-module__dropdownContainer___BVnxe", "settingsRowDisabled": "styles-module__settingsRowDisabled___EgS0V", "toggleSwitch": "styles-module__toggleSwitch___l4Ygm", "cycleButtonText": "styles-module__cycleButtonText___fD1LR", "cycleTextIn": "styles-module__cycleTextIn___Q6zJf", "cycleDots": "styles-module__cycleDots___LWuoQ", "dropdownMenu": "styles-module__dropdownMenu___k73ER", "scaleIn": "styles-module__scaleIn___c-r1K", "dropdownItem": "styles-module__dropdownItem___ylsLj", "settingsLabelMarker": "styles-module__settingsLabelMarker___ewdtV", "settingsOptions": "styles-module__settingsOptions___LyrBA", "sliderContainer": "styles-module__sliderContainer___ducXj", "sliderLabels": "styles-module__sliderLabels___FhLDB", "colorOptions": "styles-module__colorOptions___iHCNX", "colorOption": "styles-module__colorOption___IodiY", "colorOptionRing": "styles-module__colorOptionRing___U2xpo", "settingsToggle": "styles-module__settingsToggle___fBrFn", "settingsToggleMarginBottom": "styles-module__settingsToggleMarginBottom___MZUyF", "checked": "styles-module__checked___mnZLo", "toggleSlider": "styles-module__toggleSlider___wprIn", "disabled": "styles-module__disabled___332Jw", "mcpStatusDot": "styles-module__mcpStatusDot___ibgkc", "disconnected": "styles-module__disconnected___cHPxR", "mcpPulseError": "styles-module__mcpPulseError___fov9B", "dragSelection": "styles-module__dragSelection___kZLq2", "dragCount": "styles-module__dragCount___KM90j", "highlightsContainer": "styles-module__highlightsContainer___-0xzG", "selectedElementHighlight": "styles-module__selectedElementHighlight___fyVlI", "themeIconWrapper": "styles-module__themeIconWrapper___LsJIM", "themeIcon": "styles-module__themeIcon___lCCmo", "themeIconIn": "styles-module__themeIconIn___TU6ML", "scaleOut": "styles-module__scaleOut___Wctwz", "slideUp": "styles-module__slideUp___kgD36", "slideDown": "styles-module__slideDown___zcdje", "settingsPanelIn": "styles-module__settingsPanelIn___MGfO8", "settingsPanelOut": "styles-module__settingsPanelOut___Zfymi" };
 if (typeof document !== "undefined") {
   let style = document.getElementById("feedback-tool-styles-page-toolbar-css-styles");
   if (!style) {
     style = document.createElement("style");
     style.id = "feedback-tool-styles-page-toolbar-css-styles";
-    style.textContent = css2;
+    style.textContent = css3;
     document.head.appendChild(style);
   }
 }
-var styles_module_default2 = classNames2;
+var styles_module_default2 = classNames3;
 
-// src/components/page-toolbar-css/index.tsx
+// src/components/tooltip/index.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var Tooltip = ({
+  content,
+  children,
+  ...props
+}) => {
+  const [visible, setVisible] = (0, import_react3.useState)(false);
+  const [shouldRender, setShouldRender] = (0, import_react3.useState)(false);
+  const [position, setPosition] = (0, import_react3.useState)({ top: 0, right: 0 });
+  const triggerRef = (0, import_react3.useRef)(null);
+  const timeoutRef = (0, import_react3.useRef)(null);
+  const exitTimeoutRef = (0, import_react3.useRef)(null);
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setPosition({
+        top: rect.top + rect.height / 2,
+        right: window.innerWidth - rect.left + 8
+      });
+    }
+  };
+  const handleMouseEnter = () => {
+    setShouldRender(true);
+    if (exitTimeoutRef.current) {
+      clearTimeout(exitTimeoutRef.current);
+      exitTimeoutRef.current = null;
+    }
+    updatePosition();
+    timeoutRef.current = originalSetTimeout(() => {
+      setVisible(true);
+    }, 500);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setVisible(false);
+    exitTimeoutRef.current = originalSetTimeout(() => {
+      setShouldRender(false);
+    }, 150);
+  };
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (exitTimeoutRef.current) clearTimeout(exitTimeoutRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "span",
+      {
+        ref: triggerRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children
+      }
+    ),
+    shouldRender && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          "data-feedback-toolbar": true,
+          style: {
+            position: "fixed",
+            top: position.top,
+            right: position.right,
+            transform: "translateY(-50%)",
+            padding: "6px 10px",
+            background: "#383838",
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: "11px",
+            fontWeight: 400,
+            lineHeight: "14px",
+            borderRadius: "10px",
+            width: "180px",
+            textAlign: "left",
+            zIndex: 100020,
+            pointerEvents: "none",
+            boxShadow: "0px 1px 8px rgba(0, 0, 0, 0.28)",
+            opacity: visible ? 1 : 0,
+            transition: "opacity 0.15s ease"
+          },
+          children: content
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/help-tooltip/styles.module.scss
+var css4 = ".styles-module__tooltip___mcXL2 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: help;\n}\n\n.styles-module__tooltipIcon___Nq2nD {\n  transform: translateY(0.5px);\n  color: #fff;\n  opacity: 0.2;\n  transition: opacity 0.15s ease;\n  will-change: transform;\n}\n.styles-module__tooltip___mcXL2:hover .styles-module__tooltipIcon___Nq2nD {\n  opacity: 0.5;\n}\n[data-agentation-theme=light] .styles-module__tooltipIcon___Nq2nD {\n  color: #000;\n}";
+var classNames4 = { "tooltip": "styles-module__tooltip___mcXL2", "tooltipIcon": "styles-module__tooltipIcon___Nq2nD" };
+if (typeof document !== "undefined") {
+  let style = document.getElementById("feedback-tool-styles-help-tooltip-styles");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "feedback-tool-styles-help-tooltip-styles";
+    style.textContent = css4;
+    document.head.appendChild(style);
+  }
+}
+var styles_module_default3 = classNames4;
+
+// src/components/help-tooltip/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var HelpTooltip = ({ content }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { className: styles_module_default3.tooltip, content, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconHelp, { className: styles_module_default3.tooltipIcon }) });
+};
+
+// src/components/page-toolbar-css/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function identifyElementWithReact(element, reactMode = "filtered") {
   const { name: elementName, path } = identifyElement(element);
   if (reactMode === "off") {
@@ -2775,7 +2862,7 @@ var hasPlayedEntranceAnimation = false;
 var DEFAULT_SETTINGS = {
   outputDetail: "standard",
   autoClearAfterCopy: false,
-  annotationColor: "#3c82f7",
+  annotationColorId: "blue",
   blockInteractions: true,
   reactEnabled: true,
   markerClickBehavior: "edit",
@@ -2804,14 +2891,43 @@ var OUTPUT_DETAIL_OPTIONS = [
   { value: "forensic", label: "Forensic" }
 ];
 var COLOR_OPTIONS = [
-  { value: "#AF52DE", label: "Purple" },
-  { value: "#3c82f7", label: "Blue" },
-  { value: "#5AC8FA", label: "Cyan" },
-  { value: "#34C759", label: "Green" },
-  { value: "#FFD60A", label: "Yellow" },
-  { value: "#FF9500", label: "Orange" },
-  { value: "#FF3B30", label: "Red" }
+  { id: "indigo", label: "Indigo", srgb: "#6155F5", p3: "color(display-p3 0.38 0.33 0.96)" },
+  { id: "blue", label: "Blue", srgb: "#0088FF", p3: "color(display-p3 0.00 0.53 1.00)" },
+  { id: "cyan", label: "Cyan", srgb: "#00C3D0", p3: "color(display-p3 0.00 0.76 0.82)" },
+  { id: "green", label: "Green", srgb: "#34C759", p3: "color(display-p3 0.20 0.78 0.35)" },
+  { id: "yellow", label: "Yellow", srgb: "#FFCC00", p3: "color(display-p3 1.00 0.80 0.00)" },
+  { id: "orange", label: "Orange", srgb: "#FF8D28", p3: "color(display-p3 1.00 0.55 0.16)" },
+  { id: "red", label: "Red", srgb: "#FF383C", p3: "color(display-p3 1.00 0.22 0.24)" }
 ];
+var injectAgentationColorTokens = () => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("agentation-color-tokens")) return;
+  const style = document.createElement("style");
+  style.id = "agentation-color-tokens";
+  style.textContent = [
+    ...COLOR_OPTIONS.map((c) => `
+      [data-agentation-accent="${c.id}"] {
+        --agentation-color-accent: ${c.srgb};
+      }
+
+      @supports (color: color(display-p3 0 0 0)) {
+        [data-agentation-accent="${c.id}"] {
+          --agentation-color-accent: ${c.p3};
+        }
+      }
+    `),
+    `:root {
+      ${COLOR_OPTIONS.map((c) => `--agentation-color-${c.id}: ${c.srgb};`).join("\n")}
+    }`,
+    `@supports (color: color(display-p3 0 0 0)) {
+      :root {
+        ${COLOR_OPTIONS.map((c) => `--agentation-color-${c.id}: ${c.p3};`).join("\n")}
+      }
+    }`
+  ].join("");
+  document.head.appendChild(style);
+};
+injectAgentationColorTokens();
 function deepElementFromPoint(x, y) {
   let element = document.elementFromPoint(x, y);
   if (!element) return null;
@@ -2988,13 +3104,13 @@ function PageFeedbackToolbarCSS({
   webhookUrl,
   className: userClassName
 } = {}) {
-  const [isActive, setIsActive] = (0, import_react3.useState)(false);
-  const [annotations, setAnnotations] = (0, import_react3.useState)([]);
-  const [showMarkers, setShowMarkers] = (0, import_react3.useState)(true);
-  const [isToolbarHidden, setIsToolbarHidden] = (0, import_react3.useState)(() => loadToolbarHidden());
-  const [isToolbarHiding, setIsToolbarHiding] = (0, import_react3.useState)(false);
-  const portalWrapperRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const [isActive, setIsActive] = (0, import_react4.useState)(false);
+  const [annotations, setAnnotations] = (0, import_react4.useState)([]);
+  const [showMarkers, setShowMarkers] = (0, import_react4.useState)(true);
+  const [isToolbarHidden, setIsToolbarHidden] = (0, import_react4.useState)(() => loadToolbarHidden());
+  const [isToolbarHiding, setIsToolbarHiding] = (0, import_react4.useState)(false);
+  const portalWrapperRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     const stop = (e) => {
       const wrapper = portalWrapperRef.current;
       if (wrapper && wrapper.contains(e.target)) {
@@ -3007,42 +3123,41 @@ function PageFeedbackToolbarCSS({
       events.forEach((evt) => document.body.removeEventListener(evt, stop));
     };
   }, []);
-  const [markersVisible, setMarkersVisible] = (0, import_react3.useState)(false);
-  const [markersExiting, setMarkersExiting] = (0, import_react3.useState)(false);
-  const [hoverInfo, setHoverInfo] = (0, import_react3.useState)(null);
-  const [hoverPosition, setHoverPosition] = (0, import_react3.useState)({ x: 0, y: 0 });
-  const [pendingAnnotation, setPendingAnnotation] = (0, import_react3.useState)(null);
-  const [copied, setCopied] = (0, import_react3.useState)(false);
-  const [sendState, setSendState] = (0, import_react3.useState)("idle");
-  const [cleared, setCleared] = (0, import_react3.useState)(false);
-  const [isClearing, setIsClearing] = (0, import_react3.useState)(false);
-  const [hoveredMarkerId, setHoveredMarkerId] = (0, import_react3.useState)(null);
-  const [hoveredTargetElement, setHoveredTargetElement] = (0, import_react3.useState)(null);
-  const [hoveredTargetElements, setHoveredTargetElements] = (0, import_react3.useState)([]);
-  const [deletingMarkerId, setDeletingMarkerId] = (0, import_react3.useState)(null);
-  const [renumberFrom, setRenumberFrom] = (0, import_react3.useState)(null);
-  const [editingAnnotation, setEditingAnnotation] = (0, import_react3.useState)(
+  const [markersVisible, setMarkersVisible] = (0, import_react4.useState)(false);
+  const [markersExiting, setMarkersExiting] = (0, import_react4.useState)(false);
+  const [hoverInfo, setHoverInfo] = (0, import_react4.useState)(null);
+  const [hoverPosition, setHoverPosition] = (0, import_react4.useState)({ x: 0, y: 0 });
+  const [pendingAnnotation, setPendingAnnotation] = (0, import_react4.useState)(null);
+  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const [sendState, setSendState] = (0, import_react4.useState)("idle");
+  const [cleared, setCleared] = (0, import_react4.useState)(false);
+  const [isClearing, setIsClearing] = (0, import_react4.useState)(false);
+  const [hoveredMarkerId, setHoveredMarkerId] = (0, import_react4.useState)(null);
+  const [hoveredTargetElement, setHoveredTargetElement] = (0, import_react4.useState)(null);
+  const [hoveredTargetElements, setHoveredTargetElements] = (0, import_react4.useState)([]);
+  const [deletingMarkerId, setDeletingMarkerId] = (0, import_react4.useState)(null);
+  const [renumberFrom, setRenumberFrom] = (0, import_react4.useState)(null);
+  const [editingAnnotation, setEditingAnnotation] = (0, import_react4.useState)(
     null
   );
-  const [editingTargetElement, setEditingTargetElement] = (0, import_react3.useState)(null);
-  const [editingTargetElements, setEditingTargetElements] = (0, import_react3.useState)([]);
-  const [scrollY, setScrollY] = (0, import_react3.useState)(0);
-  const [isScrolling, setIsScrolling] = (0, import_react3.useState)(false);
-  const [mounted, setMounted] = (0, import_react3.useState)(false);
-  const [isFrozen, setIsFrozen] = (0, import_react3.useState)(false);
-  const [showSettings, setShowSettings] = (0, import_react3.useState)(false);
-  const [showSettingsVisible, setShowSettingsVisible] = (0, import_react3.useState)(false);
-  const [settingsPage, setSettingsPage] = (0, import_react3.useState)(
+  const [editingTargetElement, setEditingTargetElement] = (0, import_react4.useState)(null);
+  const [editingTargetElements, setEditingTargetElements] = (0, import_react4.useState)([]);
+  const [scrollY, setScrollY] = (0, import_react4.useState)(0);
+  const [isScrolling, setIsScrolling] = (0, import_react4.useState)(false);
+  const [mounted, setMounted] = (0, import_react4.useState)(false);
+  const [isFrozen, setIsFrozen] = (0, import_react4.useState)(false);
+  const [showSettings, setShowSettings] = (0, import_react4.useState)(false);
+  const [showSettingsVisible, setShowSettingsVisible] = (0, import_react4.useState)(false);
+  const [settingsPage, setSettingsPage] = (0, import_react4.useState)(
     "main"
   );
-  const [isTransitioning, setIsTransitioning] = (0, import_react3.useState)(false);
-  const [tooltipsHidden, setTooltipsHidden] = (0, import_react3.useState)(false);
-  const [tooltipSessionActive, setTooltipSessionActive] = (0, import_react3.useState)(false);
-  const tooltipSessionTimerRef = (0, import_react3.useRef)(
+  const [tooltipsHidden, setTooltipsHidden] = (0, import_react4.useState)(false);
+  const [tooltipSessionActive, setTooltipSessionActive] = (0, import_react4.useState)(false);
+  const tooltipSessionTimerRef = (0, import_react4.useRef)(
     null
   );
-  const [pendingMultiSelectElements, setPendingMultiSelectElements] = (0, import_react3.useState)([]);
-  const modifiersHeldRef = (0, import_react3.useRef)({ cmd: false, shift: false });
+  const [pendingMultiSelectElements, setPendingMultiSelectElements] = (0, import_react4.useState)([]);
+  const modifiersHeldRef = (0, import_react4.useRef)({ cmd: false, shift: false });
   const hideTooltipsUntilMouseLeave = () => {
     setTooltipsHidden(true);
   };
@@ -3065,140 +3180,67 @@ function PageFeedbackToolbarCSS({
     setTooltipSessionActive(false);
     showTooltipsAgain();
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     return () => {
       if (tooltipSessionTimerRef.current)
         clearTimeout(tooltipSessionTimerRef.current);
     };
   }, []);
-  const Tooltip = ({
-    content,
-    children
-  }) => {
-    const [isHovering, setIsHovering] = (0, import_react3.useState)(false);
-    const [visible, setVisible] = (0, import_react3.useState)(false);
-    const [shouldRender, setShouldRender] = (0, import_react3.useState)(false);
-    const [position, setPosition] = (0, import_react3.useState)({ top: 0, right: 0 });
-    const triggerRef = (0, import_react3.useRef)(null);
-    const timeoutRef = (0, import_react3.useRef)(null);
-    const exitTimeoutRef = (0, import_react3.useRef)(null);
-    const updatePosition = () => {
-      if (triggerRef.current) {
-        const rect = triggerRef.current.getBoundingClientRect();
-        setPosition({
-          top: rect.top + rect.height / 2,
-          right: window.innerWidth - rect.left + 8
-        });
-      }
-    };
-    const handleMouseEnter = () => {
-      setIsHovering(true);
-      setShouldRender(true);
-      if (exitTimeoutRef.current) {
-        clearTimeout(exitTimeoutRef.current);
-        exitTimeoutRef.current = null;
-      }
-      updatePosition();
-      timeoutRef.current = originalSetTimeout(() => {
-        setVisible(true);
-      }, 500);
-    };
-    const handleMouseLeave = () => {
-      setIsHovering(false);
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-      setVisible(false);
-      exitTimeoutRef.current = originalSetTimeout(() => {
-        setShouldRender(false);
-      }, 150);
-    };
-    (0, import_react3.useEffect)(() => {
-      return () => {
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        if (exitTimeoutRef.current) clearTimeout(exitTimeoutRef.current);
+  const [settings, setSettings] = (0, import_react4.useState)(() => {
+    try {
+      const saved = JSON.parse(localStorage.getItem("feedback-toolbar-settings") ?? "");
+      return {
+        ...DEFAULT_SETTINGS,
+        ...saved,
+        annotationColorId: COLOR_OPTIONS.find((c) => c.id === saved.annotationColorId) ? saved.annotationColorId : DEFAULT_SETTINGS.annotationColorId
       };
-    }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "span",
-        {
-          ref: triggerRef,
-          onMouseEnter: handleMouseEnter,
-          onMouseLeave: handleMouseLeave,
-          children
-        }
-      ),
-      shouldRender && (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "div",
-          {
-            "data-feedback-toolbar": true,
-            style: {
-              position: "fixed",
-              top: position.top,
-              right: position.right,
-              transform: "translateY(-50%)",
-              padding: "6px 10px",
-              background: "#383838",
-              color: "rgba(255, 255, 255, 0.7)",
-              fontSize: "11px",
-              fontWeight: 400,
-              lineHeight: "14px",
-              borderRadius: "10px",
-              width: "180px",
-              textAlign: "left",
-              zIndex: 100020,
-              pointerEvents: "none",
-              boxShadow: "0px 1px 8px rgba(0, 0, 0, 0.28)",
-              opacity: visible && !isTransitioning ? 1 : 0,
-              transition: "opacity 0.15s ease"
-            },
-            children: content
-          }
-        ),
-        document.body
-      )
-    ] });
+    } catch {
+      return DEFAULT_SETTINGS;
+    }
+  });
+  const [isDarkMode, setIsDarkMode] = (0, import_react4.useState)(true);
+  const [showEntranceAnimation, setShowEntranceAnimation] = (0, import_react4.useState)(false);
+  const toggleTheme = () => {
+    portalWrapperRef.current?.classList.add(styles_module_default2.disableTransitions);
+    setIsDarkMode((previous) => !previous);
+    requestAnimationFrame(() => {
+      portalWrapperRef.current?.classList.remove(styles_module_default2.disableTransitions);
+    });
   };
-  const [settings, setSettings] = (0, import_react3.useState)(DEFAULT_SETTINGS);
-  const [isDarkMode, setIsDarkMode] = (0, import_react3.useState)(true);
-  const [showEntranceAnimation, setShowEntranceAnimation] = (0, import_react3.useState)(false);
   const isDevMode = process.env.NODE_ENV === "development";
   const effectiveReactMode = isDevMode && settings.reactEnabled ? OUTPUT_TO_REACT_MODE[settings.outputDetail] : "off";
-  const [currentSessionId, setCurrentSessionId] = (0, import_react3.useState)(
+  const [currentSessionId, setCurrentSessionId] = (0, import_react4.useState)(
     initialSessionId ?? null
   );
-  const sessionInitializedRef = (0, import_react3.useRef)(false);
-  const [connectionStatus, setConnectionStatus] = (0, import_react3.useState)(endpoint ? "connecting" : "disconnected");
-  const [toolbarPosition, setToolbarPosition] = (0, import_react3.useState)(null);
-  const [isDraggingToolbar, setIsDraggingToolbar] = (0, import_react3.useState)(false);
-  const [dragStartPos, setDragStartPos] = (0, import_react3.useState)(null);
-  const [dragRotation, setDragRotation] = (0, import_react3.useState)(0);
-  const justFinishedToolbarDragRef = (0, import_react3.useRef)(false);
-  const [animatedMarkers, setAnimatedMarkers] = (0, import_react3.useState)(
+  const sessionInitializedRef = (0, import_react4.useRef)(false);
+  const [connectionStatus, setConnectionStatus] = (0, import_react4.useState)(endpoint ? "connecting" : "disconnected");
+  const [toolbarPosition, setToolbarPosition] = (0, import_react4.useState)(null);
+  const [isDraggingToolbar, setIsDraggingToolbar] = (0, import_react4.useState)(false);
+  const [dragStartPos, setDragStartPos] = (0, import_react4.useState)(null);
+  const [dragRotation, setDragRotation] = (0, import_react4.useState)(0);
+  const justFinishedToolbarDragRef = (0, import_react4.useRef)(false);
+  const [animatedMarkers, setAnimatedMarkers] = (0, import_react4.useState)(
     /* @__PURE__ */ new Set()
   );
-  const [exitingMarkers, setExitingMarkers] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
-  const [pendingExiting, setPendingExiting] = (0, import_react3.useState)(false);
-  const [editExiting, setEditExiting] = (0, import_react3.useState)(false);
-  const [isDragging, setIsDragging] = (0, import_react3.useState)(false);
-  const mouseDownPosRef = (0, import_react3.useRef)(null);
-  const dragStartRef = (0, import_react3.useRef)(null);
-  const dragRectRef = (0, import_react3.useRef)(null);
-  const highlightsContainerRef = (0, import_react3.useRef)(null);
-  const justFinishedDragRef = (0, import_react3.useRef)(false);
-  const lastElementUpdateRef = (0, import_react3.useRef)(0);
-  const recentlyAddedIdRef = (0, import_react3.useRef)(null);
-  const prevConnectionStatusRef = (0, import_react3.useRef)(null);
+  const [exitingMarkers, setExitingMarkers] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
+  const [pendingExiting, setPendingExiting] = (0, import_react4.useState)(false);
+  const [editExiting, setEditExiting] = (0, import_react4.useState)(false);
+  const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
+  const mouseDownPosRef = (0, import_react4.useRef)(null);
+  const dragStartRef = (0, import_react4.useRef)(null);
+  const dragRectRef = (0, import_react4.useRef)(null);
+  const highlightsContainerRef = (0, import_react4.useRef)(null);
+  const justFinishedDragRef = (0, import_react4.useRef)(false);
+  const lastElementUpdateRef = (0, import_react4.useRef)(0);
+  const recentlyAddedIdRef = (0, import_react4.useRef)(null);
+  const prevConnectionStatusRef = (0, import_react4.useRef)(null);
   const DRAG_THRESHOLD = 8;
   const ELEMENT_UPDATE_THROTTLE = 50;
-  const popupRef = (0, import_react3.useRef)(null);
-  const editPopupRef = (0, import_react3.useRef)(null);
-  const scrollTimeoutRef = (0, import_react3.useRef)(null);
+  const popupRef = (0, import_react4.useRef)(null);
+  const editPopupRef = (0, import_react4.useRef)(null);
+  const scrollTimeoutRef = (0, import_react4.useRef)(null);
   const pathname = typeof window !== "undefined" ? window.location.pathname : "/";
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (showSettings) {
       setShowSettingsVisible(true);
     } else {
@@ -3208,13 +3250,8 @@ function PageFeedbackToolbarCSS({
       return () => clearTimeout(timer);
     }
   }, [showSettings]);
-  (0, import_react3.useEffect)(() => {
-    setIsTransitioning(true);
-    const timer = originalSetTimeout(() => setIsTransitioning(false), 350);
-    return () => clearTimeout(timer);
-  }, [settingsPage]);
   const shouldShowMarkers = isActive && showMarkers;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (shouldShowMarkers) {
       setMarkersExiting(false);
       setMarkersVisible(true);
@@ -3236,7 +3273,7 @@ function PageFeedbackToolbarCSS({
       return () => clearTimeout(timer);
     }
   }, [shouldShowMarkers]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setMounted(true);
     setScrollY(window.scrollY);
     const stored = loadAnnotations(pathname);
@@ -3246,13 +3283,6 @@ function PageFeedbackToolbarCSS({
       hasPlayedEntranceAnimation = true;
       originalSetTimeout(() => setShowEntranceAnimation(false), 750);
     }
-    try {
-      const storedSettings = localStorage.getItem("feedback-toolbar-settings");
-      if (storedSettings) {
-        setSettings({ ...DEFAULT_SETTINGS, ...JSON.parse(storedSettings) });
-      }
-    } catch (e) {
-    }
     try {
       const savedTheme = localStorage.getItem("feedback-toolbar-theme");
       if (savedTheme !== null) {
@@ -3271,7 +3301,7 @@ function PageFeedbackToolbarCSS({
     } catch (e) {
     }
   }, [pathname]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (mounted) {
       localStorage.setItem(
         "feedback-toolbar-settings",
@@ -3279,7 +3309,7 @@ function PageFeedbackToolbarCSS({
       );
     }
   }, [settings, mounted]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (mounted) {
       localStorage.setItem(
         "feedback-toolbar-theme",
@@ -3287,8 +3317,8 @@ function PageFeedbackToolbarCSS({
       );
     }
   }, [isDarkMode, mounted]);
-  const prevDraggingRef = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const prevDraggingRef = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     const wasDragging = prevDraggingRef.current;
     prevDraggingRef.current = isDraggingToolbar;
     if (wasDragging && !isDraggingToolbar && toolbarPosition && mounted) {
@@ -3298,7 +3328,7 @@ function PageFeedbackToolbarCSS({
       );
     }
   }, [isDraggingToolbar, toolbarPosition, mounted]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!endpoint || !mounted || sessionInitializedRef.current) return;
     sessionInitializedRef.current = true;
     setConnectionStatus("connecting");
@@ -3450,7 +3480,7 @@ function PageFeedbackToolbarCSS({
     };
     initSession();
   }, [endpoint, initialSessionId, mounted, onSessionCreated, pathname]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!endpoint || !mounted) return;
     const checkHealth = async () => {
       try {
@@ -3468,7 +3498,7 @@ function PageFeedbackToolbarCSS({
     const interval = originalSetInterval(checkHealth, 1e4);
     return () => clearInterval(interval);
   }, [endpoint, mounted]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!endpoint || !mounted || !currentSessionId) return;
     const eventSource = new EventSource(
       `${endpoint}/sessions/${currentSessionId}/events`
@@ -3498,7 +3528,7 @@ function PageFeedbackToolbarCSS({
       eventSource.close();
     };
   }, [endpoint, mounted, currentSessionId]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!endpoint || !mounted) return;
     const wasDisconnected = prevConnectionStatusRef.current === "disconnected";
     const isNowConnected = connectionStatus === "connected";
@@ -3563,7 +3593,7 @@ function PageFeedbackToolbarCSS({
       syncLocalAnnotations();
     }
   }, [connectionStatus, endpoint, mounted, currentSessionId, pathname]);
-  const hideToolbarTemporarily = (0, import_react3.useCallback)(() => {
+  const hideToolbarTemporarily = (0, import_react4.useCallback)(() => {
     if (isToolbarHiding) return;
     setIsToolbarHiding(true);
     setShowSettings(false);
@@ -3574,7 +3604,7 @@ function PageFeedbackToolbarCSS({
       setIsToolbarHiding(false);
     }, 400);
   }, [isToolbarHiding]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!enableDemoMode) return;
     if (!mounted || !demoAnnotations || demoAnnotations.length === 0) return;
     if (annotations.length > 0) return;
@@ -3618,7 +3648,7 @@ function PageFeedbackToolbarCSS({
       timeoutIds.forEach(clearTimeout);
     };
   }, [enableDemoMode, mounted, demoAnnotations, demoDelay]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleScroll = () => {
       setScrollY(window.scrollY);
       setIsScrolling(true);
@@ -3637,7 +3667,7 @@ function PageFeedbackToolbarCSS({
       }
     };
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (mounted && annotations.length > 0) {
       if (currentSessionId) {
         saveAnnotationsWithSyncMarker(pathname, annotations, currentSessionId);
@@ -3648,24 +3678,24 @@ function PageFeedbackToolbarCSS({
       localStorage.removeItem(getStorageKey(pathname));
     }
   }, [annotations, pathname, mounted, currentSessionId]);
-  const freezeAnimations = (0, import_react3.useCallback)(() => {
+  const freezeAnimations = (0, import_react4.useCallback)(() => {
     if (isFrozen) return;
     freeze();
     setIsFrozen(true);
   }, [isFrozen]);
-  const unfreezeAnimations = (0, import_react3.useCallback)(() => {
+  const unfreezeAnimations = (0, import_react4.useCallback)(() => {
     if (!isFrozen) return;
     unfreeze();
     setIsFrozen(false);
   }, [isFrozen]);
-  const toggleFreeze = (0, import_react3.useCallback)(() => {
+  const toggleFreeze = (0, import_react4.useCallback)(() => {
     if (isFrozen) {
       unfreezeAnimations();
     } else {
       freezeAnimations();
     }
   }, [isFrozen, freezeAnimations, unfreezeAnimations]);
-  const createMultiSelectPendingAnnotation = (0, import_react3.useCallback)(() => {
+  const createMultiSelectPendingAnnotation = (0, import_react4.useCallback)(() => {
     if (pendingMultiSelectElements.length === 0) return;
     const firstItem = pendingMultiSelectElements[0];
     const firstEl = firstItem.element;
@@ -3751,7 +3781,7 @@ function PageFeedbackToolbarCSS({
     setPendingMultiSelectElements([]);
     setHoverInfo(null);
   }, [pendingMultiSelectElements]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isActive) {
       setPendingAnnotation(null);
       setEditingAnnotation(null);
@@ -3766,12 +3796,12 @@ function PageFeedbackToolbarCSS({
       }
     }
   }, [isActive, isFrozen, unfreezeAnimations]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     return () => {
       unfreeze();
     };
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isActive) return;
     const style = document.createElement("style");
     style.id = "feedback-cursor-styles";
@@ -3791,7 +3821,7 @@ function PageFeedbackToolbarCSS({
         cursor: text !important;
       }
       [data-feedback-toolbar], [data-feedback-toolbar] * {
-        cursor: default !important;
+        cursor: auto !important;
       }
       [data-feedback-toolbar] textarea,
       [data-feedback-toolbar] input[type="text"],
@@ -3818,7 +3848,7 @@ function PageFeedbackToolbarCSS({
       if (existingStyle) existingStyle.remove();
     };
   }, [isActive]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isActive || pendingAnnotation) return;
     const handleMouseMove = (e) => {
       const target = e.composedPath()[0] || e.target;
@@ -3845,7 +3875,7 @@ function PageFeedbackToolbarCSS({
     document.addEventListener("mousemove", handleMouseMove);
     return () => document.removeEventListener("mousemove", handleMouseMove);
   }, [isActive, pendingAnnotation, effectiveReactMode]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isActive) return;
     const handleClick = (e) => {
       if (justFinishedDragRef.current) {
@@ -3967,7 +3997,7 @@ function PageFeedbackToolbarCSS({
     effectiveReactMode,
     pendingMultiSelectElements
   ]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isActive) return;
     const handleKeyDown = (e) => {
       if (e.key === "Meta") modifiersHeldRef.current.cmd = true;
@@ -3995,7 +4025,7 @@ function PageFeedbackToolbarCSS({
       window.removeEventListener("blur", handleBlur);
     };
   }, [isActive, pendingMultiSelectElements, createMultiSelectPendingAnnotation]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isActive || pendingAnnotation) return;
     const handleMouseDown = (e) => {
       const target = e.composedPath()[0] || e.target;
@@ -4049,7 +4079,7 @@ function PageFeedbackToolbarCSS({
     document.addEventListener("mousedown", handleMouseDown);
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, [isActive, pendingAnnotation]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isActive || pendingAnnotation) return;
     const handleMouseMove = (e) => {
       if (!mouseDownPosRef.current) return;
@@ -4194,7 +4224,7 @@ function PageFeedbackToolbarCSS({
     document.addEventListener("mousemove", handleMouseMove, { passive: true });
     return () => document.removeEventListener("mousemove", handleMouseMove);
   }, [isActive, pendingAnnotation, isDragging, DRAG_THRESHOLD]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isActive) return;
     const handleMouseUp = (e) => {
       const wasDragging = isDragging;
@@ -4303,7 +4333,7 @@ function PageFeedbackToolbarCSS({
     document.addEventListener("mouseup", handleMouseUp);
     return () => document.removeEventListener("mouseup", handleMouseUp);
   }, [isActive, isDragging]);
-  const fireWebhook = (0, import_react3.useCallback)(
+  const fireWebhook = (0, import_react4.useCallback)(
     async (event, payload, force) => {
       const targetUrl = settings.webhookUrl || webhookUrl;
       if (!targetUrl || !settings.webhooksEnabled && !force) return false;
@@ -4326,7 +4356,7 @@ function PageFeedbackToolbarCSS({
     },
     [webhookUrl, settings.webhookUrl, settings.webhooksEnabled]
   );
-  const addAnnotation = (0, import_react3.useCallback)(
+  const addAnnotation = (0, import_react4.useCallback)(
     (comment) => {
       if (!pendingAnnotation) return;
       const newAnnotation = {
@@ -4401,14 +4431,14 @@ function PageFeedbackToolbarCSS({
       currentSessionId
     ]
   );
-  const cancelAnnotation = (0, import_react3.useCallback)(() => {
+  const cancelAnnotation = (0, import_react4.useCallback)(() => {
     setPendingExiting(true);
     originalSetTimeout(() => {
       setPendingAnnotation(null);
       setPendingExiting(false);
     }, 150);
   }, []);
-  const deleteAnnotation2 = (0, import_react3.useCallback)(
+  const deleteAnnotation2 = (0, import_react4.useCallback)(
     (id) => {
       const deletedIndex = annotations.findIndex((a) => a.id === id);
       const deletedAnnotation = annotations[deletedIndex];
@@ -4451,7 +4481,7 @@ function PageFeedbackToolbarCSS({
     },
     [annotations, editingAnnotation, onAnnotationDelete, fireWebhook, endpoint]
   );
-  const startEditAnnotation = (0, import_react3.useCallback)((annotation) => {
+  const startEditAnnotation = (0, import_react4.useCallback)((annotation) => {
     setEditingAnnotation(annotation);
     setHoveredMarkerId(null);
     setHoveredTargetElement(null);
@@ -4489,7 +4519,7 @@ function PageFeedbackToolbarCSS({
       setEditingTargetElements([]);
     }
   }, []);
-  const handleMarkerHover = (0, import_react3.useCallback)(
+  const handleMarkerHover = (0, import_react4.useCallback)(
     (annotation) => {
       if (!annotation) {
         setHoveredMarkerId(null);
@@ -4536,7 +4566,7 @@ function PageFeedbackToolbarCSS({
     },
     []
   );
-  const updateAnnotation2 = (0, import_react3.useCallback)(
+  const updateAnnotation2 = (0, import_react4.useCallback)(
     (newComment) => {
       if (!editingAnnotation) return;
       const updatedAnnotation = { ...editingAnnotation, comment: newComment };
@@ -4567,7 +4597,7 @@ function PageFeedbackToolbarCSS({
     },
     [editingAnnotation, onAnnotationUpdate, fireWebhook, endpoint]
   );
-  const cancelEditAnnotation = (0, import_react3.useCallback)(() => {
+  const cancelEditAnnotation = (0, import_react4.useCallback)(() => {
     setEditExiting(true);
     originalSetTimeout(() => {
       setEditingAnnotation(null);
@@ -4576,7 +4606,7 @@ function PageFeedbackToolbarCSS({
       setEditExiting(false);
     }, 150);
   }, []);
-  const clearAll = (0, import_react3.useCallback)(() => {
+  const clearAll = (0, import_react4.useCallback)(() => {
     const count = annotations.length;
     if (count === 0) return;
     onAnnotationsClear?.(annotations);
@@ -4604,7 +4634,7 @@ function PageFeedbackToolbarCSS({
     }, totalAnimationTime);
     originalSetTimeout(() => setCleared(false), 1500);
   }, [pathname, annotations, onAnnotationsClear, fireWebhook, endpoint]);
-  const copyOutput = (0, import_react3.useCallback)(async () => {
+  const copyOutput = (0, import_react4.useCallback)(async () => {
     const displayUrl = typeof window !== "undefined" ? window.location.pathname + window.location.search + window.location.hash : pathname;
     const output = generateOutput(
       annotations,
@@ -4635,7 +4665,7 @@ function PageFeedbackToolbarCSS({
     copyToClipboard,
     onCopy
   ]);
-  const sendToWebhook = (0, import_react3.useCallback)(async () => {
+  const sendToWebhook = (0, import_react4.useCallback)(async () => {
     const displayUrl = typeof window !== "undefined" ? window.location.pathname + window.location.search + window.location.hash : pathname;
     const output = generateOutput(
       annotations,
@@ -4665,7 +4695,7 @@ function PageFeedbackToolbarCSS({
     settings.autoClearAfterCopy,
     clearAll
   ]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!dragStartPos) return;
     const DRAG_THRESHOLD2 = 10;
     const handleMouseMove = (e) => {
@@ -4707,7 +4737,7 @@ function PageFeedbackToolbarCSS({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [dragStartPos, isDraggingToolbar, isActive, connectionStatus]);
-  const handleToolbarMouseDown = (0, import_react3.useCallback)(
+  const handleToolbarMouseDown = (0, import_react4.useCallback)(
     (e) => {
       if (e.target.closest("button") || e.target.closest(`.${styles_module_default2.settingsPanel}`)) {
         return;
@@ -4728,7 +4758,7 @@ function PageFeedbackToolbarCSS({
     },
     [toolbarPosition]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!toolbarPosition) return;
     const constrainPosition = () => {
       const padding = 20;
@@ -4753,7 +4783,7 @@ function PageFeedbackToolbarCSS({
     window.addEventListener("resize", constrainPosition);
     return () => window.removeEventListener("resize", constrainPosition);
   }, [toolbarPosition, isActive, connectionStatus]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleKeyDown = (e) => {
       const target = e.target;
       const isTyping = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
@@ -4858,9 +4888,9 @@ function PageFeedbackToolbarCSS({
     }
     return styles;
   };
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: portalWrapperRef, style: { display: "contents" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: portalWrapperRef, style: { display: "contents" }, "data-agentation-theme": isDarkMode ? "dark" : "light", "data-agentation-accent": settings.annotationColorId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           className: `${styles_module_default2.toolbar}${userClassName ? ` ${userClassName}` : ""}`,
@@ -4871,10 +4901,10 @@ function PageFeedbackToolbarCSS({
             right: "auto",
             bottom: "auto"
           } : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "div",
             {
-              className: `${styles_module_default2.toolbarContainer} ${!isDarkMode ? styles_module_default2.light : ""} ${isActive ? styles_module_default2.expanded : styles_module_default2.collapsed} ${showEntranceAnimation ? styles_module_default2.entrance : ""} ${isToolbarHiding ? styles_module_default2.hiding : ""} ${isDraggingToolbar ? styles_module_default2.dragging : ""} ${!settings.webhooksEnabled && (isValidUrl(settings.webhookUrl) || isValidUrl(webhookUrl || "")) ? styles_module_default2.serverConnected : ""}`,
+              className: `${styles_module_default2.toolbarContainer} ${isActive ? styles_module_default2.expanded : styles_module_default2.collapsed} ${showEntranceAnimation ? styles_module_default2.entrance : ""} ${isToolbarHiding ? styles_module_default2.hiding : ""} ${isDraggingToolbar ? styles_module_default2.dragging : ""} ${!settings.webhooksEnabled && (isValidUrl(settings.webhookUrl) || isValidUrl(webhookUrl || "")) ? styles_module_default2.serverConnected : ""}`,
               onClick: !isActive ? (e) => {
                 if (justFinishedToolbarDragRef.current) {
                   justFinishedToolbarDragRef.current = false;
@@ -4894,79 +4924,78 @@ function PageFeedbackToolbarCSS({
                 }
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "div",
                   {
                     className: `${styles_module_default2.toggleContent} ${!isActive ? styles_module_default2.visible : styles_module_default2.hidden}`,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconListSparkle, { size: 24 }),
-                      hasAnnotations && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconListSparkle, { size: 24 }),
+                      hasAnnotations && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "span",
                         {
                           className: `${styles_module_default2.badge} ${isActive ? styles_module_default2.fadeOut : ""} ${showEntranceAnimation ? styles_module_default2.entrance : ""}`,
-                          style: { backgroundColor: settings.annotationColor },
                           children: annotations.length
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "div",
                   {
                     className: `${styles_module_default2.controlsContent} ${isActive ? styles_module_default2.visible : styles_module_default2.hidden} ${toolbarPosition && toolbarPosition.y < 100 ? styles_module_default2.tooltipBelow : ""} ${tooltipsHidden || showSettings ? styles_module_default2.tooltipsHidden : ""} ${tooltipSessionActive ? styles_module_default2.tooltipsInSession : ""}`,
                     onMouseEnter: handleControlsMouseEnter,
                     onMouseLeave: handleControlsMouseLeave,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                         "div",
                         {
                           className: `${styles_module_default2.buttonWrapper} ${toolbarPosition && toolbarPosition.x < 120 ? styles_module_default2.buttonWrapperAlignLeft : ""}`,
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                               "button",
                               {
-                                className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                className: styles_module_default2.controlButton,
                                 onClick: (e) => {
                                   e.stopPropagation();
                                   hideTooltipsUntilMouseLeave();
                                   toggleFreeze();
                                 },
                                 "data-active": isFrozen,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconPausePlayAnimated, { size: 24, isPaused: isFrozen })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconPausePlayAnimated, { size: 24, isPaused: isFrozen })
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
                               isFrozen ? "Resume animations" : "Pause animations",
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.shortcut, children: "P" })
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.shortcut, children: "P" })
                             ] })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.buttonWrapper, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.buttonWrapper, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           "button",
                           {
-                            className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                            className: styles_module_default2.controlButton,
                             onClick: (e) => {
                               e.stopPropagation();
                               hideTooltipsUntilMouseLeave();
                               setShowMarkers(!showMarkers);
                             },
                             disabled: !hasAnnotations,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconEyeAnimated, { size: 24, isOpen: showMarkers })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconEyeAnimated, { size: 24, isOpen: showMarkers })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
                           showMarkers ? "Hide markers" : "Show markers",
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.shortcut, children: "H" })
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.shortcut, children: "H" })
                         ] })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.buttonWrapper, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.buttonWrapper, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           "button",
                           {
-                            className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""} ${copied ? styles_module_default2.statusShowing : ""}`,
+                            className: `${styles_module_default2.controlButton} ${copied ? styles_module_default2.statusShowing : ""}`,
                             onClick: (e) => {
                               e.stopPropagation();
                               hideTooltipsUntilMouseLeave();
@@ -4974,23 +5003,23 @@ function PageFeedbackToolbarCSS({
                             },
                             disabled: !hasAnnotations,
                             "data-active": copied,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconCopyAnimated, { size: 24, copied })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconCopyAnimated, { size: 24, copied })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
                           "Copy feedback",
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.shortcut, children: "C" })
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.shortcut, children: "C" })
                         ] })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                         "div",
                         {
                           className: `${styles_module_default2.buttonWrapper} ${styles_module_default2.sendButtonWrapper} ${isActive && !settings.webhooksEnabled && (isValidUrl(settings.webhookUrl) || isValidUrl(webhookUrl || "")) ? styles_module_default2.sendButtonVisible : ""}`,
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                               "button",
                               {
-                                className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""} ${sendState === "sent" || sendState === "failed" ? styles_module_default2.statusShowing : ""}`,
+                                className: `${styles_module_default2.controlButton} ${sendState === "sent" || sendState === "failed" ? styles_module_default2.statusShowing : ""}`,
                                 onClick: (e) => {
                                   e.stopPropagation();
                                   hideTooltipsUntilMouseLeave();
@@ -5000,30 +5029,29 @@ function PageFeedbackToolbarCSS({
                                 "data-no-hover": sendState === "sent" || sendState === "failed",
                                 tabIndex: isValidUrl(settings.webhookUrl) || isValidUrl(webhookUrl || "") ? 0 : -1,
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconSendArrow, { size: 24, state: sendState }),
-                                  hasAnnotations && sendState === "idle" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSendArrow, { size: 24, state: sendState }),
+                                  hasAnnotations && sendState === "idle" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                     "span",
                                     {
-                                      className: `${styles_module_default2.buttonBadge} ${!isDarkMode ? styles_module_default2.light : ""}`,
-                                      style: { backgroundColor: settings.annotationColor },
+                                      className: styles_module_default2.buttonBadge,
                                       children: annotations.length
                                     }
                                   )
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
                               "Send Annotations",
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.shortcut, children: "S" })
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.shortcut, children: "S" })
                             ] })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.buttonWrapper, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.buttonWrapper, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           "button",
                           {
-                            className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                            className: styles_module_default2.controlButton,
                             onClick: (e) => {
                               e.stopPropagation();
                               hideTooltipsUntilMouseLeave();
@@ -5031,62 +5059,62 @@ function PageFeedbackToolbarCSS({
                             },
                             disabled: !hasAnnotations,
                             "data-danger": true,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconTrashAlt, { size: 24 })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconTrashAlt, { size: 24 })
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
                           "Clear all",
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.shortcut, children: "X" })
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.shortcut, children: "X" })
                         ] })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.buttonWrapper, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.buttonWrapper, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           "button",
                           {
-                            className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                            className: styles_module_default2.controlButton,
                             onClick: (e) => {
                               e.stopPropagation();
                               hideTooltipsUntilMouseLeave();
                               setShowSettings(!showSettings);
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconGear, { size: 24 })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconGear, { size: 24 })
                           }
                         ),
-                        endpoint && connectionStatus !== "disconnected" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        endpoint && connectionStatus !== "disconnected" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                           "span",
                           {
-                            className: `${styles_module_default2.mcpIndicator} ${!isDarkMode ? styles_module_default2.light : ""} ${styles_module_default2[connectionStatus]} ${showSettings ? styles_module_default2.hidden : ""}`,
+                            className: `${styles_module_default2.mcpIndicator} ${styles_module_default2[connectionStatus]} ${showSettings ? styles_module_default2.hidden : ""}`,
                             title: connectionStatus === "connected" ? "MCP Connected" : "MCP Connecting..."
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.buttonTooltip, children: "Settings" })
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.buttonTooltip, children: "Settings" })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "div",
                         {
-                          className: `${styles_module_default2.divider} ${!isDarkMode ? styles_module_default2.light : ""}`
+                          className: styles_module_default2.divider
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                         "div",
                         {
                           className: `${styles_module_default2.buttonWrapper} ${toolbarPosition && typeof window !== "undefined" && toolbarPosition.x > window.innerWidth - 120 ? styles_module_default2.buttonWrapperAlignRight : ""}`,
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                               "button",
                               {
-                                className: `${styles_module_default2.controlButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                className: styles_module_default2.controlButton,
                                 onClick: (e) => {
                                   e.stopPropagation();
                                   hideTooltipsUntilMouseLeave();
                                   setIsActive(false);
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconXmarkLarge, { size: 24 })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconXmarkLarge, { size: 24 })
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.buttonTooltip, children: [
                               "Exit",
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.shortcut, children: "Esc" })
+                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.shortcut, children: "Esc" })
                             ] })
                           ]
                         }
@@ -5094,77 +5122,73 @@ function PageFeedbackToolbarCSS({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "div",
                   {
-                    className: `${styles_module_default2.settingsPanel} ${isDarkMode ? styles_module_default2.dark : styles_module_default2.light} ${showSettingsVisible ? styles_module_default2.enter : styles_module_default2.exit}`,
+                    className: `${styles_module_default2.settingsPanel} ${showSettingsVisible ? styles_module_default2.enter : styles_module_default2.exit}`,
                     onClick: (e) => e.stopPropagation(),
                     style: toolbarPosition && toolbarPosition.y < 230 ? {
                       bottom: "auto",
                       top: "calc(100% + 0.5rem)"
                     } : void 0,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                       "div",
                       {
-                        className: `${styles_module_default2.settingsPanelContainer} ${isTransitioning ? styles_module_default2.transitioning : ""}`,
+                        className: styles_module_default2.settingsPanelContainer,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                             "div",
                             {
                               className: `${styles_module_default2.settingsPage} ${settingsPage === "automations" ? styles_module_default2.slideLeft : ""}`,
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsHeader, children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.settingsBrand, children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.settingsHeader, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.settingsBrand, children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                       "span",
                                       {
                                         className: styles_module_default2.settingsBrandSlash,
-                                        style: {
-                                          color: settings.annotationColor,
-                                          transition: "color 0.2s ease"
-                                        },
                                         children: "/"
                                       }
                                     ),
                                     "agentation"
                                   ] }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.settingsVersion, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.settingsVersion, children: [
                                     "v",
-                                    "2.3.1"
+                                    "2.3.3"
                                   ] }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                     "button",
                                     {
                                       className: styles_module_default2.themeToggle,
-                                      onClick: () => setIsDarkMode(!isDarkMode),
+                                      onClick: toggleTheme,
                                       title: isDarkMode ? "Switch to light mode" : "Switch to dark mode",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.themeIconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.themeIconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                         "span",
                                         {
                                           className: styles_module_default2.themeIcon,
-                                          children: isDarkMode ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconSun, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconMoon, { size: 20 })
+                                          children: isDarkMode ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSun, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconMoon, { size: 20 })
                                         },
                                         isDarkMode ? "sun" : "moon"
                                       ) })
                                     }
                                   )
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsSection, children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsRow, children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.settingsSection, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.settingsRow, children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                       "div",
                                       {
-                                        className: `${styles_module_default2.settingsLabel} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                        className: styles_module_default2.settingsLabel,
                                         children: [
                                           "Output Detail",
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tooltip, { content: "Controls how much detail is included in the copied output", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.helpIcon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconHelp, { size: 20 }) }) })
+                                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HelpTooltip, { content: "Controls how much detail is included in the copied output" })
                                         ]
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                       "button",
                                       {
-                                        className: `${styles_module_default2.cycleButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                        className: styles_module_default2.cycleButton,
                                         onClick: () => {
                                           const currentIndex = OUTPUT_DETAIL_OPTIONS.findIndex(
                                             (opt) => opt.value === settings.outputDetail
@@ -5176,7 +5200,7 @@ function PageFeedbackToolbarCSS({
                                           }));
                                         },
                                         children: [
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                             "span",
                                             {
                                               className: styles_module_default2.cycleButtonText,
@@ -5186,10 +5210,10 @@ function PageFeedbackToolbarCSS({
                                             },
                                             settings.outputDetail
                                           ),
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.cycleDots, children: OUTPUT_DETAIL_OPTIONS.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.cycleDots, children: OUTPUT_DETAIL_OPTIONS.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                             "span",
                                             {
-                                              className: `${styles_module_default2.cycleDot} ${!isDarkMode ? styles_module_default2.light : ""} ${settings.outputDetail === option.value ? styles_module_default2.active : ""}`
+                                              className: `${styles_module_default2.cycleDot} ${settings.outputDetail === option.value ? styles_module_default2.active : ""}`
                                             },
                                             option.value
                                           )) })
@@ -5197,33 +5221,32 @@ function PageFeedbackToolbarCSS({
                                       }
                                     )
                                   ] }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                     "div",
                                     {
                                       className: `${styles_module_default2.settingsRow} ${styles_module_default2.settingsRowMarginTop} ${!isDevMode ? styles_module_default2.settingsRowDisabled : ""}`,
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                           "div",
                                           {
-                                            className: `${styles_module_default2.settingsLabel} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                            className: styles_module_default2.settingsLabel,
                                             children: [
                                               "React Components",
-                                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                                Tooltip,
+                                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                                                HelpTooltip,
                                                 {
-                                                  content: !isDevMode ? "Disabled \u2014 production builds minify component names, making detection unreliable. Use in development mode." : "Include React component names in annotations",
-                                                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.helpIcon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconHelp, { size: 20 }) })
+                                                  content: !isDevMode ? "Disabled \u2014 production builds minify component names, making detection unreliable. Use in development mode." : "Include React component names in annotations"
                                                 }
                                               )
                                             ]
                                           }
                                         ),
-                                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                           "label",
                                           {
                                             className: `${styles_module_default2.toggleSwitch} ${!isDevMode ? styles_module_default2.disabled : ""}`,
                                             children: [
-                                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                                 "input",
                                                 {
                                                   type: "checkbox",
@@ -5235,26 +5258,26 @@ function PageFeedbackToolbarCSS({
                                                   }))
                                                 }
                                               ),
-                                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.toggleSlider })
+                                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.toggleSlider })
                                             ]
                                           }
                                         )
                                       ]
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${styles_module_default2.settingsRow} ${styles_module_default2.settingsRowMarginTop}`, children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${styles_module_default2.settingsRow} ${styles_module_default2.settingsRowMarginTop}`, children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                       "div",
                                       {
-                                        className: `${styles_module_default2.settingsLabel} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                        className: styles_module_default2.settingsLabel,
                                         children: [
                                           "Hide Until Restart",
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tooltip, { content: "Hides the toolbar until you open a new tab", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.helpIcon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconHelp, { size: 20 }) }) })
+                                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HelpTooltip, { content: "Hides the toolbar until you open a new tab" })
                                         ]
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: styles_module_default2.toggleSwitch, children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: styles_module_default2.toggleSwitch, children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                         "input",
                                         {
                                           type: "checkbox",
@@ -5266,45 +5289,42 @@ function PageFeedbackToolbarCSS({
                                           }
                                         }
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.toggleSlider })
+                                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.toggleSlider })
                                     ] })
                                   ] })
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsSection, children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.settingsSection, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                     "div",
                                     {
-                                      className: `${styles_module_default2.settingsLabel} ${styles_module_default2.settingsLabelMarker} ${!isDarkMode ? styles_module_default2.light : ""}`,
-                                      children: "Marker Colour"
+                                      className: `${styles_module_default2.settingsLabel} ${styles_module_default2.settingsLabelMarker}`,
+                                      children: "Marker Color"
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles_module_default2.colorOptions, children: COLOR_OPTIONS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles_module_default2.colorOptions, children: COLOR_OPTIONS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                     "div",
                                     {
                                       role: "button",
-                                      onClick: () => setSettings((s) => ({
-                                        ...s,
-                                        annotationColor: color.value
-                                      })),
+                                      onClick: () => setSettings((s) => ({ ...s, annotationColorId: color.id })),
                                       style: {
-                                        borderColor: settings.annotationColor === color.value ? color.value : "transparent"
+                                        "--swatch": color.srgb,
+                                        "--swatch-p3": color.p3
                                       },
-                                      className: `${styles_module_default2.colorOptionRing} ${settings.annotationColor === color.value ? styles_module_default2.selected : ""}`,
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                      className: `${styles_module_default2.colorOptionRing} ${settings.annotationColorId === color.id ? styles_module_default2.selected : ""}`,
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                         "div",
                                         {
-                                          className: `${styles_module_default2.colorOption} ${settings.annotationColor === color.value ? styles_module_default2.selected : ""}`,
-                                          style: { backgroundColor: color.value },
+                                          className: `${styles_module_default2.colorOption} ${settings.annotationColorId === color.id ? styles_module_default2.selected : ""}`,
                                           title: color.label
                                         }
                                       )
                                     },
-                                    color.value
+                                    color.id
                                   )) })
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsSection, children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: styles_module_default2.settingsToggle, children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.settingsSection, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: styles_module_default2.settingsToggle, children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                       "input",
                                       {
                                         type: "checkbox",
@@ -5316,37 +5336,31 @@ function PageFeedbackToolbarCSS({
                                         }))
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                       "label",
                                       {
                                         className: `${styles_module_default2.customCheckbox} ${settings.autoClearAfterCopy ? styles_module_default2.checked : ""}`,
                                         htmlFor: "autoClearAfterCopy",
-                                        children: settings.autoClearAfterCopy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconCheckSmallAnimated, { size: 14 })
+                                        children: settings.autoClearAfterCopy && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconCheckSmallAnimated, { size: 14 })
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                       "span",
                                       {
-                                        className: `${styles_module_default2.toggleLabel} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                        className: styles_module_default2.toggleLabel,
                                         children: [
                                           "Clear on copy/send",
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tooltip, { content: "Automatically clear annotations after copying", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                            "span",
-                                            {
-                                              className: `${styles_module_default2.helpIcon} ${styles_module_default2.helpIconNudge2}`,
-                                              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconHelp, { size: 20 })
-                                            }
-                                          ) })
+                                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HelpTooltip, { content: "Automatically clear annotations after copying" })
                                         ]
                                       }
                                     )
                                   ] }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                     "label",
                                     {
                                       className: `${styles_module_default2.settingsToggle} ${styles_module_default2.settingsToggleMarginBottom}`,
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                           "input",
                                           {
                                             type: "checkbox",
@@ -5358,18 +5372,18 @@ function PageFeedbackToolbarCSS({
                                             }))
                                           }
                                         ),
-                                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                           "label",
                                           {
                                             className: `${styles_module_default2.customCheckbox} ${settings.blockInteractions ? styles_module_default2.checked : ""}`,
                                             htmlFor: "blockInteractions",
-                                            children: settings.blockInteractions && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconCheckSmallAnimated, { size: 14 })
+                                            children: settings.blockInteractions && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconCheckSmallAnimated, { size: 14 })
                                           }
                                         ),
-                                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                           "span",
                                           {
-                                            className: `${styles_module_default2.toggleLabel} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                            className: styles_module_default2.toggleLabel,
                                             children: "Block page interactions"
                                           }
                                         )
@@ -5377,25 +5391,25 @@ function PageFeedbackToolbarCSS({
                                     }
                                   )
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                   "div",
                                   {
                                     className: `${styles_module_default2.settingsSection} ${styles_module_default2.settingsSectionExtraPadding}`,
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                       "button",
                                       {
-                                        className: `${styles_module_default2.settingsNavLink} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                        className: styles_module_default2.settingsNavLink,
                                         onClick: () => setSettingsPage("automations"),
                                         children: [
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Manage MCP & Webhooks" }),
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.settingsNavLinkRight, children: [
-                                            endpoint && connectionStatus !== "disconnected" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Manage MCP & Webhooks" }),
+                                          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.settingsNavLinkRight, children: [
+                                            endpoint && connectionStatus !== "disconnected" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                               "span",
                                               {
                                                 className: `${styles_module_default2.mcpNavIndicator} ${styles_module_default2[connectionStatus]}`
                                               }
                                             ),
-                                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7.5 12.5L12 8L7.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M7.5 12.5L12 8L7.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                                           ] })
                                         ]
                                       }
@@ -5405,41 +5419,35 @@ function PageFeedbackToolbarCSS({
                               ]
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                             "div",
                             {
                               className: `${styles_module_default2.settingsPage} ${styles_module_default2.automationsPage} ${settingsPage === "automations" ? styles_module_default2.slideIn : ""}`,
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                   "button",
                                   {
-                                    className: `${styles_module_default2.settingsBackButton} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                    className: styles_module_default2.settingsBackButton,
                                     onClick: () => setSettingsPage("main"),
                                     children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconChevronLeft, { size: 16 }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Manage MCP & Webhooks" })
+                                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconChevronLeft, { size: 16 }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Manage MCP & Webhooks" })
                                     ]
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsSection, children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsRow, children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.settingsSection, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.settingsRow, children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                       "span",
                                       {
-                                        className: `${styles_module_default2.automationHeader} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                        className: styles_module_default2.automationHeader,
                                         children: [
                                           "MCP Connection",
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tooltip, { content: "Connect via Model Context Protocol to let AI agents like Claude Code receive annotations in real-time.", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                            "span",
-                                            {
-                                              className: `${styles_module_default2.helpIcon} ${styles_module_default2.helpIconNudgeDown}`,
-                                              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconHelp, { size: 20 })
-                                            }
-                                          ) })
+                                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HelpTooltip, { content: "Connect via Model Context Protocol to let AI agents like Claude Code receive annotations in real-time." })
                                         ]
                                       }
                                     ),
-                                    endpoint && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                    endpoint && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                       "div",
                                       {
                                         className: `${styles_module_default2.mcpStatusDot} ${styles_module_default2[connectionStatus]}`,
@@ -5447,21 +5455,21 @@ function PageFeedbackToolbarCSS({
                                       }
                                     )
                                   ] }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                     "p",
                                     {
-                                      className: `${styles_module_default2.automationDescription} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                      className: styles_module_default2.automationDescription,
                                       style: { paddingBottom: 6 },
                                       children: [
                                         "MCP connection allows agents to receive and act on annotations.",
                                         " ",
-                                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                           "a",
                                           {
                                             href: "https://agentation.dev/mcp",
                                             target: "_blank",
                                             rel: "noopener noreferrer",
-                                            className: `${styles_module_default2.learnMoreLink} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                            className: styles_module_default2.learnMoreLink,
                                             children: "Learn more"
                                           }
                                         )
@@ -5469,42 +5477,36 @@ function PageFeedbackToolbarCSS({
                                     }
                                   )
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                   "div",
                                   {
                                     className: `${styles_module_default2.settingsSection} ${styles_module_default2.settingsSectionGrow}`,
                                     children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.settingsRow, children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.settingsRow, children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                           "span",
                                           {
-                                            className: `${styles_module_default2.automationHeader} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                            className: styles_module_default2.automationHeader,
                                             children: [
                                               "Webhooks",
-                                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tooltip, { content: "Send annotation data to any URL endpoint when annotations change. Useful for custom integrations.", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                                "span",
-                                                {
-                                                  className: `${styles_module_default2.helpIcon} ${styles_module_default2.helpIconNoNudge}`,
-                                                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconHelp, { size: 20 })
-                                                }
-                                              ) })
+                                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HelpTooltip, { content: "Send annotation data to any URL endpoint when annotations change. Useful for custom integrations." })
                                             ]
                                           }
                                         ),
-                                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.autoSendRow, children: [
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.autoSendRow, children: [
+                                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                             "span",
                                             {
-                                              className: `${styles_module_default2.autoSendLabel} ${!isDarkMode ? styles_module_default2.light : ""} ${settings.webhooksEnabled ? styles_module_default2.active : ""}`,
+                                              className: `${styles_module_default2.autoSendLabel} ${settings.webhooksEnabled ? styles_module_default2.active : ""}`,
                                               children: "Auto-Send"
                                             }
                                           ),
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                                             "label",
                                             {
                                               className: `${styles_module_default2.toggleSwitch} ${!settings.webhookUrl ? styles_module_default2.disabled : ""}`,
                                               children: [
-                                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                                   "input",
                                                   {
                                                     type: "checkbox",
@@ -5516,28 +5518,25 @@ function PageFeedbackToolbarCSS({
                                                     }))
                                                   }
                                                 ),
-                                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.toggleSlider })
+                                                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.toggleSlider })
                                               ]
                                             }
                                           )
                                         ] })
                                       ] }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                         "p",
                                         {
-                                          className: `${styles_module_default2.automationDescription} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                          className: styles_module_default2.automationDescription,
                                           children: "The webhook URL will receive live annotation changes and annotation data."
                                         }
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                                         "textarea",
                                         {
-                                          className: `${styles_module_default2.webhookUrlInput} ${!isDarkMode ? styles_module_default2.light : ""}`,
+                                          className: styles_module_default2.webhookUrlInput,
                                           placeholder: "Webhook URL",
                                           value: settings.webhookUrl,
-                                          style: {
-                                            "--marker-color": settings.annotationColor
-                                          },
                                           onKeyDown: (e) => e.stopPropagation(),
                                           onChange: (e) => setSettings((s) => ({
                                             ...s,
@@ -5561,20 +5560,20 @@ function PageFeedbackToolbarCSS({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.markersLayer, "data-feedback-toolbar": true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.markersLayer, "data-feedback-toolbar": true, children: [
         markersVisible && visibleAnnotations.filter((a) => !a.isFixed).map((annotation, index) => {
           const isHovered = !markersExiting && hoveredMarkerId === annotation.id;
           const isDeleting = deletingMarkerId === annotation.id;
           const showDeleteState = (isHovered || isDeleting) && !editingAnnotation;
           const isMulti = annotation.isMultiSelect;
-          const markerColor = isMulti ? "#34C759" : settings.annotationColor;
+          const markerColor = isMulti ? "var(--agentation-color-green)" : "var(--agentation-color-accent)";
           const globalIndex = annotations.findIndex(
             (a) => a.id === annotation.id
           );
           const needsEnterAnimation = !animatedMarkers.has(annotation.id);
           const animClass = markersExiting ? styles_module_default2.exit : isClearing ? styles_module_default2.clearing : needsEnterAnimation ? styles_module_default2.enter : "";
           const showDeleteHover = showDeleteState && settings.markerClickBehavior === "delete";
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "div",
             {
               className: `${styles_module_default2.marker} ${isMulti ? styles_module_default2.multiSelect : ""} ${animClass} ${showDeleteHover ? styles_module_default2.hovered : ""}`,
@@ -5605,24 +5604,24 @@ function PageFeedbackToolbarCSS({
                 }
               },
               children: [
-                showDeleteState ? showDeleteHover ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconXmark, { size: isMulti ? 18 : 16 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconEdit, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                showDeleteState ? showDeleteHover ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconXmark, { size: isMulti ? 18 : 16 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconEdit, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "span",
                   {
                     className: renumberFrom !== null && globalIndex >= renumberFrom ? styles_module_default2.renumber : void 0,
                     children: globalIndex + 1
                   }
                 ),
-                isHovered && !editingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                isHovered && !editingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "div",
                   {
-                    className: `${styles_module_default2.markerTooltip} ${!isDarkMode ? styles_module_default2.light : ""} ${styles_module_default2.enter}`,
+                    className: `${styles_module_default2.markerTooltip} ${styles_module_default2.enter}`,
                     style: getTooltipPosition(annotation),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.markerQuote, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.markerQuote, children: [
                         annotation.element,
                         annotation.selectedText && ` "${annotation.selectedText.slice(0, 30)}${annotation.selectedText.length > 30 ? "..." : ""}"`
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.markerNote, children: annotation.comment })
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.markerNote, children: annotation.comment })
                     ]
                   }
                 )
@@ -5633,7 +5632,7 @@ function PageFeedbackToolbarCSS({
         }),
         markersVisible && !markersExiting && exitingAnnotationsList.filter((a) => !a.isFixed).map((annotation) => {
           const isMulti = annotation.isMultiSelect;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
               className: `${styles_module_default2.marker} ${styles_module_default2.hovered} ${isMulti ? styles_module_default2.multiSelect : ""} ${styles_module_default2.exit}`,
@@ -5642,13 +5641,13 @@ function PageFeedbackToolbarCSS({
                 left: `${annotation.x}%`,
                 top: annotation.y
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconXmark, { size: isMulti ? 12 : 10 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconXmark, { size: isMulti ? 12 : 10 })
             },
             annotation.id
           );
         })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles_module_default2.fixedMarkersLayer, "data-feedback-toolbar": true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles_module_default2.fixedMarkersLayer, "data-feedback-toolbar": true, children: [
         markersVisible && visibleAnnotations.filter((a) => a.isFixed).map((annotation, index) => {
           const fixedAnnotations = visibleAnnotations.filter(
             (a) => a.isFixed
@@ -5657,14 +5656,14 @@ function PageFeedbackToolbarCSS({
           const isDeleting = deletingMarkerId === annotation.id;
           const showDeleteState = (isHovered || isDeleting) && !editingAnnotation;
           const isMulti = annotation.isMultiSelect;
-          const markerColor = isMulti ? "#34C759" : settings.annotationColor;
+          const markerColor = isMulti ? "var(--agentation-color-green)" : "var(--agentation-color-accent)";
           const globalIndex = annotations.findIndex(
             (a) => a.id === annotation.id
           );
           const needsEnterAnimation = !animatedMarkers.has(annotation.id);
           const animClass = markersExiting ? styles_module_default2.exit : isClearing ? styles_module_default2.clearing : needsEnterAnimation ? styles_module_default2.enter : "";
           const showDeleteHover = showDeleteState && settings.markerClickBehavior === "delete";
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "div",
             {
               className: `${styles_module_default2.marker} ${styles_module_default2.fixed} ${isMulti ? styles_module_default2.multiSelect : ""} ${animClass} ${showDeleteHover ? styles_module_default2.hovered : ""}`,
@@ -5695,24 +5694,24 @@ function PageFeedbackToolbarCSS({
                 }
               },
               children: [
-                showDeleteState ? showDeleteHover ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconXmark, { size: isMulti ? 18 : 16 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconEdit, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                showDeleteState ? showDeleteHover ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconXmark, { size: isMulti ? 18 : 16 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconEdit, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "span",
                   {
                     className: renumberFrom !== null && globalIndex >= renumberFrom ? styles_module_default2.renumber : void 0,
                     children: globalIndex + 1
                   }
                 ),
-                isHovered && !editingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                isHovered && !editingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "div",
                   {
-                    className: `${styles_module_default2.markerTooltip} ${!isDarkMode ? styles_module_default2.light : ""} ${styles_module_default2.enter}`,
+                    className: `${styles_module_default2.markerTooltip} ${styles_module_default2.enter}`,
                     style: getTooltipPosition(annotation),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles_module_default2.markerQuote, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: styles_module_default2.markerQuote, children: [
                         annotation.element,
                         annotation.selectedText && ` "${annotation.selectedText.slice(0, 30)}${annotation.selectedText.length > 30 ? "..." : ""}"`
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles_module_default2.markerNote, children: annotation.comment })
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles_module_default2.markerNote, children: annotation.comment })
                     ]
                   }
                 )
@@ -5723,7 +5722,7 @@ function PageFeedbackToolbarCSS({
         }),
         markersVisible && !markersExiting && exitingAnnotationsList.filter((a) => a.isFixed).map((annotation) => {
           const isMulti = annotation.isMultiSelect;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "div",
             {
               className: `${styles_module_default2.marker} ${styles_module_default2.fixed} ${styles_module_default2.hovered} ${isMulti ? styles_module_default2.multiSelect : ""} ${styles_module_default2.exit}`,
@@ -5732,20 +5731,20 @@ function PageFeedbackToolbarCSS({
                 left: `${annotation.x}%`,
                 top: annotation.y
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconClose, { size: isMulti ? 12 : 10 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconClose, { size: isMulti ? 12 : 10 })
             },
             annotation.id
           );
         })
       ] }),
-      isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      isActive && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           className: styles_module_default2.overlay,
           "data-feedback-toolbar": true,
           style: pendingAnnotation || editingAnnotation ? { zIndex: 99999 } : void 0,
           children: [
-            hoverInfo?.rect && !pendingAnnotation && !isScrolling && !isDragging && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            hoverInfo?.rect && !pendingAnnotation && !isScrolling && !isDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "div",
               {
                 className: `${styles_module_default2.hoverHighlight} ${styles_module_default2.enter}`,
@@ -5754,15 +5753,15 @@ function PageFeedbackToolbarCSS({
                   top: hoverInfo.rect.top,
                   width: hoverInfo.rect.width,
                   height: hoverInfo.rect.height,
-                  borderColor: `${settings.annotationColor}80`,
-                  backgroundColor: `${settings.annotationColor}0A`
+                  borderColor: "color-mix(in srgb, var(--agentation-color-accent) 50%, transparent)",
+                  backgroundColor: "color-mix(in srgb, var(--agentation-color-accent) 4%, transparent)"
                 }
               }
             ),
             pendingMultiSelectElements.filter((item) => document.contains(item.element)).map((item, index) => {
               const rect = item.element.getBoundingClientRect();
               const isMulti = pendingMultiSelectElements.length > 1;
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "div",
                 {
                   className: isMulti ? styles_module_default2.multiSelectOutline : styles_module_default2.singleSelectOutline,
@@ -5773,8 +5772,8 @@ function PageFeedbackToolbarCSS({
                     width: rect.width,
                     height: rect.height,
                     ...isMulti ? {} : {
-                      borderColor: `${settings.annotationColor}99`,
-                      backgroundColor: `${settings.annotationColor}0D`
+                      borderColor: "color-mix(in srgb, var(--agentation-color-accent) 60%, transparent)",
+                      backgroundColor: "color-mix(in srgb, var(--agentation-color-accent) 5%, transparent)"
                     }
                   }
                 },
@@ -5790,7 +5789,7 @@ function PageFeedbackToolbarCSS({
                 if (hoveredTargetElements.length > 0) {
                   return hoveredTargetElements.filter((el) => document.contains(el)).map((el, index) => {
                     const rect2 = el.getBoundingClientRect();
-                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "div",
                       {
                         className: `${styles_module_default2.multiSelectOutline} ${styles_module_default2.enter}`,
@@ -5806,7 +5805,7 @@ function PageFeedbackToolbarCSS({
                   });
                 }
                 return hoveredAnnotation.elementBoundingBoxes.map(
-                  (bb2, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  (bb2, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "div",
                     {
                       className: `${styles_module_default2.multiSelectOutline} ${styles_module_default2.enter}`,
@@ -5829,7 +5828,7 @@ function PageFeedbackToolbarCSS({
                 height: hoveredAnnotation.boundingBox.height
               };
               const isMulti = hoveredAnnotation.isMultiSelect;
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "div",
                 {
                   className: `${isMulti ? styles_module_default2.multiSelectOutline : styles_module_default2.singleSelectOutline} ${styles_module_default2.enter}`,
@@ -5839,14 +5838,14 @@ function PageFeedbackToolbarCSS({
                     width: bb.width,
                     height: bb.height,
                     ...isMulti ? {} : {
-                      borderColor: `${settings.annotationColor}99`,
-                      backgroundColor: `${settings.annotationColor}0D`
+                      borderColor: "color-mix(in srgb, var(--agentation-color-accent) 60%, transparent)",
+                      backgroundColor: "color-mix(in srgb, var(--agentation-color-accent) 5%, transparent)"
                     }
                   }
                 }
               );
             })(),
-            hoverInfo && !pendingAnnotation && !isScrolling && !isDragging && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            hoverInfo && !pendingAnnotation && !isScrolling && !isDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "div",
               {
                 className: `${styles_module_default2.hoverTooltip} ${styles_module_default2.enter}`,
@@ -5861,17 +5860,17 @@ function PageFeedbackToolbarCSS({
                   )
                 },
                 children: [
-                  hoverInfo.reactComponents && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles_module_default2.hoverReactPath, children: hoverInfo.reactComponents }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles_module_default2.hoverElementName, children: hoverInfo.elementName })
+                  hoverInfo.reactComponents && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles_module_default2.hoverReactPath, children: hoverInfo.reactComponents }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles_module_default2.hoverElementName, children: hoverInfo.elementName })
                 ]
               }
             ),
-            pendingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            pendingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
               pendingAnnotation.multiSelectElements?.length ? (
                 // Cmd+shift+click multi-select: show individual boxes with live positions
                 pendingAnnotation.multiSelectElements.filter((el) => document.contains(el)).map((el, index) => {
                   const rect = el.getBoundingClientRect();
-                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "div",
                     {
                       className: `${styles_module_default2.multiSelectOutline} ${pendingExiting ? styles_module_default2.exit : styles_module_default2.enter}`,
@@ -5891,7 +5890,7 @@ function PageFeedbackToolbarCSS({
                   // Single-click: use live getBoundingClientRect for consistent positioning
                   (() => {
                     const rect = pendingAnnotation.targetElement.getBoundingClientRect();
-                    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "div",
                       {
                         className: `${styles_module_default2.singleSelectOutline} ${pendingExiting ? styles_module_default2.exit : styles_module_default2.enter}`,
@@ -5900,15 +5899,15 @@ function PageFeedbackToolbarCSS({
                           top: rect.top,
                           width: rect.width,
                           height: rect.height,
-                          borderColor: `${settings.annotationColor}99`,
-                          backgroundColor: `${settings.annotationColor}0D`
+                          borderColor: "color-mix(in srgb, var(--agentation-color-accent) 60%, transparent)",
+                          backgroundColor: "color-mix(in srgb, var(--agentation-color-accent) 5%, transparent)"
                         }
                       }
                     );
                   })()
                 ) : (
                   // Drag selection or fallback: use stored boundingBox
-                  pendingAnnotation.boundingBox && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  pendingAnnotation.boundingBox && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "div",
                     {
                       className: `${pendingAnnotation.isMultiSelect ? styles_module_default2.multiSelectOutline : styles_module_default2.singleSelectOutline} ${pendingExiting ? styles_module_default2.exit : styles_module_default2.enter}`,
@@ -5918,8 +5917,8 @@ function PageFeedbackToolbarCSS({
                         width: pendingAnnotation.boundingBox.width,
                         height: pendingAnnotation.boundingBox.height,
                         ...pendingAnnotation.isMultiSelect ? {} : {
-                          borderColor: `${settings.annotationColor}99`,
-                          backgroundColor: `${settings.annotationColor}0D`
+                          borderColor: "color-mix(in srgb, var(--agentation-color-accent) 60%, transparent)",
+                          backgroundColor: "color-mix(in srgb, var(--agentation-color-accent) 5%, transparent)"
                         }
                       }
                     }
@@ -5929,20 +5928,20 @@ function PageFeedbackToolbarCSS({
               (() => {
                 const markerX = pendingAnnotation.x;
                 const markerY = pendingAnnotation.isFixed ? pendingAnnotation.y : pendingAnnotation.y - scrollY;
-                return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "div",
                     {
                       className: `${styles_module_default2.marker} ${styles_module_default2.pending} ${pendingAnnotation.isMultiSelect ? styles_module_default2.multiSelect : ""} ${pendingExiting ? styles_module_default2.exit : styles_module_default2.enter}`,
                       style: {
                         left: `${markerX}%`,
                         top: markerY,
-                        backgroundColor: pendingAnnotation.isMultiSelect ? "#34C759" : settings.annotationColor
+                        backgroundColor: pendingAnnotation.isMultiSelect ? "var(--agentation-color-green)" : "var(--agentation-color-accent)"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconPlus, { size: 12 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconPlus, { size: 12 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     AnnotationPopupCSS,
                     {
                       ref: popupRef,
@@ -5954,7 +5953,7 @@ function PageFeedbackToolbarCSS({
                       onCancel: cancelAnnotation,
                       isExiting: pendingExiting,
                       lightMode: !isDarkMode,
-                      accentColor: pendingAnnotation.isMultiSelect ? "#34C759" : settings.annotationColor,
+                      accentColor: pendingAnnotation.isMultiSelect ? "var(--agentation-color-green)" : "var(--agentation-color-accent)",
                       style: {
                         // Popup is 280px wide, centered with translateX(-50%), so 140px each side
                         // Clamp so popup stays 20px from viewport edges
@@ -5973,14 +5972,14 @@ function PageFeedbackToolbarCSS({
                 ] });
               })()
             ] }),
-            editingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            editingAnnotation && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
               editingAnnotation.elementBoundingBoxes?.length ? (
                 // Cmd+shift+click: show individual element boxes (use live rects when available)
                 (() => {
                   if (editingTargetElements.length > 0) {
                     return editingTargetElements.filter((el) => document.contains(el)).map((el, index) => {
                       const rect = el.getBoundingClientRect();
-                      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         "div",
                         {
                           className: `${styles_module_default2.multiSelectOutline} ${styles_module_default2.enter}`,
@@ -5996,7 +5995,7 @@ function PageFeedbackToolbarCSS({
                     });
                   }
                   return editingAnnotation.elementBoundingBoxes.map(
-                    (bb, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    (bb, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       "div",
                       {
                         className: `${styles_module_default2.multiSelectOutline} ${styles_module_default2.enter}`,
@@ -6022,7 +6021,7 @@ function PageFeedbackToolbarCSS({
                     height: editingAnnotation.boundingBox.height
                   } : null;
                   if (!bb) return null;
-                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "div",
                     {
                       className: `${editingAnnotation.isMultiSelect ? styles_module_default2.multiSelectOutline : styles_module_default2.singleSelectOutline} ${styles_module_default2.enter}`,
@@ -6032,15 +6031,15 @@ function PageFeedbackToolbarCSS({
                         width: bb.width,
                         height: bb.height,
                         ...editingAnnotation.isMultiSelect ? {} : {
-                          borderColor: `${settings.annotationColor}99`,
-                          backgroundColor: `${settings.annotationColor}0D`
+                          borderColor: "color-mix(in srgb, var(--agentation-color-accent) 60%, transparent)",
+                          backgroundColor: "color-mix(in srgb, var(--agentation-color-accent) 5%, transparent)"
                         }
                       }
                     }
                   );
                 })()
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 AnnotationPopupCSS,
                 {
                   ref: editPopupRef,
@@ -6057,7 +6056,7 @@ function PageFeedbackToolbarCSS({
                   onDelete: () => deleteAnnotation2(editingAnnotation.id),
                   isExiting: editExiting,
                   lightMode: !isDarkMode,
-                  accentColor: editingAnnotation.isMultiSelect ? "#34C759" : settings.annotationColor,
+                  accentColor: editingAnnotation.isMultiSelect ? "var(--agentation-color-green)" : "var(--agentation-color-accent)",
                   style: (() => {
                     const markerY = editingAnnotation.isFixed ? editingAnnotation.y : editingAnnotation.y - scrollY;
                     return {
@@ -6077,9 +6076,9 @@ function PageFeedbackToolbarCSS({
                 }
               )
             ] }),
-            isDragging && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: dragRectRef, className: styles_module_default2.dragSelection }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            isDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: dragRectRef, className: styles_module_default2.dragSelection }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "div",
                 {
                   ref: highlightsContainerRef,