Hitan2004/agentic-corrective-rag-ui
0
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Corrective RAG — Agentic Document Intelligence</title>7<meta name="description" content="Production-ready Corrective RAG system with self-correcting agentic pipeline, semantic retrieval, and hallucination-resistant responses.">8<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">9<style>10/* ═══════════════════════════════════════════════════════11 DESIGN SYSTEM — Corrective RAG Premium UI12 ═══════════════════════════════════════════════════════ */13:root {14 /* Surfaces */15 --bg-deep: #06060b;16 --bg-base: #0b0b14;17 --bg-raised: #10101c;18 --bg-overlay: #151524;19 --bg-hover: #1a1a2e;20 21 /* Borders */22 --border-subtle: rgba(255, 255, 255, 0.04);23 --border-default: rgba(255, 255, 255, 0.07);24 --border-strong: rgba(255, 255, 255, 0.12);25 --border-accent: rgba(124, 106, 247, 0.3);26 27 /* Accent palette — electric indigo */28 --accent-50: #f0edff;29 --accent-100: #d4ccff;30 --accent-200: #b8aaff;31 --accent-300: #9b87ff;32 --accent-400: #8471f7;33 --accent-500: #7c6af7;34 --accent-600: #6654e0;35 --accent-700: #4e3dba;36 --accent-800: #382b8a;37 --accent-900: #1e1650;38 39 /* Semantic */40 --success: #34d399;41 --success-dim: rgba(52, 211, 153, 0.12);42 --success-border: rgba(52, 211, 153, 0.25);43 --error: #f87171;44 --error-dim: rgba(248, 113, 113, 0.12);45 --error-border: rgba(248, 113, 113, 0.25);46 --warning: #fbbf24;47 --warning-dim: rgba(251, 191, 36, 0.12);48 --warning-border: rgba(251, 191, 36, 0.25);49 --info: #60a5fa;50 --info-dim: rgba(96, 165, 250, 0.12);51 --info-border: rgba(96, 165, 250, 0.25);52 53 /* Text */54 --text-primary: #eeedf5;55 --text-secondary: #a09db5;56 --text-tertiary: #6b6880;57 --text-disabled: #3e3c4f;58 59 /* Typography */60 --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;61 --font-mono: 'JetBrains Mono', 'Fira Code', monospace;62 63 /* Spacing */64 --sidebar-width: 300px;65 --panel-width: 320px;66 67 /* Glass */68 --glass-bg: rgba(16, 16, 28, 0.65);69 --glass-border: rgba(255, 255, 255, 0.08);70 --glass-blur: 20px;71 72 /* Shadows */73 --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);74 --shadow-md: 0 4px 16px rgba(0,0,0,0.4);75 --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);76 --shadow-glow: 0 0 40px rgba(124, 106, 247, 0.15);77 78 /* Transitions */79 --ease-out: cubic-bezier(0.16, 1, 0.3, 1);80 --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);81}82 83/* ── Reset ── */84*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }85 86html { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }87 88body {89 font-family: var(--font-sans);90 background: var(--bg-deep);91 color: var(--text-primary);92 font-size: 14px;93 line-height: 1.6;94 height: 100vh;95 display: flex;96 overflow: hidden;97}98 99/* ── Animated background mesh ── */100body::before {101 content: '';102 position: fixed;103 inset: 0;104 background:105 radial-gradient(ellipse 800px 600px at 20% 20%, rgba(124, 106, 247, 0.06), transparent),106 radial-gradient(ellipse 600px 500px at 80% 80%, rgba(52, 211, 153, 0.04), transparent),107 radial-gradient(ellipse 400px 300px at 50% 50%, rgba(96, 165, 250, 0.03), transparent);108 pointer-events: none;109 z-index: 0;110 animation: meshShift 20s ease-in-out infinite alternate;111}112 113@keyframes meshShift {114 0% { opacity: 1; }115 50% { opacity: 0.7; }116 100% { opacity: 1; }117}118 119/* Noise grain overlay */120body::after {121 content: '';122 position: fixed;123 inset: 0;124 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");125 pointer-events: none;126 z-index: 9999;127 opacity: 0.5;128}129 130/* ── Scrollbar ── */131::-webkit-scrollbar { width: 5px; }132::-webkit-scrollbar-track { background: transparent; }133::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }134::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }135 136/* ═══════════════════════════════════════════════════════137 SIDEBAR138 ═══════════════════════════════════════════════════════ */139.sidebar {140 width: var(--sidebar-width);141 min-width: var(--sidebar-width);142 background: var(--bg-base);143 border-right: 1px solid var(--border-default);144 display: flex;145 flex-direction: column;146 padding: 24px 20px;147 gap: 20px;148 overflow-y: auto;149 position: relative;150 z-index: 10;151}152 153/* ── Logo ── */154.logo-area {155 display: flex;156 align-items: center;157 gap: 12px;158 padding-bottom: 20px;159 border-bottom: 1px solid var(--border-default);160}161 162.logo-icon {163 width: 36px;164 height: 36px;165 background: linear-gradient(135deg, var(--accent-500), var(--accent-700));166 border-radius: 10px;167 display: flex;168 align-items: center;169 justify-content: center;170 font-size: 18px;171 box-shadow: var(--shadow-glow);172 position: relative;173 overflow: hidden;174}175 176.logo-icon::after {177 content: '';178 position: absolute;179 inset: 0;180 background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);181 border-radius: inherit;182}183 184.logo-text {185 display: flex;186 flex-direction: column;187}188 189.logo-text .brand {190 font-family: var(--font-mono);191 font-weight: 700;192 font-size: 0.8rem;193 letter-spacing: 0.06em;194 color: var(--text-primary);195}196 197.logo-text .version {198 font-family: var(--font-mono);199 font-size: 0.62rem;200 color: var(--text-tertiary);201 letter-spacing: 0.08em;202}203 204/* ── Status Indicators ── */205.status-section {206 display: flex;207 flex-direction: column;208 gap: 8px;209}210 211.status-pill {212 display: inline-flex;213 align-items: center;214 gap: 8px;215 font-family: var(--font-mono);216 font-size: 0.68rem;217 font-weight: 600;218 letter-spacing: 0.06em;219 text-transform: uppercase;220 padding: 6px 12px;221 border-radius: 8px;222 width: fit-content;223 transition: all 0.3s var(--ease-out);224}225 226.status-pill .dot {227 width: 6px;228 height: 6px;229 border-radius: 50%;230 background: currentColor;231 position: relative;232}233 234.status-pill .dot::after {235 content: '';236 position: absolute;237 inset: -3px;238 border-radius: 50%;239 background: currentColor;240 opacity: 0.3;241 animation: statusPulse 2s ease-in-out infinite;242}243 244@keyframes statusPulse {245 0%, 100% { transform: scale(1); opacity: 0.3; }246 50% { transform: scale(1.8); opacity: 0; }247}248 249.pill-ok {250 background: var(--success-dim);251 color: var(--success);252 border: 1px solid var(--success-border);253}254 255.pill-fail {256 background: var(--error-dim);257 color: var(--error);258 border: 1px solid var(--error-border);259}260 261.pill-warn {262 background: var(--warning-dim);263 color: var(--warning);264 border: 1px solid var(--warning-border);265}266 267/* ── Section labels ── */268.section-title {269 font-family: var(--font-mono);270 font-size: 0.62rem;271 font-weight: 600;272 letter-spacing: 0.14em;273 text-transform: uppercase;274 color: var(--text-tertiary);275 margin-bottom: 10px;276}277 278/* ── Upload Zone ── */279.upload-zone {280 border: 1px dashed var(--border-strong);281 border-radius: 12px;282 padding: 24px 16px;283 text-align: center;284 cursor: pointer;285 transition: all 0.3s var(--ease-out);286 position: relative;287 overflow: hidden;288 background: var(--bg-raised);289}290 291.upload-zone::before {292 content: '';293 position: absolute;294 inset: 0;295 background: linear-gradient(135deg, rgba(124, 106, 247, 0.05), transparent);296 opacity: 0;297 transition: opacity 0.3s;298}299 300.upload-zone:hover {301 border-color: var(--accent-500);302 transform: translateY(-1px);303 box-shadow: var(--shadow-glow);304}305 306.upload-zone:hover::before { opacity: 1; }307 308.upload-zone.dragover {309 border-color: var(--accent-400);310 background: rgba(124, 106, 247, 0.08);311 transform: translateY(-2px);312 box-shadow: 0 0 60px rgba(124, 106, 247, 0.2);313}314 315.upload-zone input[type="file"] {316 position: absolute;317 inset: 0;318 opacity: 0;319 cursor: pointer;320}321 322.upload-icon {323 width: 40px;324 height: 40px;325 margin: 0 auto 10px;326 background: var(--bg-overlay);327 border: 1px solid var(--border-default);328 border-radius: 10px;329 display: flex;330 align-items: center;331 justify-content: center;332 font-size: 18px;333 transition: all 0.3s;334}335 336.upload-zone:hover .upload-icon {337 background: rgba(124, 106, 247, 0.1);338 border-color: var(--accent-500);339 transform: scale(1.05);340}341 342.upload-label {343 font-size: 0.78rem;344 color: var(--text-secondary);345 font-weight: 500;346}347 348.upload-hint {349 font-family: var(--font-mono);350 font-size: 0.65rem;351 color: var(--text-tertiary);352 margin-top: 4px;353}354 355.upload-filename {356 font-family: var(--font-mono);357 font-size: 0.68rem;358 color: var(--accent-400);359 margin-top: 8px;360 word-break: break-all;361 font-weight: 600;362}363 364/* ── Buttons ── */365.btn-primary {366 width: 100%;367 padding: 11px 16px;368 background: linear-gradient(135deg, var(--accent-500), var(--accent-600));369 color: white;370 border: none;371 border-radius: 10px;372 font-family: var(--font-mono);373 font-size: 0.72rem;374 font-weight: 600;375 letter-spacing: 0.06em;376 text-transform: uppercase;377 cursor: pointer;378 transition: all 0.3s var(--ease-out);379 display: flex;380 align-items: center;381 justify-content: center;382 gap: 8px;383 position: relative;384 overflow: hidden;385}386 387.btn-primary::before {388 content: '';389 position: absolute;390 inset: 0;391 background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);392 opacity: 0;393 transition: opacity 0.3s;394}395 396.btn-primary:hover:not(:disabled) {397 transform: translateY(-2px);398 box-shadow: 0 4px 20px rgba(124, 106, 247, 0.35);399}400 401.btn-primary:hover::before { opacity: 1; }402 403.btn-primary:active:not(:disabled) { transform: translateY(0); }404 405.btn-primary:disabled {406 background: var(--bg-overlay);407 color: var(--text-disabled);408 cursor: not-allowed;409 box-shadow: none;410}411 412.btn-ghost {413 width: 100%;414 padding: 10px 16px;415 background: transparent;416 border: 1px solid var(--border-default);417 border-radius: 10px;418 font-family: var(--font-mono);419 font-size: 0.7rem;420 font-weight: 500;421 color: var(--text-secondary);422 cursor: pointer;423 transition: all 0.25s var(--ease-out);424 display: flex;425 align-items: center;426 justify-content: center;427 gap: 8px;428}429 430.btn-ghost:hover {431 background: var(--bg-hover);432 border-color: var(--border-strong);433 color: var(--text-primary);434}435 436/* ── Controls ── */437.controls-group {438 display: flex;439 flex-direction: column;440 gap: 16px;441}442 443.slider-control {444 display: flex;445 flex-direction: column;446 gap: 6px;447}448 449.slider-header {450 display: flex;451 justify-content: space-between;452 align-items: center;453}454 455.slider-label {456 font-family: var(--font-mono);457 font-size: 0.68rem;458 font-weight: 500;459 color: var(--text-secondary);460}461 462.slider-value {463 font-family: var(--font-mono);464 font-size: 0.72rem;465 font-weight: 700;466 color: var(--accent-400);467 background: rgba(124, 106, 247, 0.1);468 padding: 2px 8px;469 border-radius: 6px;470 min-width: 28px;471 text-align: center;472}473 474input[type="range"] {475 width: 100%;476 appearance: none;477 height: 4px;478 background: var(--bg-overlay);479 border-radius: 4px;480 outline: none;481 position: relative;482}483 484input[type="range"]::-webkit-slider-thumb {485 appearance: none;486 width: 16px;487 height: 16px;488 border-radius: 50%;489 background: var(--accent-500);490 cursor: pointer;491 box-shadow: 0 0 10px rgba(124, 106, 247, 0.4);492 transition: all 0.2s;493}494 495input[type="range"]::-webkit-slider-thumb:hover {496 transform: scale(1.2);497 box-shadow: 0 0 16px rgba(124, 106, 247, 0.6);498}499 500/* ── Toggle switch ── */501.toggle-row {502 display: flex;503 align-items: center;504 justify-content: space-between;505 gap: 12px;506 padding: 10px 14px;507 background: var(--bg-raised);508 border: 1px solid var(--border-subtle);509 border-radius: 10px;510 transition: all 0.25s;511}512 513.toggle-row:hover {514 border-color: var(--border-default);515 background: var(--bg-overlay);516}517 518.toggle-info {519 display: flex;520 flex-direction: column;521 gap: 2px;522}523 524.toggle-title {525 font-family: var(--font-mono);526 font-size: 0.7rem;527 font-weight: 600;528 color: var(--text-primary);529 letter-spacing: 0.02em;530}531 532.toggle-desc {533 font-size: 0.62rem;534 color: var(--text-tertiary);535}536 537.toggle-switch {538 position: relative;539 width: 38px;540 height: 20px;541 flex-shrink: 0;542}543 544.toggle-switch input {545 opacity: 0;546 width: 0;547 height: 0;548 position: absolute;549}550 551.toggle-track {552 position: absolute;553 inset: 0;554 background: var(--bg-overlay);555 border: 1px solid var(--border-strong);556 border-radius: 20px;557 cursor: pointer;558 transition: all 0.3s var(--ease-out);559}560 561.toggle-track::after {562 content: '';563 position: absolute;564 width: 14px;565 height: 14px;566 border-radius: 50%;567 background: var(--text-tertiary);568 top: 2px;569 left: 2px;570 transition: all 0.3s var(--ease-spring);571}572 573.toggle-switch input:checked + .toggle-track {574 background: rgba(124, 106, 247, 0.2);575 border-color: var(--accent-500);576}577 578.toggle-switch input:checked + .toggle-track::after {579 transform: translateX(18px);580 background: var(--accent-500);581 box-shadow: 0 0 8px rgba(124, 106, 247, 0.5);582}583 584/* ── Stack info ── */585.stack-info {586 margin-top: auto;587 padding-top: 16px;588 border-top: 1px solid var(--border-subtle);589}590 591.stack-item {592 display: flex;593 align-items: center;594 gap: 8px;595 padding: 4px 0;596 font-family: var(--font-mono);597 font-size: 0.62rem;598 color: var(--text-tertiary);599}600 601.stack-dot {602 width: 4px;603 height: 4px;604 border-radius: 50%;605 background: var(--accent-700);606 flex-shrink: 0;607}608 609/* ═══════════════════════════════════════════════════════610 MAIN AREA611 ═══════════════════════════════════════════════════════ */612.main {613 flex: 1;614 display: flex;615 flex-direction: column;616 overflow: hidden;617 position: relative;618 z-index: 5;619}620 621/* ── Header bar ── */622.header-bar {623 padding: 20px 32px;624 border-bottom: 1px solid var(--border-default);625 display: flex;626 align-items: center;627 justify-content: space-between;628 flex-shrink: 0;629 background: rgba(11, 11, 20, 0.8);630 backdrop-filter: blur(12px);631 -webkit-backdrop-filter: blur(12px);632}633 634.header-left {635 display: flex;636 flex-direction: column;637 gap: 2px;638}639 640.header-title {641 font-size: 1.2rem;642 font-weight: 700;643 letter-spacing: -0.02em;644 background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));645 -webkit-background-clip: text;646 -webkit-text-fill-color: transparent;647 background-clip: text;648}649 650.header-subtitle {651 font-family: var(--font-mono);652 font-size: 0.68rem;653 color: var(--text-tertiary);654 letter-spacing: 0.04em;655}656 657.header-right {658 display: flex;659 align-items: center;660 gap: 8px;661}662 663.header-badge {664 font-family: var(--font-mono);665 font-size: 0.6rem;666 font-weight: 600;667 padding: 4px 10px;668 border-radius: 20px;669 letter-spacing: 0.06em;670 text-transform: uppercase;671}672 673.badge-online {674 background: var(--success-dim);675 color: var(--success);676 border: 1px solid var(--success-border);677}678 679.badge-offline {680 background: var(--error-dim);681 color: var(--error);682 border: 1px solid var(--error-border);683}684 685.pipeline-toggle-btn {686 padding: 6px 12px;687 background: var(--bg-raised);688 border: 1px solid var(--border-default);689 border-radius: 8px;690 font-family: var(--font-mono);691 font-size: 0.65rem;692 font-weight: 500;693 color: var(--text-secondary);694 cursor: pointer;695 transition: all 0.25s;696 display: flex;697 align-items: center;698 gap: 6px;699}700 701.pipeline-toggle-btn:hover {702 background: var(--bg-hover);703 border-color: var(--accent-500);704 color: var(--accent-400);705}706 707.pipeline-toggle-btn.active {708 background: rgba(124, 106, 247, 0.1);709 border-color: var(--accent-500);710 color: var(--accent-400);711}712 713/* ═══════════════════════════════════════════════════════714 CHAT AREA715 ═══════════════════════════════════════════════════════ */716.chat-container {717 flex: 1;718 display: flex;719 overflow: hidden;720}721 722.chat {723 flex: 1;724 overflow-y: auto;725 padding: 24px 32px;726 padding-bottom: 8px;727 display: flex;728 flex-direction: column;729 gap: 20px;730 scroll-behavior: smooth;731}732 733/* ── Empty state ── */734.empty-state {735 flex: 1;736 display: flex;737 flex-direction: column;738 align-items: center;739 justify-content: center;740 gap: 20px;741 text-align: center;742 animation: fadeIn 0.6s var(--ease-out);743}744 745.empty-icon {746 width: 80px;747 height: 80px;748 background: var(--bg-raised);749 border: 1px solid var(--border-default);750 border-radius: 20px;751 display: flex;752 align-items: center;753 justify-content: center;754 font-size: 32px;755 position: relative;756}757 758.empty-icon::before {759 content: '';760 position: absolute;761 inset: -1px;762 border-radius: 20px;763 background: linear-gradient(135deg, var(--accent-500), transparent, var(--accent-700));764 z-index: -1;765 opacity: 0.3;766}767 768.empty-title {769 font-size: 1rem;770 font-weight: 600;771 color: var(--text-primary);772}773 774.empty-desc {775 font-size: 0.82rem;776 color: var(--text-tertiary);777 max-width: 320px;778 line-height: 1.6;779}780 781.empty-features {782 display: flex;783 gap: 12px;784 margin-top: 8px;785 flex-wrap: wrap;786 justify-content: center;787}788 789.feature-chip {790 font-family: var(--font-mono);791 font-size: 0.62rem;792 font-weight: 500;793 padding: 6px 12px;794 border-radius: 8px;795 background: var(--bg-raised);796 border: 1px solid var(--border-subtle);797 color: var(--text-secondary);798 display: flex;799 align-items: center;800 gap: 6px;801 transition: all 0.25s;802}803 804.feature-chip:hover {805 border-color: var(--border-strong);806 transform: translateY(-1px);807}808 809.feature-chip .chip-dot {810 width: 5px;811 height: 5px;812 border-radius: 50%;813}814 815@keyframes fadeIn {816 from { opacity: 0; transform: translateY(12px); }817 to { opacity: 1; transform: translateY(0); }818}819 820/* ── Messages ── */821.msg {822 display: flex;823 flex-direction: column;824 animation: msgAppear 0.4s var(--ease-out);825}826 827@keyframes msgAppear {828 from { opacity: 0; transform: translateY(12px); }829 to { opacity: 1; transform: translateY(0); }830}831 832/* User message */833.msg-user .bubble {834 align-self: flex-end;835 max-width: 65%;836 background: linear-gradient(135deg, rgba(124, 106, 247, 0.12), rgba(124, 106, 247, 0.06));837 border: 1px solid rgba(124, 106, 247, 0.2);838 border-radius: 16px 16px 4px 16px;839 padding: 14px 18px;840 font-size: 0.9rem;841 line-height: 1.6;842 color: var(--text-primary);843}844 845/* Bot message */846.msg-bot .bubble {847 align-self: flex-start;848 max-width: 80%;849 background: var(--glass-bg);850 backdrop-filter: blur(var(--glass-blur));851 -webkit-backdrop-filter: blur(var(--glass-blur));852 border: 1px solid var(--glass-border);853 border-radius: 4px 16px 16px 16px;854 padding: 18px 22px;855 font-size: 0.9rem;856 line-height: 1.75;857 position: relative;858}859 860.msg-bot .bubble::before {861 content: '';862 position: absolute;863 left: 0;864 top: 8px;865 bottom: 8px;866 width: 3px;867 border-radius: 3px;868 background: linear-gradient(to bottom, var(--accent-500), var(--accent-700));869}870 871.bubble-answer {872 color: var(--text-primary);873 white-space: pre-wrap;874}875 876/* ── Validation badge inline ── */877.validation-bar {878 display: flex;879 flex-wrap: wrap;880 gap: 8px;881 margin-top: 14px;882 padding-top: 14px;883 border-top: 1px solid var(--border-subtle);884}885 886.v-badge {887 font-family: var(--font-mono);888 font-size: 0.62rem;889 font-weight: 600;890 padding: 4px 10px;891 border-radius: 6px;892 display: inline-flex;893 align-items: center;894 gap: 5px;895 letter-spacing: 0.04em;896}897 898.v-pass {899 background: var(--success-dim);900 color: var(--success);901 border: 1px solid var(--success-border);902}903 904.v-fail {905 background: var(--error-dim);906 color: var(--error);907 border: 1px solid var(--error-border);908}909 910.v-neutral {911 background: var(--bg-overlay);912 color: var(--text-tertiary);913 border: 1px solid var(--border-subtle);914}915 916.v-info {917 background: var(--info-dim);918 color: var(--info);919 border: 1px solid var(--info-border);920}921 922/* ── Source cards ── */923.sources-section {924 margin-top: 14px;925}926 927.sources-header {928 font-family: var(--font-mono);929 font-size: 0.62rem;930 font-weight: 600;931 color: var(--text-tertiary);932 text-transform: uppercase;933 letter-spacing: 0.1em;934 margin-bottom: 8px;935 display: flex;936 align-items: center;937 gap: 6px;938 cursor: pointer;939 user-select: none;940}941 942.sources-header .chevron {943 transition: transform 0.25s var(--ease-out);944 font-size: 0.55rem;945}946 947.sources-header.expanded .chevron {948 transform: rotate(90deg);949}950 951.sources-list {952 display: flex;953 flex-direction: column;954 gap: 6px;955 max-height: 0;956 overflow: hidden;957 transition: max-height 0.4s var(--ease-out);958}959 960.sources-list.expanded {961 max-height: 600px;962}963 964.source-card {965 background: var(--bg-deep);966 border: 1px solid var(--border-subtle);967 border-radius: 10px;968 padding: 12px 14px;969 transition: all 0.25s;970 position: relative;971 overflow: hidden;972}973 974.source-card::before {975 content: '';976 position: absolute;977 left: 0;978 top: 0;979 bottom: 0;980 width: 2px;981 background: var(--accent-700);982}983 984.source-card:hover {985 border-color: var(--border-default);986 background: var(--bg-raised);987}988 989.source-name {990 font-family: var(--font-mono);991 font-size: 0.65rem;992 font-weight: 600;993 color: var(--accent-400);994 margin-bottom: 4px;995 display: flex;996 align-items: center;997 gap: 6px;998}999 1000.source-chunk {1001 font-size: 0.72rem;1002 color: var(--text-tertiary);1003 line-height: 1.5;1004 display: -webkit-box;1005 -webkit-line-clamp: 3;1006 -webkit-box-orient: vertical;1007 overflow: hidden;1008}1009 1010/* ── Fail reason ── */1011.fail-reason {1012 margin-top: 10px;1013 padding: 10px 14px;1014 background: var(--error-dim);1015 border: 1px solid var(--error-border);1016 border-radius: 8px;1017 font-family: var(--font-mono);1018 font-size: 0.68rem;1019 color: var(--error);1020 display: flex;1021 align-items: flex-start;1022 gap: 8px;1023}1024 1025/* ── Error message ── */1026.msg-error .bubble {1027 align-self: flex-start;1028 max-width: 80%;1029 background: var(--error-dim);1030 border: 1px solid var(--error-border);1031 border-radius: 4px 16px 16px 16px;1032 padding: 14px 18px;1033 font-family: var(--font-mono);1034 font-size: 0.78rem;1035 color: var(--error);1036 display: flex;1037 align-items: center;1038 gap: 8px;1039}1040 1041/* ── Thinking indicator ── */1042.thinking-bubble {1043 align-self: flex-start;1044 display: flex;1045 align-items: center;1046 gap: 12px;1047 padding: 14px 20px;1048 background: var(--glass-bg);1049 backdrop-filter: blur(var(--glass-blur));1050 border: 1px solid var(--glass-border);1051 border-radius: 4px 16px 16px 16px;1052 position: relative;1053}1054 1055.thinking-bubble::before {1056 content: '';1057 position: absolute;1058 left: 0;1059 top: 8px;1060 bottom: 8px;1061 width: 3px;1062 border-radius: 3px;1063 background: linear-gradient(to bottom, var(--accent-500), var(--accent-700));1064 animation: thinkPulse 1.5s ease-in-out infinite;1065}1066 1067@keyframes thinkPulse {1068 0%, 100% { opacity: 1; }1069 50% { opacity: 0.3; }1070}1071 1072.thinking-dots {1073 display: flex;1074 gap: 4px;1075}1076 1077.thinking-dots span {1078 width: 6px;1079 height: 6px;1080 border-radius: 50%;1081 background: var(--accent-500);1082 animation: dotBounce 1.4s ease-in-out infinite;1083}1084 1085.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }1086.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }1087 1088@keyframes dotBounce {1089 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }1090 40% { transform: scale(1); opacity: 1; }1091}1092 1093.thinking-text {1094 font-family: var(--font-mono);1095 font-size: 0.72rem;1096 color: var(--text-tertiary);1097 font-style: italic;1098}1099 1100/* ── Streaming bubble ── */1101.streaming-indicator {1102 display: flex;1103 align-items: center;1104 gap: 6px;1105 margin-top: 10px;1106 font-family: var(--font-mono);1107 font-size: 0.62rem;1108 color: var(--accent-400);1109}1110 1111.stream-dot {1112 width: 6px;1113 height: 6px;1114 border-radius: 50%;1115 background: var(--accent-500);1116 animation: statusPulse 1.5s ease-in-out infinite;1117}1118 1119/* ═══════════════════════════════════════════════════════1120 INPUT AREA1121 ═══════════════════════════════════════════════════════ */1122.input-area {1123 padding: 16px 32px 24px;1124 border-top: 1px solid var(--border-default);1125 flex-shrink: 0;1126 background: rgba(11, 11, 20, 0.8);1127 backdrop-filter: blur(12px);1128 -webkit-backdrop-filter: blur(12px);1129}1130 1131.input-wrapper {1132 display: flex;1133 align-items: center;1134 gap: 10px;1135 background: var(--bg-raised);1136 border: 1px solid var(--border-default);1137 border-radius: 14px;1138 padding: 4px 4px 4px 18px;1139 transition: all 0.3s var(--ease-out);1140}1141 1142.input-wrapper:focus-within {1143 border-color: var(--accent-500);1144 box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.1), var(--shadow-glow);1145}1146 1147.input-wrapper input {1148 flex: 1;1149 background: none;1150 border: none;1151 color: var(--text-primary);1152 font-family: var(--font-sans);1153 font-size: 0.88rem;1154 outline: none;1155 padding: 10px 0;1156}1157 1158.input-wrapper input::placeholder {1159 color: var(--text-disabled);1160}1161 1162.input-wrapper input:disabled {1163 cursor: not-allowed;1164}1165 1166.send-btn {1167 width: 40px;1168 height: 40px;1169 background: linear-gradient(135deg, var(--accent-500), var(--accent-600));1170 border: none;1171 border-radius: 10px;1172 color: white;1173 cursor: pointer;1174 display: flex;1175 align-items: center;1176 justify-content: center;1177 flex-shrink: 0;1178 transition: all 0.25s var(--ease-out);1179 position: relative;1180 overflow: hidden;1181}1182 1183.send-btn::before {1184 content: '';1185 position: absolute;1186 inset: 0;1187 background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);1188 opacity: 0;1189 transition: opacity 0.3s;1190}1191 1192.send-btn:hover:not(:disabled) {1193 transform: translateY(-1px) scale(1.02);1194 box-shadow: 0 4px 16px rgba(124, 106, 247, 0.4);1195}1196 1197.send-btn:hover::before { opacity: 1; }1198 1199.send-btn:disabled {1200 background: var(--bg-overlay);