Spaces:
Running
Running
| /* CSS Custom Properties for Theming */ | |
| :root[data-theme="light"] { | |
| /* Background Colors */ | |
| --bg-primary: #FFFFFF; | |
| --bg-secondary: #F9FAFB; | |
| --bg-tertiary: #F3F4F6; | |
| --bg-gradient: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 50%, #F3E8FF 100%); | |
| /* Text Colors */ | |
| --text-primary: #111827; | |
| --text-secondary: #6B7280; | |
| --text-tertiary: #9CA3AF; | |
| --text-accent: #374151; | |
| /* Border Colors */ | |
| --border-primary: #E5E7EB; | |
| --border-secondary: #D1D5DB; | |
| --border-tertiary: #F3F4F6; | |
| /* Accent Colors */ | |
| --accent-primary: #6366F1; | |
| --accent-secondary: #8B5CF6; | |
| --accent-gradient: linear-gradient(135deg, #6366F1, #8B5CF6); | |
| /* Shadow Colors */ | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| /* Feature Colors */ | |
| --feature-bg: #EFF6FF; | |
| --feature-icon-color: #6366F1; | |
| /* Error Colors */ | |
| --error-bg: #FEF2F2; | |
| --error-border: #FECACA; | |
| --error-text: #DC2626; | |
| /* Input Colors */ | |
| --input-bg: #FFFFFF; | |
| --input-border: #D1D5DB; | |
| --input-focus: #6366F1; | |
| --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| /* App header (floating bar) */ | |
| --header-bg: #EBF5FF; | |
| --header-border: rgba(59, 130, 246, 0.2); | |
| --header-shadow: 0 4px 20px rgba(37, 99, 235, 0.1); | |
| } | |
| :root[data-theme="dark"] { | |
| /* Background Colors */ | |
| --bg-primary: #1F2937; | |
| --bg-secondary: #111827; | |
| --bg-tertiary: #374151; | |
| --bg-gradient: linear-gradient(135deg, #1F2937 0%, #111827 50%, #374151 100%); | |
| /* Text Colors */ | |
| --text-primary: #F9FAFB; | |
| --text-secondary: #D1D5DB; | |
| --text-tertiary: #9CA3AF; | |
| --text-accent: #E5E7EB; | |
| /* Border Colors */ | |
| --border-primary: #374151; | |
| --border-secondary: #4B5563; | |
| --border-tertiary: #6B7280; | |
| /* Accent Colors */ | |
| --accent-primary: #818CF8; | |
| --accent-secondary: #A78BFA; | |
| --accent-gradient: linear-gradient(135deg, #818CF8, #A78BFA); | |
| /* Shadow Colors */ | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| /* Feature Colors */ | |
| --feature-bg: #374151; | |
| --feature-icon-color: #818CF8; | |
| /* Error Colors */ | |
| --error-bg: #7F1D1D; | |
| --error-border: #DC2626; | |
| --error-text: #FCA5A5; | |
| /* Input Colors */ | |
| --input-bg: #374151; | |
| --input-border: #4B5563; | |
| --input-focus: #818CF8; | |
| --input-focus-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2); | |
| /* App header (floating bar) */ | |
| --header-bg: rgba(23, 37, 64, 0.97); | |
| --header-border: rgba(96, 165, 250, 0.18); | |
| --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); | |
| } | |
| /* Theme Toggle Button */ | |
| .theme-toggle { | |
| padding: 10px; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| color: var(--text-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); | |
| } | |
| .theme-toggle:hover { | |
| background: var(--bg-secondary); | |
| border-color: var(--accent-primary); | |
| color: var(--accent-primary); | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .theme-icon { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| /* Homepage Styles */ | |
| .homepage { | |
| min-height: 100vh; | |
| background: var(--bg-gradient); | |
| } | |
| .header { | |
| background-color: var(--bg-primary); | |
| box-shadow: var(--shadow-sm); | |
| border-bottom: 1px solid var(--border-primary); | |
| } | |
| .header-content { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 16px 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .logo-container { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--accent-gradient); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .logo-icon { | |
| width: 24px; | |
| height: 24px; | |
| color: #FFFFFF; | |
| } | |
| .logo-title { | |
| font-size: 20px; | |
| font-weight: bold; | |
| color: var(--text-primary); | |
| margin: 0; | |
| } | |
| .logo-subtitle { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin: 0; | |
| } | |
| .main { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 64px 24px; | |
| } | |
| .hero-section { | |
| text-align: center; | |
| margin-bottom: 64px; | |
| } | |
| .hero-title { | |
| font-size: 48px; | |
| font-weight: bold; | |
| color: var(--text-primary); | |
| margin-bottom: 24px; | |
| line-height: 1.1; | |
| } | |
| .hero-highlight { | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-subtitle { | |
| font-size: 20px; | |
| color: var(--text-secondary); | |
| max-width: 768px; | |
| margin: 0 auto 32px auto; | |
| line-height: 1.6; | |
| } | |
| /* CTA Button */ | |
| .cta-button { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: var(--accent-gradient); | |
| color: #FFFFFF; | |
| padding: 16px 32px; | |
| border-radius: 12px; | |
| font-size: 18px; | |
| font-weight: 600; | |
| border: none; | |
| cursor: pointer; | |
| box-shadow: var(--shadow-md); | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| } | |
| .cta-button:hover { | |
| transform: scale(1.05); | |
| } | |
| .cta-icon { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .cta-arrow { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| /* Advisors Grid */ | |
| .advisors-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 32px; | |
| margin-bottom: 64px; | |
| } | |
| .advisor-card { | |
| background-color: var(--bg-primary); | |
| border-radius: 16px; | |
| padding: 32px; | |
| box-shadow: var(--shadow-md); | |
| border: 1px solid var(--border-primary); | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .advisor-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .advisor-card-icon { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 24px auto; | |
| } | |
| .advisor-card-icon svg { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .advisor-card-title { | |
| font-size: 24px; | |
| font-weight: bold; | |
| color: var(--text-primary); | |
| margin-bottom: 8px; | |
| } | |
| .advisor-card-role { | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin-bottom: 16px; | |
| } | |
| .advisor-card-description { | |
| font-size: 16px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin: 0; | |
| } | |
| /* Features Section */ | |
| .features-section { | |
| margin-bottom: 64px; | |
| } | |
| .features-title { | |
| font-size: 32px; | |
| font-weight: bold; | |
| color: var(--text-primary); | |
| text-align: center; | |
| margin-bottom: 48px; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 32px; | |
| } | |
| .feature-card { | |
| text-align: center; | |
| padding: 24px; | |
| } | |
| .feature-icon { | |
| width: 64px; | |
| height: 64px; | |
| background-color: var(--feature-bg); | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 24px auto; | |
| } | |
| .feature-icon svg { | |
| width: 32px; | |
| height: 32px; | |
| color: var(--feature-icon-color); | |
| } | |
| .feature-title { | |
| font-size: 20px; | |
| font-weight: bold; | |
| color: var(--text-primary); | |
| margin-bottom: 12px; | |
| } | |
| .feature-description { | |
| font-size: 16px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin: 0; | |
| } | |
| /* Suggestions Panel */ | |
| .suggestions-panel { | |
| padding: 32px 0; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .suggestions-header { | |
| text-align: center; | |
| margin-bottom: 32px; | |
| } | |
| .suggestions-title { | |
| font-size: 28px; | |
| font-weight: bold; | |
| color: var(--text-primary); | |
| margin-bottom: 8px; | |
| } | |
| .suggestions-subtitle { | |
| font-size: 16px; | |
| color: var(--text-secondary); | |
| margin: 0; | |
| } | |
| .suggestions-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 24px; | |
| } | |
| .suggestion-category { | |
| background-color: var(--bg-primary); | |
| border-radius: 12px; | |
| border: 1px solid var(--border-primary); | |
| padding: 20px; | |
| box-shadow: var(--shadow-sm); | |
| transition: box-shadow 0.2s ease; | |
| min-height: 200px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .suggestion-category:hover { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .category-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| padding-bottom: 12px; | |
| border-bottom: 1px solid var(--border-tertiary); | |
| } | |
| .category-icon { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .category-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .suggestion-buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| flex: 1; | |
| } | |
| .suggestion-button { | |
| text-align: left; | |
| padding: 12px 16px; | |
| border: 1px solid var(--border-secondary); | |
| border-radius: 8px; | |
| background-color: transparent; | |
| color: var(--text-accent); | |
| font-size: 14px; | |
| line-height: 1.4; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .suggestion-button:hover { | |
| background-color: var(--hover-bg, var(--bg-secondary)); | |
| border-color: var(--hover-border, var(--accent-primary)); | |
| color: var(--hover-text, var(--text-primary)); | |
| transform: translateY(-1px); | |
| } | |
| /* Message Components */ | |
| .user-message-container { | |
| display: flex; | |
| justify-content: flex-end; | |
| margin-bottom: 16px; | |
| } | |
| .user-message { | |
| background: var(--accent-gradient); | |
| color: #FFFFFF; | |
| border-radius: 16px; | |
| padding: 12px 24px; | |
| max-width: 384px; | |
| } | |
| .user-message p { | |
| margin: 0; | |
| } | |
| .reply-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 8px; | |
| padding: 4px 8px; | |
| background-color: var(--bg-tertiary); | |
| border-radius: 8px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .advisor-message-container { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .advisor-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .advisor-avatar svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .advisor-message-bubble { | |
| border-radius: 12px; | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid; | |
| padding: 16px; | |
| max-width: 512px; | |
| transition: all 0.2s ease; | |
| } | |
| .advisor-message-bubble.clickable:hover { | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .advisor-message-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 8px; | |
| } | |
| .advisor-message-name { | |
| font-weight: 600; | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| margin: 0; | |
| } | |
| .reply-badge { | |
| font-size: 10px; | |
| background: var(--accent-primary); | |
| color: white; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| margin-left: 4px; | |
| } | |
| .message-time { | |
| font-size: 12px; | |
| } | |
| .advisor-message-text { | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| } | |
| /* Advisor icon in message header: circular badge, theme-aware fill */ | |
| .advisor-message-avatar-ring { | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| overflow: hidden; | |
| background: #ffffff; | |
| border: 1px solid rgba(15, 23, 42, 0.1); | |
| box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); | |
| } | |
| [data-theme="dark"] .advisor-message-avatar-ring { | |
| background: #1e293b; | |
| border-color: rgba(248, 250, 252, 0.12); | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); | |
| } | |
| .advisor-message-avatar-ring img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .advisor-message-avatar-icon { | |
| flex-shrink: 0; | |
| } | |
| .advisor-message-avatar-initial { | |
| font-weight: 700; | |
| line-height: 1; | |
| } | |
| .advisor-message-text > div:last-child p:last-child { | |
| margin-bottom: 0; /* Remove bottom margin from last paragraph */ | |
| } | |
| .advisor-message-text strong { | |
| font-weight: 600; | |
| } | |
| .advisor-message-text em { | |
| font-style: italic; | |
| } | |
| .advisor-message-text ul, | |
| .advisor-message-text ol { | |
| margin: 0.75rem 0; | |
| padding-left: 1.5rem; | |
| } | |
| .advisor-message-text li { | |
| margin-bottom: 0.25rem; | |
| } | |
| .advisor-message-text p { | |
| margin-bottom: 0.75rem; | |
| } | |
| .advisor-message-text p:last-child { | |
| margin-bottom: 0; | |
| } | |
| /* Updated Message Actions Styles */ | |
| .message-actions { | |
| margin-top: 12px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--border-tertiary); | |
| } | |
| .message-action-buttons { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .message-action-button { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| background: none; | |
| border: 1px solid; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| } | |
| .message-action-button:hover { | |
| background: var(--bg-secondary); | |
| transform: translateY(-1px); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| .message-action-button:active { | |
| transform: translateY(0); | |
| } | |
| .message-action-button svg { | |
| width: 14px; | |
| height: 14px; | |
| color: inherit; | |
| } | |
| /* Tooltip Styles */ | |
| .tooltip-container { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| margin-bottom: 8px; | |
| padding: 6px 10px; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-secondary); | |
| border-radius: 6px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| z-index: 1000; | |
| opacity: 0; | |
| animation: tooltipFadeIn 0.2s ease-out forwards; | |
| } | |
| .tooltip::after { | |
| content: ''; | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border: 4px solid transparent; | |
| border-top-color: var(--border-secondary); | |
| } | |
| .tooltip::before { | |
| content: ''; | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| margin-top: -1px; | |
| border: 4px solid transparent; | |
| border-top-color: var(--bg-primary); | |
| } | |
| /* Tooltip Animation */ | |
| @keyframes tooltipFadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-50%) translateY(4px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| } | |
| /* Dark theme tooltip adjustments */ | |
| [data-theme="dark"] .tooltip { | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Focus states for accessibility */ | |
| .message-action-button:focus-visible { | |
| outline: 2px solid var(--accent-primary); | |
| outline-offset: 2px; | |
| } | |
| /* Copy button success state */ | |
| .message-action-button.copied { | |
| color: #10B981 ; | |
| border-color: #10B98140 ; | |
| } | |
| .reply-button { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: none; | |
| border: 1px solid; | |
| padding: 6px 12px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .reply-button:hover { | |
| background: var(--bg-secondary); | |
| } | |
| /* Error Messages */ | |
| .error-message-container { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 16px; | |
| } | |
| .error-message { | |
| background-color: var(--error-bg); | |
| border: 1px solid var(--error-border); | |
| color: var(--error-text); | |
| border-radius: 12px; | |
| padding: 12px 16px; | |
| max-width: 384px; | |
| } | |
| .error-message p { | |
| margin: 0; | |
| } | |
| /* Thinking Indicators */ | |
| .thinking-container { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| opacity: 0.8; | |
| } | |
| .thinking-bubble { | |
| border-radius: 12px; | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid; | |
| padding: 16px; | |
| max-width: 288px; | |
| } | |
| .thinking-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 8px; | |
| } | |
| .advisor-name { | |
| font-weight: 600; | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| margin: 0; | |
| } | |
| .thinking-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--text-secondary); | |
| font-style: italic; | |
| margin-bottom: 8px; | |
| } | |
| .thinking-dots { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .thinking-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| animation: bounce 1.4s ease-in-out infinite both; | |
| } | |
| .thinking-text { | |
| font-size: 14px; | |
| margin-top: 4px; | |
| margin-bottom: 0; | |
| } | |
| /* Basic Chat Input - SCOPED TO AVOID CONFLICTS */ | |
| .input-area { | |
| border-top: 1px solid var(--border-primary); | |
| padding: 16px; | |
| } | |
| .input-container { | |
| display: flex; | |
| gap: 16px; | |
| } | |
| .message-input { | |
| flex: 1; | |
| resize: none; | |
| border: 1px solid var(--input-border); | |
| border-radius: 12px; | |
| padding: 12px 16px; | |
| font-size: 14px; | |
| font-family: inherit; | |
| outline: none; | |
| transition: border-color 0.2s ease; | |
| background-color: var(--input-bg); | |
| color: var(--text-primary); | |
| } | |
| .message-input::placeholder { | |
| color: var(--text-secondary); | |
| } | |
| .message-input:focus { | |
| border-color: var(--input-focus); | |
| box-shadow: var(--input-focus-shadow); | |
| } | |
| /* IMPORTANT: Make send button styles specific to basic ChatInput only */ | |
| .input-container .send-button { | |
| background: var(--accent-gradient); | |
| color: #FFFFFF; | |
| padding: 12px 24px; | |
| border-radius: 12px; | |
| border: none; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .input-container .send-button:hover:not(:disabled) { | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .input-container .send-button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .input-container .send-icon { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .input-container .send-text { | |
| display: none; | |
| } | |
| /* Footer Styles */ | |
| .footer { | |
| background-color: var(--bg-primary); | |
| border-top: 1px solid var(--border-primary); | |
| margin-top: auto; | |
| } | |
| .footer-content { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 24px; | |
| text-align: center; | |
| } | |
| .footer-text { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| margin: 0; | |
| } | |
| .footer-neon-link { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| transition: opacity 0.2s ease; | |
| } | |
| .footer-neon-link:hover { | |
| opacity: 0.8; | |
| } | |
| .footer-neon-logo { | |
| height: 1em; | |
| width: auto; | |
| vertical-align: text-bottom; | |
| margin-right: 2px; | |
| } | |
| .footer-patents-link { | |
| color: var(--text-secondary); | |
| text-decoration: underline; | |
| transition: opacity 0.2s ease; | |
| } | |
| .footer-patents-link:hover { | |
| opacity: 0.8; | |
| } | |
| .rag-info-overlay { | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| z-index: 1000; | |
| width: 320px; | |
| max-width: 90vw; | |
| border: 1px solid; | |
| border-radius: 8px; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); | |
| margin-top: 8px; | |
| backdrop-filter: blur(10px); | |
| animation: ragOverlaySlideIn 0.2s ease-out; | |
| } | |
| @keyframes ragOverlaySlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-10px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .rag-overlay-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 16px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| border-bottom: 1px solid var(--border-color); | |
| background: var(--bg-secondary); | |
| border-radius: 8px 8px 0 0; | |
| } | |
| .rag-overlay-content { | |
| padding: 16px; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .rag-stat-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| padding: 8px 0; | |
| border-bottom: 1px solid var(--border-secondary); | |
| } | |
| .rag-stat-row:last-child { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| } | |
| .rag-stat-label { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .rag-stat-value { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .rag-stat-value.positive { | |
| color: #10B981; | |
| } | |
| .rag-stat-value.negative { | |
| color: #6B7280; | |
| } | |
| .rag-documents-section { | |
| margin-top: 16px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--border-secondary); | |
| } | |
| .rag-section-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| margin-bottom: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .rag-document-item { | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-secondary); | |
| border-radius: 6px; | |
| padding: 10px; | |
| margin-bottom: 8px; | |
| } | |
| .rag-document-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .rag-document-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 6px; | |
| } | |
| .rag-filename { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| flex: 1; | |
| margin-right: 8px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .rag-relevance { | |
| display: flex; | |
| align-items: center; | |
| gap: 3px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--accent-color); | |
| background: var(--accent-color)15; | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| white-space: nowrap; | |
| } | |
| .rag-chunk-preview { | |
| font-size: 11px; | |
| line-height: 1.4; | |
| color: var(--text-tertiary); | |
| background: var(--bg-quaternary); | |
| padding: 6px 8px; | |
| border-radius: 4px; | |
| border-left: 2px solid var(--accent-color); | |
| margin-top: 6px; | |
| } | |
| .rag-no-documents { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px; | |
| background: var(--bg-secondary); | |
| border: 1px dashed var(--border-secondary); | |
| border-radius: 6px; | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| font-style: italic; | |
| margin-top: 8px; | |
| } | |
| /* Accessibility improvements */ | |
| .rag-info-overlay:focus-within { | |
| outline: 2px solid var(--accent-color); | |
| outline-offset: 2px; | |
| } | |
| /* Smooth transitions */ | |
| .message-action-button { | |
| transition: all 0.2s ease; | |
| } | |
| .message-action-button:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Custom scrollbar for overlay content */ | |
| .rag-overlay-content::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .rag-overlay-content::-webkit-scrollbar-track { | |
| background: var(--bg-secondary); | |
| border-radius: 2px; | |
| } | |
| .rag-overlay-content::-webkit-scrollbar-thumb { | |
| background: var(--border-color); | |
| border-radius: 2px; | |
| } | |
| .rag-overlay-content::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-secondary); | |
| } | |
| /* Dark theme adjustments */ | |
| [data-theme="dark"] .rag-info-overlay { | |
| background: #1f2937; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); | |
| } | |
| [data-theme="dark"] .rag-overlay-header { | |
| background: #374151; | |
| } | |
| [data-theme="dark"] .rag-document-item { | |
| background: #374151; | |
| border-color: #4B5563; | |
| } | |
| [data-theme="dark"] .rag-chunk-preview { | |
| background: #4B5563; | |
| color: #D1D5DB; | |
| } | |
| [data-theme="dark"] .rag-no-documents { | |
| background: #374151; | |
| border-color: #4B5563; | |
| } | |
| /* Animations */ | |
| @keyframes bounce { | |
| 0%, 80%, 100% { | |
| transform: scale(0); | |
| } | |
| 40% { | |
| transform: scale(1); | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 1024px) { | |
| .suggestions-panel { | |
| padding: 24px 16px; | |
| } | |
| .suggestion-category { | |
| padding: 18px; | |
| min-height: 180px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .suggestions-grid { | |
| grid-template-columns: 1fr; | |
| gap: 16px; | |
| } | |
| .suggestions-panel { | |
| padding: 24px 16px; | |
| } | |
| .suggestions-title { | |
| font-size: 24px; | |
| } | |
| .suggestion-category { | |
| padding: 16px; | |
| min-height: auto; | |
| } | |
| .suggestion-button { | |
| padding: 10px 14px; | |
| font-size: 13px; | |
| } | |
| .advisor-message-text { | |
| font-size: 1rem; | |
| } | |
| .advisor-message-name { | |
| font-size: 1rem; | |
| } | |
| /* Basic ChatInput mobile styles */ | |
| .input-container .send-text { | |
| display: inline; | |
| } | |
| .hero-title { | |
| font-size: 36px; | |
| } | |
| .hero-subtitle { | |
| font-size: 18px; | |
| } | |
| .advisors-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .message-action-buttons { | |
| gap: 6px; | |
| } | |
| .message-action-button { | |
| width: 28px; | |
| height: 28px; | |
| } | |
| .tooltip { | |
| font-size: 11px; | |
| padding: 4px 8px; | |
| } | |
| .rag-info-overlay { | |
| width: 280px; | |
| left: 0; | |
| right: auto; | |
| } | |
| .rag-document-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 4px; | |
| } | |
| .rag-filename { | |
| margin-right: 0; | |
| white-space: normal; | |
| overflow: visible; | |
| text-overflow: initial; | |
| } | |
| } |