/* Primary Modern Scrollbar - Based on Chat Interface Standard */ .modern-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, 0.3) transparent; padding-right: 4px; } .modern-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .modern-scrollbar::-webkit-scrollbar-track { background: transparent; border-radius: 4px; } .modern-scrollbar::-webkit-scrollbar-corner { background: transparent; } .modern-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, 0.2); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; min-height: 20px; transition: all 0.2s ease; } .modern-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(128, 128, 128, 0.5); border: 1px solid transparent; background-clip: padding-box; border-radius: 4px; } /* Dark theme specific scrollbar styling */ @media (prefers-color-scheme: dark) { .modern-scrollbar { scrollbar-color: rgba(200, 200, 200, 0.4) transparent; } .modern-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(200, 200, 200, 0.3); } .modern-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(200, 200, 200, 0.6); border: 1px solid transparent; } } /* Textarea-specific styling to maintain consistency */ textarea.modern-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } textarea.modern-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, 0.2); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; transition: all 0.2s ease; } textarea.modern-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(128, 128, 128, 0.5); border: 1px solid transparent; background-clip: padding-box; border-radius: 4px; } /* Dark theme for textarea */ @media (prefers-color-scheme: dark) { textarea.modern-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(200, 200, 200, 0.3); } textarea.modern-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(200, 200, 200, 0.6); border: 1px solid transparent; } } .copy-tick { display: block; } .tick-check { stroke: currentColor; fill: none; stroke-dasharray: 36; stroke-dashoffset: 36; animation: tick-draw 420ms ease-out forwards, tick-pop 400ms ease-out; } @keyframes tick-pop { 0% { opacity: 0; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.06); } 60% { transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } } @keyframes tick-draw { 0% { stroke-dashoffset: 36; } 100% { stroke-dashoffset: 0; } } /** * prism.js default theme for JavaScript, CSS and HTML * Based on dabblet (http://dabblet.com) * @author Lea Verou */ code[class*="language-"], pre[class*="language-"] { color: black; background: none; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { text-shadow: none; background: #b3d4fc; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { text-shadow: none; background: #b3d4fc; } @media print { code[class*="language-"], pre[class*="language-"] { text-shadow: none; } } /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #f5f2f0; } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } .token.punctuation { color: #999; } .token.namespace { opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #905; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #9a6e3a; /* This background color was intended by the author of this theme. */ background: hsla(0, 0%, 100%, .5); } .token.atrule, .token.attr-value, .token.keyword { color: #07a; } .token.function, .token.class-name { color: #DD4A68; } .token.regex, .token.important, .token.variable { color: #e90; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } /* Prism theme overrides to integrate with Quible theme variables */ /* Make code background inherit the surrounding card background */ pre[class*="language-"], code[class*="language-"] { background: transparent !important; color: var(--text-color) !important; text-shadow: none !important; } /* Fix comments styling and ensure no pill-like backgrounds leak in */ .token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(var(--text-color-rgb), 0.55) !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Ensure inline code tokens never overlay */ code[class*="language-"] .token { background: transparent !important; } /* Improve selection visibility inside code blocks */ pre[class*="language-"] ::selection, pre[class*="language-"] ::-moz-selection { background: rgba(var(--text-color-rgb), 0.2) !important; } /* Keep line-height consistent to avoid overlap */ pre[class*="language-"] { line-height: 1.5 !important; } /* Enhanced JSON syntax highlighting ONLY for ConformML JSON viewer in dark mode */ [data-theme="dark"] .conformml-json-viewer .token.property { color: #79C0FF !important; /* Bright blue - GitHub dark theme inspired */ } [data-theme="dark"] .conformml-json-viewer .token.string { color: #A5D6A7 !important; /* Bright green */ } [data-theme="dark"] .conformml-json-viewer .token.number { color: #79C0FF !important; /* Bright blue for numbers */ } [data-theme="dark"] .conformml-json-viewer .token.boolean, [data-theme="dark"] .conformml-json-viewer .token.null { color: #79C0FF !important; /* Bright blue */ } [data-theme="dark"] .conformml-json-viewer .token.punctuation { color: #C9D1D9 !important; /* Light gray for readability */ } [data-theme="dark"] .conformml-json-viewer .token.operator { color: #FF7B72 !important; /* Coral for operators */ } .model-viewer-container { position: relative; overflow: hidden; border-radius: 6px; transition: height 0.1s ease-out; } .model-viewer { width: 100%; height: 100%; background-color: #ffffff; } /* Resize handle styles */ .model-viewer-resize-handle { position: absolute; bottom: 0; left: 0; right: 0; height: 8px; cursor: ns-resize; background-color: transparent; z-index: 2; } .model-viewer-resize-handle::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background-color: var(--border-color, #e2e8f0); border-radius: 2px; transition: background-color 0.2s; } .model-viewer-resize-handle:hover::after, .model-viewer-resize-handle:active::after { background-color: var(--text-color, #333); } /* Loading overlay */ .model-viewer-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; z-index: 2; } .model-viewer-loading-content { text-align: center; padding: 20px; background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .model-viewer-loading-spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top: 4px solid var(--primary-color, #4299e1); width: 36px; height: 36px; margin: 0 auto 12px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .model-viewer-loading-text { font-size: 14px; color: var(--text-color, #333); margin-bottom: 8px; } .model-viewer-loading-progress { font-size: 12px; color: var(--text-secondary-color, #666); font-weight: bold; } /* Error message */ .model-viewer-error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.9); z-index: 3; } .model-viewer-error-content { background-color: white; border: 1px solid #e74c3c; border-radius: 6px; padding: 15px; display: flex; align-items: center; max-width: 80%; } .model-viewer-error-icon { font-size: 24px; margin-right: 10px; } .model-viewer-error-text { color: #e74c3c; font-size: 14px; } /* Popout button */ .model-viewer-popout-button { position: absolute; top: 10px; right: 10px; z-index: 3; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #ccc; border-radius: 4px; padding: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: #333333; } .model-viewer-popout-button svg { stroke: currentColor; } .model-viewer-popout-button:hover { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Secondary controls toolbar */ .model-viewer-controls { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 6px; background-color: rgba(255, 255, 255, 0.85); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 2; transition: opacity 0.2s ease; opacity: 0.9; } .model-viewer-controls:hover { opacity: 1; } .model-viewer-control-button { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background-color: white; border: 1px solid var(--border-color, #e2e8f0); border-radius: 4px; cursor: pointer; color: var(--text-color, #333); font-size: 12px; transition: background-color 0.2s; } .model-viewer-control-button:hover { background-color: var(--hover-color, #f7fafc); } .model-viewer-control-button svg { width: 14px; height: 14px; } /* End of model-viewer-control-button */ /* --- Default Toolbar Hiding --- */ /* Apply these hiding rules by default to ANY viewer toolbar */ .adsk-toolbar, .adsk-viewing-toolbar, .adsk-viewing-viewer .toolbar, /* Keep targeting nested versions too */ .adsk-viewing-viewer .light-theme > .toolbar, [data-testid="toolbar"], .forgeviewer-toolbar { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; /* Keep absolute to prevent layout shifts when hidden */ z-index: -9999 !important; /* Ensure it's behind */ } /* Force hide other specific viewer elements ONLY in embedded viewer (non-popout) */ .embedded-viewer .adsk-viewing-viewer .propertiespanel, .embedded-viewer .adsk-viewing-viewer .viewcubeui, .embedded-viewer .adsk-viewing-viewer .viewcube { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; z-index: -9999 !important; } /* --- Toolbar Force Show Override --- */ /* This rule applies when handleToolbar(show=true) adds the class */ .adsk-toolbar.force-show-toolbar, .adsk-viewing-toolbar.force-show-toolbar { display: block !important; /* Override display: none */ visibility: visible !important; /* Override visibility: hidden */ opacity: 1 !important; /* Override opacity: 0 */ position: absolute !important; /* Keep absolute positioning */ bottom: 15px !important; /* Position from the bottom */ left: 50% !important; /* Center horizontally */ transform: translateX(-50%) !important; /* Adjust for centering */ z-index: 3 !important; /* Bring it to the front */ } /* Ensure common internal toolbar controls are also shown when parent has force-show-toolbar */ .force-show-toolbar .adsk-toolbar-control-grouping, .force-show-toolbar .adsk-toolbar-button { display: inline-block !important; /* or flex, etc. */ visibility: visible !important; opacity: 1 !important; } /* --- End Toolbar Section --- */ /* --- Viewer Background --- */ /* Force white background throughout the viewer */ .adsk-viewing-viewer { background-color: #ffffff !important; } /* Canvas background */ canvas.adsk-viewing-viewer { background-color: #ffffff !important; } /* --- Properties Panel --- */ .model-viewer-properties-panel { /* Attempt to optimize rendering during native resize */ will-change: transform, opacity; /* Keep native resize enabled as per user request */ resize: both; /* Or vertical/horizontal if preferred */ overflow: auto; /* Needed for native resize */ } /* Force white background throughout the viewer */ .adsk-viewing-viewer { background-color: #ffffff !important; } /* Canvas background */ canvas.adsk-viewing-viewer { background-color: #ffffff !important; } /* End of toolbar force-show section */ /* --- Properties Panel --- */ /* Re-introduce a basic rule for the properties panel to disable native resize */ .model-viewer-properties-panel { /* If other essential default styles for positioning/overflow were removed from CSS and are only inline, this rule might primarily just be for the resize property. The inline styles in ModelViewer.tsx will handle its base appearance. */ resize: none !important; } /* <<< NEW STYLES FOR CREATE ISSUE PANEL AND BUTTON >>> */ .model-viewer-toolbar-buttons { position: absolute; top: 10px; right: 10px; z-index: 3; /* Ensure it's above viewer but potentially below modals */ display: flex; gap: 8px; /* Space between buttons */ } /* Style for the new Create Issue button (can share some with popout button) */ .model-viewer-create-issue-button { background-color: rgba(255, 255, 255, 0.7); border: 1px solid #ccc; border-radius: 4px; padding: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; color: #333333; } .model-viewer-create-issue-button svg { stroke: currentColor; } .model-viewer-create-issue-button:hover { background-color: #e0e0e0; } /* Basic styles for the CreateIssuePanel */ .create-issue-panel { position: absolute; top: 10px; /* Add margin from top */ right: 10px; /* Add margin from right */ /* width: 350px; */ /* Width is now controlled by state in the component */ max-width: 90%; /* Prevent panel from becoming too wide */ min-width: 250px; /* Consistent with JS logic */ height: calc(100% - 20px); /* Add margin from bottom (10px top + 10px bottom) */ background-color: rgba(255, 255, 255, 0.95); /* Slightly more opaque */ border: 1px solid #bbb; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 15px; box-sizing: border-box; overflow-y: auto; z-index: 10; /* Ensure it's above viewer but below modals generally */ display: flex; flex-direction: column; gap: 10px; transition: width 0.1s ease-out; /* Smooth width transition (optional) */ } .create-issue-panel .resize-handle-left { position: absolute; left: -5px; /* Position handle slightly outside the panel border */ top: 0; width: 10px; /* Make it easier to grab */ height: 100%; cursor: ew-resize; z-index: 11; /* Above panel content slightly */ /* background-color: rgba(0,0,255,0.1); */ /* Optional: for debugging handle position */ } .create-issue-panel h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.1rem; color: var(--text-color); } .create-issue-panel .form-step h4 { margin-top: 0; margin-bottom: 10px; font-size: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; } .create-issue-panel .form-group { margin-bottom: 12px; } .create-issue-panel label { display: block; margin-bottom: 4px; font-weight: 500; } .create-issue-panel input[type="text"], .create-issue-panel input[type="date"], .create-issue-panel textarea, .create-issue-panel select { width: 100%; padding: 8px; border: 1px solid var(--border-color, #ccc); border-radius: 4px; background-color: var(--input-background, white); color: var(--text-color); box-sizing: border-box; font-size: 0.9rem; font-family: 'Inter', sans-serif; } .create-issue-panel textarea { min-height: 80px; resize: vertical; font-family: 'Inter', sans-serif; } .create-issue-panel button { padding: 8px 12px; border: 1px solid var(--border-color, #ccc); border-radius: 4px; background-color: var(--secondary-button-background, #f0f0f0); color: var(--text-color); cursor: pointer; transition: background-color 0.2s ease; margin-right: 8px; /* Spacing for multiple buttons */ } .create-issue-panel button:hover { background-color: var(--secondary-hover-color, #e0e0e0); } .create-issue-panel button:disabled { opacity: 0.6; cursor: not-allowed; } .create-issue-panel button[type="submit"] { /* If you add type=submit */ background-color: var(--primary-color, #007bff); color: white; } .create-issue-panel button[type="submit"]:hover { background-color: var(--primary-hover-color, #0056b3); } /* Ensure .modern-scrollbar styles from AdminConsoleTab.css are available or define them here if needed */ /* For simplicity, assuming .modern-scrollbar class will be applied and styles are global or imported */ /* <<< NEW: Light Theme for Create Issue Panel >>> */ .create-issue-panel-light-theme { background-color: var(--background-color); /* Light theme background */ color: var(--text-color); /* Light theme text color */ border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 15px; box-sizing: border-box; overflow-y: auto; z-index: 10; display: flex; flex-direction: column; gap: 15px; } .create-issue-panel-light-theme h3, .create-issue-panel-light-theme h4 { color: var(--text-color); margin-bottom: 10px; } .create-issue-panel-light-theme label { color: var(--text-color-secondary, #666); display: block; margin-bottom: 5px; font-size: 0.9rem; } .create-issue-panel-light-theme input[type="text"], .create-issue-panel-light-theme input[type="date"], .create-issue-panel-light-theme textarea, .create-issue-panel-light-theme select { background-color: var(--input-background); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 4px; padding: 8px 10px; width: 100%; box-sizing: border-box; font-size: 0.9rem; outline: none; box-shadow: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .create-issue-panel-light-theme input[type="text"]:hover, .create-issue-panel-light-theme input[type="date"]:hover, .create-issue-panel-light-theme textarea:hover, .create-issue-panel-light-theme select:hover { background-color: var(--hover-color); } .create-issue-panel-light-theme input[type="text"]:focus, .create-issue-panel-light-theme input[type="date"]:focus, .create-issue-panel-light-theme textarea:focus, .create-issue-panel-light-theme select:focus { border-color: var(--border-color); /* Keep neutral border to avoid blue/orange glow */ outline: none; box-shadow: none; } /* Placeholder text should be theme-aware for readability */ .create-issue-panel-light-theme input::placeholder, .create-issue-panel-light-theme textarea::placeholder { color: rgba(var(--text-color-rgb, 255,255,255), 0.6); } /* Suppress global :focus-visible outline inside this panel */ .create-issue-panel-light-theme *:focus-visible { outline: none !important; box-shadow: none !important; } .create-issue-panel-light-theme button { background-color: #007bff; /* Primary button color - consider a CSS var if available */ color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s ease; } .create-issue-panel-light-theme button:hover { background-color: #0056b3; /* Darker shade for hover */ } .create-issue-panel-light-theme button:disabled { background-color: var(--active-color); /* Use a theme variable for disabled state */ color: var(--text-color-secondary); cursor: not-allowed; } .create-issue-panel-light-theme .form-step-indicator span.active { background-color: #007bff; color: white; } .create-issue-panel-light-theme .form-step-indicator span { background-color: var(--input-background); /* Lighter background for non-active steps */ color: var(--text-color); } .create-issue-panel-light-theme .location-coordinates span { color: #28a745; /* Green for coordinates, consider a theme variable if appropriate */ font-weight: bold; } .create-issue-panel-light-theme .error-message { color: var(--error-text); background-color: var(--error-background); padding: 8px; border-radius: 4px; font-size: 0.85rem; margin-top: 5px; } /* Ensure the resize handle is styled appropriately if not already */ .create-issue-panel-light-theme .resize-handle-left { /* Styles from previous implementation, ensure they work with light theme */ width: 8px; position: absolute; top: 0; left: -4px; /* Position slightly outside for easier grabbing */ height: 100%; cursor: col-resize; z-index: 20; } /* --- Styles for Model Viewer Toolbar (in ChatInterface.tsx) --- */ /* This wrapper is applied in ChatInterface.tsx to center the toolbar */ .model-viewer-toolbar-wrapper { width: 85%; /* Matches the model viewer's container width */ margin: 0 auto; /* Centers the toolbar */ /* border: 1px dashed red; /* For debugging alignment */ } .model-viewer-external-toolbar { display: flex; align-items: center; justify-content: flex-end; /* <<< ADDED to align buttons to the right */ padding-top: 1rem; /* 16px */ padding-bottom: 0.5rem; /* 8px */ /* The toolbar wrapper handles horizontal centering and width constraint. */ /* Spacing for buttons is handled by button margins. */ /* border-bottom: 1px solid var(--border-color, #e0e0e0); /* Example border */ margin-bottom: 0.25rem; /* Space below toolbar before viewer */ } .model-viewer-toolbar-button { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem; /* <<< CHANGED from 0.25rem to match ChatHistory buttons */ margin-left: 0.125rem; /* <<< CHANGED from 0.5rem to 0.25rem (4px) */ border-radius: 0.375rem; /* 6px, like rounded-md */ background-color: transparent !important; /* Explicitly transparent */ border: 1px solid transparent; /* Consistent border */ cursor: pointer; color: var(--text-color); /* <<< CHANGED from --text-primary */ stroke: var(--text-color); /* <<< CHANGED from --text-primary */ transition: background-color 0.15s ease-in-out; } .model-viewer-toolbar-button:hover { background-color: var(--surface-secondary, #f0f0f0) !important; /* Theme-aware hover */ } .model-viewer-toolbar-button:active { background-color: var(--surface-tertiary, #e0e0e0) !important; /* Theme-aware active */ } /* Lucide icons are typically controlled by the 'size' prop in React. This ensures the SVG itself respects that size. */ .model-viewer-toolbar-button svg { display: inline-block; } /* --- End Model Viewer Toolbar Styles --- */ /* --- Refined Styles for CreateIssuePanel.tsx Buttons (within its light theme) --- */ /* These styles should apply to buttons inside .create-issue-panel-light-theme */ /* The existing .create-issue-panel-light-theme button styles seemed to make buttons blue. */ /* This will override that to be transparent with borders, matching the user request. */ .create-issue-panel-light-theme button, .create-issue-panel-light-theme input[type="button"], /* Target input buttons as well */ .create-issue-panel-light-theme input[type="submit"] { /* Target submit inputs */ background-color: transparent !important; border: 1px solid #d1d5db !important; /* Light theme border (e.g., cool-gray-300) */ color: var(--text-color) !important; /* Theme-aware text color */ padding: 0.4rem 0.8rem; /* Adjusted padding for a good feel */ border-radius: 0.375rem; /* 6px, like rounded-md */ cursor: pointer; font-size: 0.875rem; /* 14px, text-sm */ line-height: 1.25; /* For vertical text centering */ margin-top: 0.5rem; /* Space above button */ margin-right: 0.5rem;/* Space to the right if buttons are inline */ transition: background-color 0.15s ease-in-out; min-height: 2rem; /* 32px, ensure decent clickable height */ min-width: auto; /* Allow button to size to its content + padding */ text-align: center; } .create-issue-panel-light-theme button:hover, .create-issue-panel-light-theme input[type="button"]:hover, .create-issue-panel-light-theme input[type="submit"]:hover { background-color: var(--secondary-hover-color) !important; /* Use secondary hover for gray background */ } .create-issue-panel-light-theme button:disabled, .create-issue-panel-light-theme input[type="button"]:disabled, .create-issue-panel-light-theme input[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; background-color: transparent !important; /* Keep transparent even when disabled */ border-color: #e5e7eb !important; /* Slightly lighter border for disabled state */ color: #9ca3af !important; /* Muted text color for disabled state */ } /* Ensure SVGs within panel buttons also pick up text color for stroke */ .create-issue-panel-light-theme button svg { stroke: currentColor; /* Make SVG stroke use the button's text color */ width: 1em; /* General size for inline SVGs if not from Lucide */ height: 1em; vertical-align: middle; /* Better alignment with text */ margin-right: 0.25em; /* Space between icon and text if both are present */ } /* Remove margin from the last button in a group to prevent double spacing */ .create-issue-panel-light-theme .form-group button:last-child, .create-issue-panel-light-theme .form-step button:last-child { margin-right: 0; } /* --- End CreateIssuePanel Button Styles --- */ /* Hide Autodesk/Forge built-in loading splash/spinner */ .adsk-viewing-viewer .adsk-loading-indicator, .adsk-viewing-viewer .loading-indicator, .adsk-viewing-viewer .progress, .adsk-viewing-viewer .spinner, .adsk-loading-indicator, .adsk-loading-overlay { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Also hide the "Powered by Autodesk" message area inside progress if present */ .adsk-viewing-viewer .progress .message { display: none !important; } .issue-details-panel { position: absolute; top: 0; right: 10px; height: 100%; background-color: var(--background-color); box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); z-index: 1000; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; /* Prevent the panel from affecting the WebGL canvas compositing */ isolation: isolate; contain: layout paint; backface-visibility: hidden; } /* Remove legacy explicit light theme class; colors come from CSS variables */ .resize-handle-left { position: absolute; left: 0; top: 0; width: 4px; height: 100%; cursor: col-resize; background-color: transparent; transition: background-color 0.2s; } .resize-handle-left:hover { background-color: var(--hover-color); } .panel-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border-color); /* Match chat input background */ background-color: var(--chat-interface-default-backgrounds); color: var(--text-color); } .panel-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-color); } .panel-header-buttons { display: flex; gap: 0; min-width: 80px; /* Reserve space for both buttons to prevent header shrinking */ justify-content: flex-end; } .edit-button, .close-button { color: var(--text-color); border: 1px solid transparent !important; border-radius: 6px; } /* Ensure edit icon orientation matches rename icon elsewhere */ .edit-button svg { display: block; } .close-button { color: var(--text-color); font-size: 16px; } /* Override any hover classes and use secondary hover for header buttons */ .issue-details-panel .panel-header .edit-button:hover, .issue-details-panel .panel-header .close-button:hover { background-color: var(--secondary-hover-color) !important; border-color: transparent !important; } .panel-content { padding: 0; overflow-y: auto; flex: 1; } .section { padding: 16px 20px; border-bottom: 1px solid var(--border-color); } .section h4 { margin: 0 0 16px 0; font-size: 1em; font-weight: 600; color: var(--text-color-secondary, #666); letter-spacing: 0.5px; } .issue-field { margin-bottom: 12px; } .issue-field:last-child { margin-bottom: 0; } .issue-field label { display: block; font-weight: 500; margin-bottom: 4px; color: var(--text-color-secondary, #666); font-size: 12px; } .field-value { font-size: 14px; line-height: 1.5; color: var(--text-color); } .field-value.status-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-weight: 500; font-size: 12px; text-transform: capitalize; } /* Remove the old non-custom status color */ .field-value.status-badge:not(.custom) { background-color: var(--active-color); color: var(--text-color); } /* Status-specific colors matching ACC colors */ .field-value.status-badge.open { background-color: rgba(255, 152, 0, 0.1); /* Orange with 10% opacity */ color: #FF9800; } .field-value.status-badge.closed { background-color: rgba(158, 158, 158, 0.1); /* Grey with 10% opacity */ color: #9E9E9E; } .field-value.status-badge.pending { background-color: rgba(33, 150, 243, 0.1); /* Blue with 10% opacity */ color: #0769b8; } .field-value.status-badge.completed { background-color: rgba(158, 158, 158, 0.1); /* Grey with 10% opacity */ color: #9E9E9E; } .field-value.status-badge.in-review, .field-value.status-badge.in_review { /* Add support for both formats */ background-color: rgba(156, 39, 176, 0.1); /* Purple with 10% opacity */ color: #9C27B0; } .field-value.status-badge.overdue { background-color: rgba(244, 67, 54, 0.1); /* Red with 10% opacity */ color: #F44336; } .field-value.description { white-space: pre-wrap; color: var(--text-color-secondary, #666); background-color: var(--input-background); padding: 8px 12px; border-radius: 4px; font-size: 13px; } .field-value.coordinates { font-family: monospace; background-color: var(--input-background); padding: 8px 12px; border-radius: 4px; font-size: 13px; color: var(--text-color-secondary, #444); } /* Comments section */ .issue-details-panel .comments-list { margin-top: 8px; } .issue-details-panel .comment { background-color: var(--input-background); border-radius: 6px; padding: 12px; margin-bottom: 12px; } .issue-details-panel .comment:last-child { margin-bottom: 0; } .issue-details-panel .comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .issue-details-panel .comment-author { font-weight: 500; color: var(--text-color); font-size: 13px; } .issue-details-panel .comment-date { color: var(--text-color-secondary, #666); font-size: 12px; } .issue-details-panel .comment-content { color: var(--text-color-secondary, #444); font-size: 13px; line-height: 1.5; white-space: pre-wrap; } .issue-details-panel .panel-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; /* Ensure header inherits chat input background for consistency */ background-color: var(--chat-interface-default-backgrounds); border-bottom: 1px solid var(--border-color); } .issue-details-panel .panel-header h3 { margin: 0; font-size: 1rem; /* keep consistent with earlier rule */ font-weight: 600; color: var(--text-color); } .issue-details-panel .close-button { background: none; border: none; font-size: 16px; /* smaller icon size */ font-weight: 600; cursor: pointer; color: var(--text-color); padding: 0 5px; } .issue-details-panel .close-button:hover { /* Use standard hover tint, avoid blue text */ background-color: var(--hover-color) !important; color: var(--text-color); } .issue-details-panel .panel-content { padding: 15px; overflow-y: auto; flex-grow: 1; } .issue-details-panel .detail-item { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--border-color-light, #dddddd); } .issue-details-panel .detail-item:last-child { border-bottom: none; margin-bottom: 0; } .issue-details-panel .detail-label { display: block; font-size: 12px; color: var(--text-secondary-color, #555555); margin-bottom: 2px; } .issue-details-panel .detail-value { font-size: 14px; word-wrap: break-word; white-space: pre-wrap; /* Preserve line breaks in description etc. */ } .issue-details-panel .custom-attributes h4, .issue-details-panel .pushpin-location h4 { font-size: 14px; margin-top: 15px; margin-bottom: 8px; color: var(--text-color, #333333); border-bottom: 1px solid var(--border-color, #cccccc); padding-bottom: 5px; } .status-badge { padding: 4px 12px; border-radius: 12px; font-weight: 500; display: inline-block; text-transform: capitalize; } .status-badge.open { background-color: #ff9800; color: white; } .status-badge.closed { background-color: #4caf50; color: white; } .status-badge.pending { background-color: #2196f3; color: white; } .status-badge.completed { background-color: #4caf50; color: white; } .status-badge.in-review { background-color: #9c27b0; color: white; } .edit-issue-panel { padding: 1rem; background: var(--background-color); color: var(--text-color); } .edit-issue-panel-loading, .edit-issue-panel-error { padding: 2rem; text-align: center; } .edit-issue-panel-error { color: var(--error-text); } .edit-form { display: flex; flex-direction: column; gap: 1rem; } .form-field { display: flex; flex-direction: column; gap: 0.5rem; } .form-field label { font-weight: 500; color: var(--text-color) !important; } .form-field input[type="text"], .form-field input[type="date"], .form-field select, .form-field textarea { padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; background-color: var(--input-background); color: var(--text-color) !important; font-family: 'Inter', sans-serif; } .form-field input[type="text"]:focus, .form-field input[type="date"]:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--border-color); box-shadow: none; } .form-field textarea { resize: vertical; min-height: 100px; font-family: 'Inter', sans-serif; } /* Theme-aware checkbox styling */ .form-field input[type="checkbox"] { margin-right: 0.5rem; width: 16px; height: 16px; accent-color: var(--text-color); cursor: pointer; } /* Custom checkbox styling for better theme support */ .form-field input[type="checkbox"]:not(:checked) { background-color: transparent; border: 1px solid var(--border-color); } .form-field input[type="checkbox"]:checked { background-color: var(--text-color); border: 1px solid var(--text-color); } .edit-form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .edit-form-actions button, .edit-issue-panel button, .edit-issue-panel input[type="button"], .edit-issue-panel input[type="submit"] { background-color: transparent !important; border: 1px solid var(--border-color) !important; color: var(--text-color) !important; padding: 0.4rem 0.8rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; line-height: 1.25; margin-top: 0.5rem; margin-right: 0.5rem; transition: background-color 0.15s ease-in-out; min-height: 2rem; min-width: auto; text-align: center; } .edit-form-actions button:hover, .edit-issue-panel button:hover, .edit-issue-panel input[type="button"]:hover, .edit-issue-panel input[type="submit"]:hover { background-color: var(--hover-color) !important; } .edit-form-actions button:disabled, .edit-issue-panel button:disabled, .edit-issue-panel input[type="button"]:disabled, .edit-issue-panel input[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; background-color: transparent !important; border-color: var(--border-color) !important; color: var(--text-color) !important; } /* Ensure SVGs within panel buttons also pick up text color for stroke */ .edit-form-actions button svg, .edit-issue-panel button svg { stroke: currentColor; width: 1em; height: 1em; vertical-align: middle; margin-right: 0.25em; } /* Remove margin from the last button in a group to prevent double spacing */ .edit-form-actions button:last-child, .edit-issue-panel .form-group button:last-child { margin-right: 0; } /* Remove old button styles that might conflict */ .cancel-button, .save-button { background-color: transparent !important; } .cancel-button:hover:not(:disabled), .save-button:hover:not(:disabled) { background-color: var(--hover-color) !important; } /* Add styles for required fields: single themed asterisk */ .form-field input[required] + .error, .form-field select[required] + .error { display: none; } .form-field label[for="title"]::after, .form-field label[for="status"]::after, .form-field label[for="issueType"]::after, .form-field label[for="issueSubtype"]::after { content: " *"; color: var(--text-color); }/* APS Model Viewer Streaming Dots Animation - Enhanced for Smoothness */ .streaming-dot { border-radius: 50%; transform-origin: center; will-change: transform, opacity; animation: streamingFlow cubic-bezier(0.4, 0.0, 0.6, 1.0) infinite; /* Hardware acceleration optimizations */ transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; /* Anti-aliasing and smoothness optimizations */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } @keyframes streamingFlow { 0% { transform: scale(0.3) translateZ(0); opacity: 0; } 5% { transform: scale(0.5) translateZ(0); opacity: 0.2; } 10% { transform: scale(0.8) translateZ(0); opacity: 0.5; } 15% { transform: scale(1.2) translateZ(0); opacity: 0.7; } 20% { transform: scale(1.6) translateZ(0); opacity: 0.9; } 25% { transform: scale(1.9) translateZ(0); opacity: 0.95; } 30% { transform: scale(2.2) translateZ(0); opacity: 1; } 35% { transform: scale(1.9) translateZ(0); opacity: 0.95; } 40% { transform: scale(1.6) translateZ(0); opacity: 0.9; } 45% { transform: scale(1.2) translateZ(0); opacity: 0.7; } 50% { transform: scale(0.8) translateZ(0); opacity: 0.5; } 55% { transform: scale(0.5) translateZ(0); opacity: 0.2; } 60% { transform: scale(0.3) translateZ(0); opacity: 0; } 100% { transform: scale(0.3) translateZ(0); opacity: 0; } } .chain-of-thought-container { background: rgba(248, 249, 250, 0.3); border: 1px solid rgba(222, 226, 230, 0.4); border-radius: 12px; padding: 14px; margin-bottom: 14px; animation: slideDown 0.3s ease-out; } .chain-of-thought-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 500; color: var(--text-secondary-color, #424d57); } .thinking-icon { font-size: 18px; display: flex; align-items: center; justify-content: center; } .thinking-icon.thinking { animation: pulse 1.5s ease-in-out infinite; } .thinking-title { color: var(--text-color, #1f2937); font-size: 13px; opacity: 0.8; } .thinking-duration { margin-left: auto; color: var(--text-secondary-color, #4b5563); font-size: 11px; font-family: 'Courier New', monospace; opacity: 0.7; } .chain-of-thought-content { display: flex; flex-direction: column; gap: 12px; } .thought-item { background: rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 10px; border-left: 2px solid rgba(108, 117, 125, 0.3); animation: fadeIn 0.3s ease-out; } .thought-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .thought-agent { font-weight: 600; color: #6c757d; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; } .thought-progress { font-size: 10px; color: #868e96; background: #f8f9fa; padding: 2px 8px; border-radius: 10px; opacity: 0.7; } .thought-text { color: #868e96; font-size: 12px; line-height: 1.5; white-space: pre-wrap; opacity: 0.85; } .tool-execution { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 10px 12px; animation: fadeIn 0.3s ease-out; } .tool-execution-badge { display: flex; align-items: center; gap: 8px; } .tool-icon { font-size: 16px; animation: flash 1s ease-in-out infinite; } .tool-text { color: #856404; font-size: 13px; font-weight: 500; } /* Collapsed state */ .chain-of-thought-collapsed { background: rgba(248, 249, 250, 0.2); border: 1px solid rgba(222, 226, 230, 0.3); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s ease; } .chain-of-thought-collapsed:hover { background: rgba(233, 236, 239, 0.3); border-color: rgba(173, 181, 189, 0.4); } .thinking-icon.collapsed { font-size: 16px; opacity: 0.7; } .thinking-summary { color: #6c757d; font-size: 12px; font-weight: 500; opacity: 0.8; } .expand-hint { margin-left: auto; color: #868e96; font-size: 10px; font-style: italic; opacity: 0.7; } /* Shared inline chain-of-thought label styles */ .chain-of-thought-label { color: var(--text-secondary-color, #4b5563); font-size: 12px; line-height: 1.4; font-weight: 500; font-style: normal; opacity: 1; transition: opacity 0.2s ease; } .chain-of-thought-label--collapsed { opacity: 0.82; } .chain-of-thought-label--expanded { opacity: 1; } .chain-of-thought-label--muted { opacity: 0.78; } .chain-of-thought-label-wave { animation: cot-thought-pulse 1.6s ease-in-out infinite; } @keyframes cot-thought-pulse { 0%, 100% { opacity: 0.58; } 50% { opacity: 1; } } /* Animations */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } :root[data-theme='dark'] .chain-of-thought-container, :root[data-theme='dark'] .chain-of-thought-collapsed { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); border-color: #4a5568; } :root[data-theme='dark'] .thinking-title, :root[data-theme='dark'] .thinking-summary { color: #e2e8f0; } :root[data-theme='dark'] .thinking-duration, :root[data-theme='dark'] .thought-progress { color: #a0aec0; background: #2d3748; } :root[data-theme='dark'] .thought-item { background: #1a202c; border-left-color: #4299e1; } :root[data-theme='dark'] .thought-agent { color: #63b3ed; } :root[data-theme='dark'] .thought-text { color: #e2e8f0; } :root[data-theme='dark'] .tool-execution { background: #744210; border-color: #d69e2e; } :root[data-theme='dark'] .tool-text { color: #fbd38d; } :root[data-theme='dark'] .expand-hint { color: #a0aec0; } :root[data-theme='dark'] .chain-of-thought-collapsed:hover { background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); border-color: #718096; } :root[data-theme='dark'] .chain-of-thought-label { color: rgba(226, 232, 240, 0.85); } /* Toast notification animations */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Toast container styles */ .toast-container { position: fixed; top: 44px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; align-items: center; /* Center align toasts */ } .toast-container > * { pointer-events: auto; } /* Toast notification styles */ .toast { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; /* Dynamic width based on content */ width: fit-content; min-width: 150px; /* Further reduced minimum width */ max-width: 500px; /* Maximum width for longer messages */ animation: slideInRight 0.3s ease-out; } .toast.error { background-color: var(--toast-error-bg); color: var(--toast-text); } .toast.success { background-color: var(--toast-info-bg); color: var(--toast-text); } .toast.info { background-color: var(--toast-info-bg); color: var(--toast-text); } /* Toast message content */ .toast-message { flex: 1; word-break: break-word; /* Break long words if needed */ /* Remove white-space: nowrap to allow proper sizing */ } /* Long message styling - allow wrapping and set max width */ .toast-message-long { white-space: normal; /* Allow wrapping for long messages */ max-width: 350px; /* Limit width for long messages to force wrapping */ line-height: 1.4; /* Better line height for wrapped text */ } .toast-dismiss { background: none; border: none; color: inherit; cursor: pointer; padding: 2px; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s ease; flex-shrink: 0; /* Prevent dismiss button from shrinking */ } .toast-dismiss:hover { opacity: 1; } /* StreamingToast animations */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } /* Tree Node Styling with Visual Hierarchy Lines */ .tree-node-item { user-select: none; position: relative; } .tree-node-item:hover { background-color: var(--secondary-hover-color) !important; } .tree-node-item.selected { background-color: var(--active-color) !important; } /* Tree lines container */ .tree-lines { display: flex; align-items: stretch; height: 32px; flex-shrink: 0; } /* Individual tree line segments */ .tree-line-segment { position: relative; flex-shrink: 0; } /* Tree connector for current level */ .tree-connector { position: relative; flex-shrink: 0; } /* Vertical lines */ .tree-line-vertical { pointer-events: none; } /* Horizontal lines */ .tree-line-horizontal { pointer-events: none; } /* Corner lines for last child */ .tree-line-corner { pointer-events: none; } /* Children container */ .tree-children { display: flex; flex-direction: column; } /* Smooth transitions for expand/collapse */ .tree-node-item button { transition: transform 0.2s ease; } .tree-node-item button:hover { opacity: 0.7; } /* Ensure proper spacing and alignment */ .tree-node-item > * { flex-shrink: 0; } .tree-node-item > span:first-of-type { flex-shrink: 1; min-width: 0; } .upload-container { width: 100%; height: 100%; } .upload-modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); padding: 1rem; } /* Removed tacky animations */ .popup-viewer-container { display: flex; flex-direction: column; width: 100%; height: 100vh; overflow: hidden; background-color: var(--background-color, #f9fafb); color: var(--text-color, #111827); } .popup-viewer-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background-color: var(--sidebar-background, #f3f4f6); border-bottom: 1px solid var(--border-color, #d1d5db); height: 48px; flex-shrink: 0; } .popup-viewer-title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; } .popup-viewer-close-button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; border: none; background-color: transparent; cursor: pointer; color: var(--text-color, #111827); } .popup-viewer-close-button:hover { background-color: var(--hover-color, rgba(0, 0, 0, 0.05)); } .popup-viewer-content { flex: 1; position: relative; overflow: hidden; } /* Loading state */ .popup-viewer-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--background-color, #f9fafb); } .popup-viewer-loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: var(--primary-color, #3b82f6); animation: popup-viewer-spin 1s linear infinite; margin-bottom: 16px; } @keyframes popup-viewer-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .popup-viewer-loading-text { font-size: 14px; color: var(--text-color, #111827); } /* Error state */ .popup-viewer-error { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--background-color, #f9fafb); padding: 24px; text-align: center; } .popup-viewer-error-icon { font-size: 32px; margin-bottom: 16px; } .popup-viewer-error-text { font-size: 14px; color: var(--error-color, #ef4444); max-width: 400px; } #root { width: 100%; height: 100vh; margin: 0; padding: 0; border-radius: 8px; overflow: hidden; background: var(--background-color) !important; will-change: background-color; transform: translateZ(0); backface-visibility: hidden; } body { margin: 0; padding: 0; overflow: hidden; border-radius: 8px; background: var(--background-color) !important; will-change: background-color; transform: translateZ(0); backface-visibility: hidden; } html { background: var(--background-color) !important; border-radius: 8px; will-change: background-color; transform: translateZ(0); } .logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms; } /* Import cross-platform button styles FIRST - @import must be at the top */ /* * Cross-platform button styling utilities with consistent hover effects * Ensures consistent button appearance and interactions across Windows, macOS, and Linux * * USAGE GUIDE: * ============ * * 1. BASIC BUTTON STRUCTURE: * Always start with "btn-base" class, then add variant and size classes: * * * * 2. BUTTON VARIANTS: * - btn-primary: Main action buttons (highlighted) * - btn-secondary: Secondary action buttons (transparent with border) * - btn-danger: Destructive actions (red text/border) * - btn-danger-filled: Filled destructive buttons * - btn-transparent: Generic transparent buttons * * 3. SIZE VARIANTS: * - Default: 40px height (no additional class needed) * - btn-small: 36px height * - btn-compact: 32px height * - btn-modal: 36px height (optimized for modals) * * 4. SPECIALIZED BUTTONS: * - btn-circle: Small circular buttons (18px, for delete/close icons) * - btn-circle-large: Large circular buttons (32px, for main actions) * - btn-add-files: Pre-styled for file upload actions * - btn-icon / btn-icon-small: Square icon-only buttons * * 5. HOVER EFFECT UTILITIES (based on background color): * PRIMARY HOVER (--hover-color): For absolute white backgrounds * - Use for elements on --background, --sidebar-background, --chat-background (#ffffff) * - hover-standard, hover-enhanced, hover-accent, hover-scale, hover-subtle * * SECONDARY HOVER (--secondary-hover-color): For darker white/gray backgrounds * - Use for elements on --input-background, --chat-history-background, --chat-interface-default-backgrounds * - hover-secondary-standard, dropdown-hover-item-secondary, dropdown-settings-item * * 6. COMPONENT UTILITIES: * - file-item: Container for file items with auto-hover for delete buttons * - delete-btn: Hidden by default, shown on parent hover * - btn-dropdown-item: For dropdown menu items on white backgrounds (button elements) * - dropdown-hover-item: For dropdown items on white backgrounds (any element) * - dropdown-hover-item-secondary: For dropdown items on gray backgrounds * - dropdown-settings-item: For settings modal items on gray backgrounds * * 7. EXAMPLES: * White background: * Gray background: * White dropdown:
Theme Option
* Gray dropdown:
Settings Option
* * HOVER COLOR RULES: * - WHITE BACKGROUNDS (#ffffff): Use --hover-color (primary hover) * - GRAY BACKGROUNDS (#f7f7f7, #F3F4F6, #F7F9FB): Use --secondary-hover-color (secondary hover) * - NEVER use inline backgroundColor styles - let CSS classes handle all styling * - NEVER use onMouseEnter/onMouseLeave for hover effects - use CSS :hover instead * - All buttons are transparent with visible background tint on hover that matches their container * * All buttons automatically handle disabled states, accessibility, and reduced motion preferences. */ .btn-base { /* Reset all platform-specific button styles */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Box model consistency */ box-sizing: border-box; /* Layout consistency */ display: flex; align-items: center; justify-content: center; /* Typography consistency */ font-family: inherit; font-size: 0.9rem; font-weight: 500; line-height: 1; color: var(--text-color); /* Spacing consistency */ padding: 0.75rem 1.5rem; border-radius: 6px; /* CRITICAL: Ensure complete transparency and browser default override */ background: transparent !important; background-color: transparent !important; background-image: none !important; border: 1px solid transparent; box-shadow: none !important; /* Interaction consistency */ cursor: pointer; outline: none; white-space: nowrap; /* Animation consistency */ transition: all 0.2s ease; /* Prevent text selection */ user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } /* ===== HOVER EFFECT VARIANTS ===== */ /* PRIMARY HOVER: For absolute white backgrounds (#ffffff) */ .hover-standard:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); } /* Enhanced hover: background + subtle lift */ .hover-enhanced:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); transform: translateY(-1px); } /* Accent hover: for active/primary buttons */ .hover-accent:hover:not(:disabled) { background-color: var(--hover-color) !important; transform: translateY(-1px); } /* Scale hover: for icon buttons and interactive elements */ .hover-scale:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); transform: scale(1.05); } /* Subtle hover: minimal but visible effect */ .hover-subtle:hover:not(:disabled) { background-color: var(--hover-color) !important; } /* SECONDARY HOVER: For darker white/gray backgrounds (#f7f7f7, #F3F4F6, #F7F9FB) */ .hover-secondary-standard:hover:not(:disabled) { background-color: var(--secondary-hover-color) !important; border-color: var(--border-color); } .hover-secondary-enhanced:hover:not(:disabled) { background-color: var(--secondary-hover-color) !important; border-color: var(--border-color); transform: translateY(-1px); } .hover-secondary-subtle:hover:not(:disabled) { background-color: var(--secondary-hover-color) !important; } /* ===== BUTTON VARIANTS WITH PRIMARY HOVER (for white backgrounds) ===== */ .btn-base:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { min-height: 40px; height: 40px; background-color: transparent; color: var(--text-color); border: 1px solid var(--border-color); } .btn-primary:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { min-height: 40px; height: 40px; background-color: transparent; color: var(--text-color); border: 1px solid var(--border-color); } .btn-secondary:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); } .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-danger { min-height: 40px; height: 40px; background-color: transparent; color: var(--error-text); border: 1px solid var(--error-text); } .btn-danger:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); } .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } .btn-danger-filled { min-height: 40px; height: 40px; background-color: var(--error-background); color: var(--error-text); border: 1px solid var(--error-text); } .btn-danger-filled:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); } .btn-danger-filled:disabled { opacity: 0.5; cursor: not-allowed; } /* Small button variants */ .btn-small { min-height: 36px; height: 36px; padding: 0.5rem 1rem; font-size: 0.8rem; } /* Compact button variants */ .btn-compact { min-height: 32px; height: 32px; padding: 0.375rem 0.75rem; font-size: 0.8rem; } /* Icon button variants */ .btn-icon { min-width: 40px; width: 40px; padding: 0.5rem; border: 1px solid transparent !important; } .btn-icon:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); } .btn-icon-small { min-width: 32px; width: 32px; min-height: 32px; height: 32px; padding: 0.375rem; border: 1px solid transparent !important; } .btn-icon-small:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); } /* Ensure secondary hover utilities override the default icon hover color for contrast on gray backgrounds */ .btn-icon-small.hover-secondary-standard:hover:not(:disabled) { background-color: var(--secondary-hover-color) !important; } .btn-icon-small.selected { background-color: transparent; border: 1px solid var(--border-color); } /* Loading state */ .btn-loading { position: relative; pointer-events: none; } .btn-loading::before { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: btn-spin 1s linear infinite; } @keyframes btn-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Focus states for accessibility */ .btn-base:focus-visible { outline: 2px solid var(--active-color); outline-offset: 2px; } /* High contrast mode support */ @media (prefers-contrast: high) { .btn-base { border-width: 2px; } } /* ===== SPECIALIZED BUTTON CLASSES ===== */ /* Circular icon button (for delete buttons, send buttons, etc.) */ .btn-circle { min-width: 18px; width: 18px; min-height: 18px; height: 18px; border-radius: 50%; padding: 0; background-color: transparent; border: none; display: flex; align-items: center; justify-content: center; position: relative; } .btn-circle:hover:not(:disabled) { background-color: var(--hover-color) !important; border: 1px solid var(--border-color); transform: scale(1.05); } /* Large circular button */ .btn-circle-large { min-width: 32px; width: 32px; min-height: 32px; height: 32px; border-radius: 50%; padding: 0.5rem; border: none; } .btn-circle-large:hover:not(:disabled) { background-color: var(--hover-color) !important; border: 1px solid var(--border-color); transform: scale(1.1); } /* Add files button */ .btn-add-files { min-height: 36px; height: 36px; padding: 0.5rem 1rem; background-color: transparent; color: var(--text-color); border: 1px solid var(--border-color); font-size: 0.8rem; font-weight: 500; gap: 0.5rem; } .btn-add-files:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); } /* Transparent button (commonly used pattern) */ .btn-transparent { background-color: transparent; color: var(--text-color); border: 1px solid var(--border-color); } .btn-transparent:hover:not(:disabled) { background-color: var(--hover-color) !important; border-color: var(--border-color); } /* Modal action buttons */ .btn-modal { min-height: 36px; height: 36px; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; } /* File item hover containers */ .file-item { position: relative; padding: 1rem; background-color: var(--chat-background); border: 1px solid var(--border-color); border-radius: 8px; transition: all 0.2s ease; overflow: visible; } .file-item:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .file-item:hover .delete-btn { opacity: 1; visibility: visible; } /* Keep delete button visible when hovering over it directly */ .delete-btn:hover { opacity: 1 !important; visibility: visible !important; } /* Maintain parent hover state when delete button is hovered - for modern browsers */ .file-item:has(.delete-btn:hover) { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Alternative approach: ensure delete button area is within parent bounds */ .delete-btn { position: absolute; top: -6px; right: -6px; opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 15; /* Ensure button stays connected to parent for hover detection */ margin: 0; border: none; } /* Dropdown item button */ .btn-dropdown-item { width: 100%; padding: 0.75rem; background-color: transparent; color: var(--text-color); border: 1px solid transparent; border-radius: 8px; text-align: left; justify-content: flex-start !important; /* Force left alignment over btn-base centering */ cursor: pointer; transition: all 0.2s ease; } .btn-dropdown-item:hover:not(:disabled) { background-color: var(--hover-color) !important; /* Match thread hover: no visible border */ border-color: transparent !important; } .btn-dropdown-item.drag-over { background-color: var(--hover-color) !important; /* Keep highlight without border during drag */ border-color: transparent !important; } .btn-dropdown-item.selected { /* Align selected state with thread selection (no border) */ background-color: var(--active-color) !important; border-color: transparent !important; font-weight: 600; } /* While renaming a project item, keep visual stable and disable hover changes */ .btn-dropdown-item.renaming, .btn-dropdown-item.renaming:hover { background-color: var(--active-color) !important; /* match selected/thread rename look */ border-color: transparent !important; } /* Project list item: ensure 8px border radius on hover/selected */ .project-item .btn-dropdown-item:hover, .project-item .btn-dropdown-item.selected, .project-item .thread-selected { border-radius: 8px; } /* Reusable dropdown item class for consistent hover effects */ .dropdown-hover-item { width: calc(100% - 0.5rem); /* Account for margin to maintain equal gaps */ padding: 0.5rem 0.75rem; text-align: left; background: transparent; border: none; cursor: pointer; color: var(--text-color); display: flex; align-items: center; border-radius: 4px; transition: background-color 0.2s ease; box-sizing: border-box; margin: 0.125rem 0.25rem; /* Equal gaps on all sides */ font-weight: 400; /* Normal font weight */ } .dropdown-hover-item:hover { background-color: var(--hover-color) !important; } /* Secondary dropdown hover for non-white backgrounds */ .dropdown-hover-item-secondary { width: calc(100% - 0.5rem); /* Account for margin to maintain equal gaps */ padding: 0.5rem 0.75rem; text-align: left; background: transparent; border: none; cursor: pointer; color: var(--text-color); display: flex; align-items: center; border-radius: 4px; transition: background-color 0.2s ease; box-sizing: border-box; margin: 0.125rem 0.25rem; /* Equal gaps on all sides */ font-weight: 400; /* Normal font weight */ font-family: inherit; /* Ensure consistent font */ font-size: 0.8rem; /* Match button text size */ } .dropdown-hover-item-secondary:hover { background-color: var(--secondary-hover-color) !important; } /* Active/selected state for dropdown items */ .dropdown-hover-item.selected, .dropdown-hover-item-secondary.selected, .dropdown-hover-item-secondary[data-state='checked'] { background-color: var(--active-color) !important; font-weight: 500; /* Slightly bolder but not too heavy */ } /* Small rename action buttons (tick/cross) for secondary backgrounds */ .btn-rename-action { background: rgba(0, 0, 0, 0.05); /* Subtle background for better visibility */ border: 1px solid rgba(0, 0, 0, 0.1); /* Light border for definition */ padding: 0.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #374151; /* Darker color for better contrast */ border-radius: 4px; transition: all 0.2s ease; } .btn-rename-action:hover { background-color: var(--active-color) !important; /* Use active color for strong contrast */ border-color: var(--border-color) !important; transform: scale(1.05); } /* Dark theme specific styling for better contrast in dark mode */ @media (prefers-color-scheme: dark) { .btn-rename-action { background: rgba(255, 255, 255, 0.1); /* Light background for dark mode */ border: 1px solid rgba(255, 255, 255, 0.15); /* Light border for dark mode */ color: #d1d5db; /* Light gray text for dark mode */ } .btn-rename-action:hover { background-color: #4b5563 !important; /* Lighter gray for dark mode visibility */ } } /* Settings modal dropdown item styling */ .dropdown-settings-item { width: calc(100% - 0.5rem); /* Account for margin */ padding: 0.5rem 0.75rem; text-align: left; background: transparent; border: none; cursor: pointer; color: var(--text-color); display: flex; align-items: center; border-radius: 4px; transition: background-color 0.2s ease; box-sizing: border-box; margin: 0.125rem 0.25rem; /* Equal gaps on all sides */ border-bottom: 1px solid var(--border-color); font-weight: 400; /* Normal font weight */ } .dropdown-settings-item:last-child { border-bottom: none; } .dropdown-settings-item:hover { background-color: var(--secondary-hover-color) !important; } .dropdown-settings-item.selected { background-color: var(--active-color) !important; font-weight: 500; /* Slightly bolder but not too heavy */ } /* Chat box circular button with scale hover effect */ .btn-chat-circle { border: none !important; background: none !important; background-color: transparent !important; padding: 4px; cursor: pointer; display: flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; transition: all 0.2s ease; color: var(--text-color) !important; } .btn-chat-circle:hover:not(:disabled) { background-color: var(--secondary-hover-color) !important; transform: scale(1.1); } .btn-chat-circle:disabled { opacity: 0.5; cursor: not-allowed; background-color: transparent !important; } /* Stop stream button - always visible black circle with white icon */ .btn-chat-circle.btn-stop-stream { background-color: black !important; border-radius: 50%; width: 32px; height: 32px; } .btn-chat-circle.btn-stop-stream:hover:not(:disabled) { background-color: black !important; transform: none; } /* Modal button with border and hover effect for white backgrounds */ .btn-modal-hover { padding: 0.75rem 1.5rem; border: 1px solid var(--border-color); font-size: 0.9rem; font-weight: 500; justify-content: center; border-radius: 6px; background: transparent; color: var(--text-color); cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; } .btn-modal-hover:hover:not(:disabled) { background-color: var(--hover-color); } .btn-modal-hover:disabled { opacity: 0.5; cursor: not-allowed; } /* Modal button with border and hover effect for gray backgrounds */ .btn-modal-hover-secondary { padding: 0.75rem 1.5rem; border: 1px solid var(--border-color); font-size: 0.9rem; font-weight: 500; justify-content: center; border-radius: 6px; background: transparent; color: var(--text-color); cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; } .btn-modal-hover-secondary:hover:not(:disabled) { background-color: var(--secondary-hover-color) !important; } .btn-modal-hover-secondary:disabled { opacity: 0.5; cursor: not-allowed; } /* ===== DROPDOWN TRIGGER AND HEADER UTILITIES (BORDERLESS) ===== */ /* Borderless trigger for dropdowns on white backgrounds */ .dropdown-trigger { padding: 0.4rem 0.75rem; background: transparent !important; border: 1px solid transparent !important; border-radius: 4px; color: var(--text-color); display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; min-width: 140px; justify-content: space-between; } .dropdown-trigger:hover:not(:disabled), .dropdown-trigger.is-open { background-color: var(--hover-color) !important; } /* Borderless trigger for dropdowns on gray backgrounds */ .dropdown-trigger-secondary { padding: 0.4rem 0.75rem; background: transparent !important; border: 1px solid transparent !important; border-radius: 4px; color: var(--text-color); display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; min-width: 140px; justify-content: space-between; } .dropdown-trigger-secondary:hover:not(:disabled), .dropdown-trigger-secondary.is-open { background-color: var(--secondary-hover-color) !important; } /* Non-interactive section header inside dropdown menus */ .dropdown-header { padding: 0.5rem 0.75rem; font-size: 0.85rem; font-weight: 700; color: var(--text-color); /* First letter uppercase, rest lowercase */ text-transform: lowercase; letter-spacing: normal; margin: 0.125rem 0.25rem; } .dropdown-header::first-letter { text-transform: uppercase; } /* Preserve original casing when needed (e.g., provider names like OpenAI, xAI) */ .dropdown-header.no-transform { text-transform: none; } .dropdown-header.no-transform::first-letter { text-transform: none; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .btn-base, .btn-circle, .btn-circle-large, .file-item, .delete-btn, .btn-dropdown-item, .dropdown-hover-item { transition: none; } .hover-enhanced:hover:not(:disabled), .hover-accent:hover:not(:disabled), .hover-scale:hover:not(:disabled), .btn-circle:hover:not(:disabled), .btn-circle-large:hover:not(:disabled) { transform: none; } } /* Tailwind directives */ @tailwind base; @tailwind components; @tailwind utilities; /* Screen reader only - hides content visually but keeps it accessible */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Tab styling with theme variables */ [data-state="active"] { /* background-color: var(--hover-color) !important; */ color: var(--text-color) !important; /* border: 1px solid var(--border-color) !important; */ box-shadow: none !important; } /* Admin table row hover effect - removed */ /* shadcn/ui CSS variables */ @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } :root { --primary-color: #2563eb; --toggle-active-color: #2563eb; /* Toggle active state - same as primary by default */ --secondary-color: #1e40af; --background-color: #ffffff; --text-color: #1f2937; --text-color-rgb: 31, 41, 55; /* for rgba(var(--text-color-rgb), a) usage */ --border-color: #e5e7eb; --hover-color: #8d8e8f; /* Improved visibility for light mode hover effects */ --active-color: rgba(209, 213, 219, 0.3); /* Light gray with transparency for active thread */ --icon-filter: invert(0); /* For light mode */ /* Centralized notification colors - translucent */ --toast-info-bg: rgba(107, 114, 128, 0.60); /* Gray for info/success notifications with opacity */ --toast-error-bg: rgba(220, 38, 38, 0.60); /* Red for error notifications with opacity */ --toast-text: #ffffff; /* White text for all notifications */ --notification-info-bg: rgba(107, 114, 128, 0.60); /* Gray for info/success messages with opacity */ --notification-error-bg: rgba(220, 38, 38, 0.60); /* Red for error messages with opacity */ } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --primary-color: #3b82f6; --secondary-color: #60a5fa; --background-color: #1f2937; --text-color: #f3f4f6; --text-color-rgb: 243, 244, 246; --border-color: #374151; --hover-color: #374151; /* Balanced visibility for dark mode hover effects */ --active-color: rgba(107, 114, 128, 0.3); /* Gray with transparency for active thread in dark mode */ --icon-filter: invert(1); /* For dark mode */ /* Notification colors remain translucent in dark mode */ --toast-info-bg: rgba(107, 114, 128, 0.60); --toast-error-bg: rgba(220, 38, 38, 0.60); --toast-text: #ffffff; --notification-info-bg: rgba(107, 114, 128, 0.60); --notification-error-bg: rgba(220, 38, 38, 0.60); } } html, body { margin: 0; padding: 0; height: 100vh; background: var(--background-color) !important; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; border-radius: 8px; color: var(--text-color); background: var(--background-color) !important; overflow: hidden; display: flex; flex-direction: column; will-change: background-color; transform: translateZ(0); } /* Main Window Styles */ .main-window { flex: 1; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background-color: var(--background-color); } /* Add this new style for the app container */ #root { border-radius: 8px; overflow: hidden; height: 100vh; background-color: var(--background-color) !important; will-change: background-color; transform: translateZ(0); } /* Ensure titlebar corners match */ .titlebar { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; } .main-window header { padding: 1rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .assistants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; padding: 1rem; } .assistant-card { padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; } .assistant-card:hover { background-color: var(--hover-color); transform: translateY(-2px); } /* Popup Window Styles */ .popup-window { height: 100vh; display: flex; flex-direction: column; } .popup-window header { padding: 0.5rem 1rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .chat-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .messages { flex: 1; overflow-y: auto; padding: 1rem; } .message { margin-bottom: 1rem; padding: 0.75rem; border-radius: 0.5rem; max-width: 80%; } .message.user { background-color: var(--primary-color); color: white; margin-left: auto; } .message.assistant { background-color: var(--hover-color); margin-right: auto; } .input-area { padding: 1rem; border-top: 1px solid var(--border-color); display: flex; gap: 0.5rem; } .input-area input { flex: 1; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 0.25rem; background-color: var(--background-color); color: var(--text-color); } /* Animation keyframes for smooth transitions */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); /* Slight movement for smoother animation */ } to { opacity: 1; transform: translateY(0); } } @keyframes slideInFadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUpFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); visibility: hidden; } } @keyframes expandCollapse { 0% { max-height: 0; opacity: 0; transform: translateY(-10px); } 100% { max-height: 1000px; opacity: 1; transform: translateY(0); } } /* Exit animation for project threads */ @keyframes collapseAnimation { 0% { max-height: 1000px; opacity: 1; transform: translateY(0); } 100% { max-height: 0; opacity: 0; transform: translateY(-10px); } } /* Spin animation for loading indicators */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Apply smooth transitions to all interactive elements */ button, a, input, select, .thread-item, .project-item { transition: all 0.3s ease; backface-visibility: hidden; /* Prevent flickering */ transform: translateZ(0); /* Force GPU acceleration */ } /* Thread selection styles */ .thread-selected { background-color: var(--active-color) !important; font-weight: bold; } /* Add hardware-accelerated styles for containers */ .project-threads { transform-origin: top; will-change: max-height, opacity, transform; backface-visibility: hidden; transform: translateZ(0); /* Force GPU acceleration */ } /* Reduce layout thrashing by preventing reflow during animations */ .prevent-reflow { contain: layout style; } /* Prevent layout shifts during animations */ .will-change-transform { will-change: transform; transform: translateZ(0); } .will-change-opacity { will-change: opacity; transform: translateZ(0); } /* Optimize rendering for thread containers */ .thread-container { will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden; } /* Prevent unnecessary repaints during scrolling */ .modern-scrollbar { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } /* Improve performance for fixed position elements */ .fixed-position { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } /* qUIble synced gradient animation using CSS variables */ html.quible-theme { --gradient-pos: 0% 50%; animation: gradientShiftPos 15s ease infinite; /* Initialize dynamic gradient CSS variable */ --dynamic-bubble-gradient: linear-gradient(135deg, #f093fb 0%, #4facfe 50%, #00f2fe 100%); } @keyframes gradientShiftPos { 0% { --gradient-pos: 0% 50%; } 50% { --gradient-pos: 100% 50%; } 100% { --gradient-pos: 0% 50%; } } /* Helper classes (optional) */ .qb-gradient-layer { background: var(--bubble-gradient); background-size: 400% 400%; background-position: var(--gradient-pos); } .qb-user-bubble { background: var(--bubble-gradient); background-size: 400% 400%; background-position: var(--gradient-pos); } /* Enhanced styling for qUIble user messages with direct dynamic gradient */ .quible-user-message { will-change: background; transform: translateZ(0); /* Force hardware acceleration */ backface-visibility: hidden; } /* Position-based gradient application to user messages in qUIble theme */ html.quible-theme .quible-user-message { /* Background will be set dynamically via JavaScript based on viewport position */ transition: background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important; } /* Window resize performance optimizations */ html, body, #root { /* Ensure consistent background coverage during resize */ min-height: 100vh; } /* Prevent background flashing during window operations */ * { box-sizing: border-box; } /* Additional hardware acceleration for main containers */ .main-window, .popup-window, .chat-area, .messages { will-change: auto; } /* Optimize scrolling performance */ .messages, .modern-scrollbar { -webkit-overflow-scrolling: touch; overflow-anchor: none; } /* Global focus outline to match toolbar buttons */ :focus-visible { outline: 2px solid var(--active-color); outline-offset: 2px; } /* Firefox keyboard focus fallback */ :-moz-focusring { outline: 2px solid var(--active-color); outline-offset: 2px; } /* Prevent clipped focus rings in ChatHistory lists */ .project-item .btn-base:focus-visible, .project-threads button:focus-visible { outline-offset: -2px; /* draw inside to avoid overflow clipping on edges */ } /* Thread items: use inset box-shadow to avoid any clipping */ .project-threads button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--active-color); } /* Firefox fallback for thread items */ .project-threads button:-moz-focusring { outline: none; box-shadow: inset 0 0 0 2px var(--active-color); } /* Orphan and project threads via thread-category container */ .thread-category button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--active-color); } .thread-category button:-moz-focusring { outline: none; box-shadow: inset 0 0 0 2px var(--active-color); } /* Date input styling with purple accents */ input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; } input[type="date"]:focus { outline: none; border-color: var(--active-color) !important; box-shadow: inset 0 0 0 2px var(--active-color); } input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; } input[type="date"]::-webkit-datetime-edit-text { color: var(--text-color); padding: 0 0.2em; } input[type="date"]::-webkit-datetime-edit-month-field, input[type="date"]::-webkit-datetime-edit-day-field, input[type="date"]::-webkit-datetime-edit-year-field { color: var(--text-color); } input[type="date"]::-webkit-datetime-edit-month-field:focus, input[type="date"]::-webkit-datetime-edit-day-field:focus, input[type="date"]::-webkit-datetime-edit-year-field:focus { background-color: var(--active-color); color: var(--text-color); border-radius: 2px; } input[type="date"]::-webkit-calendar-picker-indicator:hover { filter: invert(0.5); } /* Remove focus outline from Recharts */ .recharts-wrapper, .recharts-surface, .recharts-wrapper *:focus, .recharts-surface *:focus { outline: none !important; } .recharts-legend-item { cursor: pointer !important; } /* Calendar styling - shadcn/ui */ [data-slot="calendar"] { --cell-size: 2rem !important; background-color: var(--chat-background) !important; padding: 0.75rem; font-family: Inter, system-ui, sans-serif; border: 1px solid var(--border-color) !important; border-radius: 8px; } /* Remove all shadows and most borders */ [data-slot="calendar"] *, [data-slot="calendar"] button { box-shadow: none !important; } [data-slot="calendar"] button { border: none !important; } /* Calendar header wrapper - position everything on one line */ [data-slot="calendar"] [class*="caption"] { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 0.75rem !important; width: 100% !important; height: 2rem !important; padding: 0 !important; } /* Navigation container - hide it since we're using custom buttons */ [data-slot="calendar"] nav { display: none !important; } /* Remove focus outline from input fields */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus, input:focus { outline: none !important; box-shadow: none !important; } /* Ensure placeholder text starts at the left */ input::placeholder, textarea::placeholder { text-align: left; padding-left: 0; } /* Navigation buttons - enable pointer events */ [data-slot="calendar"] [class*="button_previous"], [data-slot="calendar"] [class*="button_next"] { width: 1.5rem !important; height: 1.5rem !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; pointer-events: auto !important; font-size: 1.2rem !important; margin: 0 !important; } [data-slot="calendar"] [class*="button_previous"]:hover, [data-slot="calendar"] [class*="button_next"]:hover { background-color: var(--hover-color) !important; } /* Month/Year caption - center between arrows */ [data-slot="calendar"] [class*="caption_label"] { color: var(--text-color) !important; font-weight: 600 !important; font-size: 0.9rem !important; z-index: 1 !important; line-height: 1 !important; padding: 0 !important; margin: 0 !important; } /* Hide dropdowns container if it exists */ [data-slot="calendar"] [class*="caption_dropdowns"] { display: none !important; } /* Day headers (Su Mo Tu etc) - smaller */ [data-slot="calendar"] [class*="weekday"] { color: var(--text-color-secondary) !important; font-size: 0.75rem !important; } /* Month/Year dropdown selects */ [data-slot="calendar"] select { background-color: transparent !important; color: var(--text-color) !important; border: 1px solid var(--border-color) !important; border-radius: 4px !important; padding: 0.25rem 0.5rem !important; font-size: 0.875rem !important; cursor: pointer !important; margin: 0 0.25rem !important; } [data-slot="calendar"] select:hover { background-color: var(--hover-color) !important; } [data-slot="calendar"] select:focus { outline: none !important; border-color: var(--active-color) !important; } /* Day buttons - square boxes in a grid */ [data-slot="calendar"] button[data-day] { background-color: transparent !important; color: var(--text-color) !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; width: var(--cell-size) !important; height: var(--cell-size) !important; min-width: var(--cell-size) !important; min-height: var(--cell-size) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.875rem !important; } /* Hover - simple background change */ [data-slot="calendar"] button:hover:not([data-selected]):not([aria-disabled="true"]):not([data-range-start]):not([data-range-end]):not([data-range-middle]) { background-color: var(--hover-color) !important; } /* Range selection - middle dates */ [data-slot="calendar"] button[data-range-middle="true"] { background-color: var(--hover-color) !important; color: var(--text-color) !important; border-radius: 0 !important; } /* Range selection - start date */ [data-slot="calendar"] button[data-range-start="true"] { background-color: var(--active-color) !important; color: var(--text-color) !important; font-weight: 500 !important; border-radius: 8px 0 0 8px !important; } /* Range selection - end date */ [data-slot="calendar"] button[data-range-end="true"] { background-color: var(--active-color) !important; color: var(--text-color) !important; font-weight: 500 !important; border-radius: 0 8px 8px 0 !important; } /* Single selected date (not part of a range) */ [data-slot="calendar"] button[data-selected-single="true"] { background-color: var(--active-color) !important; color: var(--text-color) !important; font-weight: 500 !important; border-radius: 8px !important; } /* Today's date */ [data-slot="calendar"] button[class*="today"]:not([data-selected="true"]):not([data-range-start]):not([data-range-end]) { background-color: var(--secondary-hover-color) !important; color: var(--text-color) !important; font-weight: 500 !important; border-radius: 8px !important; } /* Disabled/outside dates */ [data-slot="calendar"] button[aria-disabled="true"], [data-slot="calendar"] button[class*="outside"] { color: var(--text-color-secondary) !important; opacity: 0.3; } /* Navigation arrows */ [data-slot="calendar"] [class*="button_previous"], [data-slot="calendar"] [class*="button_next"] { background-color: transparent !important; color: var(--text-color) !important; } [data-slot="calendar"] [class*="button_previous"]:hover, [data-slot="calendar"] [class*="button_next"]:hover { background-color: var(--hover-color) !important; } /* Switch (Slider) Styling for Knowledge Base Sharing */ button[role="switch"] { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; border: none; outline: none !important; padding: 2px; } button[role="switch"] > span { pointer-events: none; display: block; width: 20px; height: 20px; background-color: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.2s; margin: 0; transform: translateX(0); } button[role="switch"][data-state="checked"] > span { transform: translateX(20px); } button[role="switch"][data-state="unchecked"] > span { transform: translateX(0); } /* Sharing Modal Dropdown Item Hover Effects */ .sharing-modal-dropdown-item { padding: 0.625rem 0.875rem; font-size: 0.875rem; cursor: pointer; background-color: transparent; color: var(--text-color); border-radius: 4px; transition: background-color 0.15s; } .sharing-modal-dropdown-item:hover { background-color: var(--hover-color); } .sharing-modal-dropdown-item:focus { background-color: var(--hover-color); outline: none; } /* Alert Dialog Overlay - Ensure modals are visible */ [data-radix-dialog-overlay], [data-radix-alert-dialog-overlay] { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-color: rgba(0, 0, 0, 0.7) !important; z-index: 9998 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Hide default Dialog close button when using custom one */ .hide-dialog-close .dialog-close-button { display: none !important; } .loading-spinner { animation: spin 1s linear infinite; } /* Admin table column resize handle */ .admin-resize-handle { position: absolute; top: 6px; bottom: 6px; right: -6px; width: 14px; cursor: col-resize; display: flex; align-items: center; justify-content: center; user-select: none; z-index: 15; touch-action: none; } .admin-resize-handle::before { content: ''; width: 2px; height: 100%; border-radius: 999px; background-color: var(--border-color); transition: all 0.2s ease; } .admin-resize-handle:hover::before, .admin-resize-handle--active::before { width: 3px; background-color: var(--text-color); box-shadow: 0 0 4px rgba(var(--text-color-rgb), 0.3); }