@flowfuse/flowfuse/frontend/dist/app/650.b89ddd8976a9056df91f.css.map

An open source low-code development platform

{"version":3,"file":"650.b89ddd8976a9056df91f.css","mappings":"AAGI,mCACI,eAEA,+CACI,gBAGJ,oDACI,yBACA,kBACA,qBACA,eCXD,CDYC,cACA,kBAGI,8DACI,cACA,cACA,eAIR,yEACI,yBAGJ,qHAEI,aAGJ,6DACI,WACA,mBAKJ,sKAEI,kBCYA,CDXA,oBCWA,CDVA,UC3CL,CD8CS,0LACI,UC/Cb,CDuDX,kBACI,yBACA,cACA,iBACA,gBACA,sBACA,qBACA,iBACA,kBACA,c;AEjEJ,uBACI,yBACA,kBACA,mBACA,aACA,QACA,mBACA,eACA,2BACA,mBAEA,8BACI,kBDqCQ,CCpCR,yBAEA,yCACI,kBDmCI,CC/BZ,qCACI,aACA,mBACA,iBAGJ,kCACI,UACA,mBACA,kBD2CQ,CCxCZ,6BACI,mCACA,mBACA,gBCjBM,CDkBN,aACA,Q;AEnCA,sCACI,aHKE,CGJF,gBACA,gBDYE,C;AEfN,sCACI,aJKE,CIJF,gBACA,gBFYE,C;AGhBV,8BACI,eAEA,0CACI,gBAGJ,+CACI,yBACA,kBACA,qBACA,eLXD,CKYC,cACA,kBAGI,yDACI,cACA,cACA,eAIR,oEACI,yBAGJ,oEACI,aACA,yBACA,cAGJ,wDACI,WACA,mBAKJ,4JAEI,kBLWA,CKVA,oBLUA,CKTA,UL5CL,CK+CS,gLACI,ULhDb,CKwDX,0CACI,yB;AC1DJ,6CACI,aACA,2BACA,cACA,OAEA,8DACI,OACA,gBACA,qBACA,aACA,U;ACXR,kCACI,aACA,sBACA,MACA,aACA,6BACA,gBACA,cACA,kBACA,iBACA,gBAGJ,iCACI,aACA,8BACA,mBACA,oBAGJ,gCACI,aACA,UAGJ,wBACI,qBACA,qBACA,kBACA,eACA,2BACA,+BAEA,iCACI,WACA,mBAIR,iCACI,sBACA,cACA,qBACA,qBACA,kBAEA,sDACI,yBAIR,2BACI,wBPEY,CODZ,WACA,qBACA,kBACA,qBAEA,gDACI,wBPJQ,COQhB,2BACI,sBACA,cACA,qBACA,aACA,mBACA,UACA,kBACA,qBAEA,mCACI,WACA,aACA,cACA,yBACA,sBAGJ,iCACI,yBAIR,gCACI,OACA,aACA,sBACA,yBACA,oBACA,iCAEA,wCACI,oBP1CQ,CO6CZ,4CACI,OACA,WACA,aACA,sBACA,gBACA,YACA,aACA,kBACA,gBACA,cACA,YACA,oBACA,gBAEA,kDACI,aAGJ,qDACI,mBACA,yBACA,cAGJ,yDACI,cAIR,yCACI,cACA,aACA,8BACA,WAEA,gDACI,aACA,yB;ACxIZ,oCACI,aACA,sBACA,mBACA,WACA,aAGJ,+BACI,aACA,UACA,mBAGJ,8BACI,UACA,WACA,kBACA,wBRmCY,CQlCZ,6DAEA,2CACI,uBAGJ,2CACI,uBAIR,+BACI,YACI,qBACA,WAEJ,IACI,mBACA,WAIR,kCACI,kBACA,aRlCU,CQmCV,kBACA,uCAGJ,4BACI,KACI,UACA,2BAEJ,GACI,UACA,yB;ACvDR,gCACI,eACA,gBACA,cAGJ,8BACI,oBACA,sBAEA,mCACI,qBACA,sBACA,wBToCQ,CSnCR,aTyCQ,CSxCR,kBACA,kB;ACfJ,wCACI,eAEA,2CACI,mBAIR,oDACI,gBACA,yBACA,oBACA,gBACA,mBAEA,wDACI,SACA,aACA,gBACA,kBVjBC,CUkBD,gBACA,gBACA,qBACA,kBAEA,6DACI,6FACA,yBACA,YACA,UACA,gBACA,kBAKZ,4DACI,aACA,mBACA,8BACA,mBACA,kBVtCM,CUuCN,gCACA,gBAGJ,0DACI,6FACA,mBACA,aV1CM,CU2CN,yBAGJ,0DACI,oBACA,mBACA,uBACA,YACA,yBACA,YACA,kBACA,eACA,aVPQ,CUQR,wBAEA,8DACI,aACA,cACA,oBAGJ,gEACI,UVxED,CUyEC,wBVpBI,CUwBZ,0CACI,UACA,YACA,gBAGJ,2CACI,yBAEA,oDACI,6FACA,6BAGJ,4FACI,iB;AC5FR,4CACI,mBACA,gBACA,cACA,mBAGJ,8CACI,cACA,kBACA,kB;ACXR,iCACI,mBACA,qBACA,yBACA,oBAEA,4CACI,2BACA,wBZJM,CYKN,cACA,kCAGJ,+CACI,wBZwCQ,CYvCR,WACA,mCACA,kBACA,eAGJ,gDACI,uBACA,kBACA,gBAEA,+DACI,yBACA,cACA,oBACA,gBACA,eACA,WAGJ,+DACI,yBACA,c;;ACrCZ,gCACI,eACA,gBACA,cACA,oBAIA,8CACI,aACA,sBACA,U;ACXR,gCACI,eACA,gBACA,cACA,oBAGJ,8BACI,mBAEA,0CACI,gBACA,UACA,SACA,aACA,sBACA,WAGJ,yCACI,aACA,uBAGJ,2CACI,cACA,aACA,cACA,aACA,mBACA,uBACA,wBduBQ,CctBR,WACA,kBACA,kBACA,oBACA,mBAGJ,4CACI,OAEA,wDACI,eACA,gBACA,adjCE,CckCF,oBAGJ,yDACI,kBACA,ad1CE,Cc2CF,oBACA,gB;ACrDZ,yBACI,mBAEA,4BACI,iBACA,aACA,mBACA,QACA,afCM,CeCN,qCACI,afHE,CeOV,4BACI,gBACA,oBAEA,+BACI,iB;ACpBZ,+BACI,aACA,uBACA,UACA,eACA,sBACA,yBACA,oBACA,qBACA,ahBGU,CgBFV,wBAEA,qCACI,oBhBsCQ,CgBrCR,wBhBXK,CgBeb,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,ahBvCU,CgBwCV,gBACA,uBACA,mBAEA,mDACI,gBACA,uBACA,mBAIR,8BACI,iBACA,ahBzDU,CgB0DV,gBACA,uBACA,mBACA,SAEA,kDACI,gBACA,uBACA,mB;AC1ER,gCACI,eACA,gBACA,cACA,oBAIA,gDACI,aACA,sBACA,U;ACXR,gCACI,aACA,uBACA,UACA,eACA,sBACA,yBACA,oBACA,qBACA,alBGU,CkBFV,wBAEA,sCACI,oBlBsCQ,CkBrCR,wBlBXK,CkBeb,gCACI,cACA,WACA,YACA,mBACA,mBAGJ,gCACI,OACA,aACA,sBACA,WACA,YAGJ,iCACI,kBACA,gBACA,alBzBU,CkB0BV,gBACA,uBACA,mBAEA,qDACI,gBACA,uBACA,mBAIR,+BACI,iBACA,alB3CU,CkB4CV,SACA,gBACA,uBACA,mBAEA,mDACI,gBACA,uBACA,mB;AC5DR,gCACI,eACA,gBACA,cACA,oBAIA,kDACI,aACA,sBACA,U;ACXR,8BACI,mBAEA,iCACI,iBACA,aACA,mBACA,QACA,apBCM,CoBCN,0CACI,apBHE,CoBOV,iCACI,gBACA,oBAEA,oCACI,iB;ACtBZ;EACE,cAAc;EACd,gBAAgB;EAChB;AACF;AACA;EACE;AACF;AACA;;;;;;;;;CASC;AACD;EACE,cAAc;EACd;AACF;AACA;;;;;;;EAOE,gCAAgC;EAChC;AACF;AACA;;;;EAIE,+BAA+B;EAC/B;AACF;AACA;;;;;;;;;;EAUE,iCAAiC;EACjC;AACF;AACA;;;EAGE,+BAA+B;EAC/B;AACF;AACA;;EAEE,iCAAiC;EACjC;AACF;AACA;;;EAGE,gCAAgC;EAChC;AACF;AACA;;;;EAIE,mCAAmC;EACnC;AACF;AACA;EACE,gDAAgD;EAChD;AACF;AACA;EACE,uCAAuC;EACvC,cAAc;EACd;AACF;AACA;EACE,oCAAoC;EACpC;AACF;AACA;EACE,sCAAsC;EACtC,cAAc;EACd;AACF;AACA;EACE,oCAAoC;EACpC,cAAc;EACd;AACF;AACA;EACE,wCAAwC;EACxC,cAAc;EACd;AACF;AACA;EACE,uCAAuC;EACvC,cAAc;EACd;AACF;AACA;;;;;;EAME,sBAAsB;;AAExB,C;ACjHA,4CACI,aACA,sBACA,WAGJ,6CACI,kBACA,gBACA,cAGJ,4CACI,aACA,mBACA,8BACA,YACA,iBACA,atBZU,CsBaV,6FAGJ,6CACI,oBACA,mBACA,uBACA,kBACA,gBACA,iBACA,mBACA,gBACA,atBxBU,CsByBV,wBtB7BU,CsB8BV,uBACA,cACA,YAGJ,+CACI,iBACA,aACA,sBACA,UAGJ,+CACI,yBACA,sBACA,gBAGJ,sDACI,aACA,mBACA,YACA,qBACA,sBACA,eACA,iBACA,iBACA,gBACA,atBtDU,CsBwDV,4DACI,wBtB/DK,CsBkET,qEACI,aACA,cACA,atBjEM,CsBkEN,cACA,8BAEA,6EACI,wBAKZ,qDACI,OAGJ,wDACI,atBhFU,CsBiFV,gBAIA,gDACI,SACA,eACA,wBtB3FM,CsB4FN,sBACA,gBAEA,qDACI,6FACA,mBACA,atB3FE,CsB4FF,qBACA,sBACA,YACA,yBACA,UAKR,0EACI,6BAEA,8EACI,gB;ACpHZ,sCACI,wBvBES,CuBDT,yBACA,kCACA,gBACA,cAGJ,8CACI,aACA,mBACA,oBACA,UACA,sBACA,eACA,iBAEA,oDACI,wBvBfK,CuBkBT,uDACI,WACA,YACA,avBhBM,CuBiBN,cACA,8BAEA,+DACI,wBAKZ,6CACI,eACA,gBACA,avB1BU,CuB2BV,OAGJ,gDACI,eACA,avBnCU,CuBsCd,4CACI,oBACA,6BACA,oBACA,aACA,sBACA,WACA,+CACA,gBACA,+BAEA,wDACI,gD;AC1DR,kCACI,oB;ACDJ,yCACI,kBACA,SACA,SACA,2BACA,UACA,gBACA,kBACA,oC;ACPJ,8BACI,yBACA,oBACA,qBACA,oBAEA,yCACI,cACA,kBACA,SACA,gBAGJ,yCACI,cACA,0BAEA,+CACI,cAIR,0CACI,qBACA,yBACA,WACA,kBACA,gBACA,wBACA,qBACA,yBACA,sBACA,YACA,wB;AClCR,gCACI,yBACA,mBACA,gBACA,mBACA,6BAEA,oDACI,cACA,kBACA,SACA,gBAGJ,sDACI,gBACA,aACA,mBACA,8BAGJ,oDACI,aACA,gBACA,kBACA,iEACA,uBAGJ,qDACI,qBACA,yBACA,WACA,gBACA,qBACA,yBACA,sBACA,eACA,wBACA,sBACA,iBAIA,6DACI,wB3BvBC,C2BwBD,a3B3CC,C2B+CT,sLAGI,iBACA,mB;ACtDR,4BACI,aACA,sBACA,YACA,gBACA,gBACA,kBAGJ,qCACI,OACA,gBACA,aACA,uBACA,aAGA,wDACI,UAGJ,8DACI,yBAGJ,8DACI,wB5BpBM,C4BqBN,kBAEA,oEACI,wB5BvBE,C4B4Bd,8BACI,aACA,sBACA,mBACA,uBACA,YACA,kBACA,aACA,a5BlCU,C4BoCV,gDACI,WACA,YACA,mBACA,a5BGQ,C4BDR,oDACI,WACA,YAIR,iCACI,iBACA,gBACA,a5BhDM,C4BiDN,mBAGJ,gCACI,eACA,SACA,gBAIR,gCACI,WAGJ,uDACI,iB","sources":["webpack://@flowfuse/flowfuse/./frontend/src/components/expert/components/CapabilitiesSelector.vue","webpack://@flowfuse/flowfuse/./frontend/src/ui-components/stylesheets/ff-colors.scss","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/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/./node_modules/highlight.js/styles/github.css","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"],"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 #c7d2fe; // indigo-300 to match other buttons\n            border-radius: 5px;\n            padding: 0.25rem 0.50rem;\n            background: $ff-white;\n            color: #1f2937; // 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: #f9fafb; // 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: $ff-indigo-600;\n                border-color: $ff-indigo-600;\n                color: $ff-white;\n\n                .icon {\n                    svg {\n                        color: $ff-white;\n                    }\n                }\n            }\n        }\n    }\n}\n\n.tool-count-badge {\n    background-color: #e0e7ff; // indigo-100\n    color: #4338ca; // 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","// Raw Color Scheme\n\n$ff-black: black;\n$ff-white: white;\n\n$ff-grey-50: #F9FAFB;\n$ff-grey-100: #F3F4F6;\n$ff-grey-200: #E5E7EB;\n$ff-grey-300: #D1D5DB;\n$ff-grey-400: #9CA3AF;\n$ff-grey-500: #6B7280;\n$ff-grey-600: #4B5563;\n$ff-grey-700: #374151;\n$ff-grey-800: #1F2937;\n$ff-grey-900: #111827;\n\n$ff-red-50: #FFEBEB;\n$ff-red-100: #FFC6C6;\n$ff-red-200: #FF8D8D;\n$ff-red-300: #F16F6F;\n$ff-red-400: #ED4E4E;\n$ff-red-500: #D12B2B;\n$ff-red-500B: #D82525;\n$ff-red-600: #BC3838;\n$ff-red-700: #AB1818;\n$ff-red-800: #8F0001;\n$ff-red-900: #760000;\n\n$ff-teal-50: #E4FBFC;\n$ff-teal-100: #C4F3F5;\n$ff-teal-200: #B2EBEE;\n$ff-teal-300: #8CE2E7;\n$ff-teal-400: #74D4D9;\n$ff-teal-500: #50C3C9;\n$ff-teal-600: #35AAB0;\n$ff-teal-700: #31959A;\n$ff-teal-800: #397B7E;\n$ff-teal-900: #406466;\n\n$ff-blue-50: #EFF6FF;\n$ff-blue-100: #DBEAFE;\n$ff-blue-200: #BFDBFE;\n$ff-blue-300: #93C5FD;\n$ff-blue-400: #60A5FA;\n$ff-blue-500: #3B82F6;\n$ff-blue-600: #2563EB;\n$ff-blue-700: #1D4ED8;\n$ff-blue-800: #1E40AF;\n$ff-blue-900: #1E3A8A;\n\n$ff-indigo-50: #EEF2FF;\n$ff-indigo-100: #E0E7FF;\n$ff-indigo-200: #C7D2FE;\n$ff-indigo-300: #A5B4FC;\n$ff-indigo-400: #818CF8;\n$ff-indigo-500: #6366F1;\n$ff-indigo-600: #4F46E5;\n$ff-indigo-700: #4338CA;\n$ff-indigo-800: #3730A3;\n$ff-indigo-900: #312E81;\n\n$ff-green-50: #ECFDF5;\n$ff-green-100: #D1FAE5;\n$ff-green-200: #A7F3D0;\n$ff-green-300: #6EE7B7;\n$ff-green-400: #34D399;\n$ff-green-500: #10B981;\n$ff-green-600: #059669;\n$ff-green-700: #047857;\n$ff-green-800: #065F46;\n$ff-green-900: #064E3B;\n\n$ff-yellow-10: #FFFCF5;\n$ff-yellow-50: #FFFBEB;\n$ff-yellow-100: #FEF3C7;\n$ff-yellow-200: #FDE68A;\n$ff-yellow-300: #FCD34D;\n$ff-yellow-400: #FBBF24;\n$ff-yellow-500: #F59E0B;\n$ff-yellow-600: #D97706;\n$ff-yellow-700: #B45309;\n$ff-yellow-800: #92400E;\n$ff-yellow-900: #78350F;\n\n// Theme Colors\n\n$ff-color--action: $ff-indigo-800;\n$ff-color--highlight: $ff-indigo-600;\n$ff-color--highlight--light: $ff-grey-100;\n$ff-color--danger: $ff-red-500;\n$ff-color--danger--dark: $ff-red-600;\n$ff-color--disabled: $ff-grey-400;\n$ff-color--border: $ff-grey-200;\n$ff-color--context-menu: $ff-white;\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.chip {\n    border: 1px solid $ff-grey-200;\n    border-radius: 5px;\n    background: $ff-grey-50;\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    &.active {\n        background: $ff-indigo-100;\n        border: 1px solid $ff-indigo-300;\n\n        .separator {\n            background: $ff-indigo-300;\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: $ff-yellow-100;\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: $ff-grey-500;\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: $ff-grey-500;\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 #c7d2fe; // indigo-300 to match other buttons\n            border-radius: 5px;\n            padding: 0.25rem 0.50rem;\n            background: $ff-white;\n            color: #1f2937; // 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: #f9fafb; // gray-50\n            }\n\n            &:focus:not(:disabled) {\n                outline: none;\n                background-color: #e0e7ff; // indigo-100\n                color: #4338ca; // 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: $ff-indigo-600;\n                border-color: $ff-indigo-600;\n                color: $ff-white;\n\n                .icon {\n                    svg {\n                        color: $ff-white;\n                    }\n                }\n            }\n        }\n    }\n}\n\n.context-selector.active .relative button {\n    background-color: #e0e7ff; // 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 #E5E7EB; // border-gray-200\n    background: white;\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}\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: white;\n    color: inherit;\n    border-color: #C7D2FE; // indigo-300\n    padding: 0.25rem 0.50rem;\n    border-radius: 5px;\n\n    &:hover:not(:disabled) {\n        background-color: #F9FAFB; // gray-50\n    }\n}\n\n.btn-send {\n    background-color: $ff-indigo-600;\n    color: white;\n    border-color: $ff-indigo-600;\n    border-radius: 5px;\n    padding: 0.25rem 0.50rem;\n\n    &:hover:not(:disabled) {\n        background-color: $ff-indigo-700;\n    }\n}\n\n.btn-stop {\n    background-color: white;\n    color: inherit;\n    border-color: #C7D2FE; // 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: #1F2937; // gray-800\n        border-radius: 0.125rem; // rounded-sm\n    }\n\n    &:hover {\n        background-color: #F9FAFB; // gray-50\n    }\n}\n\n.input-wrapper {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    border: 2px solid #D1D5DB; // 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: $ff-indigo-500;\n    }\n\n    .chat-input {\n        flex: 1;\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: #111827; // text-gray-900\n        resize: none;\n        font-family: inherit;\n        background: white;\n\n        &:focus {\n            outline: none;\n        }\n\n        &:disabled {\n            cursor: not-allowed;\n            background-color: #F9FAFB; // bg-gray-50\n            color: #6B7280; // text-gray-500\n        }\n\n        &::placeholder {\n            color: #9CA3AF; // 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: $ff-indigo-500;\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: $ff-grey-600;\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: #111827;\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: $ff-indigo-100;\n        color: $ff-indigo-700;\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(ul) {\n        padding: revert;\n\n        li {\n            list-style: initial;\n        }\n    }\n\n    :deep(.ff-code-block) {\n        margin: 0.75rem 0;\n        border: 1px solid $ff-grey-200;\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: $ff-grey-50;\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: $ff-grey-100;\n        border-bottom: 1px solid $ff-grey-200;\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: $ff-grey-500;\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: $ff-color--action;\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: $ff-white;\n            background-color: $ff-color--highlight;\n        }\n    }\n\n    :deep(code) {\n        padding: 0;\n        border: none;\n        border-radius: 0;\n    }\n\n    :deep(table) {\n        border-collapse: collapse; /* removes double borders */\n\n        tr + tr td {\n            font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n            border-top: 1px solid $ff-grey-200;\n        }\n\n        td, th {\n            padding: 5px 10px;\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: #111827; // text-gray-900\n        margin: 0 0 0.5rem 0; // mb-2\n    }\n\n    .guide-summary {\n        color: #374151; // 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: $ff-grey-100;\n        color: #1F2937;\n        border-bottom-left-radius: 0.125rem;\n    }\n\n    &.human-message {\n        background-color: $ff-indigo-600;\n        color: white;\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: #FEF3C7;\n            color: #92400E;\n            border-radius: 0.5rem;\n            text-align: left;\n            max-width: 100%;\n            width: 100%;\n        }\n\n        &.system-expired {\n            background-color: #FEE2E2; // red-100\n            color: #991B1B; // red-900\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: #111827; // 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: #111827; // 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: $ff-indigo-600;\n        color: white;\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: $ff-grey-900;\n            margin: 0 0 0.25rem 0;\n        }\n\n        .step-detail {\n            font-size: 0.875rem;\n            color: $ff-grey-600;\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: $ff-grey-600;\n\n        .ff-icon {\n            color: $ff-grey-500;\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: white;\n    border: 1px solid $ff-grey-200;\n    border-radius: 0.5rem;\n    text-decoration: none;\n    color: $ff-grey-900;\n    transition: all 0.2s ease;\n\n    &:hover {\n        border-color: $ff-indigo-300;\n        background-color: $ff-grey-50;\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: $ff-grey-900;\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: $ff-grey-500;\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: #111827; // 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.resource-card {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n    padding: 0.75rem;\n    background-color: white;\n    border: 1px solid $ff-grey-200;\n    border-radius: 0.5rem;\n    text-decoration: none;\n    color: $ff-grey-900;\n    transition: all 0.2s ease;\n\n    &:hover {\n        border-color: $ff-indigo-300;\n        background-color: $ff-grey-50;\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: $ff-grey-900;\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: $ff-grey-500;\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: #111827; // 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: $ff-grey-600;\n\n        .ff-icon {\n            color: $ff-grey-500;\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","pre code.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 1em\n}\ncode.hljs {\n  padding: 3px 5px\n}\n/*!\n  Theme: GitHub\n  Description: Light theme as seen on github.com\n  Author: github.com\n  Maintainer: @Hirse\n  Updated: 2021-05-15\n\n  Outdated base version: https://github.com/primer/github-syntax-light\n  Current colors taken from GitHub's CSS\n*/\n.hljs {\n  color: #24292e;\n  background: #ffffff\n}\n.hljs-doctag,\n.hljs-keyword,\n.hljs-meta .hljs-keyword,\n.hljs-template-tag,\n.hljs-template-variable,\n.hljs-type,\n.hljs-variable.language_ {\n  /* prettylights-syntax-keyword */\n  color: #d73a49\n}\n.hljs-title,\n.hljs-title.class_,\n.hljs-title.class_.inherited__,\n.hljs-title.function_ {\n  /* prettylights-syntax-entity */\n  color: #6f42c1\n}\n.hljs-attr,\n.hljs-attribute,\n.hljs-literal,\n.hljs-meta,\n.hljs-number,\n.hljs-operator,\n.hljs-variable,\n.hljs-selector-attr,\n.hljs-selector-class,\n.hljs-selector-id {\n  /* prettylights-syntax-constant */\n  color: #005cc5\n}\n.hljs-regexp,\n.hljs-string,\n.hljs-meta .hljs-string {\n  /* prettylights-syntax-string */\n  color: #032f62\n}\n.hljs-built_in,\n.hljs-symbol {\n  /* prettylights-syntax-variable */\n  color: #e36209\n}\n.hljs-comment,\n.hljs-code,\n.hljs-formula {\n  /* prettylights-syntax-comment */\n  color: #6a737d\n}\n.hljs-name,\n.hljs-quote,\n.hljs-selector-tag,\n.hljs-selector-pseudo {\n  /* prettylights-syntax-entity-tag */\n  color: #22863a\n}\n.hljs-subst {\n  /* prettylights-syntax-storage-modifier-import */\n  color: #24292e\n}\n.hljs-section {\n  /* prettylights-syntax-markup-heading */\n  color: #005cc5;\n  font-weight: bold\n}\n.hljs-bullet {\n  /* prettylights-syntax-markup-list */\n  color: #735c0f\n}\n.hljs-emphasis {\n  /* prettylights-syntax-markup-italic */\n  color: #24292e;\n  font-style: italic\n}\n.hljs-strong {\n  /* prettylights-syntax-markup-bold */\n  color: #24292e;\n  font-weight: bold\n}\n.hljs-addition {\n  /* prettylights-syntax-markup-inserted */\n  color: #22863a;\n  background-color: #f0fff4\n}\n.hljs-deletion {\n  /* prettylights-syntax-markup-deleted */\n  color: #b31d28;\n  background-color: #ffeef0\n}\n.hljs-char.escape_,\n.hljs-link,\n.hljs-params,\n.hljs-property,\n.hljs-punctuation,\n.hljs-tag {\n  /* purposely ignored */\n  \n}","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n@import 'highlight.js/styles/github.css';\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: $ff-grey-800;\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: $ff-grey-500;\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: $ff-grey-600;\n    background-color: $ff-grey-200;\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 $ff-grey-200;\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: white;\n    cursor: pointer;\n    user-select: none;\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: $ff-grey-600;\n\n    &:hover {\n        background-color: $ff-grey-50;\n    }\n\n    .ff-icon-small {\n        width: 0.75rem;\n        height: 0.75rem;\n        color: $ff-grey-400;\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: $ff-grey-400;\n    font-weight: 400;\n}\n\n.ff-expert-tool-call--code {\n    pre {\n        margin: 0;\n        padding: 0.75rem;\n        background-color: $ff-grey-100;\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: $ff-grey-800;\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 $ff-grey-200;\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: $ff-grey-50;\n    border: 1px solid $ff-grey-200;\n    border-radius: 0.5rem 0.5rem 0.5rem 0;\n    overflow: hidden;\n    max-width: 90%;\n}\n\n.ff-expert-tool-call--header {\n    display: flex;\n    align-items: center;\n    padding: 0.75rem 1rem;\n    gap: 0.5rem;\n    background-color: white;\n    cursor: pointer;\n    user-select: none;\n\n    &:hover {\n        background-color: $ff-grey-50;\n    }\n\n    .ff-icon {\n        width: 1rem;\n        height: 1rem;\n        color: $ff-grey-500;\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--count {\n    font-size: 1rem;\n    font-weight: 500;\n    color: $ff-grey-800;\n    flex: 1;\n}\n\n.ff-expert-tool-call--duration {\n    font-size: 1rem;\n    color: $ff-grey-500;\n}\n\n.ff-expert-tool-call--body {\n    --item-height: 3rem;\n    border-top: 1px solid $ff-grey-200;\n    padding: 0.75rem 1rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    max-height: calc(var(--item-height) * 2 + 1.5rem);\n    overflow-y: auto;\n    transition: max-height 0.2s ease;\n\n    &.is-expanded {\n        max-height: calc(var(--item-height) * 15 + 1.5rem);\n    }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.message-wrapper {\n    margin-bottom: 0.5rem;\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.mode-switcher-floating {\n    position: absolute;\n    top: 1rem;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 1;\n    background: white;\n    border-radius: 8px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n\n.info-banner {\n    background-color: #eef2ff; // indigo-100\n    border-radius: 0.5rem;\n    margin-bottom: 1.5rem;\n    padding: 0.75rem 1rem;\n\n    .info-text {\n        color: #4338ca; // indigo-700\n        font-size: 0.875rem;\n        margin: 0;\n        line-height: 1.5;\n    }\n\n    .info-link {\n        color: inherit;\n        text-decoration: underline;\n\n        &:hover {\n            color: #3730a3; // indigo-800\n        }\n    }\n\n    .beta-badge {\n        display: inline-block;\n        background-color: #818cf8; // indigo-400\n        color: white;\n        font-size: 0.625rem;\n        font-weight: 600;\n        padding: 0.125rem 0.375rem;\n        border-radius: 0.25rem;\n        text-transform: uppercase;\n        letter-spacing: 0.025em;\n        cursor: help;\n        vertical-align: text-top;\n    }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.update-banner {\n    background-color: #eef2ff; // indigo-100\n    margin-bottom: 0rem;\n    border-radius: 0;\n    padding: 0.5rem 1rem;\n    border-top: 1px solid #E5E7EB;\n\n    .update-banner-text {\n        color: #4338ca; // indigo-700\n        font-size: 0.875rem;\n        margin: 0;\n        line-height: 1.5;\n    }\n\n    .update-banner-header {\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .update-banner-body {\n        max-height: 0;\n        overflow: hidden;\n        visibility: hidden;\n        transition: max-height 0.6s ease-in-out, visibility 0.6s ease-in-out;\n        transition-delay: 250ms; // avoid showing immediately (minimise false expansion on mousing around the chat)\n    }\n\n    .update-banner-badge {\n        display: inline-block;\n        background-color: #818cf8; // indigo-400\n        color: white;\n        font-weight: 600;\n        border-radius: 0.25rem;\n        text-transform: uppercase;\n        letter-spacing: 0.025em;\n        cursor: default;\n        vertical-align: text-top;\n        padding: 0.125rem 0.5rem;\n        font-size: 0.75rem;\n    }\n\n    &.warning {\n        .update-banner-badge {\n            background-color: $ff-red-700;\n            color: $ff-grey-50;\n        }\n    }\n\n    &:hover .update-banner-body,\n    &:focus-within .update-banner-body,\n    &:active .update-banner-body {\n        max-height: 500px;\n        visibility: visible;\n    }\n}\n","@use \"@/ui-components/stylesheets/ff-colors.scss\" as *;@use \"@/ui-components/stylesheets/ff-utility.scss\" as *;\n\n.ff-expert {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    overflow: hidden; // Prevent this container from scrolling\n    position: relative;\n}\n\n.messages-container {\n    flex: 1;\n    overflow-y: auto;\n    padding: 1rem; // p-4\n    scroll-behavior: smooth;\n    min-height: 0; // Important for flex child overflow\n\n    // Custom scrollbar styling\n    &::-webkit-scrollbar {\n        width: 8px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background-color: $ff-grey-300;\n        border-radius: 4px;\n\n        &:hover {\n            background-color: $ff-grey-400;\n        }\n    }\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    text-align: center;\n    padding: 2rem;\n    color: $ff-grey-600;\n\n    .empty-state-icon {\n        width: 4rem;\n        height: 4rem;\n        margin-bottom: 1rem;\n        color: $ff-indigo-400;\n\n        svg {\n            width: 100%;\n            height: 100%;\n        }\n    }\n\n    h3 {\n        font-size: 1.5rem;\n        font-weight: 600;\n        color: $ff-grey-900;\n        margin: 0 0 0.5rem 0;\n    }\n\n    p {\n        font-size: 1rem;\n        margin: 0;\n        max-width: 400px;\n    }\n}\n\n.scroll-anchor {\n    height: 1px;\n}\n\n.messages-container.has-mode-switcher {\n    padding-top: 4rem; // Extra padding to account for floating mode switcher\n}\n"],"names":[],"sourceRoot":""}