Spaces:
Sleeping
Sleeping
| .chat-area { | |
| display: flex; flex-direction: column; | |
| background: var(--surface); | |
| height: 100vh; overflow: hidden; | |
| } | |
| /* ── Top Bar ──────────────────────────────────── */ | |
| .chat-topbar { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 14px 20px; border-bottom: 1px solid var(--border); | |
| background: rgba(17,24,39,0.7); backdrop-filter: blur(12px); | |
| flex-shrink: 0; gap: 12px; | |
| } | |
| .chat-title-block { display: flex; flex-direction: column; gap: 5px; overflow: hidden; } | |
| .chat-session-name { | |
| font-size: 15px; font-weight: 700; color: var(--text); | |
| letter-spacing: -0.3px; | |
| } | |
| .chat-badges { display: flex; flex-wrap: wrap; gap: 6px; } | |
| .chat-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } | |
| .toggle-label { | |
| display: flex; align-items: center; gap: 5px; | |
| font-size: 12px; color: var(--text-muted); cursor: pointer; | |
| user-select: none; | |
| } | |
| .toggle-label input[type="checkbox"] { accent-color: var(--primary); width: 13px; height: 13px; } | |
| /* ── Error banner ────────────────────────────── */ | |
| .error-banner { | |
| background: var(--error-bg); color: var(--error); | |
| padding: 8px 20px; font-size: 13px; | |
| border-bottom: 1px solid rgba(239,68,68,0.2); | |
| flex-shrink: 0; | |
| } | |
| /* ── Messages ────────────────────────────────── */ | |
| .chat-messages { | |
| flex: 1; overflow-y: auto; | |
| padding: 20px; | |
| display: flex; flex-direction: column; gap: 6px; | |
| } | |
| /* ── Empty state ─────────────────────────────── */ | |
| .empty-state { | |
| flex: 1; display: flex; flex-direction: column; | |
| align-items: center; justify-content: center; | |
| text-align: center; padding: 48px 32px; gap: 14px; | |
| margin: auto; | |
| } | |
| .empty-icon { | |
| width: 88px; height: 88px; border-radius: 50%; | |
| background: var(--primary-glow); | |
| display: flex; align-items: center; justify-content: center; | |
| margin-bottom: 8px; | |
| } | |
| .empty-title { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.4px; } | |
| .empty-sub { font-size: 14px; color: var(--text-muted); max-width: 420px; line-height: 1.6; } | |
| .empty-upload { padding: 12px 28px; font-size: 14px; } | |
| .empty-hint { font-size: 11px; color: var(--text-dim); } | |
| /* ── Message groups ──────────────────────────── */ | |
| .message-group { | |
| display: flex; flex-direction: column; gap: 6px; | |
| cursor: pointer; padding: 4px; | |
| border-radius: var(--radius); | |
| transition: background var(--transition); | |
| } | |
| .message-group:hover { background: rgba(255,255,255,0.02); } | |
| /* User */ | |
| .user-row { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } | |
| .user-bubble { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dim)); | |
| color: #fff; padding: 10px 14px; | |
| border-radius: 14px 14px 2px 14px; | |
| font-size: 14px; line-height: 1.55; | |
| max-width: 74%; box-shadow: 0 4px 16px rgba(99,102,241,0.2); | |
| } | |
| .rewrite-hint { | |
| font-size: 10px; color: var(--text-dim); | |
| font-style: italic; margin-right: 4px; | |
| max-width: 74%; text-align: right; | |
| } | |
| /* AI */ | |
| .ai-row { display: flex; align-items: flex-start; gap: 10px; } | |
| .ai-avatar { | |
| width: 30px; height: 30px; border-radius: 50%; | |
| background: var(--primary-glow); | |
| border: 1px solid rgba(99,102,241,0.25); | |
| display: flex; align-items: center; justify-content: center; | |
| flex-shrink: 0; color: var(--violet); | |
| } | |
| .ai-card { | |
| background: var(--surface-mid); | |
| border: 1px solid var(--border); | |
| border-radius: 2px 14px 14px 14px; | |
| padding: 12px 14px; | |
| flex: 1; min-width: 0; | |
| transition: border-color var(--transition); | |
| } | |
| .ai-card:hover { border-color: rgba(99,102,241,0.22); } | |
| .ai-loading { | |
| display: flex; align-items: center; gap: 8px; | |
| color: var(--text-muted); font-size: 13px; | |
| } | |
| .ai-header { | |
| display: flex; align-items: center; gap: 8px; | |
| margin-bottom: 10px; flex-wrap: wrap; | |
| } | |
| .ai-ts { font-size: 10px; color: var(--text-dim); margin-left: auto; } | |
| .pin-btn { | |
| background: none; border: none; color: var(--text-dim); | |
| cursor: pointer; padding: 3px 5px; | |
| border-radius: 4px; display: flex; | |
| } | |
| .pin-btn:hover { color: var(--primary); background: var(--primary-glow); } | |
| .ai-answer { | |
| font-size: 14px; line-height: 1.7; color: var(--text); | |
| display: flex; flex-direction: column; gap: 6px; | |
| } | |
| .ai-answer p { margin: 0; } | |
| .inline-cite { | |
| display: inline-block; | |
| background: var(--primary-glow); | |
| color: var(--violet); | |
| font-size: 11px; font-weight: 600; | |
| padding: 0px 5px; border-radius: 4px; | |
| border: 1px solid rgba(99,102,241,0.2); | |
| margin: 0 1px; | |
| } | |
| /* Confidence */ | |
| .confidence-row, .coverage-bar-row { | |
| display: flex; align-items: center; gap: 8px; flex: 1; | |
| } | |
| .conf-label { font-size: 10px; color: var(--text-dim); white-space: nowrap; } | |
| .conf-bar { flex: 1; } | |
| .conf-pct { font-size: 10px; color: var(--text-muted); width: 28px; text-align: right; } | |
| .coverage-bar-row { margin-top: 8px; } | |
| /* Citations */ | |
| .citation-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } | |
| .citation-chip { | |
| background: var(--surface-high); color: var(--text-muted); | |
| font-size: 11px; padding: 3px 8px; border-radius: 4px; | |
| border: 1px solid var(--border); cursor: default; | |
| } | |
| .citation-chip:hover { background: var(--primary-glow); color: var(--violet); } | |
| /* Evidence toggle */ | |
| .evidence-toggle { | |
| display: flex; align-items: center; gap: 5px; | |
| background: none; border: none; color: var(--text-dim); | |
| font-size: 12px; cursor: pointer; padding: 6px 0; | |
| margin-top: 4px; font-family: var(--font); | |
| } | |
| .evidence-toggle:hover { color: var(--primary); } | |
| .evidence-preview { | |
| display: flex; flex-direction: column; gap: 6px; | |
| margin-top: 4px; | |
| } | |
| .ev-chip { | |
| background: var(--surface-low); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 8px 10px; | |
| display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; | |
| } | |
| .ev-id { color: var(--violet); font-size: 11px; font-weight: 700; flex-shrink: 0; } | |
| .ev-preview { font-size: 12px; color: var(--text-muted); line-height: 1.5; } | |
| .ev-page { color: var(--text-dim); font-size: 10px; align-self: center; white-space: nowrap; } | |
| /* Typing indicator */ | |
| .typing-indicator { | |
| display: flex; align-items: center; gap: 10px; padding: 4px; | |
| } | |
| .typing-dots { display: flex; gap: 4px; align-items: center; padding: 10px 14px; } | |
| .typing-dots span { | |
| width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--text-dim); animation: bounce 1.2s ease-in-out infinite; | |
| } | |
| .typing-dots span:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-dots span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; } | |
| 40% { transform: scale(1.1); opacity: 1; } | |
| } | |
| /* ── Input Bar ───────────────────────────────── */ | |
| .chat-input-bar { | |
| display: flex; align-items: flex-end; gap: 8px; | |
| padding: 12px 16px; | |
| border-top: 1px solid var(--border); | |
| background: rgba(17,24,39,0.8); backdrop-filter: blur(12px); | |
| flex-shrink: 0; | |
| } | |
| .input-icon-btn { | |
| background: var(--surface-high); border: 1px solid var(--border); | |
| color: var(--text-muted); border-radius: var(--radius-sm); | |
| padding: 9px 10px; cursor: pointer; display: flex; | |
| transition: all var(--transition); flex-shrink: 0; | |
| } | |
| .input-icon-btn:hover { color: var(--primary); border-color: var(--primary); } | |
| .input-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .chat-input { | |
| flex: 1; | |
| background: var(--surface-low); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text); | |
| font-family: var(--font); font-size: 14px; | |
| padding: 10px 14px; | |
| outline: none; resize: none; | |
| max-height: 140px; overflow-y: auto; | |
| line-height: 1.5; | |
| transition: border-color var(--transition), box-shadow var(--transition); | |
| scrollbar-width: thin; | |
| } | |
| .chat-input::placeholder { color: var(--text-dim); } | |
| .chat-input:focus { | |
| border-color: rgba(99,102,241,0.45); | |
| box-shadow: 0 0 0 3px rgba(99,102,241,0.08); | |
| } | |
| .chat-input:disabled { opacity: 0.45; cursor: not-allowed; } | |
| .send-btn { | |
| padding: 9px 14px; flex-shrink: 0; | |
| border-radius: var(--radius-sm); | |
| } | |