@stv/page-test 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
(function() {
|
|
2
2
|
var __vite_style__ = document.createElement("style");
|
|
3
|
-
__vite_style__.textContent = "._wrapper_g3ap9_1 {\n position: fixed;\n inset: 0;\n z-index: 2147483641; /* 确保在所有元素之上，除了 panel */\n cursor: wait;\n overflow: hidden;\n\n display: none;\n}\n\n._wrapper_g3ap9_1._visible_g3ap9_11 {\n display: block;\n}\n/* AI 光标样式 */\n._cursor_15yuh_2 {\n position: absolute;\n width: var(--cursor-size, 75px);\n height: var(--cursor-size, 75px);\n pointer-events: none;\n z-index: 10000;\n}\n\n._cursorBorder_15yuh_10 {\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, rgb(57, 182, 255), rgb(189, 69, 251));\n mask-image: url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20fill='none'%3e%3cg%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='none'%20stroke='%23000000'%20stroke-width='6'%20stroke-miterlimit='10'%20style='stroke:%20light-dark(rgb(0,%200,%200),%20rgb(255,%20255,%20255));'/%3e%3c/g%3e%3c/svg%3e\");\n mask-size: 100% 100%;\n mask-repeat: no-repeat;\n\n transform-origin: center;\n transform: rotate(-135deg) scale(1.2);\n margin-left: -10px;\n margin-top: -18px;\n}\n\n._cursorFilling_15yuh_25 {\n position: absolute;\n width: 100%;\n height: 100%;\n background: url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3e%3cdefs%3e%3c/defs%3e%3cg%20xmlns='http://www.w3.org/2000/svg'%20style='filter:%20drop-shadow(light-dark(rgba(0,%200,%200,%200.4),%20rgba(237,%20237,%20237,%200.4))%203px%204px%204px);'%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='%23ffffff'%20stroke='none'%20style='fill:%20%23ffffff;'/%3e%3c/g%3e%3c/svg%3e\");\n background-size: 100% 100%;\n background-repeat: no-repeat;\n\n transform-origin: center;\n transform: rotate(-135deg) scale(1.2);\n margin-left: -10px;\n margin-top: -18px;\n}\n\n._cursorRipple_15yuh_39 {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n margin-left: -50%;\n margin-top: -50%;\n\n &::after {\n content: '';\n opacity: 0;\n position: absolute;\n inset: 0;\n border: 4px solid rgba(57, 182, 255, 1);\n border-radius: 50%;\n }\n}\n\n._cursor_15yuh_2._clicking_15yuh_57 ._cursorRipple_15yuh_39::after {\n animation: _cursor-ripple_15yuh_1 300ms ease-out forwards;\n}\n\n@keyframes _cursor-ripple_15yuh_1 {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n._wrapper_dinc2_1 {\n position: fixed;\n bottom: 500px;\n left: 50%;\n transform: translateX(-50%) translateY(20px);\n opacity: 0;\n z-index: 2147483642; /* 比 SimulatorMask 高一层 */\n box-sizing: border-box;\n\n overflow: visible;\n\n * {\n box-sizing: border-box;\n }\n\n --width: 360px;\n --height: 40px;\n --border-radius: 12px;\n\n --side-space: 12px; /* 控制栏两侧的间距 */\n --history-width: calc(var(--width) - var(--side-space) * 2);\n\n --color-1: rgb(57, 182, 255);\n --color-2: rgb(189, 69, 251);\n --color-3: rgb(255, 87, 51);\n --color-4: rgb(255, 214, 0);\n\n width: var(--width);\n height: var(--height);\n\n transition: all 0.3s ease-in-out;\n\n /* 响应式设计 */\n @media (max-width: 480px) {\n width: calc(100vw - 40px);\n --width: calc(100vw - 40px);\n }\n\n ._background_dinc2_39 {\n position: absolute;\n inset: -2px -8px;\n border-radius: calc(var(--border-radius) + 4px);\n filter: blur(16px);\n overflow: hidden;\n /* mix-blend-mode: lighten; */\n /* display: none; */\n\n &::before {\n content: '';\n z-index: -1;\n pointer-events: none;\n position: absolute;\n width: 100%;\n height: 100%;\n /* left: -100%; */\n left: 0;\n top: 0;\n\n background-image: linear-gradient(\n to bottom left,\n var(--color-1),\n var(--color-2),\n var(--color-1)\n );\n animation: _mask-running_dinc2_1 2s linear infinite;\n }\n &::after {\n content: '';\n z-index: -1;\n pointer-events: none;\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n\n background-image: linear-gradient(\n to bottom left,\n var(--color-2),\n var(--color-1),\n var(--color-2)\n );\n animation: _mask-running_dinc2_1 2s linear infinite;\n animation-delay: 1s;\n }\n }\n}\n\n@keyframes _mask-running_dinc2_1 {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n/* 控制栏 */\n._header_dinc2_99 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px;\n user-select: none;\n\n position: absolute;\n inset: 0;\n\n cursor: pointer;\n flex-shrink: 0; /* 防止 header 被压缩 */\n\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(10px);\n border-radius: var(--border-radius);\n background-clip: padding-box;\n\n box-shadow:\n 0 0 0px 2px rgba(255, 255, 255, 0.4),\n 0 0 5px 1px rgba(255, 255, 255, 0.3);\n\n ._statusSection_dinc2_121 {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-height: 24px; /* 确保垂直居中 */\n\n ._indicator_dinc2_128 {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.5);\n flex-shrink: 0;\n animation: none; /* 默认无动画 */\n\n /* 运行状态 - 有动画 */\n &._thinking_dinc2_137 {\n background: rgb(57, 182, 255);\n animation: _pulse_dinc2_1 0.8s ease-in-out infinite;\n }\n\n &._tool_executing_dinc2_142 {\n background: rgb(189, 69, 251);\n animation: _pulse_dinc2_1 0.6s ease-in-out infinite;\n }\n\n &._retry_dinc2_147 {\n background: rgb(255, 214, 0);\n animation: _retryPulse_dinc2_1 1s ease-in-out infinite;\n }\n\n /* 静止状态 - 无动画 */\n &._completed_dinc2_153,\n &._input_dinc2_154,\n &._output_dinc2_155 {\n background: rgb(34, 197, 94);\n animation: none;\n }\n\n &._error_dinc2_160 {\n background: rgb(239, 68, 68);\n animation: none;\n }\n }\n\n ._statusText_dinc2_166 {\n color: white;\n font-size: 12px;\n line-height: 1;\n font-weight: 500;\n transition: all 0.3s ease-in-out;\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n min-height: 24px; /* 确保垂直居中 */\n\n &._fadeOut_dinc2_178 {\n animation: _statusTextFadeOut_dinc2_1 0.3s ease forwards;\n }\n\n &._fadeIn_dinc2_182 {\n animation: _statusTextFadeIn_dinc2_1 0.3s ease forwards;\n }\n }\n }\n\n ._controls_dinc2_188 {\n display: flex;\n align-items: center;\n gap: 4px;\n\n ._controlButton_dinc2_193 {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.1);\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n line-height: 1;\n\n &:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n }\n\n ._recordingButton_dinc2_212 {\n position: relative;\n transition: all 0.2s ease;\n\n &._recording_dinc2_212 {\n color: rgb(239, 68, 68);\n animation: _recordingPulse_dinc2_1 1.5s ease-in-out infinite;\n }\n }\n\n ._eventCounter_dinc2_222 {\n font-size: 10px;\n color: rgba(255, 255, 255, 0.7);\n min-width: 16px;\n text-align: center;\n padding: 0 4px;\n }\n\n ._stopButton_dinc2_230 {\n background: rgba(239, 68, 68, 0.2);\n color: rgb(255, 41, 41);\n font-weight: 600;\n\n &:hover {\n background: rgba(239, 68, 68, 0.3);\n }\n }\n }\n}\n\n@keyframes _statusTextFadeIn_dinc2_1 {\n 0% {\n opacity: 0;\n transform: translateY(5px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes _statusTextFadeOut_dinc2_1 {\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-5px);\n }\n}\n\n._historySectionWrapper_dinc2_264 {\n position: absolute;\n width: var(--history-width);\n bottom: var(--height);\n left: var(--side-space);\n z-index: -2;\n\n padding-top: 0px;\n visibility: collapse;\n overflow: hidden;\n\n transition: all 0.2s;\n\n background: rgba(2, 0, 20, 0.5);\n /* background: rgba(186, 186, 186, 0.2); */\n backdrop-filter: blur(10px);\n\n text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);\n\n border-top-left-radius: calc(var(--border-radius) + 4px);\n border-top-right-radius: calc(var(--border-radius) + 4px);\n\n /* border: 2px solid rgba(255, 255, 255, 0.8); */\n border: 2px solid rgba(255, 255, 255, 0.4);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);\n\n /* @media (prefers-color-scheme: dark) {\n box-shadow:\n 0 8px 32px 0 rgba(0, 0, 0, 0.85),\n 0 2px 12px 0 rgba(57, 182, 255, 0.1);\n } */\n\n ._expanded_dinc2_296 & {\n padding-top: 8px;\n visibility: visible;\n }\n\n ._historySection_dinc2_264 {\n position: relative;\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: none;\n max-height: 0;\n padding-inline: 8px;\n\n transition: max-height 0.2s;\n\n ._expanded_dinc2_296 & {\n max-height: min(500px, calc(100vh - 200px - var(--height)));\n }\n\n ._historyItem_dinc2_315 {\n /* backdrop-filter: blur(10px); */\n padding: 8px 10px;\n margin-bottom: 6px;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));\n border-radius: 8px;\n border-left: 2px solid rgba(57, 182, 255, 0.5);\n font-size: 12px;\n color: white;\n /* color: black; */\n line-height: 1.3;\n position: relative;\n overflow: hidden;\n\n /* 微妙的内阴影 */\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.1),\n 0 1px 3px rgba(0, 0, 0, 0.1);\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n }\n\n &:hover {\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));\n /* transform: translateY(-1px); */\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.15),\n 0 2px 4px rgba(0, 0, 0, 0.15);\n }\n\n &:last-child {\n margin-bottom: 10px;\n }\n\n &._completed_dinc2_153,\n &._input_dinc2_154,\n &._output_dinc2_155 {\n border-left-color: rgb(34, 197, 94);\n background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));\n }\n\n &._error_dinc2_160 {\n border-left-color: rgb(239, 68, 68);\n background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));\n }\n\n &._retry_dinc2_147 {\n border-left-color: rgb(255, 214, 0);\n background: linear-gradient(135deg, rgba(255, 214, 0, 0.1), rgba(255, 214, 0, 0.05));\n }\n\n &._observation_dinc2_373 {\n border-left-color: rgb(147, 51, 234);\n background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(147, 51, 234, 0.05));\n }\n\n &._question_dinc2_378 {\n border-left-color: rgb(255, 159, 67);\n background: linear-gradient(135deg, rgba(255, 159, 67, 0.15), rgba(255, 159, 67, 0.08));\n }\n\n /* 突出显示 done 成功结果 */\n &._doneSuccess_dinc2_384 {\n background: linear-gradient(\n 135deg,\n rgba(34, 197, 94, 0.25),\n rgba(34, 197, 94, 0.15),\n rgba(34, 197, 94, 0.08)\n );\n border: none;\n border-left: 4px solid rgb(34, 197, 94);\n box-shadow:\n 0 4px 12px rgba(34, 197, 94, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2),\n 0 0 20px rgba(34, 197, 94, 0.1);\n font-weight: 600;\n color: rgb(220, 252, 231);\n padding: 10px 12px;\n margin-bottom: 8px;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n\n &::before {\n background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.4), transparent);\n }\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);\n animation: _shimmer_dinc2_1 2s ease-in-out infinite;\n }\n\n ._historyContent_dinc2_420 {\n ._statusIcon_dinc2_421 {\n font-size: 16px;\n animation: _celebrate_dinc2_1 0.8s ease-in-out;\n filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.5));\n }\n }\n }\n\n /* 突出显示 done 失败结果 */\n &._doneError_dinc2_430 {\n background: linear-gradient(\n 135deg,\n rgba(239, 68, 68, 0.25),\n rgba(239, 68, 68, 0.15),\n rgba(239, 68, 68, 0.08)\n );\n border: none;\n border-left: 4px solid rgb(239, 68, 68);\n box-shadow:\n 0 4px 12px rgba(239, 68, 68, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2),\n 0 0 20px rgba(239, 68, 68, 0.1);\n font-weight: 600;\n color: rgb(254, 226, 226);\n padding: 10px 12px;\n margin-bottom: 8px;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n\n &::before {\n background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.4), transparent);\n }\n\n ._historyContent_dinc2_420 {\n ._statusIcon_dinc2_421 {\n font-size: 16px;\n filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.5));\n }\n }\n }\n\n ._historyContent_dinc2_420 {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n\n word-break: break-all;\n white-space: pre-wrap;\n\n /* overflow-x: auto; */\n\n ._statusIcon_dinc2_421 {\n font-size: 12px;\n flex-shrink: 0;\n line-height: 1;\n transition: all 0.3s ease;\n }\n\n ._reflectionLines_dinc2_480 {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n }\n\n ._historyMeta_dinc2_487 {\n font-size: 10px;\n color: rgba(255, 255, 255, 0.6);\n /* color: rgb(61, 61, 61); */\n margin-top: 8px;\n line-height: 1;\n }\n }\n }\n}\n\n/* 动画关键帧 - 更快的闪烁 */\n@keyframes _pulse_dinc2_1 {\n 0%,\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.4;\n transform: scale(1.3);\n }\n}\n\n/* 重试动画 - 旋转脉冲 */\n@keyframes _retryPulse_dinc2_1 {\n 0%,\n 100% {\n opacity: 1;\n transform: scale(1) rotate(0deg);\n }\n 25% {\n opacity: 0.6;\n transform: scale(1.2) rotate(90deg);\n }\n 50% {\n opacity: 0.8;\n transform: scale(1.1) rotate(180deg);\n }\n 75% {\n opacity: 0.6;\n transform: scale(1.2) rotate(270deg);\n }\n}\n\n/* 庆祝动画 */\n@keyframes _celebrate_dinc2_1 {\n 0%,\n 100% {\n transform: scale(1);\n }\n 25% {\n transform: scale(1.2) rotate(-5deg);\n }\n 75% {\n transform: scale(1.2) rotate(5deg);\n }\n}\n\n/* done 卡片的光泽效果 */\n@keyframes _shimmer_dinc2_1 {\n 0% {\n left: -100%;\n }\n 100% {\n left: 100%;\n }\n}\n\n/* 输入区域样式 */\n._inputSectionWrapper_dinc2_557 {\n position: absolute;\n width: var(--history-width);\n top: var(--height);\n left: var(--side-space);\n z-index: -1;\n\n visibility: visible;\n overflow: hidden;\n\n height: 48px;\n\n transition: all 0.2s;\n\n background: rgba(186, 186, 186, 0.2);\n backdrop-filter: blur(10px);\n\n border-bottom-left-radius: calc(var(--border-radius) + 4px);\n border-bottom-right-radius: calc(var(--border-radius) + 4px);\n\n border: 2px solid rgba(255, 255, 255, 0.3);\n box-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);\n\n &._hidden_dinc2_580 {\n visibility: collapse;\n height: 0;\n }\n\n ._inputSection_dinc2_557 {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px 8px;\n\n ._taskInput_dinc2_591 {\n flex: 1;\n background: rgba(255, 255, 255, 0.4);\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 10px;\n padding-inline: 10px;\n color: rgb(20, 20, 20);\n font-size: 12px;\n height: 28px;\n line-height: 1;\n outline: none;\n transition: all 0.2s ease;\n\n /* text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); */\n\n /* border-color: rgba(57, 182, 255, 0.3); */\n\n &::placeholder {\n color: rgb(53, 53, 53);\n }\n\n &:focus {\n background: rgba(255, 255, 255, 0.8);\n border-color: rgba(57, 182, 255, 0.6);\n box-shadow: 0 0 0 2px rgba(57, 182, 255, 0.2);\n }\n }\n }\n}\n\n/* Recording functionality */\n@keyframes _recordingPulse_dinc2_1 {\n 0%,\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.7;\n transform: scale(1.1);\n }\n}\n\n._exportOverlay_dinc2_634 {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n z-index: 2147483647;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: _overlayFadeIn_dinc2_1 0.2s ease;\n}\n\n@keyframes _overlayFadeIn_dinc2_1 {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n._exportDialog_dinc2_655 {\n background: rgba(30, 30, 30, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 480px;\n width: 90%;\n animation: _dialogSlideIn_dinc2_1 0.3s ease;\n}\n\n@keyframes _dialogSlideIn_dinc2_1 {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n._exportDialogHeader_dinc2_677 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n\n h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: white;\n }\n\n ._closeButton_dinc2_691 {\n background: none;\n border: none;\n color: rgba(255, 255, 255, 0.6);\n font-size: 24px;\n cursor: pointer;\n padding: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: all 0.2s;\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n }\n }\n}\n\n._exportDialogContent_dinc2_713 {\n padding: 24px;\n\n p {\n margin: 0 0 20px 0;\n color: rgba(255, 255, 255, 0.8);\n font-size: 14px;\n }\n}\n\n._exportOptions_dinc2_723 {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n}\n\n._exportOptionButton_dinc2_729 {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 20px 16px;\n background: rgba(255, 255, 255, 0.05);\n border: 2px solid rgba(255, 255, 255, 0.1);\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.2s;\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(57, 182, 255, 0.5);\n transform: translateY(-2px);\n }\n\n &:active {\n transform: translateY(0);\n }\n}\n\n._exportOptionIcon_dinc2_752 {\n font-size: 28px;\n opacity: 0.9;\n}\n\n._exportOptionLabel_dinc2_757 {\n font-size: 13px;\n font-weight: 500;\n color: white;\n}\n/* Recording-specific styles for RecordingPanel */\n/* These styles are extracted from @page-agent/ui/panel/Panel.module.css */\n\n._recordingButton_1hion_4 {\n position: relative;\n transition: all 0.2s ease;\n}\n\n/* Placeholder - moved below controlButton definition for proper cascade */\n\n._eventCounter_1hion_11 {\n font-size: 10px;\n color: rgba(255, 255, 255, 0.7);\n min-width: 16px;\n text-align: center;\n padding: 0 4px;\n}\n\n@keyframes _recordingPulse_1hion_1 {\n 0%,\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.7;\n transform: scale(1.1);\n }\n}\n\n._exportOverlay_1hion_31 {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n z-index: 2147483647;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: _overlayFadeIn_1hion_1 0.2s ease;\n}\n\n@keyframes _overlayFadeIn_1hion_1 {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n._exportDialog_1hion_52 {\n background: rgba(30, 30, 30, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 480px;\n width: 90%;\n animation: _dialogSlideIn_1hion_1 0.3s ease;\n}\n\n@keyframes _dialogSlideIn_1hion_1 {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n._exportDialogHeader_1hion_74 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._exportDialogHeader_1hion_74 h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n._closeButton_1hion_89 {\n background: none;\n border: none;\n color: rgba(255, 255, 255, 0.6);\n font-size: 24px;\n cursor: pointer;\n padding: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n transition: all 0.2s;\n}\n\n._closeButton_1hion_89:hover {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n}\n\n._exportDialogContent_1hion_110 {\n padding: 24px;\n}\n\n._exportDialogContent_1hion_110 p {\n margin: 0 0 20px 0;\n color: rgba(255, 255, 255, 0.8);\n font-size: 14px;\n}\n\n._exportOptions_1hion_120 {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n}\n\n._exportOptionButton_1hion_126 {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 20px 16px;\n background: rgba(255, 255, 255, 0.05);\n border: 2px solid rgba(255, 255, 255, 0.1);\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: white;\n font-family: inherit;\n}\n\n._exportOptionButton_1hion_126:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.2);\n transform: translateY(-2px);\n}\n\n._exportOptionIcon_1hion_147 {\n font-size: 28px;\n opacity: 0.9;\n}\n\n._exportOptionLabel_1hion_152 {\n font-size: 13px;\n font-weight: 500;\n color: white;\n}\n\n/* Need to re-export controlButton and controls styles from Panel for the recording button to work */\n._controlButton_1hion_159 {\n background: rgba(255, 255, 255, 0.1);\n border: none;\n color: white;\n cursor: pointer;\n padding: 8px;\n border-radius: 8px;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n height: 36px;\n font-size: 14px;\n}\n\n._controlButton_1hion_159:hover {\n background: rgba(255, 255, 255, 0.2);\n}\n\n._controls_1hion_179 {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n/* Recording state - use !important to ensure priority over base styles */\n._recordingButton_1hion_4._recording_1hion_4 {\n color: rgb(34, 197, 94) !important;\n animation: _recordingPulse_1hion_1 1.5s ease-in-out infinite;\n}\n\n/* ========== Phase 4: Task Cards ========== */\n\n._taskCard_1hion_193 {\n background: rgba(30, 41, 59, 0.8);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(148, 163, 184, 0.1);\n border-radius: 12px;\n padding: 16px;\n margin-bottom: 12px;\n transition: all 0.2s ease;\n}\n\n._taskCard_1hion_193:hover {\n border-color: rgba(59, 130, 246, 0.3);\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n}\n\n._taskCardHeader_1hion_209 {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n}\n\n._taskIcon_1hion_216 {\n font-size: 24px;\n}\n\n._taskName_1hion_220 {\n flex: 1;\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: white;\n}\n\n._confidenceBadge_1hion_228 {\n background: linear-gradient(135deg, #10b981, #059669);\n color: white;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n._taskStats_1hion_237 {\n display: flex;\n gap: 16px;\n margin-bottom: 12px;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n}\n\n._taskParameters_1hion_245 {\n margin-bottom: 16px;\n padding: 12px;\n background: rgba(0, 0, 0, 0.2);\n border-radius: 8px;\n}\n\n._taskParameters_1hion_245 h4 {\n margin: 0 0 8px 0;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n._parameterItem_1hion_258 {\n display: flex;\n gap: 8px;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n margin-bottom: 4px;\n}\n\n._paramKey_1hion_266 {\n font-weight: 600;\n color: rgba(255, 255, 255, 0.9);\n}\n\n._paramValue_1hion_271 {\n color: rgba(255, 255, 255, 0.7);\n}\n\n._taskActions_1hion_275 {\n display: flex;\n gap: 8px;\n}\n\n._actionButton_1hion_280 {\n flex: 1;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n._btnPrimary_1hion_290 {\n background: linear-gradient(135deg, #3b82f6, #2563eb);\n color: white;\n border: none;\n}\n\n._btnPrimary_1hion_290:hover {\n background: linear-gradient(135deg, #2563eb, #1d4ed8);\n transform: translateY(-1px);\n}\n\n._btnSecondary_1hion_301 {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n._btnSecondary_1hion_301:hover {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* ========== Phase 4: Task History ========== */\n\n._historyHeader_1hion_313 {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n._historyHeader_1hion_313 h3 {\n flex: 1;\n margin: 0;\n font-size: 18px;\n color: white;\n}\n\n._searchInput_1hion_327 {\n flex: 1;\n padding: 8px 12px;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 8px;\n color: white;\n font-size: 14px;\n}\n\n._searchInput_1hion_327::placeholder {\n color: rgba(255, 255, 255, 0.5);\n}\n\n._filterTabs_1hion_341 {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n._filterTab_1hion_341 {\n padding: 6px 12px;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 6px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 12px;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n._filterTab_1hion_341:hover {\n background: rgba(255, 255, 255, 0.2);\n}\n\n._filterTab_1hion_341._active_1hion_362 {\n background: rgba(59, 130, 246, 0.3);\n border-color: rgba(59, 130, 246, 0.5);\n color: white;\n}\n\n._taskList_1hion_368 {\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-height: 400px;\n overflow-y: auto;\n}\n\n._emptyState_1hion_376 {\n text-align: center;\n padding: 32px;\n color: rgba(255, 255, 255, 0.5);\n font-size: 14px;\n}\n\n/* ========== Phase 4: Replay Panel ========== */\n\n._replayPanel_1hion_385 {\n background: rgba(30, 41, 59, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 600px;\n width: 90%;\n max-height: 80vh;\n overflow-y: auto;\n}\n\n._replayHeader_1hion_397 {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._replayIcon_1hion_405 {\n font-size: 24px;\n}\n\n._replayHeader_1hion_397 h3 {\n flex: 1;\n margin: 0;\n font-size: 18px;\n color: white;\n}\n\n._replayStatus_1hion_416 {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n}\n\n._replayStatus_1hion_416._success_1hion_421 {\n color: #10b981;\n}\n\n._replayStatus_1hion_416._failed_1hion_425 {\n color: #ef4444;\n}\n\n/* Event List */\n\n._eventList_1hion_431 {\n padding: 16px;\n max-height: 300px;\n overflow-y: auto;\n}\n\n._eventItem_1hion_437 {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px;\n border-radius: 6px;\n margin-bottom: 4px;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.8);\n transition: all 0.2s;\n}\n\n._eventItem_1hion_437._statusPending_1hion_449 {\n background: rgba(255, 255, 255, 0.05);\n}\n\n._eventItem_1hion_437._statusRunning_1hion_453 {\n background: rgba(59, 130, 246, 0.2);\n animation: _pulse_1hion_1 1s infinite;\n}\n\n._eventItem_1hion_437._statusSuccess_1hion_458 {\n background: rgba(16, 185, 129, 0.2);\n}\n\n._eventItem_1hion_437._statusFailed_1hion_462 {\n background: rgba(239, 68, 68, 0.2);\n}\n\n._eventStatusIcon_1hion_466 {\n font-size: 16px;\n width: 20px;\n text-align: center;\n}\n\n._eventDescription_1hion_472 {\n flex: 1;\n}\n\n._eventDuration_1hion_476 {\n font-size: 11px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n@keyframes _pulse_1hion_1 {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.8;\n }\n}\n\n/* ========== Phase 4: Error Handler ========== */\n\n._errorDialog_1hion_493 {\n background: rgba(30, 30, 30, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(239, 68, 68, 0.3);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 480px;\n width: 90%;\n}\n\n._errorHeader_1hion_503 {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._errorIcon_1hion_511 {\n font-size: 24px;\n}\n\n._errorHeader_1hion_503 h3 {\n flex: 1;\n margin: 0;\n font-size: 18px;\n color: white;\n}\n\n._errorDetails_1hion_522 {\n padding: 20px;\n color: rgba(255, 255, 255, 0.8);\n font-size: 14px;\n}\n\n._errorDetails_1hion_522 p {\n margin: 0 0 12px 0;\n}\n\n._errorDetails_1hion_522 strong {\n color: white;\n}\n\n._errorCauses_1hion_536 {\n padding: 0 20px 20px;\n}\n\n._errorCauses_1hion_536 h4 {\n margin: 0 0 12px 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n._errorCauses_1hion_536 ul {\n margin: 0;\n padding-left: 20px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 13px;\n}\n\n._errorCauses_1hion_536 li {\n margin-bottom: 6px;\n}\n\n._errorActions_1hion_557 {\n display: flex;\n gap: 8px;\n padding: 20px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n/* ========== Phase 4: Replay Report ========== */\n\n._replayReport_1hion_566 {\n background: rgba(30, 30, 30, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 480px;\n width: 90%;\n}\n\n._replayReport_1hion_566._success_1hion_421 {\n border-color: rgba(16, 185, 129, 0.3);\n}\n\n._replayReport_1hion_566._failure_1hion_580 {\n border-color: rgba(239, 68, 68, 0.3);\n}\n\n._reportHeader_1hion_584 {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._reportIcon_1hion_592 {\n font-size: 24px;\n}\n\n._reportHeader_1hion_584 h3 {\n flex: 1;\n margin: 0;\n font-size: 18px;\n color: white;\n}\n\n._reportStats_1hion_603 {\n display: flex;\n justify-content: space-around;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._statItem_1hion_610 {\n text-align: center;\n}\n\n._statLabel_1hion_614 {\n display: block;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n margin-bottom: 4px;\n}\n\n._statValue_1hion_621 {\n display: block;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n._reportDetails_1hion_628 {\n padding: 20px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n._reportDetails_1hion_628 h4 {\n margin: 0 0 12px 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n._eventResult_1hion_640 {\n padding: 8px;\n margin-bottom: 4px;\n border-radius: 6px;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n._eventResult_1hion_640._statusSuccess_1hion_458 {\n background: rgba(16, 185, 129, 0.2);\n}\n\n._eventResult_1hion_640._statusFailed_1hion_462 {\n background: rgba(239, 68, 68, 0.2);\n}\n\n._reportActions_1hion_656 {\n display: flex;\n gap: 8px;\n padding: 20px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n/* ========== Phase 4: Loading States ========== */\n\n._loadingContent_1hion_665 {\n text-align: center;\n padding: 32px;\n color: white;\n}\n\n._loadingSpinner_1hion_671 {\n width: 40px;\n height: 40px;\n margin: 0 auto 16px;\n border: 3px solid rgba(255, 255, 255, 0.2);\n border-top-color: white;\n border-radius: 50%;\n animation: _spin_1hion_1 1s linear infinite;\n}\n\n@keyframes _spin_1hion_1 {\n to {\n transform: rotate(360deg);\n }\n}\n\n._loadingContent_1hion_665 p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n/* ========== Phase 4: Task Card Dialog ========== */\n\n._taskCardDialog_1hion_695 {\n padding: 20px;\n}\n\n/* ========== Settings ========== */\n\n._settingsOverlay_1hion_701 {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n z-index: 2147483647;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: _overlayFadeIn_1hion_1 0.2s ease;\n}\n\n._settingsDialog_1hion_713 {\n background: rgba(30, 30, 30, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 480px;\n width: 90%;\n animation: _dialogSlideIn_1hion_1 0.3s ease;\n}\n\n._settingsDialogHeader_1hion_724 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._settingsDialogHeader_1hion_724 h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n._settingsDialogContent_1hion_739 {\n padding: 24px;\n}\n\n._settingsField_1hion_743 {\n margin-bottom: 20px;\n}\n\n._settingsLabel_1hion_747 {\n display: block;\n margin-bottom: 8px;\n font-size: 13px;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.9);\n}\n\n._settingsInput_1hion_755 {\n width: 100%;\n padding: 10px 12px;\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: 8px;\n color: white;\n font-size: 14px;\n font-family: inherit;\n box-sizing: border-box;\n transition: all 0.2s;\n}\n\n._settingsInput_1hion_755::placeholder {\n color: rgba(255, 255, 255, 0.4);\n}\n\n._settingsInput_1hion_755:focus {\n outline: none;\n background: rgba(255, 255, 255, 0.08);\n border-color: rgba(59, 130, 246, 0.5);\n}\n\n._settingsInput_1hion_755[type='password'] {\n -webkit-text-security: disc;\n}\n\n/* ========== Test Mode UI - Design System Styles ========== */\n\n/* CSS Variables for design system consistency */\n:root {\n --color-primary: #58a6ff;\n --color-primary-hover: #79c0ff;\n --color-primary-pressed: #388bfd;\n --color-text-inverse: #0d1117;\n --color-text-primary: #e6edf3;\n --color-text-secondary: #8b949e;\n --color-border-default: #30363d;\n --color-border-emphasis: #484f58;\n --color-success: #3fb950;\n --color-danger: #f85149;\n --color-surface: #161b22;\n --font-mono:\n 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Liberation Mono',\n monospace;\n --font-sans:\n 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial,\n sans-serif;\n}\n\n/* Primary Button (Run) */\n._testButton_1hion_806 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding: 0 16px;\n border: none;\n border-radius: 6px;\n font-family: var(--font-sans);\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition:\n background 0.3s ease,\n transform 0.15s ease;\n position: relative;\n flex-shrink: 0;\n gap: 6px;\n}\n\n._testButtonPrimary_1hion_826 {\n background: var(--color-primary);\n color: var(--color-text-inverse);\n}\n\n._testButtonPrimary_1hion_826:hover:not(:disabled) {\n background: var(--color-primary-hover);\n transform: translateY(-0.5px);\n}\n\n._testButtonPrimary_1hion_826:active:not(:disabled) {\n background: var(--color-primary-pressed);\n transform: translateY(0);\n}\n\n._testButtonPrimary_1hion_826:disabled {\n background: rgba(56, 139, 253, 0.3);\n color: rgba(13, 17, 23, 0.5);\n cursor: not-allowed;\n}\n\n/* Loading state — standalone class for CSS module export */\n._testButtonLoading_1hion_848 {\n background: var(--color-primary);\n cursor: wait;\n}\n\n/* Success state — standalone class for CSS module export */\n._testButtonSuccess_1hion_854 {\n background: var(--color-success);\n transition: background 0.3s ease;\n cursor: default;\n}\n\n/* Error state — standalone class for CSS module export */\n._testButtonError_1hion_861 {\n background: var(--color-danger);\n color: white;\n animation: _testBtnShake_1hion_1 0.3s ease;\n cursor: default;\n}\n\n@keyframes _testBtnShake_1hion_1 {\n 0%,\n 100% {\n transform: translateX(0);\n }\n 20% {\n transform: translateX(-3px);\n }\n 40% {\n transform: translateX(3px);\n }\n 60% {\n transform: translateX(-2px);\n }\n 80% {\n transform: translateX(2px);\n }\n}\n\n/* Secondary Button (Save/Export) */\n._testButtonSecondary_1hion_888 {\n background: transparent;\n color: var(--color-text-primary);\n border: 1px solid var(--color-border-default);\n padding: 0 15px;\n font-weight: 500;\n}\n\n._testButtonSecondary_1hion_888:hover {\n background: rgba(255, 255, 255, 0.05);\n border-color: var(--color-border-emphasis);\n color: var(--color-text-primary);\n}\n\n._testButtonSecondary_1hion_888:active {\n background: rgba(255, 255, 255, 0.08);\n border-color: var(--color-border-emphasis);\n color: var(--color-text-primary);\n}\n\n/* DSL Editor (YAML) */\n._dslEditor_1hion_909 {\n width: 100%;\n min-height: 180px;\n background: var(--color-surface);\n color: var(--color-text-primary);\n border: 1px solid var(--color-border-default);\n border-radius: 6px;\n padding: 12px;\n font-family: var(--font-mono);\n font-size: 13px;\n line-height: 1.65;\n resize: vertical;\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n}\n\n._dslEditor_1hion_909:focus {\n outline: none;\n border-color: var(--color-primary);\n}\n\n._dslEditor_1hion_909::placeholder {\n color: var(--color-text-secondary);\n}\n\n/* ========== Result Status Indicator ========== */\n._resultStatus_1hion_935 {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);\n color: var(--color-text-tertiary, #6e7681);\n margin-left: auto;\n min-height: 18px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 160px;\n transition: color 0.2s ease;\n}\n\n._resultStatusRunning_1hion_951 {\n color: var(--color-warning, #d29922);\n}\n\n._resultStatusSuccess_1hion_955 {\n color: var(--color-success, #3fb950);\n}\n\n._resultStatusError_1hion_959 {\n color: var(--color-danger, #f85149);\n}\n/*$vite$:1*/";
|
|
3
|
+
__vite_style__.textContent = "._wrapper_g3ap9_1 {\n position: fixed;\n inset: 0;\n z-index: 2147483641; /* 确保在所有元素之上，除了 panel */\n cursor: wait;\n overflow: hidden;\n\n display: none;\n}\n\n._wrapper_g3ap9_1._visible_g3ap9_11 {\n display: block;\n}\n/* AI 光标样式 */\n._cursor_15yuh_2 {\n position: absolute;\n width: var(--cursor-size, 75px);\n height: var(--cursor-size, 75px);\n pointer-events: none;\n z-index: 10000;\n}\n\n._cursorBorder_15yuh_10 {\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, rgb(57, 182, 255), rgb(189, 69, 251));\n mask-image: url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20fill='none'%3e%3cg%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='none'%20stroke='%23000000'%20stroke-width='6'%20stroke-miterlimit='10'%20style='stroke:%20light-dark(rgb(0,%200,%200),%20rgb(255,%20255,%20255));'/%3e%3c/g%3e%3c/svg%3e\");\n mask-size: 100% 100%;\n mask-repeat: no-repeat;\n\n transform-origin: center;\n transform: rotate(-135deg) scale(1.2);\n margin-left: -10px;\n margin-top: -18px;\n}\n\n._cursorFilling_15yuh_25 {\n position: absolute;\n width: 100%;\n height: 100%;\n background: url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3e%3cdefs%3e%3c/defs%3e%3cg%20xmlns='http://www.w3.org/2000/svg'%20style='filter:%20drop-shadow(light-dark(rgba(0,%200,%200,%200.4),%20rgba(237,%20237,%20237,%200.4))%203px%204px%204px);'%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='%23ffffff'%20stroke='none'%20style='fill:%20%23ffffff;'/%3e%3c/g%3e%3c/svg%3e\");\n background-size: 100% 100%;\n background-repeat: no-repeat;\n\n transform-origin: center;\n transform: rotate(-135deg) scale(1.2);\n margin-left: -10px;\n margin-top: -18px;\n}\n\n._cursorRipple_15yuh_39 {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n margin-left: -50%;\n margin-top: -50%;\n\n &::after {\n content: '';\n opacity: 0;\n position: absolute;\n inset: 0;\n border: 4px solid rgba(57, 182, 255, 1);\n border-radius: 50%;\n }\n}\n\n._cursor_15yuh_2._clicking_15yuh_57 ._cursorRipple_15yuh_39::after {\n animation: _cursor-ripple_15yuh_1 300ms ease-out forwards;\n}\n\n@keyframes _cursor-ripple_15yuh_1 {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n._wrapper_dinc2_1 {\n position: fixed;\n bottom: 500px;\n left: 50%;\n transform: translateX(-50%) translateY(20px);\n opacity: 0;\n z-index: 2147483642; /* 比 SimulatorMask 高一层 */\n box-sizing: border-box;\n\n overflow: visible;\n\n * {\n box-sizing: border-box;\n }\n\n --width: 360px;\n --height: 40px;\n --border-radius: 12px;\n\n --side-space: 12px; /* 控制栏两侧的间距 */\n --history-width: calc(var(--width) - var(--side-space) * 2);\n\n --color-1: rgb(57, 182, 255);\n --color-2: rgb(189, 69, 251);\n --color-3: rgb(255, 87, 51);\n --color-4: rgb(255, 214, 0);\n\n width: var(--width);\n height: var(--height);\n\n transition: all 0.3s ease-in-out;\n\n /* 响应式设计 */\n @media (max-width: 480px) {\n width: calc(100vw - 40px);\n --width: calc(100vw - 40px);\n }\n\n ._background_dinc2_39 {\n position: absolute;\n inset: -2px -8px;\n border-radius: calc(var(--border-radius) + 4px);\n filter: blur(16px);\n overflow: hidden;\n /* mix-blend-mode: lighten; */\n /* display: none; */\n\n &::before {\n content: '';\n z-index: -1;\n pointer-events: none;\n position: absolute;\n width: 100%;\n height: 100%;\n /* left: -100%; */\n left: 0;\n top: 0;\n\n background-image: linear-gradient(\n to bottom left,\n var(--color-1),\n var(--color-2),\n var(--color-1)\n );\n animation: _mask-running_dinc2_1 2s linear infinite;\n }\n &::after {\n content: '';\n z-index: -1;\n pointer-events: none;\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n\n background-image: linear-gradient(\n to bottom left,\n var(--color-2),\n var(--color-1),\n var(--color-2)\n );\n animation: _mask-running_dinc2_1 2s linear infinite;\n animation-delay: 1s;\n }\n }\n}\n\n@keyframes _mask-running_dinc2_1 {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n}\n\n/* 控制栏 */\n._header_dinc2_99 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px;\n user-select: none;\n\n position: absolute;\n inset: 0;\n\n cursor: pointer;\n flex-shrink: 0; /* 防止 header 被压缩 */\n\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(10px);\n border-radius: var(--border-radius);\n background-clip: padding-box;\n\n box-shadow:\n 0 0 0px 2px rgba(255, 255, 255, 0.4),\n 0 0 5px 1px rgba(255, 255, 255, 0.3);\n\n ._statusSection_dinc2_121 {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-height: 24px; /* 确保垂直居中 */\n\n ._indicator_dinc2_128 {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.5);\n flex-shrink: 0;\n animation: none; /* 默认无动画 */\n\n /* 运行状态 - 有动画 */\n &._thinking_dinc2_137 {\n background: rgb(57, 182, 255);\n animation: _pulse_dinc2_1 0.8s ease-in-out infinite;\n }\n\n &._tool_executing_dinc2_142 {\n background: rgb(189, 69, 251);\n animation: _pulse_dinc2_1 0.6s ease-in-out infinite;\n }\n\n &._retry_dinc2_147 {\n background: rgb(255, 214, 0);\n animation: _retryPulse_dinc2_1 1s ease-in-out infinite;\n }\n\n /* 静止状态 - 无动画 */\n &._completed_dinc2_153,\n &._input_dinc2_154,\n &._output_dinc2_155 {\n background: rgb(34, 197, 94);\n animation: none;\n }\n\n &._error_dinc2_160 {\n background: rgb(239, 68, 68);\n animation: none;\n }\n }\n\n ._statusText_dinc2_166 {\n color: white;\n font-size: 12px;\n line-height: 1;\n font-weight: 500;\n transition: all 0.3s ease-in-out;\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n min-height: 24px; /* 确保垂直居中 */\n\n &._fadeOut_dinc2_178 {\n animation: _statusTextFadeOut_dinc2_1 0.3s ease forwards;\n }\n\n &._fadeIn_dinc2_182 {\n animation: _statusTextFadeIn_dinc2_1 0.3s ease forwards;\n }\n }\n }\n\n ._controls_dinc2_188 {\n display: flex;\n align-items: center;\n gap: 4px;\n\n ._controlButton_dinc2_193 {\n width: 24px;\n height: 24px;\n border: none;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.1);\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n line-height: 1;\n\n &:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n }\n\n ._recordingButton_dinc2_212 {\n position: relative;\n transition: all 0.2s ease;\n\n &._recording_dinc2_212 {\n color: rgb(239, 68, 68);\n animation: _recordingPulse_dinc2_1 1.5s ease-in-out infinite;\n }\n }\n\n ._eventCounter_dinc2_222 {\n font-size: 10px;\n color: rgba(255, 255, 255, 0.7);\n min-width: 16px;\n text-align: center;\n padding: 0 4px;\n }\n\n ._stopButton_dinc2_230 {\n background: rgba(239, 68, 68, 0.2);\n color: rgb(255, 41, 41);\n font-weight: 600;\n\n &:hover {\n background: rgba(239, 68, 68, 0.3);\n }\n }\n }\n}\n\n@keyframes _statusTextFadeIn_dinc2_1 {\n 0% {\n opacity: 0;\n transform: translateY(5px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes _statusTextFadeOut_dinc2_1 {\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-5px);\n }\n}\n\n._historySectionWrapper_dinc2_264 {\n position: absolute;\n width: var(--history-width);\n bottom: var(--height);\n left: var(--side-space);\n z-index: -2;\n\n padding-top: 0px;\n visibility: collapse;\n overflow: hidden;\n\n transition: all 0.2s;\n\n background: rgba(2, 0, 20, 0.5);\n /* background: rgba(186, 186, 186, 0.2); */\n backdrop-filter: blur(10px);\n\n text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);\n\n border-top-left-radius: calc(var(--border-radius) + 4px);\n border-top-right-radius: calc(var(--border-radius) + 4px);\n\n /* border: 2px solid rgba(255, 255, 255, 0.8); */\n border: 2px solid rgba(255, 255, 255, 0.4);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);\n\n /* @media (prefers-color-scheme: dark) {\n box-shadow:\n 0 8px 32px 0 rgba(0, 0, 0, 0.85),\n 0 2px 12px 0 rgba(57, 182, 255, 0.1);\n } */\n\n ._expanded_dinc2_296 & {\n padding-top: 8px;\n visibility: visible;\n }\n\n ._historySection_dinc2_264 {\n position: relative;\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: none;\n max-height: 0;\n padding-inline: 8px;\n\n transition: max-height 0.2s;\n\n ._expanded_dinc2_296 & {\n max-height: min(500px, calc(100vh - 200px - var(--height)));\n }\n\n ._historyItem_dinc2_315 {\n /* backdrop-filter: blur(10px); */\n padding: 8px 10px;\n margin-bottom: 6px;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));\n border-radius: 8px;\n border-left: 2px solid rgba(57, 182, 255, 0.5);\n font-size: 12px;\n color: white;\n /* color: black; */\n line-height: 1.3;\n position: relative;\n overflow: hidden;\n\n /* 微妙的内阴影 */\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.1),\n 0 1px 3px rgba(0, 0, 0, 0.1);\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n }\n\n &:hover {\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));\n /* transform: translateY(-1px); */\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.15),\n 0 2px 4px rgba(0, 0, 0, 0.15);\n }\n\n &:last-child {\n margin-bottom: 10px;\n }\n\n &._completed_dinc2_153,\n &._input_dinc2_154,\n &._output_dinc2_155 {\n border-left-color: rgb(34, 197, 94);\n background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));\n }\n\n &._error_dinc2_160 {\n border-left-color: rgb(239, 68, 68);\n background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));\n }\n\n &._retry_dinc2_147 {\n border-left-color: rgb(255, 214, 0);\n background: linear-gradient(135deg, rgba(255, 214, 0, 0.1), rgba(255, 214, 0, 0.05));\n }\n\n &._observation_dinc2_373 {\n border-left-color: rgb(147, 51, 234);\n background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(147, 51, 234, 0.05));\n }\n\n &._question_dinc2_378 {\n border-left-color: rgb(255, 159, 67);\n background: linear-gradient(135deg, rgba(255, 159, 67, 0.15), rgba(255, 159, 67, 0.08));\n }\n\n /* 突出显示 done 成功结果 */\n &._doneSuccess_dinc2_384 {\n background: linear-gradient(\n 135deg,\n rgba(34, 197, 94, 0.25),\n rgba(34, 197, 94, 0.15),\n rgba(34, 197, 94, 0.08)\n );\n border: none;\n border-left: 4px solid rgb(34, 197, 94);\n box-shadow:\n 0 4px 12px rgba(34, 197, 94, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2),\n 0 0 20px rgba(34, 197, 94, 0.1);\n font-weight: 600;\n color: rgb(220, 252, 231);\n padding: 10px 12px;\n margin-bottom: 8px;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n\n &::before {\n background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.4), transparent);\n }\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);\n animation: _shimmer_dinc2_1 2s ease-in-out infinite;\n }\n\n ._historyContent_dinc2_420 {\n ._statusIcon_dinc2_421 {\n font-size: 16px;\n animation: _celebrate_dinc2_1 0.8s ease-in-out;\n filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.5));\n }\n }\n }\n\n /* 突出显示 done 失败结果 */\n &._doneError_dinc2_430 {\n background: linear-gradient(\n 135deg,\n rgba(239, 68, 68, 0.25),\n rgba(239, 68, 68, 0.15),\n rgba(239, 68, 68, 0.08)\n );\n border: none;\n border-left: 4px solid rgb(239, 68, 68);\n box-shadow:\n 0 4px 12px rgba(239, 68, 68, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.2),\n 0 0 20px rgba(239, 68, 68, 0.1);\n font-weight: 600;\n color: rgb(254, 226, 226);\n padding: 10px 12px;\n margin-bottom: 8px;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n\n &::before {\n background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.4), transparent);\n }\n\n ._historyContent_dinc2_420 {\n ._statusIcon_dinc2_421 {\n font-size: 16px;\n filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.5));\n }\n }\n }\n\n ._historyContent_dinc2_420 {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n\n word-break: break-all;\n white-space: pre-wrap;\n\n /* overflow-x: auto; */\n\n ._statusIcon_dinc2_421 {\n font-size: 12px;\n flex-shrink: 0;\n line-height: 1;\n transition: all 0.3s ease;\n }\n\n ._reflectionLines_dinc2_480 {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n }\n\n ._historyMeta_dinc2_487 {\n font-size: 10px;\n color: rgba(255, 255, 255, 0.6);\n /* color: rgb(61, 61, 61); */\n margin-top: 8px;\n line-height: 1;\n }\n }\n }\n}\n\n/* 动画关键帧 - 更快的闪烁 */\n@keyframes _pulse_dinc2_1 {\n 0%,\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.4;\n transform: scale(1.3);\n }\n}\n\n/* 重试动画 - 旋转脉冲 */\n@keyframes _retryPulse_dinc2_1 {\n 0%,\n 100% {\n opacity: 1;\n transform: scale(1) rotate(0deg);\n }\n 25% {\n opacity: 0.6;\n transform: scale(1.2) rotate(90deg);\n }\n 50% {\n opacity: 0.8;\n transform: scale(1.1) rotate(180deg);\n }\n 75% {\n opacity: 0.6;\n transform: scale(1.2) rotate(270deg);\n }\n}\n\n/* 庆祝动画 */\n@keyframes _celebrate_dinc2_1 {\n 0%,\n 100% {\n transform: scale(1);\n }\n 25% {\n transform: scale(1.2) rotate(-5deg);\n }\n 75% {\n transform: scale(1.2) rotate(5deg);\n }\n}\n\n/* done 卡片的光泽效果 */\n@keyframes _shimmer_dinc2_1 {\n 0% {\n left: -100%;\n }\n 100% {\n left: 100%;\n }\n}\n\n/* 输入区域样式 */\n._inputSectionWrapper_dinc2_557 {\n position: absolute;\n width: var(--history-width);\n top: var(--height);\n left: var(--side-space);\n z-index: -1;\n\n visibility: visible;\n overflow: hidden;\n\n height: 48px;\n\n transition: all 0.2s;\n\n background: rgba(186, 186, 186, 0.2);\n backdrop-filter: blur(10px);\n\n border-bottom-left-radius: calc(var(--border-radius) + 4px);\n border-bottom-right-radius: calc(var(--border-radius) + 4px);\n\n border: 2px solid rgba(255, 255, 255, 0.3);\n box-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);\n\n &._hidden_dinc2_580 {\n visibility: collapse;\n height: 0;\n }\n\n ._inputSection_dinc2_557 {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px 8px;\n\n ._taskInput_dinc2_591 {\n flex: 1;\n background: rgba(255, 255, 255, 0.4);\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 10px;\n padding-inline: 10px;\n color: rgb(20, 20, 20);\n font-size: 12px;\n height: 28px;\n line-height: 1;\n outline: none;\n transition: all 0.2s ease;\n\n /* text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); */\n\n /* border-color: rgba(57, 182, 255, 0.3); */\n\n &::placeholder {\n color: rgb(53, 53, 53);\n }\n\n &:focus {\n background: rgba(255, 255, 255, 0.8);\n border-color: rgba(57, 182, 255, 0.6);\n box-shadow: 0 0 0 2px rgba(57, 182, 255, 0.2);\n }\n }\n }\n}\n\n/* Recording functionality */\n@keyframes _recordingPulse_dinc2_1 {\n 0%,\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.7;\n transform: scale(1.1);\n }\n}\n\n._exportOverlay_dinc2_634 {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n z-index: 2147483647;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: _overlayFadeIn_dinc2_1 0.2s ease;\n}\n\n@keyframes _overlayFadeIn_dinc2_1 {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n._exportDialog_dinc2_655 {\n background: rgba(30, 30, 30, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 480px;\n width: 90%;\n animation: _dialogSlideIn_dinc2_1 0.3s ease;\n}\n\n@keyframes _dialogSlideIn_dinc2_1 {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n._exportDialogHeader_dinc2_677 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n\n h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: white;\n }\n\n ._closeButton_dinc2_691 {\n background: none;\n border: none;\n color: rgba(255, 255, 255, 0.6);\n font-size: 24px;\n cursor: pointer;\n padding: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: all 0.2s;\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n }\n }\n}\n\n._exportDialogContent_dinc2_713 {\n padding: 24px;\n\n p {\n margin: 0 0 20px 0;\n color: rgba(255, 255, 255, 0.8);\n font-size: 14px;\n }\n}\n\n._exportOptions_dinc2_723 {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n}\n\n._exportOptionButton_dinc2_729 {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 20px 16px;\n background: rgba(255, 255, 255, 0.05);\n border: 2px solid rgba(255, 255, 255, 0.1);\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.2s;\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(57, 182, 255, 0.5);\n transform: translateY(-2px);\n }\n\n &:active {\n transform: translateY(0);\n }\n}\n\n._exportOptionIcon_dinc2_752 {\n font-size: 28px;\n opacity: 0.9;\n}\n\n._exportOptionLabel_dinc2_757 {\n font-size: 13px;\n font-weight: 500;\n color: white;\n}\n._draggable_15flz_1 {\n /* Support dynamic positioning via CSS variables */\n left: var(--drag-left, 50%);\n top: var(--drag-top, auto);\n bottom: var(--drag-bottom, 500px);\n}\n\n._draggable_15flz_1._is-dragging_15flz_8 {\n cursor: grabbing;\n user-select: none;\n transition: none !important;\n z-index: 2147483643;\n box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);\n}\n\n._dragHandle_15flz_16 {\n cursor: grab;\n touch-action: none;\n}\n\n._dragHandle_15flz_16._is-dragging_15flz_8 {\n cursor: grabbing;\n}\n/* Recording-specific styles for RecordingPanel */\n/* These styles are extracted from @page-agent/ui/panel/Panel.module.css */\n\n._recordingButton_1hion_4 {\n position: relative;\n transition: all 0.2s ease;\n}\n\n/* Placeholder - moved below controlButton definition for proper cascade */\n\n._eventCounter_1hion_11 {\n font-size: 10px;\n color: rgba(255, 255, 255, 0.7);\n min-width: 16px;\n text-align: center;\n padding: 0 4px;\n}\n\n@keyframes _recordingPulse_1hion_1 {\n 0%,\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.7;\n transform: scale(1.1);\n }\n}\n\n._exportOverlay_1hion_31 {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n z-index: 2147483647;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: _overlayFadeIn_1hion_1 0.2s ease;\n}\n\n@keyframes _overlayFadeIn_1hion_1 {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n._exportDialog_1hion_52 {\n background: rgba(30, 30, 30, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 480px;\n width: 90%;\n animation: _dialogSlideIn_1hion_1 0.3s ease;\n}\n\n@keyframes _dialogSlideIn_1hion_1 {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n._exportDialogHeader_1hion_74 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._exportDialogHeader_1hion_74 h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n._closeButton_1hion_89 {\n background: none;\n border: none;\n color: rgba(255, 255, 255, 0.6);\n font-size: 24px;\n cursor: pointer;\n padding: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n transition: all 0.2s;\n}\n\n._closeButton_1hion_89:hover {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n}\n\n._exportDialogContent_1hion_110 {\n padding: 24px;\n}\n\n._exportDialogContent_1hion_110 p {\n margin: 0 0 20px 0;\n color: rgba(255, 255, 255, 0.8);\n font-size: 14px;\n}\n\n._exportOptions_1hion_120 {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n}\n\n._exportOptionButton_1hion_126 {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 20px 16px;\n background: rgba(255, 255, 255, 0.05);\n border: 2px solid rgba(255, 255, 255, 0.1);\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: white;\n font-family: inherit;\n}\n\n._exportOptionButton_1hion_126:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.2);\n transform: translateY(-2px);\n}\n\n._exportOptionIcon_1hion_147 {\n font-size: 28px;\n opacity: 0.9;\n}\n\n._exportOptionLabel_1hion_152 {\n font-size: 13px;\n font-weight: 500;\n color: white;\n}\n\n/* Need to re-export controlButton and controls styles from Panel for the recording button to work */\n._controlButton_1hion_159 {\n background: rgba(255, 255, 255, 0.1);\n border: none;\n color: white;\n cursor: pointer;\n padding: 8px;\n border-radius: 8px;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 36px;\n height: 36px;\n font-size: 14px;\n}\n\n._controlButton_1hion_159:hover {\n background: rgba(255, 255, 255, 0.2);\n}\n\n._controls_1hion_179 {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n/* Recording state - use !important to ensure priority over base styles */\n._recordingButton_1hion_4._recording_1hion_4 {\n color: rgb(34, 197, 94) !important;\n animation: _recordingPulse_1hion_1 1.5s ease-in-out infinite;\n}\n\n/* ========== Phase 4: Task Cards ========== */\n\n._taskCard_1hion_193 {\n background: rgba(30, 41, 59, 0.8);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(148, 163, 184, 0.1);\n border-radius: 12px;\n padding: 16px;\n margin-bottom: 12px;\n transition: all 0.2s ease;\n}\n\n._taskCard_1hion_193:hover {\n border-color: rgba(59, 130, 246, 0.3);\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n}\n\n._taskCardHeader_1hion_209 {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n}\n\n._taskIcon_1hion_216 {\n font-size: 24px;\n}\n\n._taskName_1hion_220 {\n flex: 1;\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: white;\n}\n\n._confidenceBadge_1hion_228 {\n background: linear-gradient(135deg, #10b981, #059669);\n color: white;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n._taskStats_1hion_237 {\n display: flex;\n gap: 16px;\n margin-bottom: 12px;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n}\n\n._taskParameters_1hion_245 {\n margin-bottom: 16px;\n padding: 12px;\n background: rgba(0, 0, 0, 0.2);\n border-radius: 8px;\n}\n\n._taskParameters_1hion_245 h4 {\n margin: 0 0 8px 0;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n._parameterItem_1hion_258 {\n display: flex;\n gap: 8px;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n margin-bottom: 4px;\n}\n\n._paramKey_1hion_266 {\n font-weight: 600;\n color: rgba(255, 255, 255, 0.9);\n}\n\n._paramValue_1hion_271 {\n color: rgba(255, 255, 255, 0.7);\n}\n\n._taskActions_1hion_275 {\n display: flex;\n gap: 8px;\n}\n\n._actionButton_1hion_280 {\n flex: 1;\n padding: 8px 16px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n._btnPrimary_1hion_290 {\n background: linear-gradient(135deg, #3b82f6, #2563eb);\n color: white;\n border: none;\n}\n\n._btnPrimary_1hion_290:hover {\n background: linear-gradient(135deg, #2563eb, #1d4ed8);\n transform: translateY(-1px);\n}\n\n._btnSecondary_1hion_301 {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n._btnSecondary_1hion_301:hover {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* ========== Phase 4: Task History ========== */\n\n._historyHeader_1hion_313 {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n._historyHeader_1hion_313 h3 {\n flex: 1;\n margin: 0;\n font-size: 18px;\n color: white;\n}\n\n._searchInput_1hion_327 {\n flex: 1;\n padding: 8px 12px;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 8px;\n color: white;\n font-size: 14px;\n}\n\n._searchInput_1hion_327::placeholder {\n color: rgba(255, 255, 255, 0.5);\n}\n\n._filterTabs_1hion_341 {\n display: flex;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n._filterTab_1hion_341 {\n padding: 6px 12px;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 6px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 12px;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n._filterTab_1hion_341:hover {\n background: rgba(255, 255, 255, 0.2);\n}\n\n._filterTab_1hion_341._active_1hion_362 {\n background: rgba(59, 130, 246, 0.3);\n border-color: rgba(59, 130, 246, 0.5);\n color: white;\n}\n\n._taskList_1hion_368 {\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-height: 400px;\n overflow-y: auto;\n}\n\n._emptyState_1hion_376 {\n text-align: center;\n padding: 32px;\n color: rgba(255, 255, 255, 0.5);\n font-size: 14px;\n}\n\n/* ========== Phase 4: Replay Panel ========== */\n\n._replayPanel_1hion_385 {\n background: rgba(30, 41, 59, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 600px;\n width: 90%;\n max-height: 80vh;\n overflow-y: auto;\n}\n\n._replayHeader_1hion_397 {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._replayIcon_1hion_405 {\n font-size: 24px;\n}\n\n._replayHeader_1hion_397 h3 {\n flex: 1;\n margin: 0;\n font-size: 18px;\n color: white;\n}\n\n._replayStatus_1hion_416 {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n}\n\n._replayStatus_1hion_416._success_1hion_421 {\n color: #10b981;\n}\n\n._replayStatus_1hion_416._failed_1hion_425 {\n color: #ef4444;\n}\n\n/* Event List */\n\n._eventList_1hion_431 {\n padding: 16px;\n max-height: 300px;\n overflow-y: auto;\n}\n\n._eventItem_1hion_437 {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px;\n border-radius: 6px;\n margin-bottom: 4px;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.8);\n transition: all 0.2s;\n}\n\n._eventItem_1hion_437._statusPending_1hion_449 {\n background: rgba(255, 255, 255, 0.05);\n}\n\n._eventItem_1hion_437._statusRunning_1hion_453 {\n background: rgba(59, 130, 246, 0.2);\n animation: _pulse_1hion_1 1s infinite;\n}\n\n._eventItem_1hion_437._statusSuccess_1hion_458 {\n background: rgba(16, 185, 129, 0.2);\n}\n\n._eventItem_1hion_437._statusFailed_1hion_462 {\n background: rgba(239, 68, 68, 0.2);\n}\n\n._eventStatusIcon_1hion_466 {\n font-size: 16px;\n width: 20px;\n text-align: center;\n}\n\n._eventDescription_1hion_472 {\n flex: 1;\n}\n\n._eventDuration_1hion_476 {\n font-size: 11px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n@keyframes _pulse_1hion_1 {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.8;\n }\n}\n\n/* ========== Phase 4: Error Handler ========== */\n\n._errorDialog_1hion_493 {\n background: rgba(30, 30, 30, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(239, 68, 68, 0.3);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 480px;\n width: 90%;\n}\n\n._errorHeader_1hion_503 {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._errorIcon_1hion_511 {\n font-size: 24px;\n}\n\n._errorHeader_1hion_503 h3 {\n flex: 1;\n margin: 0;\n font-size: 18px;\n color: white;\n}\n\n._errorDetails_1hion_522 {\n padding: 20px;\n color: rgba(255, 255, 255, 0.8);\n font-size: 14px;\n}\n\n._errorDetails_1hion_522 p {\n margin: 0 0 12px 0;\n}\n\n._errorDetails_1hion_522 strong {\n color: white;\n}\n\n._errorCauses_1hion_536 {\n padding: 0 20px 20px;\n}\n\n._errorCauses_1hion_536 h4 {\n margin: 0 0 12px 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n._errorCauses_1hion_536 ul {\n margin: 0;\n padding-left: 20px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 13px;\n}\n\n._errorCauses_1hion_536 li {\n margin-bottom: 6px;\n}\n\n._errorActions_1hion_557 {\n display: flex;\n gap: 8px;\n padding: 20px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n/* ========== Phase 4: Replay Report ========== */\n\n._replayReport_1hion_566 {\n background: rgba(30, 30, 30, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 480px;\n width: 90%;\n}\n\n._replayReport_1hion_566._success_1hion_421 {\n border-color: rgba(16, 185, 129, 0.3);\n}\n\n._replayReport_1hion_566._failure_1hion_580 {\n border-color: rgba(239, 68, 68, 0.3);\n}\n\n._reportHeader_1hion_584 {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._reportIcon_1hion_592 {\n font-size: 24px;\n}\n\n._reportHeader_1hion_584 h3 {\n flex: 1;\n margin: 0;\n font-size: 18px;\n color: white;\n}\n\n._reportStats_1hion_603 {\n display: flex;\n justify-content: space-around;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._statItem_1hion_610 {\n text-align: center;\n}\n\n._statLabel_1hion_614 {\n display: block;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.7);\n margin-bottom: 4px;\n}\n\n._statValue_1hion_621 {\n display: block;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n._reportDetails_1hion_628 {\n padding: 20px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n._reportDetails_1hion_628 h4 {\n margin: 0 0 12px 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n._eventResult_1hion_640 {\n padding: 8px;\n margin-bottom: 4px;\n border-radius: 6px;\n font-size: 12px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n._eventResult_1hion_640._statusSuccess_1hion_458 {\n background: rgba(16, 185, 129, 0.2);\n}\n\n._eventResult_1hion_640._statusFailed_1hion_462 {\n background: rgba(239, 68, 68, 0.2);\n}\n\n._reportActions_1hion_656 {\n display: flex;\n gap: 8px;\n padding: 20px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n/* ========== Phase 4: Loading States ========== */\n\n._loadingContent_1hion_665 {\n text-align: center;\n padding: 32px;\n color: white;\n}\n\n._loadingSpinner_1hion_671 {\n width: 40px;\n height: 40px;\n margin: 0 auto 16px;\n border: 3px solid rgba(255, 255, 255, 0.2);\n border-top-color: white;\n border-radius: 50%;\n animation: _spin_1hion_1 1s linear infinite;\n}\n\n@keyframes _spin_1hion_1 {\n to {\n transform: rotate(360deg);\n }\n}\n\n._loadingContent_1hion_665 p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n/* ========== Phase 4: Task Card Dialog ========== */\n\n._taskCardDialog_1hion_695 {\n padding: 20px;\n}\n\n/* ========== Settings ========== */\n\n._settingsOverlay_1hion_701 {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n z-index: 2147483647;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: _overlayFadeIn_1hion_1 0.2s ease;\n}\n\n._settingsDialog_1hion_713 {\n background: rgba(30, 30, 30, 0.95);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n max-width: 480px;\n width: 90%;\n animation: _dialogSlideIn_1hion_1 0.3s ease;\n}\n\n._settingsDialogHeader_1hion_724 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n._settingsDialogHeader_1hion_724 h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n._settingsDialogContent_1hion_739 {\n padding: 24px;\n}\n\n._settingsField_1hion_743 {\n margin-bottom: 20px;\n}\n\n._settingsLabel_1hion_747 {\n display: block;\n margin-bottom: 8px;\n font-size: 13px;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.9);\n}\n\n._settingsInput_1hion_755 {\n width: 100%;\n padding: 10px 12px;\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: 8px;\n color: white;\n font-size: 14px;\n font-family: inherit;\n box-sizing: border-box;\n transition: all 0.2s;\n}\n\n._settingsInput_1hion_755::placeholder {\n color: rgba(255, 255, 255, 0.4);\n}\n\n._settingsInput_1hion_755:focus {\n outline: none;\n background: rgba(255, 255, 255, 0.08);\n border-color: rgba(59, 130, 246, 0.5);\n}\n\n._settingsInput_1hion_755[type='password'] {\n -webkit-text-security: disc;\n}\n\n/* ========== Test Mode UI - Design System Styles ========== */\n\n/* CSS Variables for design system consistency */\n:root {\n --color-primary: #58a6ff;\n --color-primary-hover: #79c0ff;\n --color-primary-pressed: #388bfd;\n --color-text-inverse: #0d1117;\n --color-text-primary: #e6edf3;\n --color-text-secondary: #8b949e;\n --color-border-default: #30363d;\n --color-border-emphasis: #484f58;\n --color-success: #3fb950;\n --color-danger: #f85149;\n --color-surface: #161b22;\n --font-mono:\n 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Liberation Mono',\n monospace;\n --font-sans:\n 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial,\n sans-serif;\n}\n\n/* Primary Button (Run) */\n._testButton_1hion_806 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding: 0 16px;\n border: none;\n border-radius: 6px;\n font-family: var(--font-sans);\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition:\n background 0.3s ease,\n transform 0.15s ease;\n position: relative;\n flex-shrink: 0;\n gap: 6px;\n}\n\n._testButtonPrimary_1hion_826 {\n background: var(--color-primary);\n color: var(--color-text-inverse);\n}\n\n._testButtonPrimary_1hion_826:hover:not(:disabled) {\n background: var(--color-primary-hover);\n transform: translateY(-0.5px);\n}\n\n._testButtonPrimary_1hion_826:active:not(:disabled) {\n background: var(--color-primary-pressed);\n transform: translateY(0);\n}\n\n._testButtonPrimary_1hion_826:disabled {\n background: rgba(56, 139, 253, 0.3);\n color: rgba(13, 17, 23, 0.5);\n cursor: not-allowed;\n}\n\n/* Loading state — standalone class for CSS module export */\n._testButtonLoading_1hion_848 {\n background: var(--color-primary);\n cursor: wait;\n}\n\n/* Success state — standalone class for CSS module export */\n._testButtonSuccess_1hion_854 {\n background: var(--color-success);\n transition: background 0.3s ease;\n cursor: default;\n}\n\n/* Error state — standalone class for CSS module export */\n._testButtonError_1hion_861 {\n background: var(--color-danger);\n color: white;\n animation: _testBtnShake_1hion_1 0.3s ease;\n cursor: default;\n}\n\n@keyframes _testBtnShake_1hion_1 {\n 0%,\n 100% {\n transform: translateX(0);\n }\n 20% {\n transform: translateX(-3px);\n }\n 40% {\n transform: translateX(3px);\n }\n 60% {\n transform: translateX(-2px);\n }\n 80% {\n transform: translateX(2px);\n }\n}\n\n/* Secondary Button (Save/Export) */\n._testButtonSecondary_1hion_888 {\n background: transparent;\n color: var(--color-text-primary);\n border: 1px solid var(--color-border-default);\n padding: 0 15px;\n font-weight: 500;\n}\n\n._testButtonSecondary_1hion_888:hover {\n background: rgba(255, 255, 255, 0.05);\n border-color: var(--color-border-emphasis);\n color: var(--color-text-primary);\n}\n\n._testButtonSecondary_1hion_888:active {\n background: rgba(255, 255, 255, 0.08);\n border-color: var(--color-border-emphasis);\n color: var(--color-text-primary);\n}\n\n/* DSL Editor (YAML) */\n._dslEditor_1hion_909 {\n width: 100%;\n min-height: 180px;\n background: var(--color-surface);\n color: var(--color-text-primary);\n border: 1px solid var(--color-border-default);\n border-radius: 6px;\n padding: 12px;\n font-family: var(--font-mono);\n font-size: 13px;\n line-height: 1.65;\n resize: vertical;\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n}\n\n._dslEditor_1hion_909:focus {\n outline: none;\n border-color: var(--color-primary);\n}\n\n._dslEditor_1hion_909::placeholder {\n color: var(--color-text-secondary);\n}\n\n/* ========== Result Status Indicator ========== */\n._resultStatus_1hion_935 {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);\n color: var(--color-text-tertiary, #6e7681);\n margin-left: auto;\n min-height: 18px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 160px;\n transition: color 0.2s ease;\n}\n\n._resultStatusRunning_1hion_951 {\n color: var(--color-warning, #d29922);\n}\n\n._resultStatusSuccess_1hion_955 {\n color: var(--color-success, #3fb950);\n}\n\n._resultStatusError_1hion_959 {\n color: var(--color-danger, #f85149);\n}\n/*$vite$:1*/";
|
|
4
4
|
document.head.appendChild(__vite_style__);
|
|
5
5
|
//#region \0rolldown/runtime.js
|
|
6
6
|
var __create = Object.create;
|
|
@@ -14918,6 +14918,173 @@ Now analyze the action sequence above and return ONLY JSON (no markdown):
|
|
|
14918
14918
|
return lines;
|
|
14919
14919
|
}
|
|
14920
14920
|
//#endregion
|
|
14921
|
+
//#region ../ui/src/panel/drag.module.css
|
|
14922
|
+
var draggable = "_draggable_15flz_1";
|
|
14923
|
+
var dragHandle = "_dragHandle_15flz_16";
|
|
14924
|
+
var drag_module_default = {
|
|
14925
|
+
draggable,
|
|
14926
|
+
"is-dragging": "_is-dragging_15flz_8",
|
|
14927
|
+
dragHandle
|
|
14928
|
+
};
|
|
14929
|
+
//#endregion
|
|
14930
|
+
//#region ../ui/src/panel/drag.ts
|
|
14931
|
+
var Draggable = class {
|
|
14932
|
+
element;
|
|
14933
|
+
dragHandle;
|
|
14934
|
+
storageKey;
|
|
14935
|
+
onClick;
|
|
14936
|
+
isDragging = false;
|
|
14937
|
+
dragOffset = {
|
|
14938
|
+
x: 0,
|
|
14939
|
+
y: 0
|
|
14940
|
+
};
|
|
14941
|
+
position = {
|
|
14942
|
+
x: 0,
|
|
14943
|
+
y: 0
|
|
14944
|
+
};
|
|
14945
|
+
hasCustomPosition = false;
|
|
14946
|
+
dragStartPos = {
|
|
14947
|
+
x: 0,
|
|
14948
|
+
y: 0
|
|
14949
|
+
};
|
|
14950
|
+
dragDistance = 0;
|
|
14951
|
+
boundHandlers = {
|
|
14952
|
+
pointerDown: this.handlePointerDown.bind(this),
|
|
14953
|
+
pointerMove: this.handlePointerMove.bind(this),
|
|
14954
|
+
pointerUp: this.handlePointerUp.bind(this),
|
|
14955
|
+
pointerCancel: this.handlePointerUp.bind(this)
|
|
14956
|
+
};
|
|
14957
|
+
constructor(config) {
|
|
14958
|
+
this.element = config.element;
|
|
14959
|
+
this.dragHandle = config.dragHandle;
|
|
14960
|
+
this.storageKey = config.storageKey ?? "draggable-position";
|
|
14961
|
+
this.onClick = config.onClick;
|
|
14962
|
+
this.init();
|
|
14963
|
+
}
|
|
14964
|
+
init() {
|
|
14965
|
+
this.applyStyles();
|
|
14966
|
+
this.loadPosition();
|
|
14967
|
+
this.setupEventListeners();
|
|
14968
|
+
}
|
|
14969
|
+
applyStyles() {
|
|
14970
|
+
this.element.classList.add(drag_module_default.draggable);
|
|
14971
|
+
this.dragHandle.classList.add(drag_module_default.dragHandle);
|
|
14972
|
+
}
|
|
14973
|
+
setupEventListeners() {
|
|
14974
|
+
this.dragHandle.addEventListener("pointerdown", this.boundHandlers.pointerDown, { capture: true });
|
|
14975
|
+
}
|
|
14976
|
+
handlePointerDown(e) {
|
|
14977
|
+
if (e.button !== 0 && e.pointerType !== "touch") return;
|
|
14978
|
+
const target = e.target;
|
|
14979
|
+
if (target.closest("button")) return;
|
|
14980
|
+
e.preventDefault();
|
|
14981
|
+
e.stopPropagation();
|
|
14982
|
+
this.isDragging = true;
|
|
14983
|
+
const rect = this.element.getBoundingClientRect();
|
|
14984
|
+
this.dragOffset = {
|
|
14985
|
+
x: e.clientX - rect.left,
|
|
14986
|
+
y: e.clientY - rect.top
|
|
14987
|
+
};
|
|
14988
|
+
this.dragStartPos = {
|
|
14989
|
+
x: e.clientX,
|
|
14990
|
+
y: e.clientY
|
|
14991
|
+
};
|
|
14992
|
+
this.dragDistance = 0;
|
|
14993
|
+
target.setPointerCapture(e.pointerId);
|
|
14994
|
+
this.element.classList.add(drag_module_default.isDragging);
|
|
14995
|
+
this.dragHandle.classList.add(drag_module_default.isDragging);
|
|
14996
|
+
document.addEventListener("pointermove", this.boundHandlers.pointerMove);
|
|
14997
|
+
document.addEventListener("pointerup", this.boundHandlers.pointerUp);
|
|
14998
|
+
document.addEventListener("pointercancel", this.boundHandlers.pointerCancel);
|
|
14999
|
+
}
|
|
15000
|
+
handlePointerMove(e) {
|
|
15001
|
+
if (!this.isDragging) return;
|
|
15002
|
+
e.preventDefault();
|
|
15003
|
+
const dx = e.clientX - this.dragStartPos.x;
|
|
15004
|
+
const dy = e.clientY - this.dragStartPos.y;
|
|
15005
|
+
this.dragDistance = Math.sqrt(dx * dx + dy * dy);
|
|
15006
|
+
let newX = e.clientX - this.dragOffset.x;
|
|
15007
|
+
let newY = e.clientY - this.dragOffset.y;
|
|
15008
|
+
const rect = this.element.getBoundingClientRect();
|
|
15009
|
+
const viewport = {
|
|
15010
|
+
width: window.innerWidth,
|
|
15011
|
+
height: window.innerHeight
|
|
15012
|
+
};
|
|
15013
|
+
newX = Math.max(0, Math.min(newX, viewport.width - rect.width));
|
|
15014
|
+
newY = Math.max(0, Math.min(newY, viewport.height - rect.height));
|
|
15015
|
+
this.position = {
|
|
15016
|
+
x: newX,
|
|
15017
|
+
y: newY
|
|
15018
|
+
};
|
|
15019
|
+
this.applyPosition();
|
|
15020
|
+
}
|
|
15021
|
+
handlePointerUp(e) {
|
|
15022
|
+
if (!this.isDragging) return;
|
|
15023
|
+
this.isDragging = false;
|
|
15024
|
+
this.hasCustomPosition = true;
|
|
15025
|
+
e.target.releasePointerCapture(e.pointerId);
|
|
15026
|
+
this.element.classList.remove(drag_module_default.isDragging);
|
|
15027
|
+
this.dragHandle.classList.remove(drag_module_default.isDragging);
|
|
15028
|
+
document.removeEventListener("pointermove", this.boundHandlers.pointerMove);
|
|
15029
|
+
document.removeEventListener("pointerup", this.boundHandlers.pointerUp);
|
|
15030
|
+
document.removeEventListener("pointercancel", this.boundHandlers.pointerCancel);
|
|
15031
|
+
if (this.dragDistance < 5) this.onClick?.();
|
|
15032
|
+
else this.savePosition();
|
|
15033
|
+
}
|
|
15034
|
+
applyPosition() {
|
|
15035
|
+
if (this.hasCustomPosition) {
|
|
15036
|
+
this.element.style.left = `${this.position.x}px`;
|
|
15037
|
+
this.element.style.top = `${this.position.y}px`;
|
|
15038
|
+
this.element.style.bottom = "auto";
|
|
15039
|
+
this.element.style.transform = "none";
|
|
15040
|
+
}
|
|
15041
|
+
}
|
|
15042
|
+
savePosition() {
|
|
15043
|
+
try {
|
|
15044
|
+
localStorage.setItem(this.storageKey, JSON.stringify({
|
|
15045
|
+
x: this.position.x,
|
|
15046
|
+
y: this.position.y,
|
|
15047
|
+
viewport: {
|
|
15048
|
+
width: window.innerWidth,
|
|
15049
|
+
height: window.innerHeight
|
|
15050
|
+
}
|
|
15051
|
+
}));
|
|
15052
|
+
} catch {}
|
|
15053
|
+
}
|
|
15054
|
+
loadPosition() {
|
|
15055
|
+
try {
|
|
15056
|
+
const saved = localStorage.getItem(this.storageKey);
|
|
15057
|
+
if (!saved) return;
|
|
15058
|
+
const data = JSON.parse(saved);
|
|
15059
|
+
if (!data || typeof data.x !== "number" || typeof data.y !== "number") return;
|
|
15060
|
+
if (data.viewport) {
|
|
15061
|
+
const scaleX = window.innerWidth / data.viewport.width;
|
|
15062
|
+
const scaleY = window.innerHeight / data.viewport.height;
|
|
15063
|
+
if (scaleX > .5 && scaleX < 2 && scaleY > .5 && scaleY < 2) {
|
|
15064
|
+
data.x *= scaleX;
|
|
15065
|
+
data.y *= scaleY;
|
|
15066
|
+
}
|
|
15067
|
+
}
|
|
15068
|
+
if (data.x >= 0 && data.x <= window.innerWidth - 360 && data.y >= 0 && data.y <= window.innerHeight - 40) {
|
|
15069
|
+
this.position = {
|
|
15070
|
+
x: data.x,
|
|
15071
|
+
y: data.y
|
|
15072
|
+
};
|
|
15073
|
+
this.hasCustomPosition = true;
|
|
15074
|
+
this.applyPosition();
|
|
15075
|
+
}
|
|
15076
|
+
} catch {}
|
|
15077
|
+
}
|
|
15078
|
+
dispose() {
|
|
15079
|
+
this.dragHandle.removeEventListener("pointerdown", this.boundHandlers.pointerDown, { capture: true });
|
|
15080
|
+
document.removeEventListener("pointermove", this.boundHandlers.pointerMove);
|
|
15081
|
+
document.removeEventListener("pointerup", this.boundHandlers.pointerUp);
|
|
15082
|
+
document.removeEventListener("pointercancel", this.boundHandlers.pointerCancel);
|
|
15083
|
+
this.element.classList.remove(drag_module_default.draggable, drag_module_default.isDragging);
|
|
15084
|
+
this.dragHandle.classList.remove(drag_module_default.dragHandle, drag_module_default.isDragging);
|
|
15085
|
+
}
|
|
15086
|
+
};
|
|
15087
|
+
//#endregion
|
|
14921
15088
|
//#region ../ui/src/panel/Panel.ts
|
|
14922
15089
|
/**
|
|
14923
15090
|
* Agent control panel
|
|
@@ -14947,6 +15114,7 @@ Now analyze the action sequence above and return ONLY JSON (no markdown):
|
|
|
14947
15114
|
#headerUpdateTimer = null;
|
|
14948
15115
|
#pendingHeaderText = null;
|
|
14949
15116
|
#isAnimating = false;
|
|
15117
|
+
#draggable = null;
|
|
14950
15118
|
#onStatusChange = () => this.#handleStatusChange();
|
|
14951
15119
|
#onHistoryChange = () => this.#handleHistoryChange();
|
|
14952
15120
|
#onActivity = (e) => this.#handleActivity(e.detail);
|
|
@@ -14978,6 +15146,12 @@ Now analyze the action sequence above and return ONLY JSON (no markdown):
|
|
|
14978
15146
|
this.#agent.addEventListener("dispose", this.#onAgentDispose);
|
|
14979
15147
|
this.#setupEventListeners();
|
|
14980
15148
|
this.#startHeaderUpdateLoop();
|
|
15149
|
+
this.#draggable = new Draggable({
|
|
15150
|
+
element: this.wrapper,
|
|
15151
|
+
dragHandle: this.wrapper.querySelector(`.${Panel_module_default.header}`),
|
|
15152
|
+
storageKey: "page-agent-panel-position",
|
|
15153
|
+
onClick: () => this.#toggle()
|
|
15154
|
+
});
|
|
14981
15155
|
this.#showInputArea();
|
|
14982
15156
|
this.hide();
|
|
14983
15157
|
}
|
|
@@ -15090,6 +15264,7 @@ Now analyze the action sequence above and return ONLY JSON (no markdown):
|
|
|
15090
15264
|
this.#agent.removeEventListener("dispose", this.#onAgentDispose);
|
|
15091
15265
|
this.#isWaitingForUserAnswer = false;
|
|
15092
15266
|
this.#stopHeaderUpdateLoop();
|
|
15267
|
+
this.#draggable?.dispose();
|
|
15093
15268
|
this.wrapper.remove();
|
|
15094
15269
|
}
|
|
15095
15270
|
#getToolExecutingText(toolName, args) {
|