UNPKG

@flowfuse/flowfuse

Version:

An open source low-code development platform

1 lines 60.1 kB
{"version":3,"file":"259.050f987fccfc056c9bc8.css","mappings":"AAGI,mCACI,eAEA,+CACI,gBAGJ,oDACI,8CACA,kBACA,qBACA,kCACA,2BACA,kBAGI,8DACI,cACA,cACA,eAIR,yEACI,4CAGJ,qHAEI,aAGJ,6DACI,WACA,mBAKJ,sKAEI,kCACA,oCACA,oCAGI,0LACI,oCAQxB,kBACI,gDACA,mCACA,iBACA,gBACA,sBACA,qBACA,iBACA,kBACA,c;ACjEJ,mCACI,aACA,sBACA,YACA,WAGA,kBAGJ,4CACI,aACA,sBACA,WAKJ,gDACI,SACA,sBACA,+CACA,mBACA,gBACA,2BAGJ,0CACI,aACA,sBACA,YAGJ,6CACI,SACA,mBACA,gBACA,2BAGJ,0CACI,SACA,mBACA,kCAGJ,yCACI,aACA,sBACA,QAGJ,0CACI,gBACA,2BAGJ,yCACI,iBACA,kCAEA,mGACA,+FAGJ,yCACI,kCAGJ,2CACI,mBACA,kCAMJ,4CACI,aACA,eACA,mBACA,iBACA,iBACA,uCAGJ,qFAEI,SACA,mBACA,kCAKJ,kCACI,UACA,mBACA,iBAMJ,2CACI,oBAIJ,oDACI,aACA,mBACA,yBACA,UAGJ,0CACI,iBACA,kC;AAtHJ,kCACI,iBAOJ,4BACI,W;ACTJ,uBACI,wCACA,kBACA,sCACA,aACA,QACA,mBACA,eACA,2BACA,mBAEA,gCACI,WACA,mBAGJ,8BACI,0CACA,8CAEA,yCACI,2CAIR,qCACI,aACA,mBACA,iBAGJ,kCACI,UACA,mBACA,6CAGJ,6BACI,mCACA,mBACA,gBCtBM,CDuBN,aACA,Q;AExCA,sCACI,kCACA,gBACA,gBDYE,C;AEfN,sCACI,kCACA,gBACA,gBFYE,C;AGhBV,8BACI,eAEA,0CACI,gBAGJ,+CACI,8CACA,kBACA,qBACA,kCACA,2BACA,kBAGI,yDACI,cACA,cACA,eAIR,oEACI,4CAGJ,oEACI,aACA,gDACA,mCAGJ,wDACI,WACA,mBAKJ,4JAEI,kCACA,oCACA,oCAGI,gLACI,oCAQxB,0CACI,gD;AC1DJ,6CACI,aACA,2BACA,cACA,OAEA,8DACI,OACA,gBACA,qBACA,aACA,U;ACXR,kCACI,aACA,sBACA,MACA,aACA,4CACA,kCACA,cACA,kBACA,iBACA,gBAGJ,iCACI,aACA,8BACA,mBACA,oBAGJ,gCACI,aACA,UACA,mBAMA,+FAEI,kCAKJ,uCACI,mBACA,gCAIJ,mDACI,oBACA,cAIR,wBACI,qBACA,qBACA,kBACA,eACA,2BACA,+BAEA,iCACI,WACA,mBAIR,iCACI,wCACA,cACA,0CACA,qBACA,kBAEA,sDACI,4CAIR,2BACI,wCACA,oCACA,oCACA,kBACA,qBAEA,gDACI,iDAIR,2BACI,wCACA,cACA,0CACA,aACA,mBACA,UACA,kBACA,qBAEA,mCACI,WACA,aACA,cACA,8CACA,sBAGJ,iCACI,4CAIR,+BACI,aACA,mBACA,uBACA,eACA,kBACA,+BACA,kCAEA,oDACI,4CACA,kCAGJ,qCACI,cACA,eAIR,gCACI,OACA,aACA,sBAIA,aACA,+CACA,oBACA,iCAEA,wCACI,mCAGJ,4CAII,qBACA,cACA,aACA,WACA,aACA,sBACA,gBACA,YACA,aACA,kBACA,gBACA,kCACA,YACA,oBACA,kCAEA,kDACI,aAGJ,qDACI,mBACA,4CACA,kCAGJ,yDACI,kCAIR,yCACI,cACA,aACA,8BACA,WAEA,gDACI,aACA,yB;AA5LZ,iBACI,aACA,sBACA,WACA,gBAEA,wBACI,aACA,sBAGA,U;ACXR,oCACI,aACA,sBACA,mBACA,WACA,aAGJ,+BACI,aACA,UACA,mBAGJ,8BACI,UACA,WACA,kBACA,uCACA,6DAEA,2CACI,uBAGJ,2CACI,uBAIR,+BACI,YACI,qBACA,WAEJ,IACI,mBACA,WAIR,kCACI,kBACA,gCACA,kBACA,uCAGJ,4BACI,KACI,UACA,2BAEJ,GACI,UACA,yB;ACvDR,gCACI,eACA,gBACA,kCAGJ,8BACI,oBACA,sBAEA,mCACI,qBACA,sBACA,gDACA,mCACA,kBACA,kB;ACfJ,wCACI,mBACA,gBACA,gBACA,uBAGJ,wCACI,oBACA,gBACA,gBACA,wBAGJ,wCACI,eACA,gBACA,gBACA,uBAGJ,wHAGI,mBACA,gBACA,gBACA,yBAGJ,kDACI,oBACA,kCAGJ,2DACI,6BAGJ,4JAGI,aAGJ,wCACI,eAEA,2CACI,mBAIR,wCACI,eAEA,2CACI,mBAIR,gDACI,eACA,sBACA,6CACA,kCAGJ,mDACI,eAEA,sDACI,gBACA,aACA,qBACA,WAIR,oDACI,gBACA,wCACA,oBACA,gBACA,mBAEA,wDACI,SACA,aACA,gBACA,sCACA,gBACA,gBACA,qBACA,kBAEA,6DACI,6FACA,yBACA,YACA,UACA,gBACA,kBAKZ,4DACI,aACA,mBACA,8BACA,mBACA,6CACA,+CACA,gBAGJ,0DACI,6FACA,mBACA,kCACA,yBAGJ,0DACI,oBACA,mBACA,uBACA,YACA,yBACA,YACA,kBACA,eACA,kCACA,wBAEA,8DACI,aACA,cACA,oBAGJ,gEACI,oCACA,wCAIR,0CACI,UACA,YACA,gBAGJ,qDACI,gBACA,wCACA,oBACA,gBAGJ,6DACI,aACA,mBACA,2BACA,mBACA,6CACA,+CACA,gBAGJ,2DACI,oBACA,mBACA,uBACA,YACA,yBACA,YACA,kBACA,eACA,kCACA,wBAEA,+DACI,aACA,cACA,oBAGJ,iEACI,oCACA,wCAIR,2CACI,WACA,yBACA,mBAEA,8CACI,gBACA,gBACA,sCAGJ,4FACI,uBACA,wCAGJ,0DACI,sC;ACpNR,4CACI,mBACA,gBACA,kCACA,mBAGJ,8CACI,iCACA,kBACA,kB;ACXR,iCACI,mBACA,qBACA,yBACA,oBAEA,4CACI,2BACA,mDACA,2BACA,kCAGJ,sDACI,UAEA,iEACI,+BAIR,+CACI,wCACA,oCACA,mCACA,kBACA,eAGJ,gDACI,uBACA,kBACA,gBAEA,+DACI,mDACA,0CACA,oBACA,gBACA,eACA,WAGJ,+DACI,iDACA,oC;;AC7CZ,gCACI,eACA,gBACA,kCACA,oBAIA,8CACI,aACA,sBACA,U;ACXR,gCACI,eACA,gBACA,kCACA,oBAGJ,8BACI,mBAEA,0CACI,gBACA,UACA,SACA,aACA,sBACA,WAGJ,yCACI,aACA,uBAGJ,2CACI,cACA,aACA,cACA,aACA,mBACA,uBACA,wCACA,oCACA,kBACA,kBACA,oBACA,mBAGJ,4CACI,OAEA,wDACI,eACA,gBACA,kCACA,oBAGJ,yDACI,kBACA,gCACA,oBACA,gB;ACrDZ,yBACI,mBAEA,4BACI,iBACA,aACA,mBACA,QACA,gCAEA,qCACI,kCAIR,4BACI,gBACA,oBAEA,+BACI,iB;ACpBZ,+BACI,aACA,uBACA,UACA,eACA,wCACA,wCACA,oBACA,qBACA,kCACA,wBAEA,qCACI,0CACA,4CAIR,kCACI,cACA,WACA,YACA,mBACA,sBACA,mBAGJ,+BACI,OACA,YACA,aACA,mBACA,UAGJ,+BACI,OACA,YACA,aACA,sBACA,YAGJ,kCACI,cAGJ,+BACI,kBACA,gBACA,sBACA,kCACA,gBACA,uBACA,mBAEA,mDACI,gBACA,uBACA,mBAIR,8BACI,iBACA,kCACA,gBACA,uBACA,mBACA,SAEA,kDACI,gBACA,uBACA,mB;AC1ER,gCACI,eACA,gBACA,kCACA,oBAIA,gDACI,aACA,sBACA,U;ACPR,8BACI,aACA,sBACA,WAGJ,+BACI,aACA,eACA,mBACA,Q;ACdJ,mCACI,aACA,sBACA,SAGJ,iCACI,aACA,sBACA,UAGJ,gCACI,aACA,sBACA,WAGJ,iCACI,eACA,gBACA,kCACA,SAGJ,gCACI,iBACA,kBACA,kCAGJ,gCACI,aACA,sBACA,UAIJ,+BACI,cAGJ,qCACI,cACA,eACA,gBACA,mBACA,gBACA,kCAGJ,oCACI,aACA,mBACA,Q;ACtDJ,gCACI,aACA,uBACA,UACA,eACA,wCACA,wCACA,oBACA,qBACA,kCACA,wBAEA,sCACI,0CACA,4CAIR,gCACI,cACA,WACA,YACA,mBACA,mBAGJ,gCACI,OACA,aACA,sBACA,WACA,YAGJ,iCACI,kBACA,gBACA,kCACA,gBACA,uBACA,mBAEA,qDACI,gBACA,uBACA,mBAIR,+BACI,iBACA,kCACA,SACA,gBACA,uBACA,mBAEA,mDACI,gBACA,uBACA,mB;AC5DR,gCACI,eACA,gBACA,kCACA,oBAIA,kDACI,aACA,sBACA,U;ACXR,8BACI,mBAEA,iCACI,iBACA,aACA,mBACA,QACA,gCAEA,0CACI,kCAIR,iCACI,gBACA,oBAEA,oCACI,iB;ACpBZ,8BACI,wCACA,kBACA,gBACA,sCAGJ,sCACI,aACA,mBACA,QACA,gBACA,uCACA,+CAGJ,qCACI,iBACA,gBACA,kCAGJ,+CACI,gBACA,kCAGJ,qCACI,WACA,YACA,8BAEA,2CACI,wBAIR,2CACI,iBAGJ,sCACI,gBAGJ,uCACI,SACA,YACA,sBACA,mBACA,gBAGJ,kEACI,qBACA,qB;ACvDJ,uCACI,aACA,sBACA,UACA,eACA,wCACA,kBACA,sCAEA,cAGJ,uCACI,aACA,mBACA,QAGJ,qCACI,gBAGJ,oCACI,iBACA,gBACA,kBACA,sHACA,+HACA,kIAGJ,wCACI,aACA,eACA,mBACA,QAGJ,wCACI,SACA,gBACA,kC;ACzCJ,4CACI,aACA,sBACA,WAGJ,6CACI,kBACA,gBACA,2BAGJ,4CACI,aACA,mBACA,8BACA,YACA,iBACA,kCACA,6FAGJ,6CACI,oBACA,mBACA,uBACA,kBACA,gBACA,iBACA,mBACA,gBACA,gCACA,6CACA,uBACA,cACA,YAGJ,+CACI,iBACA,aACA,sBACA,UAGJ,+CACI,wCACA,sBACA,gBAGJ,sDACI,aACA,mBACA,YACA,qBACA,wCACA,eACA,iBACA,iBACA,gBACA,gCAEA,4DACI,4CAGJ,qEACI,aACA,cACA,kCACA,cACA,8BAEA,6EACI,wBAKZ,qDACI,OAGJ,wDACI,kCACA,gBAIA,gDACI,SACA,eACA,mDACA,sBACA,gBAEA,qDACI,6FACA,mBACA,2BACA,qBACA,sBACA,YACA,yBACA,UAKR,0EACI,4CAEA,8EACI,gB;AClHZ,sCACI,4CACA,wCACA,kCACA,gBACA,cAGJ,8CACI,aACA,mBACA,oBACA,UACA,wCACA,eACA,iBAEA,oDACI,4CAGJ,uDACI,WACA,YACA,kCACA,cACA,8BAEA,+DACI,wBAKZ,6CACI,eACA,gBACA,2BACA,OAGJ,gDACI,eACA,kCAGJ,4CACI,oBACA,4CACA,oBACA,aACA,sBACA,WACA,+CACA,gBACA,+BAEA,wDACI,gD;AC1DR,kCACI,oB;ACDJ,yCACI,kBACA,SACA,SACA,2BACA,UACA,kCACA,kBACA,oC;ACPJ,8BACI,gDACA,oBACA,qBACA,oBAEA,yCACI,mCACA,kBACA,SACA,gBAGJ,yCACI,cACA,0BAEA,+CACI,kCAIR,0CACI,qBACA,wCACA,oCACA,kBACA,gBACA,wBACA,qBACA,yBACA,sBACA,YACA,wB;AClCR,gCACI,gDACA,mBACA,gBACA,mBACA,4CAEA,oDACI,mCACA,kBACA,SACA,gBAGJ,sDACI,gBACA,aACA,mBACA,8BAGJ,oDACI,aACA,gBACA,kBACA,iEACA,uBAGJ,qDACI,qBACA,wCACA,oCACA,gBACA,qBACA,yBACA,sBACA,eACA,wBACA,sBACA,iBAIA,6DACI,+CACA,oCAIR,sLAGI,iBACA,mB;ACtDR,4BACI,aACA,sBACA,YACA,kCACA,gBACA,kBAGJ,qCACI,OACA,gBACA,aACA,uBACA,aAGA,wDACI,UAGJ,8DACI,yBAGJ,8DACI,+CACA,kBAEA,oEACI,6CAKZ,8BACI,aACA,sBACA,mBACA,uBACA,YACA,kBACA,aACA,gCAEA,gDACI,WACA,YACA,mBACA,6BAEA,oDACI,WACA,YAIR,iCACI,iBACA,gBACA,kCACA,mBAGJ,gCACI,eACA,SACA,gBAIR,gCACI,WAGJ,uDACI,iB;AC5EJ,mCACI,aACA,sBACA,YACA,gBAEA,yCACI,aAGJ,2CACI,oBACA,sQAEA,YACA,sCACA,0BACA,uDACA,cACA,aACA,mBACA,8BAGA,6DACI,OACA,2BAIJ,uDACI,cAEA,+DACI,iBACA,uBAKR,2DACI,OACA,yBAGJ,iDACI,aAEA,8DACI,mBAGJ,uDACI,WAIR,kDACI,eACA,gBACA,iBACA,2BACA,SAGJ,2DACI,aACA,mBACA,WAEA,0EACI,aACA,mBACA,uBACA,WACA,YACA,UACA,gBACA,YACA,kBACA,eACA,cACA,aACA,sCAEA,gFACI,eACA,6CAGJ,wFACI,+CACA,mBAGJ,+FACI,yCACA,oCAEA,qGACI,4CAShB,kDACI,OACA,aAKZ,qCACI,GACI,0BAEJ,KACI,6B","sources":["webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/CapabilitiesSelector.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/ToolPermissionsSettings.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/chips/DefaultChip.vue","webpack://@flowfuse/flowfuse/./frontend/src/ui-components/stylesheets/ff-utility.scss","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/chips/DebugChip.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/chips/SelectionChip.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/context-selection/ContextSelectorButton.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/context-selection/index.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/ExpertChatInput.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/ExpertLoadingIndicator.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/AnswerBadge.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resources/StreamableContent.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/GuideHeader.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/MessageBubble.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resources/FlowsList.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resources/GuideStepsList.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resources/IssuesList.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resource-cards/PackageResourceCard.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resources/PackagesList.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resources/PlanCard.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resources/QuestionsList.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resource-cards/StandardResourceCard.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resources/ResourcesList.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resources/SuggestionsList.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/JsonViewer.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/resources/ToolApprovalCard.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/ToolCallItem.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/messages/components/ToolCalls.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/ExpertMessages.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/ExpertModeSwitcher.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/InfoBanner.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/UpdateBanner.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/expert/Expert.vue","webpack://@flowfuse/flowfuse/./frontend/src/components/drawers/expert/ExpertDrawer.vue"],"sourcesContent":["@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.capabilities-selector {\n .ff-listbox {\n min-width: auto;\n\n .ff-options {\n max-width: 320px;\n }\n\n button.ff-button {\n border: 1px solid var(--ff-color-accent-light); // indigo-300 to match other buttons\n border-radius: 5px;\n padding: 0.25rem 0.50rem;\n background: var(--ff-color-bg-app);\n color: var(--ff-color-text); // gray-800, explicit dark text\n font-size: 0.875rem;\n\n .icon {\n svg {\n color: inherit;\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n &:hover:not(:disabled) {\n background-color: var(--ff-color-bg-surface); // gray-50\n }\n\n &:focus,\n &.active {\n outline: none;\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n\n &[data-headlessui-state=\"open\"] {\n button.ff-button,\n button.ff-button:hover {\n background: var(--ff-color-accent);\n border-color: var(--ff-color-accent);\n color: var(--ff-color-text-on-brand);\n\n .icon {\n svg {\n color: var(--ff-color-text-on-brand);\n }\n }\n }\n }\n }\n}\n\n.tool-count-badge {\n background-color: var(--ff-color-accent-surface); // indigo-100\n color: var(--ff-color-accent-hover); // indigo-700\n font-size: 0.75rem;\n font-weight: 500;\n padding: 0.125rem 0.5rem;\n border-radius: 9999px;\n min-width: 1.5rem;\n text-align: center;\n flex-shrink: 0;\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.tool-permissions {\n display: flex;\n flex-direction: column;\n gap: 1.75rem;\n width: 100%;\n // Separate the first group title from the dialog's \"Tool permissions\" intro\n // paragraph above, which sits close by via the settings group's small gap.\n margin-top: 0.75rem;\n}\n\n.tool-permissions__section {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n// Group title (Flow Building / Platform) — a subheading under the dialog's\n// \"Tool permissions\" heading, so it reads as subordinate rather than a peer.\n.tool-permissions__group-title {\n margin: 0;\n padding-bottom: 0.25rem;\n border-bottom: 1px solid var(--ff-color-border);\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--ff-color-text);\n}\n\n.tool-permissions__block {\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n}\n\n.tool-permissions__subtitle {\n margin: 0;\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--ff-color-text);\n}\n\n.tool-permissions__intro {\n margin: 0;\n font-size: 0.8125rem;\n color: var(--ff-color-text-subtle);\n}\n\n.tool-permissions__cell {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.tool-permissions__title {\n font-weight: 500;\n color: var(--ff-color-text);\n}\n\n.tool-permissions__hint {\n font-size: 0.75rem;\n color: var(--ff-color-text-subtle);\n\n &.is-requires-update { color: var(--ff-color-status-info-text); }\n &.is-deprecated { color: var(--ff-color-status-error-text); }\n}\n\n.tool-permissions__type {\n color: var(--ff-color-text-subtle);\n}\n\n.tool-permissions__static {\n font-size: 0.8125rem;\n color: var(--ff-color-text-subtle);\n}\n\n// The \"X for this chat\" note + its Make permanent action, under a tool name. Wraps so\n// the action drops to its own line (with full width) in the narrow tool column rather\n// than being squeezed and clipped.\n.tool-permissions__session {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.25rem 0.5rem;\n font-size: 0.75rem;\n color: var(--ff-color-status-info-text);\n}\n\n.tool-permissions__notice,\n.tool-permissions__empty {\n margin: 0;\n font-size: 0.8125rem;\n color: var(--ff-color-text-subtle);\n}\n\n// Keep the permission column hugging the right edge so each tool name lines up\n// with its own control across the row border, rather than floating in whitespace.\n:deep(.permission-col) {\n width: 1px;\n white-space: nowrap;\n text-align: right;\n}\n\n// The class lands on the toggle's own root element, so it styles without :deep. The\n// button size is set through ToggleButtonGroup's `size` prop, not by reaching inside it.\n// inline-flex lets the right-aligned permission column push the control to the edge.\n.tool-permissions__toggle {\n display: inline-flex;\n}\n\n// Count + Reset sit to the left of the class-default toggle, all hugging the right edge.\n.tool-permissions__default-control {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.tool-permissions__count {\n font-size: 0.75rem;\n color: var(--ff-color-text-subtle);\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.chip {\n border: 1px solid var(--ff-color-border);\n border-radius: 5px;\n background: var(--ff-color-bg-surface);\n display: flex;\n gap: 5px;\n align-items: center;\n cursor: pointer;\n transition: 0.3s ease-in-out;\n white-space: nowrap;\n\n &.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n &.active {\n background: var(--ff-color-accent-surface);\n border: 1px solid var(--ff-color-accent-light);\n\n .separator {\n background: var(--ff-color-chip-default-bg);\n }\n }\n\n .icon-wrapper {\n display: flex;\n align-items: center;\n margin-right: 5px;\n }\n\n .separator {\n width: 1px;\n align-self: stretch;\n background: var(--ff-color-status-warning-bg);\n }\n\n .text {\n padding: 0.25rem 0.50rem 0.25rem 0.25rem;\n align-items: center;\n font-size: $ff-funit-sm;\n display: flex;\n gap: 2px;\n }\n}\n","/*\n ff-utility contains functional variables and classes for padding/margin and sizings\n*/\n\n// screen sizes\n$ff-screen-sm: 640px;\n$ff-screen-md: 768px;\n$ff-screen-lg: 1024px;\n$ff-screen-xl: 1280px;\n$ff-screen-2xl: 1536px;\n\n// unit\n$ff-unit-xs: 3px;\n$ff-unit-sm: 6px;\n$ff-unit-md: 9px;\n$ff-unit-lg: 18px;\n$ff-unit-xl: 27px;\n\n// font unit\n$ff-funit-xs: 0.75rem;\n$ff-funit-sm: 0.85rem;\n$ff-funit-md: 1rem;\n$ff-funit-lg: 1.5rem;\n$ff-funit-xl: 2rem;\n\n@mixin truncate {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.flow-selection-button {\n .text {\n .counter {\n color: var(--ff-color-text-subtle);\n margin-left: 4px;\n font-size: $ff-funit-xs;\n }\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.flow-selection-button {\n .text {\n .counter {\n color: var(--ff-color-text-subtle);\n margin-left: 4px;\n font-size: $ff-funit-xs;\n }\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.context-selector {\n .ff-listbox {\n min-width: auto;\n\n .ff-options {\n max-width: 320px;\n }\n\n button.ff-button {\n border: 1px solid var(--ff-color-accent-light); // indigo-300 to match other buttons\n border-radius: 5px;\n padding: 0.25rem 0.50rem;\n background: var(--ff-color-bg-app);\n color: var(--ff-color-text); // gray-800, explicit dark text\n font-size: 0.875rem;\n\n .icon {\n svg {\n color: inherit;\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n &:hover:not(:disabled) {\n background-color: var(--ff-color-bg-surface); // gray-50\n }\n\n &:focus:not(:disabled) {\n outline: none;\n background-color: var(--ff-color-accent-surface); // indigo-100\n color: var(--ff-color-accent-hover); // indigo-700\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n\n &[data-headlessui-state=\"open\"] {\n button.ff-button,\n button.ff-button:hover {\n background: var(--ff-color-accent);\n border-color: var(--ff-color-accent);\n color: var(--ff-color-text-on-brand);\n\n .icon {\n svg {\n color: var(--ff-color-text-on-brand);\n }\n }\n }\n }\n }\n}\n\n.context-selector.active .relative button {\n background-color: var(--ff-color-accent-surface); // indigo-100\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.context-selector-container {\n display: flex;\n justify-content: flex-start;\n overflow: auto;\n flex: 1;\n\n .chips-container {\n flex: 1;\n overflow-x: auto;\n scrollbar-width: none;\n display: flex;\n gap: 0.5rem;\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.ff-expert-input {\n display: flex;\n flex-direction: column;\n gap: 0;\n padding: 1rem; // p-4\n border-top: 1px solid var(--ff-color-border); // border-gray-200\n background: var(--ff-color-bg-app);\n flex-shrink: 0; // Prevent input area from shrinking\n position: relative;\n min-height: 180px;\n max-height: 40vh;\n}\n\n.action-buttons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.5rem;\n}\n\n.right-buttons {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n}\n\n// Reuses the shared DefaultChip; only tweaks needed here are neutralising the chip's\n// warning-yellow separator and centring the label around the divider.\n.plan-mode-chip {\n :deep(.separator),\n &.active :deep(.separator) {\n background: var(--ff-color-border);\n }\n\n // DefaultChip's .text padding is asymmetric and it adds a 5px flex gap before the\n // divider; equalise so \"Plan mode\" sits centred on both sides of the divider cell.\n :deep(.text) {\n padding-left: 0.5rem;\n padding-right: calc(0.5rem - 5px);\n }\n\n // The switch is a visual indicator only; the chip handles the click.\n :deep(.ff-toggle-switch) {\n pointer-events: none;\n flex-shrink: 0;\n }\n}\n\nbutton {\n padding: 0.5rem 0.75rem; // py-2 px-3\n border-radius: 9999px; // rounded-full\n font-size: 0.875rem; // text-sm\n cursor: pointer;\n transition: colors 0.2s ease;\n border: 1px solid transparent;\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\n.btn-start-over {\n background-color: var(--ff-color-bg-app);\n color: inherit;\n border-color: var(--ff-color-accent-light); // indigo-300\n padding: 0.25rem 0.50rem;\n border-radius: 5px;\n\n &:hover:not(:disabled) {\n background-color: var(--ff-color-bg-surface); // gray-50\n }\n}\n\n.btn-send {\n background-color: var(--ff-color-accent);\n color: var(--ff-color-text-on-brand);\n border-color: var(--ff-color-accent);\n border-radius: 5px;\n padding: 0.25rem 0.50rem;\n\n &:hover:not(:disabled) {\n background-color: var(--ff-color-accent-hover-bg);\n }\n}\n\n.btn-stop {\n background-color: var(--ff-color-bg-app);\n color: inherit;\n border-color: var(--ff-color-accent-light); // indigo-300\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: 5px;\n padding: 0.25rem 0.50rem;\n\n &::before {\n content: '';\n width: 0.75rem; // w-3\n height: 0.75rem; // h-3\n background-color: var(--ff-color-surface-dark);\n border-radius: 0.125rem; // rounded-xs\n }\n\n &:hover {\n background-color: var(--ff-color-bg-surface); // gray-50\n }\n}\n\n.btn-settings {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.25rem;\n border-radius: 5px;\n background-color: transparent;\n color: var(--ff-color-text-subtle);\n\n &:hover:not(:disabled) {\n background-color: var(--ff-color-bg-surface); // gray-50\n color: var(--ff-color-text-strong);\n }\n\n &__icon {\n width: 1.25rem;\n height: 1.25rem;\n }\n}\n\n.input-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n // min-height: 0 must be on every ancestor in this flex chain, not just .chat-input:\n // without it this wrapper keeps its content (min-content) height, so a long plan loaded\n // via \"Edit\" pushes the whole composer tall instead of letting the textarea scroll.\n min-height: 0;\n border: 2px solid var(--ff-color-border-strong); // border-2 border-gray-300\n border-radius: 0.5rem; // rounded-lg\n transition: border-color 0.2s ease;\n\n &.focused {\n border-color: var(--ff-color-focus);\n }\n\n .chat-input {\n // field-sizing grows the textarea with its content up to the composer's max-height.\n // min-height: 0 lets it shrink within the flex box past its content height (loading a\n // long plan via \"Edit manually\") so overflow-y scrolls instead of overflowing the chat.\n field-sizing: content;\n flex: 1 1 auto;\n min-height: 0;\n width: 100%;\n padding: 1rem; // p-4\n box-sizing: border-box;\n overflow-y: auto;\n border: none;\n outline: none;\n font-size: 0.875rem; // text-sm\n line-height: 1.5;\n color: var(--ff-color-text-strong); // text-gray-900\n resize: none;\n font-family: inherit;\n background: var(--ff-color-bg-app);\n\n &:focus {\n outline: none;\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--ff-color-bg-surface); // bg-gray-50\n color: var(--ff-color-text-subtle); // text-gray-500\n }\n\n &::placeholder {\n color: var(--ff-color-text-subtle); // placeholder gray\n }\n }\n\n .actions {\n padding: .5rem;\n display: flex;\n justify-content: space-between;\n gap: 0.75rem;\n\n .right {\n display: flex;\n justify-content: flex-end;\n }\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.ff-expert-loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n padding: 1rem;\n}\n\n.loading-dots {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n}\n\n.loading-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--ff-color-focus);\n animation: bounce-dot 1.4s infinite ease-in-out both;\n\n &:nth-child(1) {\n animation-delay: -0.32s;\n }\n\n &:nth-child(2) {\n animation-delay: -0.16s;\n }\n}\n\n@keyframes bounce-dot {\n 0%, 80%, 100% {\n transform: scale(0.7);\n opacity: 0.5;\n }\n 40% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n.loading-message {\n font-size: 0.875rem;\n color: var(--ff-color-text-deep);\n font-style: italic;\n animation: fade-in 0.3s ease-in;\n}\n\n@keyframes fade-in {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.section-title {\n font-size: 1rem;\n font-weight: 500;\n color: var(--ff-color-text-strong);\n}\n\n.guide-badge {\n display: inline-flex;\n align-self: flex-start;\n\n span {\n display: inline-block;\n padding: 0.25rem 0.75rem;\n background-color: var(--ff-color-accent-surface);\n color: var(--ff-color-accent-hover);\n font-size: 0.875rem;\n border-radius: 5px;\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.streamable-content {\n :deep(h1) {\n font-size: 1.125rem;\n font-weight: 600;\n line-height: 1.4;\n margin: 0.75rem 0 0.25rem;\n }\n\n :deep(h2) {\n font-size: 1.0625rem;\n font-weight: 600;\n line-height: 1.4;\n margin: 0.625rem 0 0.25rem;\n }\n\n :deep(h3) {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.4;\n margin: 0.5rem 0 0.125rem;\n }\n\n :deep(h4),\n :deep(h5),\n :deep(h6) {\n font-size: 0.9375rem;\n font-weight: 600;\n line-height: 1.4;\n margin: 0.375rem 0 0.125rem;\n }\n\n :deep(.ff-checkbox) {\n margin-right: 0.25rem;\n color: var(--ff-color-text-subtle);\n }\n\n :deep(.ff-checkbox--checked) {\n color: var(--ff-color-accent);\n }\n\n :deep(h1:first-child),\n :deep(h2:first-child),\n :deep(h3:first-child) {\n margin-top: 0;\n }\n\n :deep(ul) {\n padding: revert;\n\n li {\n list-style: initial;\n }\n }\n\n :deep(ol) {\n padding: revert;\n\n li {\n list-style: decimal;\n }\n }\n\n :deep(blockquote) {\n margin: 0.5rem 0;\n padding: 0.25rem 0.75rem;\n border-left: 3px solid var(--ff-color-accent);\n color: var(--ff-color-text-subtle);\n }\n\n :deep(.ff-task-list) {\n padding-left: 0;\n\n li {\n list-style: none;\n display: flex;\n align-items: baseline;\n gap: 0.25rem;\n }\n }\n\n :deep(.ff-code-block) {\n margin: 0.75rem 0;\n border: 1px solid var(--ff-color-border);\n border-radius: 0.5rem;\n overflow: hidden;\n font-size: 0.8125rem;\n\n pre {\n margin: 0;\n padding: 1rem;\n overflow-x: auto;\n background: var(--ff-color-bg-surface);\n border-radius: 0;\n white-space: pre;\n overflow-wrap: normal;\n word-break: normal;\n\n code {\n font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n background: transparent;\n border: none;\n padding: 0;\n white-space: pre;\n word-break: normal;\n }\n }\n }\n\n :deep(.ff-code-block--header) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.3rem 1rem;\n background: var(--ff-color-bg-surface-raised);\n border-bottom: 1px solid var(--ff-color-border);\n min-height: 2rem;\n }\n\n :deep(.ff-code-block--lang) {\n font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n font-size: 0.6875rem;\n color: var(--ff-color-text-subtle);\n text-transform: lowercase;\n }\n\n :deep(.ff-code-block--copy) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n background: transparent;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n color: var(--ff-color-accent-text);\n transition: all 0.2s ease;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n pointer-events: none;\n }\n\n &:hover {\n color: var(--ff-color-text-on-brand);\n background-color: var(--ff-color-accent);\n }\n }\n\n :deep(code) {\n padding: 0;\n border: none;\n border-radius: 0;\n }\n\n :deep(.ff-table-block) {\n margin: 0.75rem 0;\n border: 1px solid var(--ff-color-border);\n border-radius: 0.5rem;\n overflow: hidden;\n }\n\n :deep(.ff-table-block--header) {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0.3rem 1rem;\n background: var(--ff-color-bg-surface-raised);\n border-bottom: 1px solid var(--ff-color-border);\n min-height: 2rem;\n }\n\n :deep(.ff-table-block--copy) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n background: transparent;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n color: var(--ff-color-accent-text);\n transition: all 0.2s ease;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n pointer-events: none;\n }\n\n &:hover {\n color: var(--ff-color-text-on-brand);\n background-color: var(--ff-color-accent);\n }\n }\n\n :deep(table) {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.8125rem;\n\n th {\n text-align: left;\n font-weight: 600;\n background: var(--ff-color-bg-surface);\n }\n\n td, th {\n padding: 0.375rem 0.75rem;\n border: 1px solid var(--ff-color-border);\n }\n\n tbody tr:hover {\n background: var(--ff-color-bg-surface);\n }\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.guide-header {\n .guide-title {\n font-size: 1.125rem; // text-lg\n font-weight: 600; // font-semibold\n color: var(--ff-color-text-strong); // text-gray-900\n margin: 0 0 0.5rem 0; // mb-2\n }\n\n .guide-summary {\n color: var(--ff-color-text-muted); // text-gray-700\n margin: 0 0 1rem 0; // mb-4\n line-height: 1.625;\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.message-bubble {\n padding: 0.5rem 1rem;\n word-wrap: break-word;\n overflow-wrap: break-word;\n border-radius: 0.5rem;\n\n &.ai-message {\n justify-content: flex-start;\n background-color: var(--ff-color-bg-surface-raised);\n color: var(--ff-color-text);\n border-bottom-left-radius: 0.125rem;\n }\n\n &.message-bubble--bare {\n padding: 0;\n\n &.ai-message {\n background-color: transparent;\n }\n }\n\n &.human-message {\n background-color: var(--ff-color-accent);\n color: var(--ff-color-text-on-brand);\n border-bottom-right-radius: 0.125rem;\n width: fit-content;\n align-self: end;\n }\n\n &.system-message {\n justify-content: center;\n font-size: 0.875rem;\n line-height: 1.5;\n\n &.system-warning {\n background-color: var(--ff-color-status-warning-bg);\n color: var(--ff-color-status-warning-text);\n border-radius: 0.5rem;\n text-align: left;\n max-width: 100%;\n width: 100%;\n }\n\n &.system-expired {\n background-color: var(--ff-color-status-error-bg);\n color: var(--ff-color-danger-darker);\n }\n }\n}\n\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.section-title {\n font-size: 1rem; // text-base\n font-weight: 500; // font-medium\n color: var(--ff-color-text-strong); // text-gray-900\n margin: 0 0 0.75rem 0; // mb-3\n}\n\n.guide-flows {\n .resources-grid {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.section-title {\n font-size: 1rem; // text-base\n font-weight: 500; // font-medium\n color: var(--ff-color-text-strong); // text-gray-900\n margin: 0 0 0.75rem 0; // mb-3\n}\n\n.guide-steps {\n margin-bottom: 1rem; // mb-4\n\n .steps-list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 0.75rem; // space-y-3\n }\n\n .step-item {\n display: flex;\n align-items: flex-start;\n }\n\n .step-number {\n flex-shrink: 0;\n width: 1.5rem; // w-6\n height: 1.5rem; // h-6\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--ff-color-accent);\n color: var(--ff-color-text-on-brand);\n font-size: 0.875rem; // text-sm\n border-radius: 50%; // rounded-full\n margin-right: 0.75rem; // mr-3\n margin-top: 0.125rem; // mt-0.5\n }\n\n .step-content {\n flex: 1;\n\n .step-title {\n font-size: 1rem;\n font-weight: 500;\n color: var(--ff-color-text-strong);\n margin: 0 0 0.25rem 0;\n }\n\n .step-detail {\n font-size: 0.875rem;\n color: var(--ff-color-text-deep);\n margin: 0.25rem 0 0 0;\n line-height: 1.5;\n }\n }\n}\n\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.issues {\n margin-top: 1.25rem;\n\n h4 {\n font-weight: bold;\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--ff-color-text-deep);\n\n .ff-icon {\n color: var(--ff-color-text-subtle);\n }\n }\n\n ul {\n list-style: disc;\n padding-left: 1.4rem;\n\n li {\n margin-top: .5rem;\n }\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.package-card {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n padding: 0.75rem;\n background-color: var(--ff-color-bg-app);\n border: 1px solid var(--ff-color-border);\n border-radius: 0.5rem;\n text-decoration: none;\n color: var(--ff-color-text-strong);\n transition: all 0.2s ease;\n\n &:hover {\n border-color: var(--ff-color-accent-light);\n background-color: var(--ff-color-bg-surface);\n }\n}\n\n.package-favicon {\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n margin-top: 0.125rem;\n vertical-align: middle;\n margin-right: 0.5rem;\n}\n\n.package-info {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.package-text {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n}\n\n.package-actions {\n flex-shrink: 0;\n}\n\n.package-name {\n font-size: 0.875rem;\n font-weight: 500;\n font-family: monospace;\n color: var(--ff-color-text-strong);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n :deep(.streamable-content) {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n.package-url {\n font-size: 0.75rem;\n color: var(--ff-color-text-subtle);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin: 0;\n\n :deep(.streamable-content) {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.section-title {\n font-size: 1rem; // text-base\n font-weight: 500; // font-medium\n color: var(--ff-color-text-strong); // text-gray-900\n margin: 0 0 0.75rem 0; // mb-3\n}\n\n.guide-packages {\n .packages-list {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n// Render like a normal answer: no card border/background, just the plan content\n// followed by the action buttons. The gap spaces the buttons from the content.\n// The plan content inherits the message bubble's font-size, line-height and\n// colour, so the Markdown renders exactly like any other chat answer.\n.expert-plan {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.plan-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.expert-questions {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.question-block {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.question-head {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.question-title {\n font-size: 1rem;\n font-weight: 500;\n color: var(--ff-color-text-strong);\n margin: 0;\n}\n\n.question-hint {\n font-size: 0.75rem;\n font-style: italic;\n color: var(--ff-color-text-subtle);\n}\n\n.options-multi {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n// The checkbox slot renders both the label and (optionally) its description; stack them.\n.option-label {\n display: block;\n}\n\n.option-description {\n display: block;\n margin-top: 2px;\n font-weight: 400;\n font-size: 0.8125rem;\n line-height: 1.4;\n color: var(--ff-color-text-subtle);\n}\n\n.questions-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.resource-card {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n padding: 0.75rem;\n background-color: var(--ff-color-bg-app);\n border: 1px solid var(--ff-color-border);\n border-radius: 0.5rem;\n text-decoration: none;\n color: var(--ff-color-text-strong);\n transition: all 0.2s ease;\n\n &:hover {\n border-color: var(--ff-color-accent-light);\n background-color: var(--ff-color-bg-surface);\n }\n}\n\n.resource-icon {\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n margin-top: 0.125rem;\n object-fit: contain;\n}\n\n.resource-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n min-width: 0;\n}\n\n.resource-title {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--ff-color-text-strong);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n :deep(.streamable-content) {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n.resource-url {\n font-size: 0.75rem;\n color: var(--ff-color-text-subtle);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n :deep(.streamable-content) {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.section-title {\n font-size: 1rem; // text-base\n font-weight: 500; // font-medium\n color: var(--ff-color-text-strong); // text-gray-900\n margin: 0 0 0.75rem 0; // mb-3\n}\n\n.guide-resources {\n .resources-grid {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.suggestions {\n margin-top: 1.25rem;\n\n h4 {\n font-weight: bold;\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--ff-color-text-deep);\n\n .ff-icon {\n color: var(--ff-color-text-subtle);\n }\n }\n\n ul {\n list-style: disc;\n padding-left: 1.4rem;\n\n li {\n margin-top: .5rem;\n }\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.json-viewer {\n border: 1px solid var(--ff-color-border);\n border-radius: 4px;\n overflow: hidden;\n background: var(--ff-color-bg-surface);\n}\n\n.json-viewer__header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 2px 8px;\n background: var(--ff-color-bg-emphasis);\n border-bottom: 1px solid var(--ff-color-border);\n}\n\n.json-viewer__label {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--ff-color-text-subtle);\n}\n\n.json-viewer__collapse-toggle {\n font-weight: 600;\n color: var(--ff-color-text-subtle);\n}\n\n.json-viewer__caret {\n width: 1rem;\n height: 1rem;\n transition: transform 0.2s ease;\n\n &--open {\n transform: rotate(90deg);\n }\n}\n\n.json-viewer__wrap-toggle {\n margin-left: auto;\n}\n\n.json-viewer__scroll {\n overflow-x: auto;\n}\n\n.json-viewer__content {\n margin: 0;\n padding: 8px;\n font-family: monospace;\n font-size: 0.8125rem;\n white-space: pre;\n}\n\n.json-viewer__scroll--wrap .json-viewer__content {\n white-space: pre-wrap;\n word-break: break-all;\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.expert-tool-approval {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.75rem;\n border: 1px solid var(--ff-color-border);\n border-radius: 6px;\n background: var(--ff-color-bg-surface);\n // Match the \"N tool calls\" strip (ToolCalls.vue) so the card lines up with it.\n max-width: 90%;\n}\n\n.tool-approval-header {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.tool-approval-name {\n font-weight: 600;\n}\n\n.tool-approval-tag {\n font-size: 0.75rem;\n padding: 1px 6px;\n border-radius: 4px;\n &.tag-read { background: var(--ff-color-bg-emphasis); color: var(--ff-color-text-subtle); }\n &.tag-write { background: var(--ff-color-status-info-bg); color: var(--ff-color-status-info-text); }\n &.tag-delete { background: var(--ff-color-status-error-bg); color: var(--ff-color-status-error-text); }\n}\n\n.tool-approval-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n}\n\n.tool-approval-outcome {\n margin: 0;\n font-weight: 600;\n color: var(--ff-color-text-subtle);\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.ff-expert-tool-call--item {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.ff-expert-tool-call--title {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--ff-color-text);\n}\n\n.ff-expert-tool-call--name {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.375rem;\n font-size: 0.75rem;\n color: var(--ff-color-text-subtle);\n font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n}\n\n.ff-expert-tool-call--badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 1.25rem;\n height: 1.125rem;\n padding: 0 0.25rem;\n font-size: 0.5625rem;\n font-weight: 700;\n color: var(--ff-color-text-deep);\n background-color: var(--ff-color-bg-emphasis);\n border-radius: 0.1875rem;\n flex-shrink: 0;\n cursor: help;\n}\n\n.ff-expert-tool-call--details {\n margin-top: 0.5rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.ff-expert-tool-call--section {\n border: 1px solid var(--ff-color-border);\n border-radius: 0.375rem;\n overflow: hidden;\n}\n\n.ff-expert-tool-call--section-header {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.5rem 0.75rem;\n background-color: var(--ff-color-bg-app);\n cursor: pointer;\n user-select: none;\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--ff-color-text-deep);\n\n &:hover {\n background-color: var(--ff-color-bg-surface);\n }\n\n .ff-icon-small {\n width: 0.75rem;\n height: 0.75rem;\n color: var(--ff-color-text-subtle);\n flex-shrink: 0;\n transition: transform 0.2s ease;\n\n &.rotated {\n transform: rotate(90deg);\n }\n }\n}\n\n.ff-expert-tool-call--section-label {\n flex: 1;\n}\n\n.ff-expert-tool-call--section-duration {\n color: var(--ff-color-text-subtle);\n font-weight: 400;\n}\n\n.ff-expert-tool-call--code {\n pre {\n margin: 0;\n padding: 0.75rem;\n background-color: var(--ff-color-bg-surface-raised);\n border-radius: 0.375rem;\n overflow-x: auto;\n\n code {\n font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n font-size: 0.8125rem;\n color: var(--ff-color-text);\n white-space: pre-wrap;\n word-break: break-word;\n border: none;\n background: transparent;\n padding: 0;\n }\n }\n\n // When inside a section, remove border-radius top and add border\n .ff-expert-tool-call--section & {\n border-top: 1px solid var(--ff-color-border);\n\n pre {\n border-radius: 0;\n }\n }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.ff-expert-tool-call {\n background-color: var(--ff-color-bg-surface);\n border: 1px solid va