Spaces:
Running
Running
| /* ==================== CSS Variables & Root Styles ==================== */ | |
| :root { | |
| /* Dark Mode Color Palette */ | |
| --bg-darkest: #0a0a0a; | |
| --bg-dark: #121212; | |
| --bg-medium: #1a1a1a; | |
| --bg-light: #242424; | |
| --bg-lighter: #2d2d2d; | |
| --bg-hover: #363636; | |
| /* Accent Colors */ | |
| --accent-primary: #ffffff; | |
| --accent-secondary: #e0e0e0; | |
| --accent-muted: #888888; | |
| /* Glass Effect */ | |
| --glass-bg: rgba(255, 255, 255, 0.03); | |
| --glass-border: rgba(255, 255, 255, 0.08); | |
| --glass-shadow: rgba(0, 0, 0, 0.5); | |
| /* Text Colors */ | |
| --text-primary: #ffffff; | |
| --text-secondary: rgba(255, 255, 255, 0.7); | |
| --text-muted: rgba(255, 255, 255, 0.4); | |
| /* Status Colors */ | |
| --success: #4ade80; | |
| --error: #f87171; | |
| --info: #60a5fa; | |
| /* Spacing */ | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| /* Transitions */ | |
| --transition-fast: 0.15s ease; | |
| --transition-smooth: 0.3s ease; | |
| --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| /* Sidebar Width */ | |
| --sidebar-width: 300px; | |
| --sidebar-collapsed: 50px; | |
| } | |
| /* ==================== Global Styles ==================== */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--bg-darkest); | |
| color: var(--text-primary); | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* ==================== Glass Panels ==================== */ | |
| .glass-panel { | |
| background: var(--bg-dark); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| box-shadow: 0 4px 20px var(--glass-shadow); | |
| } | |
| /* ==================== App Container ==================== */ | |
| .app-container { | |
| position: relative; | |
| z-index: 10; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| /* ==================== Main Layout ==================== */ | |
| .main-content { | |
| flex: 1; | |
| display: flex; | |
| padding: 1rem; | |
| gap: 1rem; | |
| height: calc(100vh - 0px); | |
| /* Full viewport height */ | |
| min-height: 0; | |
| /* Allow flex children to shrink */ | |
| overflow: hidden; | |
| } | |
| /* ==================== Dual Sidebars ==================== */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| height: 100%; | |
| /* Fill available height */ | |
| display: flex; | |
| flex-direction: column; | |
| flex-shrink: 0; | |
| position: relative; | |
| transition: width var(--transition-smooth), opacity var(--transition-smooth); | |
| } | |
| .sidebar.collapsed { | |
| width: var(--sidebar-collapsed); | |
| } | |
| .sidebar.collapsed .sidebar-content { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .sidebar.collapsed .sidebar-toggle .toggle-icon { | |
| transform: rotate(180deg); | |
| } | |
| .sidebar-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| transition: opacity var(--transition-smooth); | |
| } | |
| .sidebar-content::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .sidebar-content::-webkit-scrollbar-thumb { | |
| background: var(--bg-hover); | |
| border-radius: 2px; | |
| } | |
| /* Sidebar Toggle Button */ | |
| .sidebar-toggle { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 24px; | |
| height: 48px; | |
| background: var(--bg-light); | |
| border: 1px solid var(--glass-border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| z-index: 10; | |
| transition: all var(--transition-fast); | |
| } | |
| .sidebar-toggle:hover { | |
| background: var(--bg-hover); | |
| } | |
| .toggle-icon { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| transition: transform var(--transition-smooth); | |
| } | |
| .sidebar-left .sidebar-toggle { | |
| right: -12px; | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| } | |
| .sidebar-right .sidebar-toggle { | |
| left: -12px; | |
| border-radius: var(--radius-sm) 0 0 var(--radius-sm); | |
| } | |
| /* ==================== Sidebar Sections ==================== */ | |
| .sidebar-section { | |
| padding: 1rem; | |
| } | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .section-header:hover .collapse-icon { | |
| color: var(--text-primary); | |
| } | |
| .sidebar-title { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin: 0; | |
| } | |
| .section-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| } | |
| .collapse-icon { | |
| font-size: 0.6rem; | |
| color: var(--text-muted); | |
| transition: transform var(--transition-smooth), color var(--transition-fast); | |
| } | |
| .collapsible.collapsed .collapse-icon { | |
| transform: rotate(-90deg); | |
| } | |
| .section-body { | |
| margin-top: 0.75rem; | |
| max-height: 500px; | |
| overflow: hidden; | |
| transition: max-height var(--transition-smooth), opacity var(--transition-smooth), margin var(--transition-smooth); | |
| } | |
| .collapsible.collapsed .section-body { | |
| max-height: 0; | |
| opacity: 0; | |
| margin-top: 0; | |
| } | |
| /* ==================== User Section ==================== */ | |
| .user-section { | |
| padding: 0.75rem 1rem ; | |
| } | |
| .user-info-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .user-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .user-avatar { | |
| width: 32px; | |
| height: 32px; | |
| background: var(--bg-hover); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| } | |
| .user-details { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.1rem; | |
| } | |
| .user-details span:first-child { | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| } | |
| .user-role { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| } | |
| /* ==================== Custom Animated Dropdown ==================== */ | |
| .custom-select { | |
| position: relative; | |
| width: 100%; | |
| margin-bottom: 0.75rem; | |
| } | |
| .custom-select.compact { | |
| margin-bottom: 0; | |
| width: auto; | |
| min-width: 180px; | |
| } | |
| .select-trigger { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0.65rem 1rem; | |
| background: var(--bg-medium); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .select-trigger:hover { | |
| background: var(--bg-light); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .custom-select.open .select-trigger { | |
| border-color: rgba(255, 255, 255, 0.2); | |
| border-radius: var(--radius-md) var(--radius-md) 0 0; | |
| } | |
| .select-value { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .select-arrow { | |
| font-size: 0.6rem; | |
| color: var(--text-muted); | |
| transition: transform var(--transition-smooth); | |
| margin-left: 0.5rem; | |
| } | |
| .custom-select.open .select-arrow { | |
| transform: rotate(180deg); | |
| } | |
| .select-options { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background: var(--bg-medium); | |
| border: 1px solid var(--glass-border); | |
| border-top: none; | |
| border-radius: 0 0 var(--radius-md) var(--radius-md); | |
| max-height: 0; | |
| overflow: hidden; | |
| opacity: 0; | |
| z-index: 100; | |
| transition: max-height var(--transition-smooth), opacity var(--transition-fast); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); | |
| } | |
| .custom-select.open .select-options { | |
| max-height: 200px; | |
| opacity: 1; | |
| overflow-y: auto; | |
| } | |
| .select-options::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .select-options::-webkit-scrollbar-thumb { | |
| background: var(--bg-hover); | |
| border-radius: 2px; | |
| } | |
| .select-option { | |
| padding: 0.6rem 1rem; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .select-option:hover { | |
| background: var(--bg-light); | |
| color: var(--text-primary); | |
| } | |
| .select-option.active { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .select-option .option-icon { | |
| font-size: 1rem; | |
| } | |
| /* ==================== Buckets List ==================== */ | |
| .buckets-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| max-height: 180px; | |
| overflow-y: auto; | |
| } | |
| .bucket-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 0.75rem; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .bucket-item:hover { | |
| background: var(--bg-light); | |
| } | |
| .bucket-item.active { | |
| background: var(--bg-light); | |
| border-left: 2px solid var(--accent-primary); | |
| } | |
| .bucket-name { | |
| flex: 1; | |
| font-size: 0.85rem; | |
| } | |
| .bucket-count { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| background: var(--bg-hover); | |
| padding: 0.1rem 0.4rem; | |
| border-radius: var(--radius-sm); | |
| } | |
| .bucket-delete { | |
| opacity: 0; | |
| padding: 0.2rem; | |
| font-size: 0.7rem; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .bucket-item:hover .bucket-delete { | |
| opacity: 1; | |
| } | |
| /* ==================== Upload Zone ==================== */ | |
| .upload-zone { | |
| padding: 1.5rem; | |
| border: 1px dashed rgba(255, 255, 255, 0.15); | |
| border-radius: var(--radius-md); | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all var(--transition-smooth); | |
| background: var(--bg-medium); | |
| } | |
| .upload-zone:hover, | |
| .upload-zone.dragover { | |
| border-color: rgba(255, 255, 255, 0.3); | |
| background: var(--bg-light); | |
| transform: scale(1.02); | |
| } | |
| .upload-icon { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .upload-title { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| margin-bottom: 0.25rem; | |
| } | |
| .upload-subtitle { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .progress-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background: var(--bg-hover); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--accent-primary); | |
| width: 0%; | |
| transition: width var(--transition-smooth); | |
| } | |
| /* Cancel Upload Button */ | |
| .btn-cancel-upload { | |
| margin-top: 0.75rem; | |
| width: 100%; | |
| padding: 0.5rem 1rem; | |
| background: rgba(248, 113, 113, 0.15); | |
| color: var(--error); | |
| border: 1px solid rgba(248, 113, 113, 0.3); | |
| border-radius: var(--radius-md); | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .btn-cancel-upload:hover { | |
| background: rgba(248, 113, 113, 0.25); | |
| border-color: rgba(248, 113, 113, 0.5); | |
| transform: translateY(-1px); | |
| } | |
| /* ==================== Documents Section (Right Sidebar) ==================== */ | |
| .documents-section { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| max-height: 50%; | |
| transition: all var(--transition-smooth); | |
| } | |
| /* ==================== Chat History Section (Right Sidebar) ==================== */ | |
| .chat-history-section { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| max-height: 50%; | |
| transition: all var(--transition-smooth); | |
| } | |
| .chat-history-section.collapsed { | |
| flex: 0 0 auto; | |
| min-height: auto; | |
| } | |
| .chat-history-section.collapsed .section-header { | |
| padding-bottom: 0; | |
| } | |
| .chat-history-section .section-header { | |
| padding-bottom: 0.5rem; | |
| } | |
| .documents-section.collapsed { | |
| flex: 0 0 auto; | |
| min-height: auto; | |
| } | |
| .documents-section.collapsed .section-header { | |
| padding-bottom: 0; | |
| } | |
| .documents-section .section-header { | |
| padding-bottom: 0.5rem; | |
| } | |
| .documents-body { | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .chat-history-body { | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .documents-list { | |
| height: 100%; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.4rem; | |
| padding-right: 0.25rem; | |
| } | |
| .doc-count { | |
| margin-left: auto; | |
| font-size: 0.7rem; | |
| opacity: 0.6; | |
| } | |
| .document-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.6rem 0.75rem; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| position: relative; | |
| } | |
| .document-item:hover { | |
| background: var(--bg-light); | |
| border-color: var(--glass-border); | |
| } | |
| .doc-icon { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1rem; | |
| background: var(--bg-hover); | |
| } | |
| .doc-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .doc-name { | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .doc-meta { | |
| font-size: 0.65rem; | |
| color: var(--text-muted); | |
| margin-top: 0.1rem; | |
| } | |
| .doc-view, | |
| .doc-delete { | |
| opacity: 0; | |
| padding: 0.25rem; | |
| font-size: 0.8rem; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .document-item:hover .doc-view, | |
| .document-item:hover .doc-delete { | |
| opacity: 1; | |
| } | |
| .doc-view:hover { | |
| color: var(--info); | |
| } | |
| .doc-delete:hover { | |
| color: var(--error); | |
| } | |
| /* ==================== Chat Container ==================== */ | |
| .chat-container { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| min-height: 0; | |
| /* Critical: allows flex child to shrink */ | |
| overflow: hidden; | |
| height: 100%; | |
| /* Ensure it takes full height */ | |
| transition: all var(--transition-smooth); | |
| } | |
| /* ==================== Chat Bucket Filter ==================== */ | |
| .chat-bucket-filter { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.75rem 1.25rem; | |
| border-bottom: 1px solid var(--glass-border); | |
| background: var(--bg-dark); | |
| flex-shrink: 0; | |
| /* Prevent filter bar from shrinking */ | |
| } | |
| .filter-label { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| /* New Chat Button */ | |
| .btn-new-chat { | |
| margin-left: auto; | |
| background: var(--accent-primary); | |
| color: var(--bg-darkest); | |
| padding: 0.4rem 0.75rem; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| border-radius: var(--radius-md); | |
| white-space: nowrap; | |
| transition: all var(--transition-fast); | |
| } | |
| .btn-new-chat:hover { | |
| background: var(--accent-secondary); | |
| transform: translateY(-1px); | |
| } | |
| /* Clear Chat Button */ | |
| .btn-clear-chat { | |
| background: var(--bg-light); | |
| color: var(--text-secondary); | |
| padding: 0.4rem 0.75rem; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--glass-border); | |
| white-space: nowrap; | |
| transition: all var(--transition-fast); | |
| } | |
| .btn-clear-chat:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| transform: translateY(-1px); | |
| } | |
| /* Chat History List */ | |
| .chat-history-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| } | |
| .chat-history-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 0.6rem; | |
| background: var(--bg-medium); | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .chat-history-item:hover { | |
| background: var(--bg-light); | |
| border-color: var(--glass-border); | |
| } | |
| .chat-history-item.active { | |
| background: var(--bg-light); | |
| border-color: var(--accent-muted); | |
| } | |
| .chat-history-icon { | |
| font-size: 0.9rem; | |
| flex-shrink: 0; | |
| } | |
| .chat-history-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .chat-history-topic { | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .chat-history-date { | |
| font-size: 0.65rem; | |
| color: var(--text-muted); | |
| margin-top: 0.1rem; | |
| } | |
| .chat-history-delete { | |
| opacity: 0; | |
| padding: 0.2rem; | |
| font-size: 0.75rem; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .chat-history-item:hover .chat-history-delete { | |
| opacity: 1; | |
| } | |
| .chat-history-delete:hover { | |
| color: var(--error); | |
| } | |
| /* ==================== Chat Messages ==================== */ | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| padding: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| min-height: 0; | |
| /* Critical: allows scrolling to work */ | |
| transition: padding var(--transition-smooth); | |
| } | |
| /* Adjust chat when both sidebars are open for better space utilization */ | |
| .main-content:has(.sidebar-left:not(.collapsed)):has(.sidebar-right:not(.collapsed)) .chat-messages { | |
| padding: 0.875rem; | |
| gap: 0.875rem; | |
| } | |
| .main-content:has(.sidebar-left:not(.collapsed)):has(.sidebar-right:not(.collapsed)) .message.assistant { | |
| max-width: 85%; | |
| } | |
| .main-content:has(.sidebar-left:not(.collapsed)):has(.sidebar-right:not(.collapsed)) .message.user { | |
| max-width: 75%; | |
| } | |
| /* Custom scrollbar for chat messages */ | |
| .chat-messages::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .chat-messages::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .chat-messages::-webkit-scrollbar-thumb { | |
| background: var(--bg-hover); | |
| border-radius: 3px; | |
| } | |
| .chat-messages::-webkit-scrollbar-thumb:hover { | |
| background: var(--bg-lighter); | |
| } | |
| .message { | |
| display: flex; | |
| gap: 0.75rem; | |
| max-width: 100%; | |
| width: 100%; | |
| animation: messageSlide 0.3s ease-out; | |
| min-width: 0; /* Allow flex item to shrink below content size */ | |
| } | |
| @keyframes messageSlide { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .message.user { | |
| align-self: flex-end; | |
| flex-direction: row-reverse; | |
| max-width: 80%; /* User messages can be narrower */ | |
| } | |
| .message.assistant { | |
| align-self: flex-start; | |
| max-width: 90%; /* Assistant messages use most of the width, leaving small margin */ | |
| } | |
| .message-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 0.9rem; | |
| background: var(--bg-light); | |
| border: 1px solid var(--glass-border); | |
| } | |
| .message-content { | |
| padding: 1rem 1.25rem; | |
| border-radius: var(--radius-lg); | |
| font-size: 0.9rem; | |
| line-height: 1.7; | |
| max-width: 100%; | |
| min-width: 0; /* Allow content to shrink */ | |
| word-wrap: break-word; | |
| overflow-wrap: break-word; | |
| word-break: break-word; /* Break long words if needed */ | |
| color: var(--text-secondary); | |
| } | |
| .message.user .message-content { | |
| background: var(--accent-primary); | |
| color: var(--bg-darkest) ; /* Ensure dark text on white background */ | |
| border-bottom-right-radius: 4px; | |
| padding: 1rem 1.25rem; /* Slightly less padding for user messages */ | |
| font-weight: 500; /* Slightly bolder for better readability */ | |
| line-height: 1.7; | |
| } | |
| .message.assistant .message-content { | |
| background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-medium) 100%); | |
| border: 1px solid var(--glass-border); | |
| border-bottom-left-radius: 4px; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); | |
| } | |
| .message-sources { | |
| margin-top: 0.5rem; | |
| padding-top: 0.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .source-tag { | |
| display: inline-block; | |
| padding: 0.1rem 0.4rem; | |
| background: var(--bg-hover); | |
| border-radius: var(--radius-sm); | |
| margin-left: 0.25rem; | |
| } | |
| /* ==================== Markdown Styling in Messages ==================== */ | |
| .message-content h1, | |
| .message-content h2, | |
| .message-content h3, | |
| .message-content h4, | |
| .message-content h5, | |
| .message-content h6, | |
| .message-content .msg-header { | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin: 2rem 0 1rem 0; | |
| line-height: 1.3; | |
| letter-spacing: -0.01em; | |
| } | |
| .message-content h1 { | |
| font-size: 1.3rem; | |
| background: linear-gradient(135deg, var(--accent-primary) 0%, #a855f7 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| padding-bottom: 0.6rem; | |
| border-bottom: 2px solid rgba(168, 85, 247, 0.4); | |
| margin-top: 0; | |
| margin-bottom: 1.25rem; | |
| } | |
| .message-content h2 { | |
| font-size: 1.15rem; | |
| color: var(--accent-primary); | |
| border-bottom: 1px solid rgba(168, 85, 247, 0.3); | |
| padding-bottom: 0.45rem; | |
| margin-top: 1.5rem; | |
| margin-bottom: 0.875rem; | |
| } | |
| .message-content h3 { | |
| font-size: 1.05rem; | |
| color: var(--info); | |
| margin-top: 1.5rem; | |
| margin-bottom: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .message-content h4 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin: 1.25rem 0 0.625rem 0; | |
| } | |
| .message-content h5, | |
| .message-content h6 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin: 1.25rem 0 0.625rem 0; | |
| } | |
| .message-content h1:first-child, | |
| .message-content h2:first-child, | |
| .message-content h3:first-child, | |
| .message-content h4:first-child, | |
| .message-content h5:first-child, | |
| .message-content h6:first-child, | |
| .message-content .msg-header:first-child { | |
| margin-top: 0; | |
| } | |
| .message-content p, | |
| .message-content .msg-para { | |
| margin: 0.875rem 0; | |
| line-height: 1.75; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .message-content p:first-child { | |
| margin-top: 0; | |
| } | |
| .message-content p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .message-content p:first-child, | |
| .message-content .msg-para:first-child { | |
| margin-top: 0; | |
| } | |
| /* ==================== Enhanced Lists ==================== */ | |
| .message-content .formatted-list { | |
| margin: 1.25rem 0; | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| .message-content ol.formatted-list { | |
| counter-reset: item; | |
| } | |
| .message-content .formatted-list li { | |
| position: relative; | |
| padding: 0.625rem 0.875rem 0.625rem 2.25rem; | |
| margin: 0.4rem 0; | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: var(--radius-md); | |
| border-left: 3px solid transparent; | |
| line-height: 1.7; | |
| transition: all 0.2s ease; | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| .message-content .formatted-list li:hover { | |
| background: rgba(255, 255, 255, 0.06); | |
| transform: translateX(2px); | |
| } | |
| .message-content .formatted-list li.numbered { | |
| border-left-color: var(--accent-primary); | |
| } | |
| .message-content .formatted-list li.bullet { | |
| border-left-color: var(--info); | |
| } | |
| .message-content .formatted-list li.numbered .list-num { | |
| position: absolute; | |
| left: 0.6rem; | |
| font-weight: 700; | |
| color: var(--accent-primary); | |
| font-size: 0.9rem; | |
| } | |
| .message-content .formatted-list li.bullet::before { | |
| content: "▸"; | |
| position: absolute; | |
| left: 0.75rem; | |
| color: var(--info); | |
| font-size: 0.85em; | |
| font-weight: 600; | |
| } | |
| .message-content .formatted-list.sub-list { | |
| margin: 0.5rem 0 0.5rem 1.5rem; | |
| } | |
| .message-content .formatted-list.sub-list li { | |
| padding-left: 1.75rem; | |
| background: transparent; | |
| border-left: 2px solid rgba(168, 85, 247, 0.3); | |
| } | |
| .message-content .formatted-list.sub-list li::before { | |
| content: "○"; | |
| position: absolute; | |
| left: 0.5rem; | |
| color: var(--accent-muted); | |
| font-size: 0.7em; | |
| } | |
| /* Legacy list support */ | |
| .message-content ul, | |
| .message-content ol { | |
| margin: 1.25rem 0; | |
| padding-left: 1.75rem; | |
| } | |
| .message-content li { | |
| margin: 0.5rem 0; | |
| padding-left: 0.5rem; | |
| line-height: 1.7; | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| .message-content ul li::marker { | |
| color: var(--info); | |
| } | |
| .message-content ol li::marker { | |
| color: var(--accent-secondary); | |
| font-weight: 600; | |
| } | |
| /* Nested lists */ | |
| .message-content ul ul, | |
| .message-content ol ol, | |
| .message-content ul ol, | |
| .message-content ol ul { | |
| margin: 0.25rem 0 0.25rem 1rem; | |
| } | |
| /* ==================== Premium Tables ==================== */ | |
| .message-content .table-wrapper { | |
| margin: 1rem 0; | |
| border-radius: var(--radius-md); | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| max-width: 100%; | |
| width: 100%; | |
| box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ | |
| } | |
| .message-content table { | |
| width: 100%; | |
| min-width: 100%; /* Ensure table takes full width of wrapper */ | |
| border-collapse: collapse; | |
| font-size: 0.8rem; | |
| background: rgba(0, 0, 0, 0.2); | |
| table-layout: auto; | |
| } | |
| .message-content thead { | |
| background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(96, 165, 250, 0.15) 100%); | |
| } | |
| .message-content th { | |
| padding: 0.75rem 1rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| text-align: left; | |
| border-bottom: 2px solid rgba(168, 85, 247, 0.4); | |
| text-transform: uppercase; | |
| font-size: 0.75rem; | |
| letter-spacing: 0.5px; | |
| white-space: nowrap; | |
| } | |
| .message-content td { | |
| padding: 0.75rem 1rem; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| color: var(--text-secondary); | |
| word-break: break-word; | |
| overflow-wrap: break-word; | |
| max-width: none; /* Remove max-width restriction */ | |
| min-width: 100px; /* Minimum width for readability */ | |
| line-height: 1.6; | |
| font-size: 0.9rem; | |
| } | |
| .message-content tbody tr { | |
| transition: background 0.2s ease; | |
| } | |
| .message-content tbody tr:hover { | |
| background: rgba(168, 85, 247, 0.08); | |
| } | |
| .message-content tbody tr:nth-child(even) { | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .message-content tbody tr:nth-child(even):hover { | |
| background: rgba(168, 85, 247, 0.08); | |
| } | |
| .message-content tbody tr:last-child td { | |
| border-bottom: none; | |
| } | |
| /* ==================== Code Blocks ==================== */ | |
| .message-content .code-block { | |
| margin: 1rem 0; | |
| padding: 1rem 1.25rem; | |
| background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 100%); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-lg); | |
| overflow-x: auto; | |
| font-family: 'Consolas', 'Monaco', 'Fira Code', monospace; | |
| font-size: 0.85rem; | |
| line-height: 1.6; | |
| } | |
| .message-content .code-block code { | |
| background: none; | |
| padding: 0; | |
| border: none; | |
| color: var(--info); | |
| } | |
| /* Inline code */ | |
| .message-content code.inline-code, | |
| .message-content code { | |
| background: rgba(96, 165, 250, 0.12); | |
| padding: 0.2rem 0.5rem; | |
| border-radius: var(--radius-sm); | |
| font-family: 'Consolas', 'Monaco', monospace; | |
| font-size: 0.85em; | |
| color: var(--info); | |
| border: 1px solid rgba(96, 165, 250, 0.2); | |
| } | |
| /* Bold and emphasis */ | |
| .message-content strong, | |
| .message-content b { | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); | |
| padding: 0.1rem 0.3rem; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| } | |
| .message-content em, | |
| .message-content i { | |
| font-style: italic; | |
| color: var(--accent-secondary); | |
| font-weight: 500; | |
| } | |
| /* ==================== Dividers ==================== */ | |
| .message-content hr.divider { | |
| border: none; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent); | |
| margin: 1.5rem 0; | |
| border-radius: 2px; | |
| } | |
| /* ==================== Blockquotes ==================== */ | |
| .message-content blockquote { | |
| border-left: 4px solid var(--accent-primary); | |
| margin: 1.25rem 0; | |
| padding: 0.875rem 1.25rem; | |
| background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(96, 165, 250, 0.08) 100%); | |
| border-radius: 0 var(--radius-md) var(--radius-md) 0; | |
| font-style: italic; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| line-height: 1.75; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| /* ==================== Typing Indicator ==================== */ | |
| .typing-indicator { | |
| display: flex; | |
| gap: 0.75rem; | |
| padding: 1rem; | |
| } | |
| .typing-dots { | |
| display: flex; | |
| gap: 4px; | |
| padding: 0.75rem 1rem; | |
| background: var(--bg-light); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| } | |
| .typing-dot { | |
| width: 6px; | |
| height: 6px; | |
| background: var(--text-muted); | |
| border-radius: 50%; | |
| animation: typingBounce 1.4s infinite ease-in-out; | |
| } | |
| .typing-dot:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .typing-dot:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-dot:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes typingBounce { | |
| 0%, | |
| 80%, | |
| 100% { | |
| transform: scale(0.6); | |
| opacity: 0.4; | |
| } | |
| 40% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| /* ==================== Chat Input ==================== */ | |
| .chat-input-container { | |
| padding: 1rem; | |
| background: var(--bg-dark); | |
| border-top: 1px solid var(--glass-border); | |
| } | |
| .chat-input-wrapper { | |
| display: flex; | |
| gap: 0.75rem; | |
| align-items: flex-end; | |
| } | |
| .chat-input { | |
| flex: 1; | |
| padding: 0.75rem 1rem; | |
| background: var(--bg-medium); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| color: var(--text-primary); | |
| font-size: 0.9rem; | |
| resize: none; | |
| max-height: 150px; | |
| font-family: inherit; | |
| transition: all var(--transition-fast); | |
| } | |
| .chat-input:focus { | |
| outline: none; | |
| border-color: rgba(255, 255, 255, 0.2); | |
| background: var(--bg-light); | |
| } | |
| .chat-input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .send-btn { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 50%; | |
| background: var(--accent-primary); | |
| border: none; | |
| color: var(--bg-darkest); | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-fast); | |
| } | |
| .send-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| .send-btn:disabled { | |
| opacity: 0.3; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| /* Stop Generation Button */ | |
| .stop-btn { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 50%; | |
| background: var(--error); | |
| border: none; | |
| color: white; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-fast); | |
| animation: pulse-stop 1.5s ease-in-out infinite; | |
| } | |
| .stop-btn:hover { | |
| transform: scale(1.1); | |
| background: #dc2626; | |
| } | |
| @keyframes pulse-stop { | |
| 0%, 100% { | |
| box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); | |
| } | |
| 50% { | |
| box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); | |
| } | |
| } | |
| /* ==================== Welcome Screen ==================== */ | |
| .welcome-screen { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 2rem; | |
| } | |
| .welcome-icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| } | |
| .welcome-title { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| } | |
| .welcome-subtitle { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| max-width: 400px; | |
| } | |
| .welcome-features { | |
| display: flex; | |
| gap: 0.75rem; | |
| margin-top: 1.5rem; | |
| } | |
| .feature-card { | |
| padding: 1rem; | |
| background: var(--bg-medium); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| width: 100px; | |
| text-align: center; | |
| transition: all var(--transition-smooth); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-3px); | |
| background: var(--bg-light); | |
| } | |
| .feature-icon { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .feature-title { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| /* ==================== Modal ==================== */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all var(--transition-smooth); | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal { | |
| background: var(--bg-dark); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-xl); | |
| padding: 2rem; | |
| width: 100%; | |
| max-width: 400px; | |
| transform: scale(0.95) translateY(20px); | |
| transition: transform var(--transition-smooth); | |
| } | |
| .modal-overlay.active .modal { | |
| transform: scale(1) translateY(0); | |
| } | |
| .modal-header { | |
| text-align: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-logo { | |
| width: 50px; | |
| height: 50px; | |
| background: var(--bg-light); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| margin: 0 auto 1rem; | |
| } | |
| .modal-title { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| } | |
| .modal-subtitle { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| margin-top: 0.25rem; | |
| } | |
| /* ==================== Auth Tabs ==================== */ | |
| .role-tabs, | |
| .auth-tabs { | |
| display: flex; | |
| background: var(--bg-medium); | |
| border-radius: var(--radius-md); | |
| padding: 4px; | |
| margin-bottom: 1rem; | |
| } | |
| .role-tab, | |
| .auth-tab { | |
| flex: 1; | |
| padding: 0.65rem; | |
| background: transparent; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .role-tab.active, | |
| .auth-tab.active { | |
| background: var(--bg-light); | |
| color: var(--text-primary); | |
| } | |
| .auth-tab.active { | |
| background: var(--accent-primary); | |
| color: var(--bg-darkest); | |
| } | |
| /* ==================== Form Styles ==================== */ | |
| .form-group { | |
| margin-bottom: 1rem; | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| margin-bottom: 0.4rem; | |
| color: var(--text-secondary); | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 0.7rem 1rem; | |
| background: var(--bg-medium); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| font-size: 0.9rem; | |
| transition: all var(--transition-fast); | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: rgba(255, 255, 255, 0.2); | |
| background: var(--bg-light); | |
| } | |
| .form-input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .form-error { | |
| font-size: 0.8rem; | |
| color: var(--error); | |
| margin-top: 0.4rem; | |
| } | |
| .auth-btn { | |
| width: 100%; | |
| padding: 0.8rem; | |
| margin-top: 0.5rem; | |
| } | |
| .modal-actions { | |
| display: flex; | |
| gap: 0.75rem; | |
| margin-top: 1rem; | |
| } | |
| .modal-actions .btn { | |
| flex: 1; | |
| } | |
| /* ==================== Buttons ==================== */ | |
| .btn { | |
| position: relative; | |
| padding: 0.6rem 1.2rem; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .btn-primary { | |
| background: var(--accent-primary); | |
| color: var(--bg-darkest); | |
| } | |
| .btn-primary:hover { | |
| background: var(--accent-secondary); | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-light); | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-primary); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-hover); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-muted); | |
| padding: 0.4rem; | |
| } | |
| .btn-ghost:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-light); | |
| } | |
| .btn-logout { | |
| background: rgba(248, 113, 113, 0.15); | |
| color: #f87171; | |
| padding: 0.35rem 0.75rem; | |
| font-size: 0.75rem; | |
| border: 1px solid rgba(248, 113, 113, 0.3); | |
| } | |
| .btn-logout:hover { | |
| background: rgba(248, 113, 113, 0.25); | |
| border-color: rgba(248, 113, 113, 0.5); | |
| } | |
| /* ==================== Document Viewer Modal ==================== */ | |
| .doc-viewer-modal { | |
| width: 90%; | |
| max-width: 900px; | |
| height: 80vh; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .doc-viewer-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 1.5rem; | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .doc-viewer-header h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .doc-viewer-content { | |
| flex: 1; | |
| overflow: auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| background: var(--bg-medium); | |
| } | |
| .doc-viewer-content iframe, | |
| .doc-viewer-content img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| } | |
| .doc-text-preview { | |
| width: 100%; | |
| height: 100%; | |
| overflow: auto; | |
| padding: 1rem; | |
| } | |
| .doc-text-preview pre { | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| font-size: 0.85rem; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |
| /* ==================== Empty State ==================== */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-muted); | |
| } | |
| .empty-state.small { | |
| padding: 0.75rem; | |
| } | |
| .empty-icon { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .empty-text { | |
| font-size: 0.8rem; | |
| } | |
| .empty-state.small .empty-text { | |
| font-size: 0.75rem; | |
| } | |
| /* ==================== Loading ==================== */ | |
| .loading-spinner { | |
| width: 18px; | |
| height: 18px; | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| border-top-color: var(--accent-primary); | |
| border-radius: 50%; | |
| animation: spin 0.7s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* ==================== Toast ==================== */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 1.5rem; | |
| right: 1.5rem; | |
| z-index: 2000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .toast { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.75rem 1rem; | |
| background: var(--bg-dark); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-md); | |
| animation: toastSlide 0.3s ease-out; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); | |
| } | |
| @keyframes toastSlide { | |
| from { | |
| opacity: 0; | |
| transform: translateX(50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .toast-message { | |
| font-size: 0.85rem; | |
| } | |
| .toast-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 0.25rem; | |
| } | |
| /* ==================== Utility Classes ==================== */ | |
| .hidden { | |
| display: none ; | |
| } | |
| .flex { | |
| display: flex; | |
| } | |
| .items-center { | |
| align-items: center; | |
| } | |
| .gap-2 { | |
| gap: 0.5rem; | |
| } | |
| .mt-3 { | |
| margin-top: 0.75rem; | |
| } | |
| /* ==================== Document Summary Panel ==================== */ | |
| .summary-panel { | |
| position: relative; | |
| background: linear-gradient(135deg, var(--bg-medium), var(--bg-light)); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| padding: 1.25rem; | |
| margin-bottom: 1rem; | |
| animation: summarySlideIn 0.3s ease-out; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| @keyframes summarySlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .summary-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .summary-icon { | |
| font-size: 1.25rem; | |
| } | |
| .summary-title { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .summary-content { | |
| padding-right: 1.5rem; | |
| } | |
| .summary-text { | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |
| .summary-close { | |
| position: absolute; | |
| top: 0.75rem; | |
| right: 0.75rem; | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 0.25rem; | |
| font-size: 0.9rem; | |
| transition: color var(--transition-fast); | |
| opacity: 0.6; | |
| } | |
| .summary-close:hover { | |
| color: var(--text-primary); | |
| opacity: 1; | |
| } | |
| /* ==================== Selected Document State ==================== */ | |
| .document-item.selected { | |
| background: var(--bg-light); | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); | |
| } | |
| .document-item.selected::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 3px; | |
| background: var(--accent-primary); | |
| border-radius: var(--radius-sm) 0 0 var(--radius-sm); | |
| } | |
| .document-item.selected .doc-name { | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| /* ==================== Mobile Navigation Bar ==================== */ | |
| .mobile-nav { | |
| display: none; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 70px; | |
| background: var(--bg-dark); | |
| border-top: 1px solid var(--glass-border); | |
| z-index: 1000; | |
| justify-content: space-around; | |
| align-items: center; | |
| padding: 0 1rem; | |
| padding-bottom: env(safe-area-inset-bottom, 0); | |
| box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .mobile-nav-btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.25rem; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| padding: 0.5rem 1.5rem; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| min-width: 70px; | |
| } | |
| .mobile-nav-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .mobile-nav-btn.active { | |
| color: var(--accent-primary); | |
| } | |
| .mobile-nav-btn .nav-icon { | |
| font-size: 1.5rem; | |
| line-height: 1; | |
| } | |
| .mobile-nav-btn .nav-label { | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| /* ==================== Mobile Backdrop ==================== */ | |
| .mobile-backdrop { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| z-index: 500; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity var(--transition-smooth), visibility var(--transition-smooth); | |
| } | |
| .mobile-backdrop.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| /* ==================== Tablet Breakpoint (768px - 1024px) ==================== */ | |
| @media screen and (max-width: 1024px) { | |
| :root { | |
| --sidebar-width: 260px; | |
| } | |
| .main-content { | |
| padding: 0.75rem; | |
| gap: 0.75rem; | |
| } | |
| .sidebar-section { | |
| padding: 0.75rem; | |
| } | |
| .chat-bucket-filter { | |
| padding: 0.6rem 1rem; | |
| gap: 0.5rem; | |
| } | |
| .welcome-title { | |
| font-size: 1.25rem; | |
| } | |
| .welcome-subtitle { | |
| font-size: 0.85rem; | |
| } | |
| } | |
| /* ==================== Mobile Breakpoint (< 768px) ==================== */ | |
| @media screen and (max-width: 768px) { | |
| :root { | |
| --sidebar-width: 85vw; | |
| --sidebar-collapsed: 0px; | |
| } | |
| /* Show mobile navigation */ | |
| .mobile-nav { | |
| display: flex; | |
| } | |
| .mobile-backdrop { | |
| display: block; | |
| } | |
| /* Ensure app container is above backdrop */ | |
| .app-container { | |
| z-index: 600; | |
| } | |
| /* Adjust main layout for mobile */ | |
| .main-content { | |
| padding: 0; | |
| gap: 0; | |
| flex-direction: column; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* ===== Off-Canvas Sidebars ===== */ | |
| .sidebar { | |
| position: fixed; | |
| top: 0; | |
| bottom: 70px; | |
| /* Above mobile nav */ | |
| width: var(--sidebar-width); | |
| max-width: 320px; | |
| z-index: 900; | |
| transition: transform var(--transition-smooth); | |
| border-radius: 0; | |
| background: var(--bg-dark); | |
| /* Solid background to prevent blur */ | |
| box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); | |
| } | |
| .sidebar .sidebar-content { | |
| opacity: 1; | |
| pointer-events: auto; | |
| padding: 1rem; | |
| padding-bottom: 2rem; | |
| } | |
| .sidebar-left { | |
| left: 0; | |
| transform: translateX(-100%); | |
| border-right: 1px solid var(--glass-border); | |
| } | |
| .sidebar-left.mobile-open { | |
| transform: translateX(0); | |
| } | |
| .sidebar-right { | |
| right: 0; | |
| transform: translateX(100%); | |
| border-left: 1px solid var(--glass-border); | |
| } | |
| .sidebar-right.mobile-open { | |
| transform: translateX(0); | |
| } | |
| /* Hide desktop sidebar toggles on mobile */ | |
| .sidebar-toggle { | |
| display: none; | |
| } | |
| /* ===== Chat Container Full Width ===== */ | |
| .chat-container { | |
| border-radius: 0; | |
| border: none; | |
| height: calc(100vh - 70px); | |
| /* Full height minus mobile nav */ | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* ===== Simplified Chat Header ===== */ | |
| .chat-bucket-filter { | |
| padding: 0.75rem; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .filter-label { | |
| display: none; | |
| } | |
| .chat-bucket-filter .custom-select.compact { | |
| flex: 1; | |
| min-width: 120px; | |
| } | |
| .btn-new-chat, | |
| .btn-clear-chat { | |
| padding: 0.5rem 0.6rem; | |
| font-size: 0.7rem; | |
| } | |
| .btn-new-chat { | |
| margin-left: 0; | |
| } | |
| /* ===== Chat Messages ===== */ | |
| .chat-messages { | |
| padding: 0.75rem; | |
| gap: 0.75rem; | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| .message { | |
| max-width: 92%; | |
| } | |
| .message-content { | |
| padding: 0.875rem 1rem; | |
| font-size: 0.875rem; | |
| } | |
| .message-avatar { | |
| width: 28px; | |
| height: 28px; | |
| font-size: 0.8rem; | |
| } | |
| /* ===== Chat Input ===== */ | |
| .chat-input-container { | |
| padding: 0.75rem; | |
| margin-bottom: 70px; | |
| /* Space for mobile nav */ | |
| background: var(--bg-dark); | |
| border-top: 1px solid var(--glass-border); | |
| flex-shrink: 0; | |
| } | |
| .chat-input { | |
| font-size: 16px; | |
| /* Prevents iOS zoom on focus */ | |
| padding: 0.875rem 1rem; | |
| } | |
| .send-btn { | |
| width: 48px; | |
| height: 48px; | |
| font-size: 1.2rem; | |
| } | |
| /* ===== Welcome Screen ===== */ | |
| .welcome-screen { | |
| padding: 1.5rem 1rem; | |
| } | |
| .welcome-icon img { | |
| width: 160px ; | |
| } | |
| .welcome-title { | |
| font-size: 1.2rem; | |
| } | |
| .welcome-subtitle { | |
| font-size: 0.85rem; | |
| max-width: 300px; | |
| } | |
| .welcome-features { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .feature-card { | |
| width: 85px; | |
| padding: 0.75rem; | |
| } | |
| .feature-icon { | |
| font-size: 1.25rem; | |
| } | |
| .feature-title { | |
| font-size: 0.7rem; | |
| } | |
| /* ===== Modal Responsiveness ===== */ | |
| .modal { | |
| width: 95%; | |
| max-width: none; | |
| margin: 1rem; | |
| padding: 1.5rem; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| } | |
| .modal-title { | |
| font-size: 1.1rem; | |
| } | |
| .modal-subtitle { | |
| font-size: 0.75rem; | |
| } | |
| .form-input { | |
| font-size: 16px; | |
| /* Prevents iOS zoom */ | |
| padding: 0.875rem 1rem; | |
| } | |
| .auth-btn { | |
| padding: 1rem; | |
| font-size: 0.9rem; | |
| } | |
| .modal-actions { | |
| flex-direction: column; | |
| } | |
| /* ===== Document Viewer Modal ===== */ | |
| .doc-viewer-modal { | |
| width: 100%; | |
| height: 100%; | |
| max-width: 100%; | |
| border-radius: 0; | |
| } | |
| .doc-viewer-header { | |
| padding: 0.875rem 1rem; | |
| } | |
| .doc-viewer-header h3 { | |
| font-size: 0.9rem; | |
| } | |
| /* ===== Sidebar Content Adjustments ===== */ | |
| .documents-section, | |
| .chat-history-section { | |
| max-height: none; | |
| flex: 0 0 auto; | |
| min-height: 0; | |
| } | |
| .section-body { | |
| max-height: 80vh; | |
| /* Allow large lists to expand fully on mobile */ | |
| } | |
| .sidebar-section { | |
| padding: 1rem; | |
| } | |
| .sidebar-title { | |
| font-size: 0.8rem; | |
| } | |
| .user-section { | |
| padding: 1rem ; | |
| } | |
| .user-avatar { | |
| width: 36px; | |
| height: 36px; | |
| font-size: 0.9rem; | |
| } | |
| .user-details span:first-child { | |
| font-size: 0.95rem; | |
| } | |
| .user-role { | |
| font-size: 0.75rem; | |
| } | |
| .btn-logout { | |
| padding: 0.4rem 0.8rem; | |
| font-size: 0.8rem; | |
| } | |
| /* ===== Upload Zone ===== */ | |
| .upload-zone { | |
| padding: 1.25rem; | |
| } | |
| .upload-icon { | |
| font-size: 1.75rem; | |
| } | |
| .upload-title { | |
| font-size: 0.85rem; | |
| } | |
| /* ===== Document & Chat History Items ===== */ | |
| .document-item { | |
| padding: 0.75rem; | |
| } | |
| .doc-icon { | |
| width: 36px; | |
| height: 36px; | |
| } | |
| .doc-name { | |
| font-size: 0.85rem; | |
| } | |
| .doc-view, | |
| .doc-delete { | |
| opacity: 1; | |
| /* Always visible on mobile */ | |
| padding: 0.5rem; | |
| font-size: 0.9rem; | |
| } | |
| .chat-history-item { | |
| padding: 0.75rem; | |
| } | |
| .chat-history-delete { | |
| opacity: 1; | |
| /* Always visible on mobile */ | |
| } | |
| /* ===== Bucket Items ===== */ | |
| .bucket-item { | |
| padding: 0.75rem; | |
| } | |
| .bucket-name { | |
| font-size: 0.9rem; | |
| } | |
| .bucket-delete { | |
| opacity: 1; | |
| /* Always visible on mobile */ | |
| } | |
| /* ===== Custom Dropdowns ===== */ | |
| .select-trigger { | |
| padding: 0.75rem 1rem; | |
| } | |
| .select-value { | |
| font-size: 0.9rem; | |
| } | |
| .select-option { | |
| padding: 0.875rem 1rem; | |
| font-size: 0.9rem; | |
| } | |
| /* ===== Toast Notifications ===== */ | |
| .toast-container { | |
| bottom: 80px; | |
| /* Above mobile nav */ | |
| left: 1rem; | |
| right: 1rem; | |
| } | |
| .toast { | |
| width: 100%; | |
| } | |
| /* ===== Summary Panel ===== */ | |
| .summary-panel { | |
| padding: 1rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .summary-title { | |
| font-size: 0.85rem; | |
| } | |
| .summary-text { | |
| font-size: 0.85rem; | |
| } | |
| /* ===== Tables in Messages ===== */ | |
| .message-content .table-wrapper { | |
| margin: 1rem -0.5rem; | |
| border-radius: var(--radius-md); | |
| overflow-x: auto; | |
| } | |
| .message-content table { | |
| font-size: 0.8rem; | |
| min-width: 400px; | |
| } | |
| .message-content th, | |
| .message-content td { | |
| padding: 0.6rem 0.75rem; | |
| } | |
| /* ===== Code Blocks ===== */ | |
| .message-content .code-block { | |
| padding: 0.875rem 1rem; | |
| font-size: 0.8rem; | |
| margin: 0.75rem -0.25rem; | |
| } | |
| /* ===== Lists ===== */ | |
| .message-content .formatted-list li { | |
| padding: 0.5rem 0.5rem 0.5rem 2rem; | |
| } | |
| } | |
| /* ==================== Small Mobile (< 480px) ==================== */ | |
| @media screen and (max-width: 480px) { | |
| .mobile-nav { | |
| height: 65px; | |
| padding: 0 0.5rem; | |
| } | |
| .mobile-nav-btn { | |
| min-width: 60px; | |
| padding: 0.4rem 1rem; | |
| } | |
| .mobile-nav-btn .nav-icon { | |
| font-size: 1.35rem; | |
| } | |
| .mobile-nav-btn .nav-label { | |
| font-size: 0.6rem; | |
| } | |
| .sidebar { | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| .chat-bucket-filter { | |
| padding: 0.6rem; | |
| } | |
| .message { | |
| max-width: 95%; | |
| } | |
| .message-content { | |
| padding: 0.75rem 0.875rem; | |
| font-size: 0.85rem; | |
| } | |
| .message-avatar { | |
| width: 26px; | |
| height: 26px; | |
| } | |
| .welcome-icon img { | |
| width: 140px ; | |
| } | |
| .welcome-title { | |
| font-size: 1.1rem; | |
| } | |
| .welcome-subtitle { | |
| font-size: 0.8rem; | |
| } | |
| .modal { | |
| padding: 1.25rem; | |
| margin: 0.5rem; | |
| } | |
| .role-tabs, | |
| .auth-tabs { | |
| padding: 3px; | |
| } | |
| .role-tab, | |
| .auth-tab { | |
| padding: 0.6rem 0.5rem; | |
| font-size: 0.8rem; | |
| } | |
| .form-label { | |
| font-size: 0.75rem; | |
| } | |
| } | |
| /* ==================== Landscape Mobile ==================== */ | |
| @media screen and (max-width: 768px) and (orientation: landscape) { | |
| .mobile-nav { | |
| height: 55px; | |
| } | |
| .main-content { | |
| padding-bottom: 55px; | |
| } | |
| .sidebar { | |
| bottom: 55px; | |
| } | |
| .mobile-nav-btn .nav-label { | |
| display: none; | |
| } | |
| .mobile-nav-btn .nav-icon { | |
| font-size: 1.5rem; | |
| } | |
| .welcome-screen { | |
| padding: 1rem; | |
| flex-direction: row; | |
| gap: 2rem; | |
| } | |
| .welcome-icon, | |
| .welcome-title, | |
| .welcome-subtitle { | |
| margin: 0; | |
| } | |
| } | |
| /* ==================== Touch Device Optimizations ==================== */ | |
| @media (hover: none) and (pointer: coarse) { | |
| /* Larger touch targets */ | |
| .btn { | |
| min-height: 44px; | |
| } | |
| .btn-ghost { | |
| min-width: 44px; | |
| min-height: 44px; | |
| } | |
| .document-item, | |
| .bucket-item, | |
| .chat-history-item { | |
| min-height: 48px; | |
| } | |
| /* Remove hover effects that don't work on touch */ | |
| .upload-zone:hover { | |
| transform: none; | |
| } | |
| .feature-card:hover { | |
| transform: none; | |
| } | |
| /* Always show action buttons */ | |
| .doc-view, | |
| .doc-delete, | |
| .bucket-delete, | |
| .chat-history-delete { | |
| opacity: 1; | |
| } | |
| } | |
| /* ==================== Safe Area Support (iPhone X+) ==================== */ | |
| @supports (padding-bottom: env(safe-area-inset-bottom)) { | |
| .mobile-nav { | |
| padding-bottom: env(safe-area-inset-bottom); | |
| height: calc(70px + env(safe-area-inset-bottom)); | |
| } | |
| @media screen and (max-width: 768px) { | |
| .main-content { | |
| padding-bottom: calc(70px + env(safe-area-inset-bottom)); | |
| } | |
| .sidebar { | |
| bottom: calc(70px + env(safe-area-inset-bottom)); | |
| } | |
| } | |
| } | |
| /* ==================== Reduced Motion ==================== */ | |
| @media (prefers-reduced-motion: reduce) { | |
| .sidebar, | |
| .mobile-backdrop, | |
| .modal, | |
| .message { | |
| transition: none; | |
| } | |
| .typing-dot { | |
| animation: none; | |
| } | |
| } |