Spaces:
Sleeping
Sleeping
| :root { | |
| /* Colors */ | |
| --color-background: rgba(252, 252, 249, 1); | |
| --color-surface: rgba(255, 255, 253, 1); | |
| --color-text: rgba(19, 52, 59, 1); | |
| --color-text-secondary: rgba(98, 108, 113, 1); | |
| --color-primary: rgba(33, 128, 141, 1); | |
| --color-primary-hover: rgba(29, 116, 128, 1); | |
| --color-primary-active: rgba(26, 104, 115, 1); | |
| --color-secondary: rgba(94, 82, 64, 0.12); | |
| --color-secondary-hover: rgba(94, 82, 64, 0.2); | |
| --color-secondary-active: rgba(94, 82, 64, 0.25); | |
| --color-border: rgba(94, 82, 64, 0.2); | |
| --color-btn-primary-text: rgba(252, 252, 249, 1); | |
| --color-card-border: rgba(94, 82, 64, 0.12); | |
| --color-card-border-inner: rgba(94, 82, 64, 0.12); | |
| --color-error: rgba(192, 21, 47, 1); | |
| --color-success: rgba(33, 128, 141, 1); | |
| --color-warning: rgba(168, 75, 47, 1); | |
| --color-info: rgba(98, 108, 113, 1); | |
| --color-focus-ring: rgba(33, 128, 141, 0.4); | |
| --color-select-caret: rgba(19, 52, 59, 0.8); | |
| /* Common style patterns */ | |
| --focus-ring: 0 0 0 3px var(--color-focus-ring); | |
| --focus-outline: 2px solid var(--color-primary); | |
| --status-bg-opacity: 0.15; | |
| --status-border-opacity: 0.25; | |
| --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); | |
| --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); | |
| /* RGB versions for opacity control */ | |
| --color-success-rgb: 33, 128, 141; | |
| --color-error-rgb: 192, 21, 47; | |
| --color-warning-rgb: 168, 75, 47; | |
| --color-info-rgb: 98, 108, 113; | |
| /* Typography */ | |
| --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; | |
| --font-size-xs: 11px; | |
| --font-size-sm: 12px; | |
| --font-size-base: 14px; | |
| --font-size-md: 14px; | |
| --font-size-lg: 16px; | |
| --font-size-xl: 18px; | |
| --font-size-2xl: 20px; | |
| --font-size-3xl: 24px; | |
| --font-size-4xl: 30px; | |
| --font-weight-normal: 400; | |
| --font-weight-medium: 500; | |
| --font-weight-semibold: 550; | |
| --font-weight-bold: 600; | |
| --line-height-tight: 1.2; | |
| --line-height-normal: 1.5; | |
| --letter-spacing-tight: -0.01em; | |
| /* Spacing */ | |
| --space-0: 0; | |
| --space-1: 1px; | |
| --space-2: 2px; | |
| --space-4: 4px; | |
| --space-6: 6px; | |
| --space-8: 8px; | |
| --space-10: 10px; | |
| --space-12: 12px; | |
| --space-16: 16px; | |
| --space-20: 20px; | |
| --space-24: 24px; | |
| --space-32: 32px; | |
| /* Border Radius */ | |
| --radius-sm: 6px; | |
| --radius-base: 8px; | |
| --radius-md: 10px; | |
| --radius-lg: 12px; | |
| --radius-full: 9999px; | |
| /* Shadows */ | |
| --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02); | |
| --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03); | |
| /* Animation */ | |
| --duration-fast: 150ms; | |
| --duration-normal: 250ms; | |
| --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); | |
| /* Layout */ | |
| --container-sm: 640px; | |
| --container-md: 768px; | |
| --container-lg: 1024px; | |
| --container-xl: 1280px; | |
| } | |
| /* Dark mode colors */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --color-background: rgba(31, 33, 33, 1); | |
| --color-surface: rgba(38, 40, 40, 1); | |
| --color-text: rgba(245, 245, 245, 1); | |
| --color-text-secondary: rgba(167, 169, 169, 0.7); | |
| --color-primary: rgba(50, 184, 198, 1); | |
| --color-primary-hover: rgba(45, 166, 178, 1); | |
| --color-primary-active: rgba(41, 150, 161, 1); | |
| --color-secondary: rgba(119, 124, 124, 0.15); | |
| --color-secondary-hover: rgba(119, 124, 124, 0.25); | |
| --color-secondary-active: rgba(119, 124, 124, 0.3); | |
| --color-border: rgba(119, 124, 124, 0.3); | |
| --color-error: rgba(255, 84, 89, 1); | |
| --color-success: rgba(50, 184, 198, 1); | |
| --color-warning: rgba(230, 129, 97, 1); | |
| --color-info: rgba(167, 169, 169, 1); | |
| --color-focus-ring: rgba(50, 184, 198, 0.4); | |
| --color-btn-primary-text: rgba(19, 52, 59, 1); | |
| --color-card-border: rgba(119, 124, 124, 0.2); | |
| --color-card-border-inner: rgba(119, 124, 124, 0.15); | |
| --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |
| --button-border-secondary: rgba(119, 124, 124, 0.2); | |
| --color-border-secondary: rgba(119, 124, 124, 0.2); | |
| --color-select-caret: rgba(245, 245, 245, 0.8); | |
| /* RGB versions for dark mode */ | |
| --color-success-rgb: 50, 184, 198; | |
| --color-error-rgb: 255, 84, 89; | |
| --color-warning-rgb: 230, 129, 97; | |
| --color-info-rgb: 167, 169, 169; | |
| } | |
| } | |
| /* Base styles */ | |
| html { | |
| font-size: var(--font-size-base); | |
| font-family: var(--font-family-base); | |
| line-height: var(--line-height-normal); | |
| color: var(--color-text); | |
| background-color: var(--color-background); | |
| -webkit-font-smoothing: antialiased; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| *, *::before, *::after { | |
| box-sizing: inherit; | |
| } | |
| /* Typography */ | |
| h1, h2, h3, h4, h5, h6 { | |
| margin: 0; | |
| font-weight: var(--font-weight-semibold); | |
| line-height: var(--line-height-tight); | |
| color: var(--color-text); | |
| letter-spacing: var(--letter-spacing-tight); | |
| } | |
| h1 { font-size: var(--font-size-4xl); } | |
| h2 { font-size: var(--font-size-3xl); } | |
| h3 { font-size: var(--font-size-2xl); } | |
| h4 { font-size: var(--font-size-xl); } | |
| h5 { font-size: var(--font-size-lg); } | |
| h6 { font-size: var(--font-size-md); } | |
| p { | |
| margin: 0 0 var(--space-16) 0; | |
| } | |
| a { | |
| color: var(--color-primary); | |
| text-decoration: none; | |
| transition: color var(--duration-fast) var(--ease-standard); | |
| } | |
| a:hover { | |
| color: var(--color-primary-hover); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-8) var(--space-16); | |
| border-radius: var(--radius-base); | |
| font-size: var(--font-size-base); | |
| font-weight: 500; | |
| line-height: 1.5; | |
| cursor: pointer; | |
| transition: all var(--duration-normal) var(--ease-standard); | |
| border: none; | |
| text-decoration: none; | |
| position: relative; | |
| } | |
| .btn:focus-visible { | |
| outline: none; | |
| box-shadow: var(--focus-ring); | |
| } | |
| .btn--primary { | |
| background: var(--color-primary); | |
| color: var(--color-btn-primary-text); | |
| } | |
| .btn--primary:hover { | |
| background: var(--color-primary-hover); | |
| } | |
| .btn--primary:active { | |
| background: var(--color-primary-active); | |
| } | |
| .btn--secondary { | |
| background: var(--color-secondary); | |
| color: var(--color-text); | |
| } | |
| .btn--secondary:hover { | |
| background: var(--color-secondary-hover); | |
| } | |
| .btn--secondary:active { | |
| background: var(--color-secondary-active); | |
| } | |
| .btn--outline { | |
| background: transparent; | |
| border: 1px solid var(--color-border); | |
| color: var(--color-text); | |
| } | |
| .btn--outline:hover { | |
| background: var(--color-secondary); | |
| } | |
| .btn--sm { | |
| padding: var(--space-4) var(--space-12); | |
| font-size: var(--font-size-sm); | |
| border-radius: var(--radius-sm); | |
| } | |
| .btn--lg { | |
| padding: var(--space-10) var(--space-20); | |
| font-size: var(--font-size-lg); | |
| border-radius: var(--radius-md); | |
| } | |
| .btn--full-width { | |
| width: 100%; | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn i { | |
| margin-right: var(--space-4); | |
| } | |
| .btn:last-child i, | |
| .btn--sm i { | |
| margin-right: 0; | |
| } | |
| /* Form elements */ | |
| .form-control { | |
| display: block; | |
| width: 100%; | |
| padding: var(--space-8) var(--space-12); | |
| font-size: var(--font-size-md); | |
| line-height: 1.5; | |
| color: var(--color-text); | |
| background-color: var(--color-surface); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-base); | |
| transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); | |
| } | |
| select.form-control { | |
| padding: var(--space-8) var(--space-12); | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| background-image: var(--select-caret-light); | |
| background-repeat: no-repeat; | |
| background-position: right var(--space-12) center; | |
| background-size: 16px; | |
| padding-right: var(--space-32); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| select.form-control { | |
| background-image: var(--select-caret-dark); | |
| } | |
| } | |
| .form-control:focus { | |
| border-color: var(--color-primary); | |
| outline: var(--focus-outline); | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: var(--space-8); | |
| font-weight: var(--font-weight-medium); | |
| font-size: var(--font-size-sm); | |
| } | |
| .form-group { | |
| margin-bottom: var(--space-16); | |
| } | |
| /* Card component */ | |
| .card { | |
| background-color: var(--color-surface); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--color-card-border); | |
| box-shadow: var(--shadow-sm); | |
| overflow: hidden; | |
| transition: box-shadow var(--duration-normal) var(--ease-standard); | |
| } | |
| .card:hover { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .card__body { | |
| padding: var(--space-16); | |
| } | |
| .card__header { | |
| padding: var(--space-16); | |
| border-bottom: 1px solid var(--color-card-border-inner); | |
| } | |
| /* Container layout */ | |
| .container { | |
| width: 100%; | |
| margin-right: auto; | |
| margin-left: auto; | |
| padding-right: var(--space-16); | |
| padding-left: var(--space-16); | |
| } | |
| @media (min-width: 640px) { .container { max-width: var(--container-sm); } } | |
| @media (min-width: 768px) { .container { max-width: var(--container-md); } } | |
| @media (min-width: 1024px) { .container { max-width: var(--container-lg); } } | |
| @media (min-width: 1280px) { .container { max-width: var(--container-xl); } } | |
| /* Utility classes */ | |
| .flex { display: flex; } | |
| .flex-col { flex-direction: column; } | |
| .items-center { align-items: center; } | |
| .justify-center { justify-content: center; } | |
| .justify-between { justify-content: space-between; } | |
| .gap-4 { gap: var(--space-4); } | |
| .gap-8 { gap: var(--space-8); } | |
| .gap-16 { gap: var(--space-16); } | |
| .mb-8 { margin-bottom: var(--space-8); } | |
| .block { display: block; } | |
| .hidden { display: none; } | |
| /* Accessibility */ | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border-width: 0; | |
| } | |
| :focus-visible { | |
| outline: var(--focus-outline); | |
| outline-offset: 2px; | |
| } | |
| /* Custom styles building on the design system */ | |
| .app-container { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| background: linear-gradient(135deg, var(--color-background) 0%, var(--color-surface) 100%); | |
| } | |
| /* Header Styles */ | |
| .header { | |
| background: var(--color-surface); | |
| border-bottom: 1px solid var(--color-border); | |
| box-shadow: var(--shadow-sm); | |
| padding: var(--space-16) 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .logo-container { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-12); | |
| } | |
| .logo { | |
| font-size: var(--font-size-4xl); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--color-primary); | |
| margin: 0; | |
| background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .tagline { | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-secondary); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| /* Main Content Layout */ | |
| .main-content { | |
| flex: 1; | |
| padding: var(--space-24) var(--space-16); | |
| } | |
| .content-wrapper { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: var(--space-24); | |
| height: calc(100vh - 200px); | |
| max-height: 800px; | |
| } | |
| /* Sidebar Styles */ | |
| .sidebar { | |
| background: var(--color-surface); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--color-card-border); | |
| box-shadow: var(--shadow-md); | |
| padding: var(--space-20); | |
| overflow-y: auto; | |
| height: fit-content; | |
| max-height: 100%; | |
| } | |
| .sidebar-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-20); | |
| padding-bottom: var(--space-12); | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .sidebar-header h3 { | |
| color: var(--color-primary); | |
| margin: 0; | |
| } | |
| .sidebar-section { | |
| margin-bottom: var(--space-24); | |
| } | |
| .sidebar-section h4 { | |
| font-size: var(--font-size-md); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--color-text); | |
| margin-bottom: var(--space-12); | |
| } | |
| .sidebar-section:last-child { | |
| margin-bottom: 0; | |
| } | |
| /* Quick Queries */ | |
| .quick-queries { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-8); | |
| } | |
| .query-btn { | |
| background: var(--color-secondary); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-base); | |
| padding: var(--space-8) var(--space-12); | |
| text-align: left; | |
| cursor: pointer; | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text); | |
| transition: all var(--duration-fast) var(--ease-standard); | |
| } | |
| .query-btn:hover { | |
| background: var(--color-secondary-hover); | |
| transform: translateY(-1px); | |
| } | |
| /* Chat Area - UPDATED */ | |
| .chat-area { | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--color-surface); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--color-card-border); | |
| box-shadow: var(--shadow-md); | |
| overflow: hidden; | |
| position: relative; | |
| min-height: 400px; | |
| max-height: calc(100vh - 200px); | |
| } | |
| .chat-container { | |
| flex: 1; | |
| padding: var(--space-20); | |
| padding-bottom: calc(var(--space-20) + 80px); /* Add bottom padding to prevent content overlap */ | |
| overflow-y: auto; | |
| min-height: 300px; | |
| max-height: calc(100vh - 350px); /* Adjusted to account for input container */ | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-16); | |
| } | |
| /* Message Bubbles */ | |
| .message { | |
| display: flex; | |
| margin-bottom: var(--space-16); | |
| animation: fadeInUp 0.3s ease-out; | |
| } | |
| .message.user { | |
| justify-content: flex-end; | |
| } | |
| .message.bot { | |
| justify-content: flex-start; | |
| } | |
| .message-bubble { | |
| max-width: 70%; | |
| padding: var(--space-12) var(--space-16); | |
| border-radius: var(--radius-lg); | |
| position: relative; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .message.user .message-bubble { | |
| background: var(--color-primary); | |
| color: var(--color-btn-primary-text); | |
| border-bottom-right-radius: var(--radius-sm); | |
| } | |
| .message.bot .message-bubble { | |
| background: var(--color-secondary); | |
| color: var(--color-text); | |
| border-bottom-left-radius: var(--radius-sm); | |
| } | |
| .message-content { | |
| margin: 0; | |
| line-height: var(--line-height-normal); | |
| } | |
| .message-time { | |
| font-size: var(--font-size-xs); | |
| opacity: 0.7; | |
| margin-top: var(--space-4); | |
| } | |
| .message-actions { | |
| display: flex; | |
| gap: var(--space-8); | |
| margin-top: var(--space-8); | |
| } | |
| .copy-btn { | |
| background: none; | |
| border: none; | |
| color: var(--color-text-secondary); | |
| cursor: pointer; | |
| font-size: var(--font-size-xs); | |
| padding: var(--space-2); | |
| border-radius: var(--radius-sm); | |
| transition: color var(--duration-fast); | |
| } | |
| .copy-btn:hover { | |
| color: var(--color-text); | |
| } | |
| /* Typing Indicator */ | |
| .typing-indicator { | |
| display: flex; | |
| justify-content: flex-start; | |
| margin-bottom: var(--space-16); | |
| } | |
| .typing-bubble { | |
| background: var(--color-secondary); | |
| padding: var(--space-12) var(--space-16); | |
| border-radius: var(--radius-lg); | |
| border-bottom-left-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| } | |
| .typing-dots { | |
| display: flex; | |
| gap: var(--space-2); | |
| } | |
| .typing-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--color-text-secondary); | |
| animation: typingDots 1.4s infinite ease-in-out; | |
| } | |
| .typing-dot:nth-child(1) { animation-delay: -0.32s; } | |
| .typing-dot:nth-child(2) { animation-delay: -0.16s; } | |
| /* Chat Input - UPDATED */ | |
| .chat-input-container { | |
| padding: var(--space-20); | |
| border-top: 1px solid var(--color-border); | |
| background: var(--color-surface); | |
| position: sticky; | |
| bottom: 0; | |
| z-index: 10; | |
| box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Add subtle shadow for separation */ | |
| } | |
| .input-wrapper { | |
| display: flex; | |
| gap: var(--space-12); | |
| align-items: flex-end; | |
| } | |
| .input-wrapper .form-control { | |
| flex: 1; | |
| resize: none; | |
| min-height: 44px; | |
| max-height: 120px; | |
| } | |
| #send-btn { | |
| flex-shrink: 0; | |
| height: 44px; | |
| width: 44px; | |
| border-radius: 50%; | |
| padding: 0; | |
| } | |
| /* Welcome Message */ | |
| .welcome-message { | |
| text-align: center; | |
| color: var(--color-text-secondary); | |
| padding: var(--space-32); | |
| } | |
| .welcome-message h3 { | |
| color: var(--color-primary); | |
| margin-bottom: var(--space-16); | |
| } | |
| .welcome-message ul { | |
| text-align: left; | |
| max-width: 400px; | |
| margin: var(--space-16) auto; | |
| } | |
| /* Footer */ | |
| .footer { | |
| background: var(--color-surface); | |
| border-top: 1px solid var(--color-border); | |
| padding: var(--space-16) 0; | |
| margin-top: auto; | |
| } | |
| .footer p { | |
| margin: 0; | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-secondary); | |
| } | |
| .footer a { | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-secondary); | |
| text-decoration: none; | |
| } | |
| .footer a:hover { | |
| color: var(--color-primary); | |
| } | |
| /* Modal Styles */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 1000; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(4px); | |
| } | |
| .modal.show { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| .modal-content { | |
| max-width: 500px; | |
| width: 90%; | |
| margin: var(--space-20); | |
| animation: slideInUp 0.3s ease-out; | |
| } | |
| .modal-close { | |
| cursor: pointer; | |
| } | |
| /* Responsive Design - UPDATED */ | |
| .mobile-only { | |
| display: none; | |
| } | |
| @media (max-width: 768px) { | |
| .content-wrapper { | |
| grid-template-columns: 1fr; | |
| gap: 0; | |
| height: calc(100vh - 150px); /* Adjusted for mobile */ | |
| } | |
| .sidebar { | |
| position: fixed; | |
| top: 0; | |
| left: -100%; | |
| width: 280px; | |
| height: 100vh; | |
| z-index: 200; | |
| transition: left var(--duration-normal) var(--ease-standard); | |
| border-radius: 0; | |
| border-right: 1px solid var(--color-border); | |
| border-top: none; | |
| border-left: none; | |
| border-bottom: none; | |
| } | |
| .sidebar.show { | |
| left: 0; | |
| } | |
| .mobile-only { | |
| display: inline-flex; | |
| } | |
| .tagline { | |
| display: none; | |
| } | |
| .chat-container { | |
| min-height: 250px; | |
| max-height: calc(100vh - 300px); /* Better mobile spacing */ | |
| padding-bottom: calc(var(--space-20) + 60px); /* Mobile-specific bottom padding */ | |
| } | |
| .chat-input-container { | |
| padding: var(--space-16); /* Slightly less padding on mobile */ | |
| } | |
| .message-bubble { | |
| max-width: 85%; | |
| } | |
| } | |
| /* Additional zoom handling - NEW */ | |
| @media (min-resolution: 1.5dppx) { | |
| .chat-input-container { | |
| padding-bottom: calc(var(--space-20) + 10px); /* Extra padding for high DPI displays */ | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideInUp { | |
| from { | |
| transform: translateY(30px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes typingDots { | |
| 0%, 80%, 100% { | |
| transform: scale(0.8); | |
| opacity: 0.5; | |
| } | |
| 40% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| /* Scrollbar Styling */ | |
| .chat-container::-webkit-scrollbar, | |
| .sidebar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .chat-container::-webkit-scrollbar-track, | |
| .sidebar::-webkit-scrollbar-track { | |
| background: var(--color-secondary); | |
| border-radius: var(--radius-sm); | |
| } | |
| .chat-container::-webkit-scrollbar-thumb, | |
| .sidebar::-webkit-scrollbar-thumb { | |
| background: var(--color-border); | |
| border-radius: var(--radius-sm); | |
| } | |
| .chat-container::-webkit-scrollbar-thumb:hover, | |
| .sidebar::-webkit-scrollbar-thumb:hover { | |
| background: var(--color-text-secondary); | |
| } | |
| /* Status indicators */ | |
| .status-online { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| font-size: var(--font-size-sm); | |
| color: var(--color-success); | |
| } | |
| .status-online::before { | |
| content: ''; | |
| width: 8px; | |
| height: 8px; | |
| background: var(--color-success); | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(var(--color-success-rgb), 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), 0); | |
| } | |
| } | |
| /* Focus states for accessibility */ | |
| .query-btn:focus-visible, | |
| #chat-input:focus-visible, | |
| #syllabus-select:focus-visible { | |
| outline: var(--focus-outline); | |
| outline-offset: 2px; | |
| } | |
| /* Loading state */ | |
| .loading { | |
| opacity: 0.7; | |
| pointer-events: none; | |
| } | |
| /* Error states */ | |
| .error-message { | |
| color: var(--color-error); | |
| font-size: var(--font-size-sm); | |
| margin-top: var(--space-4); | |
| } | |
| /* Success states */ | |
| .success-message { | |
| color: var(--color-success); | |
| font-size: var(--font-size-sm); | |
| margin-top: var(--space-4); | |
| } |