Spaces:
Sleeping
Sleeping
| /* ===== Color Tokens ===== */ | |
| :root { | |
| --bg: #f0eef6; | |
| --surface: #ffffff; | |
| --surface-hover: #f5f3fb; | |
| --border: #ddd8ee; | |
| --border-light: #eae6f5; | |
| --text: #1a1a2e; | |
| --text-secondary: #6e6b85; | |
| --text-tertiary: #9896b0; | |
| --accent: #7c5cfc; | |
| --accent-light: #ece7ff; | |
| --accent-lighter: #f5f2ff; | |
| --accent-dark: #6344e0; | |
| --danger: #e04d6b; | |
| --shadow-sm: 0 1px 4px rgba(26, 26, 46, 0.06); | |
| --shadow-md: 0 4px 16px rgba(26, 26, 46, 0.08); | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 20px; | |
| --radius-full: 24px; | |
| --transition: all 0.2s ease; | |
| /* Dark sidebar tokens */ | |
| --sidebar-bg: #1a1a2e; | |
| --sidebar-surface: #232342; | |
| --sidebar-border: #2d2b50; | |
| --sidebar-text: #ffffff; | |
| --sidebar-text-secondary: #9896b0; | |
| --sidebar-hover: #2a2a4a; | |
| } | |
| /* ===== App Shell ===== */ | |
| .app { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| background: var(--bg); | |
| } | |
| .app-header { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 12px; | |
| padding: 16px 28px; | |
| border-bottom: 1px solid var(--sidebar-border); | |
| background: var(--sidebar-bg); | |
| } | |
| .app-header__logo { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: #ffffff; | |
| letter-spacing: -0.02em; | |
| } | |
| .app-header__tagline { | |
| font-size: 13px; | |
| color: var(--sidebar-text-secondary); | |
| } | |
| .app-main { | |
| display: flex; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| /* Loading */ | |
| .app-loading { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| gap: 16px; | |
| color: var(--text-secondary); | |
| background: var(--sidebar-bg); | |
| } | |
| .app-loading__spinner { | |
| width: 32px; | |
| height: 32px; | |
| border: 3px solid var(--border); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| /* ===== Upload Panel (Left Sidebar) ===== */ | |
| .upload-panel { | |
| width: 340px; | |
| min-width: 340px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| padding: 24px; | |
| border-right: 1px solid var(--sidebar-border); | |
| background: var(--sidebar-bg); | |
| overflow-y: auto; | |
| } | |
| .upload-panel__header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .upload-panel__title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--sidebar-text); | |
| } | |
| .upload-panel__badge { | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--accent); | |
| background: rgba(124, 92, 252, 0.15); | |
| padding: 2px 10px; | |
| border-radius: var(--radius-full); | |
| } | |
| .upload-panel__hint { | |
| padding: 16px; | |
| text-align: center; | |
| color: var(--sidebar-text-secondary); | |
| font-size: 13px; | |
| line-height: 1.6; | |
| } | |
| /* ===== Upload Zone ===== */ | |
| .upload-zone { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 32px 20px; | |
| border: 2px dashed var(--sidebar-border); | |
| border-radius: var(--radius-lg); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| background: var(--sidebar-surface); | |
| } | |
| .upload-zone:hover { | |
| border-color: var(--accent); | |
| background: rgba(124, 92, 252, 0.08); | |
| } | |
| .upload-zone--dragging { | |
| border-color: var(--accent); | |
| border-style: solid; | |
| background: rgba(124, 92, 252, 0.12); | |
| transform: scale(1.01); | |
| } | |
| .upload-zone--disabled { | |
| opacity: 0.5; | |
| pointer-events: none; | |
| } | |
| .upload-zone__icon { | |
| color: var(--accent); | |
| opacity: 0.7; | |
| } | |
| .upload-zone--dragging .upload-zone__icon { | |
| opacity: 1; | |
| transform: translateY(-2px); | |
| transition: var(--transition); | |
| } | |
| .upload-zone__text { | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--sidebar-text); | |
| } | |
| .upload-zone__subtext { | |
| font-size: 13px; | |
| color: var(--sidebar-text-secondary); | |
| } | |
| .upload-zone__browse { | |
| color: var(--accent); | |
| font-weight: 500; | |
| text-decoration: underline; | |
| text-underline-offset: 2px; | |
| } | |
| .upload-zone__formats { | |
| font-size: 11px; | |
| color: var(--sidebar-text-secondary); | |
| margin-top: 4px; | |
| } | |
| /* ===== File List ===== */ | |
| .file-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .file-list__title { | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--sidebar-text-secondary); | |
| margin-bottom: 4px; | |
| } | |
| .file-list__items { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .file-item { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| background: var(--sidebar-surface); | |
| border-radius: var(--radius-md); | |
| position: relative; | |
| overflow: hidden; | |
| transition: var(--transition); | |
| } | |
| .file-item--done { | |
| background: rgba(124, 92, 252, 0.1); | |
| } | |
| .file-item--error { | |
| background: rgba(224, 77, 107, 0.1); | |
| } | |
| .file-item__icon { | |
| color: var(--sidebar-text-secondary); | |
| display: flex; | |
| } | |
| .file-item--done .file-item__icon { | |
| color: var(--accent); | |
| } | |
| .file-item__info { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| } | |
| .file-item__name { | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--sidebar-text); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .file-item__meta { | |
| font-size: 11px; | |
| color: var(--sidebar-text-secondary); | |
| } | |
| .file-item__status { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .file-item__check { | |
| color: var(--accent); | |
| } | |
| .file-item__error-icon { | |
| color: var(--danger); | |
| } | |
| .file-item__progress-ring { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .file-item__percent { | |
| font-size: 11px; | |
| color: var(--sidebar-text-secondary); | |
| } | |
| .file-item__progress-bar { | |
| grid-column: 1 / -1; | |
| height: 3px; | |
| background: var(--sidebar-border); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .file-item__progress-fill { | |
| height: 100%; | |
| background: var(--accent); | |
| border-radius: 2px; | |
| transition: width 0.3s ease; | |
| } | |
| .file-item__error { | |
| grid-column: 1 / -1; | |
| font-size: 12px; | |
| color: var(--danger); | |
| } | |
| /* ===== Chat Panel (Right) ===== */ | |
| .chat-panel { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| background: var(--bg); | |
| } | |
| .chat-panel__header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 28px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--surface); | |
| } | |
| .chat-panel__title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .chat-panel__clear { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| background: none; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .chat-panel__clear:hover { | |
| color: var(--danger); | |
| border-color: var(--danger); | |
| background: rgba(224, 77, 107, 0.06); | |
| } | |
| .chat-panel__messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 24px 28px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| /* Empty state */ | |
| .chat-panel__empty { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| color: var(--text-tertiary); | |
| text-align: center; | |
| padding: 40px; | |
| } | |
| .chat-panel__empty h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .chat-panel__empty p { | |
| font-size: 14px; | |
| max-width: 400px; | |
| line-height: 1.6; | |
| } | |
| /* ===== Chat Messages ===== */ | |
| .chat-message { | |
| display: flex; | |
| gap: 12px; | |
| max-width: 780px; | |
| } | |
| .chat-message--user { | |
| align-self: flex-end; | |
| flex-direction: row-reverse; | |
| } | |
| .chat-message--assistant { | |
| align-self: flex-start; | |
| } | |
| .chat-message__avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .chat-message--user .chat-message__avatar { | |
| background: var(--accent-light); | |
| color: var(--accent); | |
| } | |
| .chat-message--assistant .chat-message__avatar { | |
| background: var(--border-light); | |
| color: var(--text-secondary); | |
| } | |
| .chat-message__body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| min-width: 0; | |
| max-width: 640px; | |
| } | |
| .chat-message__bubble { | |
| padding: 12px 16px; | |
| border-radius: var(--radius-xl); | |
| font-size: 14px; | |
| line-height: 1.65; | |
| word-wrap: break-word; | |
| } | |
| .chat-message--user .chat-message__bubble { | |
| background: var(--accent-light); | |
| color: var(--text); | |
| border-bottom-right-radius: var(--radius-sm); | |
| } | |
| .chat-message--assistant .chat-message__bubble { | |
| background: var(--surface); | |
| color: var(--text); | |
| border-bottom-left-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| /* Markdown inside assistant bubbles */ | |
| .chat-message--assistant .chat-message__bubble p { | |
| margin-bottom: 8px; | |
| } | |
| .chat-message--assistant .chat-message__bubble p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .chat-message--assistant .chat-message__bubble code { | |
| font-size: 13px; | |
| background: var(--bg); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-family: 'SF Mono', 'Fira Code', monospace; | |
| } | |
| .chat-message--assistant .chat-message__bubble pre { | |
| background: #1a1a2e; | |
| color: #d4d0f0; | |
| padding: 12px 16px; | |
| border-radius: var(--radius-sm); | |
| overflow-x: auto; | |
| margin: 8px 0; | |
| } | |
| .chat-message--assistant .chat-message__bubble pre code { | |
| background: none; | |
| padding: 0; | |
| color: inherit; | |
| } | |
| .chat-message--assistant .chat-message__bubble ul, | |
| .chat-message--assistant .chat-message__bubble ol { | |
| padding-left: 20px; | |
| margin: 8px 0; | |
| } | |
| .chat-message--assistant .chat-message__bubble li { | |
| margin-bottom: 4px; | |
| } | |
| .chat-message--assistant .chat-message__bubble strong { | |
| font-weight: 600; | |
| } | |
| /* Typing indicator */ | |
| .typing-indicator { | |
| display: flex; | |
| gap: 4px; | |
| padding: 4px 0; | |
| } | |
| .typing-indicator span { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--text-tertiary); | |
| animation: bounce 1.2s ease-in-out infinite; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: 0.1s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation-delay: 0.2s; | |
| } | |
| @keyframes bounce { | |
| 0%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-6px); } | |
| } | |
| /* ===== Chat Input ===== */ | |
| .chat-input { | |
| padding: 16px 28px 20px; | |
| background: var(--surface); | |
| border-top: 1px solid var(--border); | |
| } | |
| .chat-input__wrapper { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 8px; | |
| padding: 10px 14px; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-full); | |
| transition: var(--transition); | |
| } | |
| .chat-input__wrapper:focus-within { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.12); | |
| } | |
| .chat-input__textarea { | |
| flex: 1; | |
| border: none; | |
| outline: none; | |
| background: none; | |
| font-family: inherit; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: var(--text); | |
| resize: none; | |
| max-height: 160px; | |
| padding: 2px 0; | |
| } | |
| .chat-input__textarea::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .chat-input__textarea:disabled { | |
| opacity: 0.5; | |
| } | |
| .chat-input__send { | |
| width: 34px; | |
| height: 34px; | |
| border: none; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| flex-shrink: 0; | |
| transition: var(--transition); | |
| } | |
| .chat-input__send:hover:not(:disabled) { | |
| background: var(--accent-dark); | |
| transform: scale(1.05); | |
| } | |
| .chat-input__send:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .chat-input__hint { | |
| text-align: center; | |
| font-size: 11px; | |
| color: var(--text-tertiary); | |
| margin-top: 8px; | |
| } | |
| .chat-input__hint kbd { | |
| font-family: inherit; | |
| font-size: 11px; | |
| background: var(--border-light); | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| border: 1px solid var(--border); | |
| } | |
| /* ===== Message Actions ===== */ | |
| .message-actions { | |
| display: flex; | |
| gap: 4px; | |
| opacity: 0; | |
| transition: opacity 0.15s ease; | |
| } | |
| .chat-message:hover .message-actions, | |
| .message-actions:focus-within { | |
| opacity: 1; | |
| } | |
| .message-action { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 4px 10px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .message-action:hover { | |
| color: var(--text); | |
| background: var(--surface-hover); | |
| border-color: var(--text-tertiary); | |
| } | |
| /* ===== Source Badges ===== */ | |
| .source-badges { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .source-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 4px 10px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| background: var(--border-light); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .source-badge:hover { | |
| background: var(--accent-lighter); | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .source-badge__page { | |
| color: var(--text-tertiary); | |
| font-size: 11px; | |
| } | |
| /* ===== Why Drawer ===== */ | |
| .why-drawer { | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| .why-drawer__toggle { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 10px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| background: none; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| width: fit-content; | |
| } | |
| .why-drawer__toggle:hover { | |
| background: var(--surface-hover); | |
| color: var(--text); | |
| } | |
| .why-drawer__content { | |
| margin-top: 8px; | |
| padding: 16px; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| animation: slideDown 0.2s ease; | |
| } | |
| @keyframes slideDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-4px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .why-drawer__summary { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| margin-bottom: 12px; | |
| } | |
| .why-drawer__chunks { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .chunk-card { | |
| padding: 12px; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| transition: var(--transition); | |
| } | |
| .chunk-card--focused { | |
| border-color: var(--accent); | |
| background: var(--accent-lighter); | |
| } | |
| .chunk-card__header { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 8px; | |
| } | |
| .chunk-card__id { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.03em; | |
| } | |
| .chunk-card__source { | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| .chunk-card__relevance { | |
| margin-left: auto; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| background: var(--accent-lighter); | |
| padding: 2px 8px; | |
| border-radius: var(--radius-full); | |
| } | |
| .chunk-card__preview { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .highlight { | |
| background: #e0d4ff; | |
| color: var(--text); | |
| padding: 0 2px; | |
| border-radius: 2px; | |
| } | |
| /* ===== Chunk Type Badges ===== */ | |
| .chunk-card__type-icon { | |
| vertical-align: -2px; | |
| margin-right: 3px; | |
| } | |
| .chunk-card__type-icon--table { | |
| color: #7c5cfc; | |
| } | |
| .chunk-card__type-icon--figure { | |
| color: #e07c3e; | |
| } | |
| .chunk-card__type-badge { | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| padding: 2px 8px; | |
| border-radius: var(--radius-full); | |
| } | |
| .chunk-card__type-badge--table { | |
| background: rgba(124, 92, 252, 0.12); | |
| color: #7c5cfc; | |
| } | |
| .chunk-card__type-badge--figure { | |
| background: rgba(224, 124, 62, 0.12); | |
| color: #e07c3e; | |
| } | |
| /* ===== Multimodal Asset Previews ===== */ | |
| .chunk-card__asset-preview { | |
| margin: 8px 0; | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| } | |
| .chunk-card__asset-img { | |
| display: block; | |
| width: 100%; | |
| max-height: 240px; | |
| object-fit: contain; | |
| background: #fff; | |
| } | |
| /* ===== Source Badge Variants ===== */ | |
| .source-badge--table { | |
| border-color: rgba(124, 92, 252, 0.3); | |
| } | |
| .source-badge--table:hover { | |
| background: rgba(124, 92, 252, 0.1); | |
| border-color: #7c5cfc; | |
| color: #7c5cfc; | |
| } | |
| .source-badge--figure { | |
| border-color: rgba(224, 124, 62, 0.3); | |
| } | |
| .source-badge--figure:hover { | |
| background: rgba(224, 124, 62, 0.1); | |
| border-color: #e07c3e; | |
| color: #e07c3e; | |
| } | |
| /* ===== Why Drawer Stats ===== */ | |
| .why-drawer__stat { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 3px; | |
| margin-left: 8px; | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| } | |
| /* ===== Upload Panel Limits ===== */ | |
| .upload-panel__limit-msg { | |
| font-size: 12px; | |
| color: var(--danger); | |
| text-align: center; | |
| padding: 6px 0; | |
| } | |
| .upload-panel__limits-info { | |
| font-size: 11px; | |
| color: var(--sidebar-text-secondary); | |
| margin-top: 4px; | |
| opacity: 0.7; | |
| } | |
| /* ===== Spinner Utility ===== */ | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .spin { | |
| animation: spin 1s linear infinite; | |
| } | |
| /* ===== Responsive ===== */ | |
| @media (max-width: 768px) { | |
| .app-main { | |
| flex-direction: column; | |
| } | |
| .upload-panel { | |
| width: 100%; | |
| min-width: unset; | |
| max-height: 280px; | |
| border-right: none; | |
| border-bottom: 1px solid var(--sidebar-border); | |
| } | |
| .chat-panel__messages { | |
| padding: 16px; | |
| } | |
| .chat-input { | |
| padding: 12px 16px 16px; | |
| } | |
| .chat-message__body { | |
| max-width: calc(100vw - 80px); | |
| } | |
| } | |