Spaces:
Sleeping
Sleeping
| /* Modern Chat Page Layout */ | |
| .modern-chat-page { | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| background: var(--bg-gradient); | |
| } | |
| [data-theme="dark"] .modern-chat-page { | |
| background: var(--bg-gradient); | |
| will-change: auto; | |
| -webkit-transform: translateZ(0); | |
| transform: translateZ(0); | |
| } | |
| /* Floating Header */ | |
| .floating-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: var(--header-bg); | |
| border-bottom: 1px solid var(--header-border); | |
| padding: 12px 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| box-shadow: var(--header-shadow); | |
| flex-shrink: 0; | |
| min-width: 0; | |
| overflow: visible; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| flex: 1 1 0; | |
| min-width: 0; | |
| overflow: hidden; | |
| } | |
| .modern-home-btn { | |
| width: 44px; | |
| height: 44px; | |
| flex-shrink: 0; /* never squish into a sliver; collapse rules hide it instead */ | |
| border-radius: 12px; | |
| border: 1px solid var(--brand-mark-ring, rgba(18, 20, 23, 0.12)); | |
| padding: 0; | |
| overflow: hidden; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .header-brand-mark { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| display: block; | |
| pointer-events: none; | |
| } | |
| .modern-home-btn:hover { | |
| background: transparent; | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .header-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| min-width: 0; | |
| overflow: hidden; | |
| } | |
| .brand-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--accent-gradient); | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| flex-shrink: 0; | |
| } | |
| .brand-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| min-width: 0; | |
| overflow: hidden; | |
| } | |
| .brand-text h1 { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin: 0; | |
| line-height: 1.2; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| /* Brand subtitle/text collapse is handled by container queries on | |
| .floating-header.app-header (see CanvasPage.css "Header collapse" block), | |
| so it reacts to the header's real width — sidebar open or closed — | |
| instead of the viewport. */ | |
| .brand-text p { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| margin: 0; | |
| line-height: 1.35; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| gap: 12px; | |
| flex: 1 0 auto; | |
| min-width: 0; | |
| flex-wrap: nowrap; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .header-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .thinking-pulse { | |
| position: absolute; | |
| top: -2px; | |
| right: -2px; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| animation: pulse-dot 1.5s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| @keyframes pulse-dot { | |
| 0%, 100% { transform: scale(1); opacity: 1; } | |
| 50% { transform: scale(1.2); opacity: 0.8; } | |
| } | |
| /* Main Content Area */ | |
| .main-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| padding-top: 24px; | |
| padding-bottom: 140px; | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| overflow: visible; | |
| min-height: 0; | |
| height: 100vh; | |
| } | |
| .export-dropdown { | |
| z-index: 1000; | |
| } | |
| /* Welcome State — compact so greeting + Getting Started + input fit without scroll */ | |
| .welcome-state { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| /* Space above Getting Started comes from the heading’s own line-height, not this gap */ | |
| gap: 0; | |
| padding: 8px 16px 0; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| -webkit-overflow-scrolling: touch; | |
| min-height: 0; | |
| } | |
| /* Reserve enough room so Getting Started cards sit above the floating input */ | |
| .chat-content:has(.welcome-state) { | |
| padding-bottom: 128px; | |
| } | |
| .welcome-state .suggestions-panel { | |
| padding: 0; | |
| max-width: 980px; | |
| width: 100%; | |
| } | |
| .welcome-state .suggestions-header { | |
| text-align: center; | |
| margin-bottom: 8px; | |
| } | |
| .welcome-state .suggestions-title { | |
| /* Match .intake-greeting heading size */ | |
| font-size: clamp(1.1rem, 2vw, 1.35rem); | |
| font-weight: 650; | |
| line-height: 1.3; | |
| /* ≈ one heading line-height of blank space above */ | |
| margin: 1.3em 0 0; | |
| } | |
| .welcome-state .suggestions-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 8px; | |
| } | |
| .welcome-state .suggestion-category { | |
| min-height: 0; | |
| padding: 12px; | |
| } | |
| .welcome-state .category-header { | |
| margin-bottom: 8px; | |
| padding-bottom: 8px; | |
| gap: 8px; | |
| } | |
| .welcome-state .category-icon { | |
| width: 28px; | |
| height: 28px; | |
| } | |
| .welcome-state .category-title { | |
| /* Match .intake-chip suggested-question size */ | |
| font-size: 0.85rem; | |
| } | |
| .welcome-state .suggestion-buttons { | |
| gap: 6px; | |
| } | |
| .welcome-state .suggestion-button { | |
| padding: 8px 12px; | |
| font-size: 13px; | |
| border-radius: 8px; | |
| } | |
| .welcome-state .suggestion-button.suggestion-pending { | |
| min-height: 2.25rem; | |
| } | |
| @media (max-height: 800px) { | |
| .welcome-state { | |
| padding-top: 4px; | |
| gap: 0; | |
| } | |
| .welcome-state .suggestions-title { | |
| font-size: 1.1rem; | |
| } | |
| .welcome-state .suggestions-header { | |
| margin-bottom: 6px; | |
| } | |
| .welcome-state .suggestion-category { | |
| padding: 8px 10px; | |
| } | |
| .welcome-state .suggestion-button { | |
| padding: 6px 10px; | |
| font-size: 12px; | |
| } | |
| } | |
| .suggestions-container { | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| flex-shrink: 0; | |
| } | |
| /* Chat State */ | |
| .chat-state { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| min-height: 0; | |
| height: 100%; | |
| } | |
| .chat-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| min-height: 0; | |
| /* Add bottom padding to prevent content being hidden behind floating input */ | |
| padding-bottom: 140px; | |
| } | |
| .messages-area { | |
| flex: 1; | |
| overflow: hidden; | |
| min-height: 0; | |
| } | |
| .messages-scroll { | |
| height: 100%; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| overflow-anchor: none; | |
| padding: 20px; | |
| padding-bottom: 40px; | |
| background: var(--bg-gradient); | |
| scroll-behavior: smooth; | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: thin; | |
| } | |
| .messages-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| min-height: 0; | |
| height: 100%; | |
| background: var(--bg-gradient); | |
| } | |
| .messages-list { | |
| flex: 1; | |
| overflow: hidden; | |
| min-height: 0; | |
| height: 100%; | |
| } | |
| /* Advisor carousel: as many full answers as fit; arrows stay inside the pane */ | |
| .advisor-carousel { | |
| --carousel-gap: 16px; | |
| --carousel-controls-w: 52px; | |
| --carousel-stage-gap: 10px; | |
| overflow-anchor: none; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 10px; | |
| margin-bottom: 24px; | |
| min-height: 0; | |
| min-width: 0; | |
| width: 100%; | |
| max-width: 100%; | |
| box-sizing: border-box; | |
| overflow: visible; | |
| } | |
| .advisor-carousel .carousel-stage { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: stretch; | |
| gap: var(--carousel-stage-gap); | |
| width: fit-content; | |
| max-width: 100%; | |
| min-width: 0; | |
| position: relative; | |
| box-sizing: border-box; | |
| } | |
| .advisor-carousel .carousel-viewport { | |
| flex: 0 0 auto; | |
| min-width: 0; | |
| overflow: hidden; | |
| contain: paint; | |
| box-sizing: border-box; | |
| } | |
| .advisor-carousel .carousel-slide .advisor-message-container { | |
| margin-bottom: 0; | |
| max-width: 100%; | |
| } | |
| .advisor-carousel .carousel-slide .advisor-message-bubble { | |
| width: 100%; | |
| max-width: 100%; | |
| box-sizing: border-box; | |
| } | |
| .advisor-carousel .carousel-track { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: stretch; | |
| height: 100%; | |
| width: max-content; | |
| transition: transform 0.25s ease-out; | |
| } | |
| .advisor-carousel.showing-all .carousel-track { | |
| transform: none ; | |
| } | |
| .advisor-carousel.carousel-mode { | |
| position: relative; | |
| padding: 0; | |
| } | |
| .advisor-carousel.carousel-mode .carousel-slide { | |
| flex: 0 0 auto; | |
| flex-shrink: 0; | |
| min-width: 0; | |
| max-width: 100%; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| } | |
| .advisor-carousel .carousel-controls { | |
| position: relative; | |
| flex: 0 0 var(--carousel-controls-w); | |
| width: var(--carousel-controls-w); | |
| align-self: stretch; | |
| z-index: 3; | |
| } | |
| .advisor-carousel .carousel-controls-inner { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; | |
| z-index: 3; | |
| } | |
| /* Overlay: keep arrows inside the last visible card when side placement would clip */ | |
| .advisor-carousel.controls-overlay .carousel-stage { | |
| width: fit-content; | |
| max-width: 100%; | |
| } | |
| .advisor-carousel.controls-overlay .carousel-controls { | |
| position: absolute; | |
| right: 8px; | |
| top: 0; | |
| bottom: 0; | |
| flex: none; | |
| width: var(--carousel-controls-w); | |
| pointer-events: none; | |
| } | |
| .advisor-carousel.controls-overlay .carousel-arrow { | |
| box-shadow: var(--shadow-lg, 0 8px 18px -4px rgba(40, 30, 10, 0.22)); | |
| } | |
| .advisor-carousel.controls-below .carousel-stage { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| .advisor-carousel.controls-below .carousel-controls { | |
| position: relative; | |
| flex: 0 0 auto; | |
| width: auto; | |
| align-self: flex-start; | |
| } | |
| .advisor-carousel.controls-below .carousel-controls-inner { | |
| position: static; | |
| flex-direction: row; | |
| } | |
| .advisor-carousel .carousel-arrow { | |
| position: static; | |
| transform: none; | |
| width: 48px; | |
| height: 48px; | |
| padding: 0; | |
| appearance: none; | |
| border-radius: 14px; | |
| border: 2px solid var(--border-primary); | |
| background: var(--card-bg, var(--bg-primary)); | |
| color: var(--text-primary); | |
| box-shadow: var(--shadow-md, 0 4px 10px -2px rgba(40, 30, 10, 0.12)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; | |
| flex-shrink: 0; | |
| } | |
| .advisor-carousel .carousel-arrow:hover:not(:disabled) { | |
| background: var(--accent-fill, var(--accent-primary)); | |
| color: var(--accent-on-accent, #FFFFFF); | |
| border-color: var(--accent-fill, var(--accent-primary)); | |
| box-shadow: var(--shadow-lg, 0 8px 18px -4px rgba(40, 30, 10, 0.16)); | |
| } | |
| .advisor-carousel .carousel-arrow:focus-visible { | |
| outline: none; | |
| box-shadow: 0 0 0 2px var(--card-bg, var(--bg-primary)), 0 0 0 4px var(--accent-primary); | |
| } | |
| .advisor-carousel .carousel-arrow:disabled { | |
| opacity: 0.38; | |
| cursor: not-allowed; | |
| box-shadow: none; | |
| } | |
| .advisor-carousel .carousel-dots { | |
| display: flex; | |
| justify-content: flex-start; | |
| gap: 8px; | |
| margin-top: 0; | |
| padding-left: 2px; | |
| flex-shrink: 0; | |
| } | |
| .advisor-carousel .carousel-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| border: none; | |
| background: var(--border-primary); | |
| cursor: pointer; | |
| transition: background 0.2s, transform 0.2s; | |
| padding: 0; | |
| } | |
| .advisor-carousel .carousel-dot.active, | |
| .advisor-carousel .carousel-dot:hover { | |
| background: var(--accent-primary); | |
| } | |
| .advisor-carousel .carousel-dot.active { | |
| transform: scale(1.15); | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .advisor-carousel .carousel-track, | |
| .advisor-carousel .carousel-arrow, | |
| .advisor-carousel .carousel-dot { | |
| transition: none; | |
| } | |
| } | |
| .single-response-wide { | |
| margin-bottom: 24px; | |
| width: 100%; | |
| max-width: 512px; | |
| } | |
| [data-theme="dark"] .messages-scroll, | |
| [data-theme="dark"] .messages-container, | |
| [data-theme="dark"] .main-content { | |
| background: var(--bg-gradient); | |
| will-change: auto; | |
| -webkit-transform: translateZ(0); | |
| transform: translateZ(0); | |
| } | |
| /* Smooth scrolling with fixed background */ | |
| @media (prefers-reduced-motion: no-preference) { | |
| .messages-scroll { | |
| scroll-behavior: smooth; | |
| } | |
| } | |
| /* Scrollbar styling for dark mode */ | |
| [data-theme="dark"] .messages-scroll::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| [data-theme="dark"] .messages-scroll::-webkit-scrollbar-track { | |
| background: var(--bg-secondary); | |
| border-radius: 4px; | |
| } | |
| [data-theme="dark"] .messages-scroll::-webkit-scrollbar-thumb { | |
| background: var(--border-primary); | |
| border-radius: 4px; | |
| } | |
| [data-theme="dark"] .messages-scroll::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-tertiary); | |
| } | |
| /* Prevent background shift during scroll */ | |
| .messages-scroll * { | |
| background-attachment: fixed; | |
| } | |
| /* Ensure scroll anchor area */ | |
| .messages-end-anchor { | |
| height: 1px; | |
| background: transparent; | |
| } | |
| /* Keep the in-flight question at the top of the pane while answers load */ | |
| .user-message-container.is-pinned-question { | |
| position: sticky; | |
| top: 0; | |
| z-index: 6; | |
| width: 100%; | |
| scroll-margin-top: 8px; | |
| padding-top: 4px; | |
| padding-bottom: 8px; | |
| background: var(--bg-gradient); | |
| } | |
| .system-message.reference-snippet-card { | |
| max-width: 640px; | |
| text-align: left; | |
| align-items: flex-start; | |
| background: rgba(6, 182, 212, 0.08); | |
| border: 1px solid rgba(6, 182, 212, 0.35); | |
| border-left: 4px solid var(--accent-primary, #06b6d4); | |
| color: var(--text-primary); | |
| } | |
| .reference-snippet-title { | |
| margin: 0 0 4px; | |
| font-weight: 700; | |
| font-size: 13px; | |
| color: var(--accent-primary); | |
| } | |
| .reference-snippet-body { | |
| margin: 0; | |
| white-space: pre-wrap; | |
| text-align: left; | |
| font-size: 13px; | |
| line-height: 1.45; | |
| color: var(--text-secondary); | |
| max-height: 9em; | |
| overflow: hidden; | |
| } | |
| .search-incorporate-banner { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 12px; | |
| padding: 12px 16px; | |
| margin: 0 16px 12px 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); | |
| width: 100%; | |
| max-width: 768px; | |
| box-sizing: border-box; | |
| } | |
| .search-incorporate-banner .reply-info strong { | |
| color: var(--accent-primary); | |
| } | |
| .search-incorporate-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex-shrink: 0; | |
| } | |
| .search-incorporate-btn { | |
| padding: 8px 12px; | |
| border-radius: 10px; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 13px; | |
| font-weight: 600; | |
| background: var(--accent-fill, var(--accent-primary)); | |
| color: var(--accent-on-accent, #fff); | |
| white-space: nowrap; | |
| } | |
| .search-incorporate-btn:hover { | |
| filter: brightness(0.96); | |
| } | |
| [data-theme="dark"] .search-incorporate-banner { | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Message Components */ | |
| .orchestrator-message { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 24px; | |
| align-items: flex-start; | |
| } | |
| .orchestrator-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 20px; | |
| background: var(--accent-gradient); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| flex-shrink: 0; | |
| } | |
| .orchestrator-content { | |
| flex: 1; | |
| background: var(--bg-secondary); | |
| border-radius: 16px; | |
| padding: 16px 20px; | |
| border: 1px solid var(--border-primary); | |
| max-width: 600px; | |
| } | |
| .orchestrator-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .orchestrator-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .message-timestamp { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| } | |
| .orchestrator-text { | |
| color: var(--text-accent); | |
| line-height: 1.6; | |
| margin: 0; | |
| } | |
| /* System Notifications */ | |
| .system-notification { | |
| display: flex; | |
| justify-content: center; | |
| margin: 16px 0; | |
| } | |
| .system-content { | |
| background: var(--accent-gradient); | |
| color: var(--accent-on-accent, white); | |
| padding: 12px 20px; | |
| border-radius: 20px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| box-shadow: var(--shadow-md); | |
| text-align: center; | |
| max-width: 400px; | |
| } | |
| /* System Message Base Styles */ | |
| .system-message-container { | |
| display: flex; | |
| justify-content: center; | |
| margin: 16px 0; | |
| } | |
| .system-message { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 12px; | |
| padding: 12px 16px; | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| text-align: center; | |
| max-width: 500px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| /* Document Upload Specific Styles */ | |
| .system-message.document-upload { | |
| background: #F0F9F4; | |
| border: 1px solid #10B981; | |
| border-left: 4px solid #10B981; | |
| color: #065F46; | |
| font-weight: 500; | |
| box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1); | |
| animation: slideInNotification 0.3s ease-out; | |
| } | |
| .system-message.document-upload svg { | |
| color: #10B981; | |
| flex-shrink: 0; | |
| } | |
| .system-message.document-upload p { | |
| margin: 0; | |
| line-height: 1.4; | |
| } | |
| [data-theme="dark"] .system-message.document-upload { | |
| background: rgba(16, 185, 129, 0.15); | |
| border-color: #10B981; | |
| color: #6EE7B7; | |
| } | |
| [data-theme="dark"] .system-message.document-upload svg { | |
| color: #34D399; | |
| } | |
| /* Animation for notification appearance */ | |
| @keyframes slideInNotification { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-8px) scale(0.98); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| /* Thinking Indicators */ | |
| .orchestrator-thinking { | |
| display: flex; | |
| gap: 16px; | |
| align-items: center; | |
| opacity: 0.8; | |
| margin-bottom: 24px; | |
| } | |
| .orchestrator-thinking .thinking-bubble { | |
| width: 40px; | |
| height: 40px; | |
| min-width: 40px; | |
| min-height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--accent-gradient, var(--accent-primary)); | |
| color: white; | |
| border: none; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .thinking-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: var(--bg-secondary); | |
| border-radius: 16px; | |
| padding: 16px 20px; | |
| border: 1px solid var(--border-primary); | |
| } | |
| .thinking-label { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .thinking-animation { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .thinking-animation .dot { | |
| width: 6px; | |
| height: 6px; | |
| background: var(--accent-primary); | |
| border-radius: 50%; | |
| animation: thinking-bounce 1.4s infinite ease-in-out both; | |
| } | |
| .thinking-animation .dot:nth-child(1) { animation-delay: -0.32s; } | |
| .thinking-animation .dot:nth-child(2) { animation-delay: -0.16s; } | |
| .thinking-animation .dot:nth-child(3) { animation-delay: 0s; } | |
| @keyframes thinking-bounce { | |
| 0%, 80%, 100% { transform: scale(0); } | |
| 40% { transform: scale(1); } | |
| } | |
| /* Floating Input Area - FIXED VERSION */ | |
| .floating-input-area { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 300px; | |
| right: 0; | |
| z-index: 50; | |
| background: transparent; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| max-width: none; | |
| margin: 0; | |
| transition: left 0.3s ease; | |
| } | |
| .floating-input-area.sidebar-collapsed { | |
| left: 70px; | |
| } | |
| .floating-input-area .reply-banner { | |
| width: 100%; | |
| max-width: 800px; | |
| box-sizing: border-box; | |
| } | |
| /* Generated follow-up suggestion chips below the input */ | |
| .followup-chips-row { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: nowrap; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| width: calc(100% - 32px); | |
| max-width: none; | |
| margin: 8px 16px 0 16px; | |
| padding: 0 8px; | |
| box-sizing: border-box; | |
| } | |
| .followup-chips { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: nowrap; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 8px; | |
| flex: 0 1 auto; | |
| min-width: 0; | |
| max-width: 100%; | |
| box-sizing: border-box; | |
| overflow-x: auto; | |
| scrollbar-width: thin; | |
| } | |
| .followup-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 36px; | |
| padding: 8px 14px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 18px; | |
| background: var(--bg-primary); | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| line-height: 1.3; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); | |
| flex: 0 0 auto; | |
| max-width: none; | |
| white-space: nowrap; | |
| text-align: left; | |
| } | |
| .followup-chips-hide { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| flex: 0 0 auto; | |
| padding: 4px 10px; | |
| border: none; | |
| border-radius: 6px; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background-color 0.15s ease, color 0.15s ease; | |
| } | |
| .followup-chips-hide:hover { | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| } | |
| .followup-chips-hide:focus-visible { | |
| outline: 2px solid var(--accent-primary, #0B7A8A); | |
| outline-offset: 2px; | |
| } | |
| .followup-chips-show-bar { | |
| display: flex; | |
| justify-content: center; | |
| width: 100%; | |
| max-width: 800px; | |
| margin: 8px 16px 0 16px; | |
| padding: 0 12px; | |
| box-sizing: border-box; | |
| } | |
| .followup-chips-show { | |
| padding: 6px 12px; | |
| border: 1px dashed var(--border-primary); | |
| border-radius: 999px; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; | |
| } | |
| .followup-chips-show:hover { | |
| background: var(--bg-secondary); | |
| border-style: solid; | |
| color: var(--text-primary); | |
| } | |
| .followup-chips-show:focus-visible { | |
| outline: 2px solid var(--accent-primary, #0B7A8A); | |
| outline-offset: 2px; | |
| } | |
| .followup-chip:hover { | |
| border-color: var(--accent-primary); | |
| color: var(--accent-primary); | |
| background: var(--bg-secondary); | |
| } | |
| [data-theme="dark"] .followup-chip { | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); | |
| } | |
| @media (max-width: 768px) { | |
| .followup-chips-row { | |
| flex-wrap: wrap; | |
| margin: 8px 12px 0 12px; | |
| padding: 0 4px; | |
| width: calc(100% - 24px); | |
| } | |
| .followup-chips { | |
| flex-wrap: wrap; | |
| overflow-x: visible; | |
| justify-content: center; | |
| } | |
| .followup-chip { | |
| white-space: normal; | |
| max-width: 100%; | |
| flex: 1 1 auto; | |
| } | |
| .followup-chips-hide { | |
| align-self: center; | |
| } | |
| .followup-chips-show-bar { | |
| margin: 8px 12px 0 12px; | |
| } | |
| } | |
| /* Reply Banner in ChatPage - matches input width and fixes dark mode */ | |
| .floating-input-area .reply-banner { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 12px; | |
| padding: 12px 16px; | |
| margin: 0 16px 12px 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); | |
| width: 100%; | |
| max-width: 768px; | |
| box-sizing: border-box; | |
| } | |
| [data-theme="dark"] .floating-input-area .reply-banner { | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Reply Info - Fix dark mode text color */ | |
| .floating-input-area .reply-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| .floating-input-area .reply-info strong { | |
| color: var(--accent-primary); | |
| } | |
| /* Cancel Reply Button */ | |
| .floating-input-area .cancel-reply { | |
| background: none; | |
| border: none; | |
| color: var(--text-tertiary); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 6px; | |
| transition: all 0.2s ease; | |
| } | |
| .floating-input-area .cancel-reply:hover { | |
| background: var(--bg-secondary); | |
| color: var(--text-secondary); | |
| } | |
| /* MAIN LAYOUT WITH SIDEBAR - FIXED */ | |
| .chat-page-with-sidebar { | |
| display: flex; | |
| height: 100vh; | |
| overflow: hidden; | |
| background: var(--bg-gradient); | |
| } | |
| .main-chat-area { | |
| flex: 1; | |
| margin-left: 300px; /* Width of sidebar when expanded */ | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| transition: margin-left 0.3s ease; | |
| overflow: hidden; | |
| } | |
| /* FIXED: Chat area expansion when sidebar is collapsed */ | |
| .main-chat-area.sidebar-collapsed { | |
| margin-left: 70px; /* Width of sidebar when collapsed */ | |
| } | |
| /* Optional header sign out button */ | |
| .header-signout-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 8px; | |
| border: none; | |
| background: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| color: var(--text-secondary, #6b7280); | |
| transition: all 0.2s ease; | |
| margin-right: 8px; | |
| } | |
| .header-signout-btn:hover { | |
| background: var(--bg-secondary, #f3f4f6); | |
| color: #ef4444; | |
| } | |
| .dark .header-signout-btn:hover { | |
| background: var(--bg-secondary-dark, #374151); | |
| } | |
| .header-help-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 10px; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 12px; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); | |
| transition: all 0.2s ease; | |
| } | |
| .header-help-btn svg { | |
| width: 20px; | |
| height: 20px; | |
| display: block; | |
| } | |
| .header-help-btn:hover { | |
| background: var(--bg-secondary); | |
| border-color: #2663EB; | |
| color: #2663EB; | |
| } | |
| /* Loading session indicator */ | |
| .loading-session { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| padding: 20px; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| background: var(--bg-gradient); | |
| } | |
| [data-theme="dark"] .loading-session { | |
| color: var(--text-secondary-dark); | |
| background: var(--bg-gradient); | |
| } | |
| .dark .loading-session { | |
| color: var(--text-secondary-dark, #9ca3af); | |
| } | |
| .loading-session .loading-spinner { | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid var(--border-light, #e5e7eb); | |
| border-top: 2px solid var(--accent-primary, #0B7A8A); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| .dark .loading-session .loading-spinner { | |
| border-color: var(--border-dark, #374151); | |
| border-top-color: var(--accent-primary, #0B7A8A); | |
| } | |
| /* Document Indicator Styles */ | |
| .document-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| background: var(--feature-bg); /* Use theme variable */ | |
| border: 1px solid var(--accent-primary); /* Use theme variable */ | |
| border-radius: 20px; | |
| color: var(--accent-primary); /* Use theme variable */ | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: default; | |
| transition: all 0.2s ease; | |
| } | |
| .document-indicator:hover { | |
| background: var(--accent-fill, var(--accent-primary)); | |
| color: var(--accent-on-accent, #FFFFFF); | |
| } | |
| .doc-count { | |
| background: var(--accent-fill, var(--accent-primary)); | |
| color: var(--accent-on-accent, #FFFFFF); | |
| border-radius: 10px; | |
| padding: 2px 6px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| min-width: 16px; | |
| text-align: center; | |
| line-height: 1.2; | |
| } | |
| .document-indicator:hover .doc-count { | |
| background: white; | |
| color: var(--accent-primary); | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .clarification-message-container { | |
| display: flex; | |
| justify-content: center; | |
| margin: 24px 0; | |
| } | |
| .clarification-message { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-primary); | |
| color: var(--text-primary); | |
| padding: 20px; | |
| border-radius: 16px; | |
| max-width: 600px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); | |
| border-left: 4px solid var(--accent-primary); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Add subtle accent background */ | |
| .clarification-message::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--accent-gradient); | |
| opacity: 0.03; | |
| pointer-events: none; | |
| } | |
| [data-theme="dark"] .clarification-message { | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| [data-theme="dark"] .clarification-message::before { | |
| opacity: 0.05; | |
| } | |
| .clarification-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 12px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| color: var(--accent-primary); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .clarification-message p { | |
| margin: 0 0 16px 0; | |
| line-height: 1.6; | |
| font-size: 15px; | |
| color: var(--text-secondary); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .clarification-suggestions { | |
| margin-top: 16px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--border-primary); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .suggestions-label { | |
| font-size: 13px; | |
| margin-bottom: 12px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .suggestions-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .suggestion-button { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| color: var(--text-primary); | |
| padding: 12px 16px; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| text-align: left; | |
| font-size: 13px; | |
| font-weight: 500; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .suggestion-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--accent-primary); | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| pointer-events: none; | |
| } | |
| .suggestion-button:hover { | |
| border-color: var(--accent-primary); | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .suggestion-button:hover::before { | |
| opacity: 0.05; | |
| } | |
| .suggestion-button:hover { | |
| color: var(--accent-primary); | |
| } | |
| [data-theme="dark"] .suggestion-button:hover { | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| } | |
| [data-theme="dark"] .suggestion-button:hover::before { | |
| opacity: 0.1; | |
| } | |
| .suggestion-button:active { | |
| transform: translateY(0); | |
| } | |
| .dropdown-arrow { | |
| color: var(--text-secondary); | |
| transition: transform 0.2s ease; | |
| flex-shrink: 0; | |
| } | |
| .dropdown-arrow.rotated { | |
| transform: rotate(180deg); | |
| } | |
| .mobile-menu-button { | |
| display: none; | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 12px; | |
| border: none; | |
| background: var(--bg-secondary); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .mobile-menu-button:hover { | |
| background: var(--accent-fill, var(--accent-primary)); | |
| color: var(--accent-on-accent, #FFFFFF); | |
| } | |
| /* Responsive Design for Chat Page */ | |
| @media (max-width: 768px) { | |
| .floating-header { | |
| padding: 12px 16px; | |
| flex-wrap: nowrap; | |
| gap: 8px; | |
| } | |
| .header-left { | |
| gap: 12px; | |
| flex: 0 0 auto; | |
| min-width: 0; | |
| overflow: visible; | |
| } | |
| /* Hide brand elements on mobile to reduce clutter */ | |
| .header-left .modern-home-btn, | |
| .header-left .header-brand { | |
| display: none; | |
| } | |
| .header-right { | |
| gap: 8px; | |
| flex: 1 1 auto; | |
| justify-content: flex-end; | |
| flex-shrink: 1; | |
| min-width: 0; | |
| } | |
| /* Ensure mobile menu button is visible */ | |
| .mobile-menu-button { | |
| display: flex; | |
| } | |
| .main-content { | |
| padding: 24px 12px 120px 12px; /* Adjusted for mobile */ | |
| } | |
| .welcome-state { | |
| padding: 8px 12px 0; | |
| } | |
| .messages-scroll { | |
| padding: 16px; | |
| padding-bottom: 30px; | |
| } | |
| .floating-input-area, | |
| .floating-input-area.sidebar-collapsed { | |
| bottom: 10px; | |
| left: 0; | |
| } | |
| .floating-input-area .reply-banner { | |
| margin: 0 12px 12px 12px; | |
| } | |
| .orchestrator-content { | |
| max-width: none; | |
| } | |
| .system-content { | |
| max-width: 90%; | |
| padding: 10px 16px; | |
| font-size: 13px; | |
| } | |
| .main-chat-area { | |
| margin-left: 0; | |
| } | |
| .main-chat-area.sidebar-collapsed { | |
| margin-left: 0; | |
| } | |
| .clarification-message { | |
| margin: 0 16px; | |
| max-width: none; | |
| padding: 16px; | |
| } | |
| .clarification-header { | |
| font-size: 13px; | |
| } | |
| .clarification-message p { | |
| font-size: 14px; | |
| } | |
| .suggestion-button { | |
| padding: 10px 14px; | |
| font-size: 12px; | |
| } | |
| .brand-text h1 { | |
| font-size: 16px; | |
| } | |
| .brand-text p { | |
| font-size: 11px; | |
| } | |
| .session-title-display{ | |
| display: none; | |
| } | |
| } |