Vizz17/context-aware-rag
0
1/* ── ContextAware — Black Transparent Animated UI ────────────── */2@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');3 4:root {5 --primary: #00e5ff;6 --primary-dim: rgba(0, 229, 255, 0.15);7 --secondary: #b388ff;8 --secondary-dim: rgba(179, 136, 255, 0.15);9 --tertiary: #76ff03;10 --success: #00e676;11 --danger: #ff5252;12 13 --glass-bg: rgba(255, 255, 255, 0.03);14 --glass-border: rgba(255, 255, 255, 0.06);15 --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);16 --glass-hover: rgba(255, 255, 255, 0.06);17 18 --text-main: #e8eaed;19 --text-muted: #8a8f98;20 21 --surface: #000000;22 --surface-1: #0a0a0a;23 --surface-2: #111111;24}25 26* { box-sizing: border-box; margin: 0; padding: 0; }27 28body {29 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;30 background: #000000;31 color: var(--text-main);32 overflow: hidden;33 height: 100vh;34 position: relative;35}36 37/* ── Particle Canvas Background ──────────────────────── */38#particleCanvas {39 position: fixed;40 inset: 0;41 z-index: 0;42 pointer-events: none;43}44 45/* ── Animated Mesh Glow Background ──────────────────── */46.bg-mesh {47 position: fixed;48 inset: -30%;49 z-index: 0;50 background-image:51 radial-gradient(at 20% 30%, rgba(0, 229, 255, 0.06) 0px, transparent 50%),52 radial-gradient(at 80% 20%, rgba(179, 136, 255, 0.05) 0px, transparent 50%),53 radial-gradient(at 50% 80%, rgba(0, 230, 118, 0.04) 0px, transparent 50%),54 radial-gradient(at 10% 80%, rgba(0, 229, 255, 0.03) 0px, transparent 40%),55 radial-gradient(at 90% 70%, rgba(179, 136, 255, 0.03) 0px, transparent 40%);56 filter: blur(80px);57 opacity: 1;58 animation: meshDrift 25s ease-in-out infinite alternate;59}60 61@keyframes meshDrift {62 0% { transform: scale(1) rotate(0deg) translate(0, 0); }63 33% { transform: scale(1.1) rotate(5deg) translate(2%, -1%); }64 66% { transform: scale(1.05) rotate(-3deg) translate(-1%, 2%); }65 100% { transform: scale(1.15) rotate(8deg) translate(1%, -2%); }66}67 68/* ── Scrollbar ────────────────────────────── */69::-webkit-scrollbar { width: 4px; }70::-webkit-scrollbar-track { background: transparent; }71::-webkit-scrollbar-thumb {72 background: rgba(0, 229, 255, 0.15);73 border-radius: 10px;74}75::-webkit-scrollbar-thumb:hover {76 background: rgba(0, 229, 255, 0.3);77}78 79/* ── Layout ───────────────────────────────── */80.app-layout {81 display: flex;82 height: 100vh;83 overflow: hidden;84 padding: 0.75rem;85 gap: 0.75rem;86 position: relative;87 z-index: 1;88}89@media (max-width: 768px) { .app-layout { padding: 0.4rem; gap: 0.4rem; } }90 91/* ── Glass Containers ──────────────────────────────── */92.glass-panel {93 background: var(--glass-bg);94 backdrop-filter: blur(20px) saturate(120%);95 -webkit-backdrop-filter: blur(20px) saturate(120%);96 border: 1px solid var(--glass-border);97 box-shadow: var(--glass-shadow);98 border-radius: 20px;99 transition: background 0.4s ease, border-color 0.4s ease;100}101.glass-panel:hover {102 border-color: rgba(255, 255, 255, 0.08);103}104 105/* ── Sidebar ──────────────────────────────── */106.sidebar {107 width: 300px;108 min-width: 300px;109 display: flex;110 flex-direction: column;111 overflow-y: auto;112 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);113 z-index: 40;114 border-right: 1px solid rgba(0, 229, 255, 0.05);115}116@media (max-width: 768px) {117 .sidebar {118 position: absolute;119 left: 0.4rem;120 top: 0.4rem;121 bottom: 0.4rem;122 width: calc(100% - 0.8rem);123 }124 .sidebar.collapsed {125 transform: translateX(-110%) scale(0.96);126 opacity: 0;127 pointer-events: none;128 }129}130 131/* ── Main Chat Area ───────────────────────── */132.main-area {133 flex: 1;134 display: flex;135 flex-direction: column;136 overflow: hidden;137 position: relative;138}139 140/* ── Chat Messages ────────────────────────── */141.chat-messages {142 flex: 1;143 overflow-y: auto;144 padding: 2rem;145 scroll-behavior: smooth;146 margin-bottom: 90px;147}148@media (max-width: 768px) { .chat-messages { padding: 1rem; margin-bottom: 80px; } }149 150.message {151 display: flex;152 gap: 1rem;153 margin-bottom: 2rem;154 animation: msgSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;155 max-width: 900px;156 margin-left: auto;157 margin-right: auto;158}159 160.message-avatar {161 width: 38px;162 height: 38px;163 border-radius: 10px;164 display: flex;165 align-items: center;166 justify-content: center;167 font-size: 1.1rem;168 flex-shrink: 0;169}170.message.user .message-avatar {171 background: rgba(0, 229, 255, 0.12);172 border: 1px solid rgba(0, 229, 255, 0.2);173 color: var(--primary);174 box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);175}176.message.assistant .message-avatar {177 background: rgba(179, 136, 255, 0.08);178 border: 1px solid rgba(179, 136, 255, 0.15);179 font-size: 1.2rem;180 box-shadow: 0 0 15px rgba(179, 136, 255, 0.08);181}182 183.message-content {184 flex: 1;185 min-width: 0;186 background: rgba(255, 255, 255, 0.02);187 border: 1px solid rgba(255, 255, 255, 0.05);188 padding: 1.1rem 1.4rem;189 border-radius: 4px 16px 16px 16px;190 transition: border-color 0.3s ease;191}192.message-content:hover {193 border-color: rgba(255, 255, 255, 0.08);194}195.message.user .message-content {196 border-radius: 16px 4px 16px 16px;197 background: rgba(0, 229, 255, 0.04);198 border-color: rgba(0, 229, 255, 0.08);199}200 201.message-text {202 font-size: 0.95rem;203 line-height: 1.65;204 color: var(--text-main);205 font-weight: 400;206 text-align: left;207 white-space: normal;208}209.message-text p { margin-bottom: 0.8rem; }210.message-text p:last-child { margin-bottom: 0; }211 212.message.assistant .message-content,213.message.assistant .message-text,214.message.assistant .message-text p,215.message.assistant .message-text ul,216.message.assistant .message-text ol,217.message.assistant .message-text li {218 text-align: left;219}220 221.message-text code {222 background: rgba(0, 229, 255, 0.08);223 color: var(--primary);224 padding: 0.15rem 0.45rem;225 border-radius: 5px;226 font-family: 'JetBrains Mono', monospace;227 font-size: 0.83rem;228 font-weight: 500;229 border: 1px solid rgba(0, 229, 255, 0.1);230}231 232.message-text pre {233 background: rgba(0, 0, 0, 0.6);234 border: 1px solid rgba(255, 255, 255, 0.06);235 border-radius: 10px;236 padding: 1.2rem;237 overflow-x: auto;238 margin: 1rem 0;239 box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);240}241.message-text pre code {242 background: none;243 border: none;244 padding: 0;245 color: #c8ccd0;246 font-size: 0.83rem;247}248.message-text ul, .message-text ol { padding-left: 1.5rem; margin-bottom: 0.8rem; }249.message-text li { margin-bottom: 0.4rem; }250 251/* ── Floating Chat Input ───────────────────────────── */252.chat-input-area {253 position: absolute;254 bottom: 0;255 left: 0;256 right: 0;257 padding: 1rem 2rem;258 pointer-events: none;259}260@media (max-width: 768px) { .chat-input-area { padding: 0.5rem; } }261 262.chat-input-wrapper {263 pointer-events: auto;264 max-width: 850px;265 margin: 0 auto;266 display: flex;267 align-items: flex-end;268 gap: 0.8rem;269 background: rgba(255, 255, 255, 0.03);270 backdrop-filter: blur(24px);271 -webkit-backdrop-filter: blur(24px);272 border: 1px solid rgba(255, 255, 255, 0.06);273 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 229, 255, 0.03);274 border-radius: 20px;275 padding: 0.5rem 0.5rem 0.5rem 1.1rem;276 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);277}278.chat-input-wrapper:focus-within {279 transform: translateY(-2px);280 box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 229, 255, 0.08);281 border-color: rgba(0, 229, 255, 0.2);282}283 284.chat-input-wrapper textarea {285 flex: 1;286 background: none;287 border: none;288 outline: none;289 color: var(--text-main);290 font-family: inherit;291 font-size: 0.95rem;292 resize: none;293 max-height: 150px;294 line-height: 1.5;295 padding: 0.5rem 0;296 font-weight: 400;297}298.chat-input-wrapper textarea::placeholder {299 color: var(--text-muted);300 opacity: 0.5;301}302 303.send-btn {304 width: 42px;305 height: 42px;306 border-radius: 14px;307 background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(179, 136, 255, 0.2));308 border: 1px solid rgba(0, 229, 255, 0.2);309 color: var(--primary);310 cursor: pointer;311 display: flex;312 align-items: center;313 justify-content: center;314 transition: all 0.3s;315 flex-shrink: 0;316 box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);317}318.send-btn:hover {319 transform: scale(1.08) translateY(-1px);320 box-shadow: 0 0 30px rgba(0, 229, 255, 0.25);321 background: linear-gradient(135deg, rgba(0, 229, 255, 0.3), rgba(179, 136, 255, 0.3));322 border-color: rgba(0, 229, 255, 0.4);323}324.send-btn:disabled {325 opacity: 0.3;326 cursor: not-allowed;327 transform: none;328 box-shadow: none;329}330 331/* ── Interactive Elements ───────────────────────── */332.doc-card, .chat-card, .welcome-card {333 background: rgba(255, 255, 255, 0.02);334 border: 1px solid rgba(255, 255, 255, 0.05);335 border-radius: 14px;336 transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);337 cursor: pointer;338}339 340.doc-card:hover, .chat-card:hover, .welcome-card:hover {341 background: rgba(255, 255, 255, 0.05);342 transform: translateY(-2px) scale(1.01);343 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 229, 255, 0.04);344 border-color: rgba(0, 229, 255, 0.12);345}346 347.upload-zone {348 border: 1px dashed rgba(0, 229, 255, 0.2);349 border-radius: 14px;350 padding: 1.5rem;351 text-align: center;352 background: rgba(0, 229, 255, 0.02);353 transition: all 0.3s;354 cursor: pointer;355 position: relative;356 overflow: hidden;357}358.upload-zone:hover, .upload-zone.dragover {359 border-color: var(--primary);360 background: rgba(0, 229, 255, 0.05);361 box-shadow: 0 0 25px rgba(0, 229, 255, 0.08);362}363.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }364 365/* ── Typography & Welcome ────────────────────────── */366.gradient-text {367 background: linear-gradient(135deg, var(--primary), var(--secondary));368 -webkit-background-clip: text;369 -webkit-text-fill-color: transparent;370 font-weight: 800;371}372 373.welcome-grid {374 display: grid;375 grid-template-columns: 1fr 1fr;376 gap: 1rem;377 max-width: 600px;378 margin-top: 2rem;379}380 381/* ── Buttons & Toggles ────────────────────────────── */382.btn-glass {383 background: rgba(255, 255, 255, 0.03);384 border: 1px solid rgba(255, 255, 255, 0.06);385 backdrop-filter: blur(10px);386 color: var(--text-main);387 padding: 0.5rem 1rem;388 border-radius: 10px;389 font-weight: 600;390 transition: all 0.3s;391 cursor: pointer;392}393.btn-glass:hover {394 background: rgba(0, 229, 255, 0.06);395 border-color: rgba(0, 229, 255, 0.15);396 box-shadow: 0 0 15px rgba(0, 229, 255, 0.06);397}398 399/* Theme Toggle */400.theme-toggle {401 width: 38px; height: 38px;402 border-radius: 50%;403 display: flex; align-items: center; justify-content: center;404 font-size: 1.1rem;405}406 407/* ── Animations ────────────────────────────────── */408@keyframes msgSlideIn {409 from {410 opacity: 0;411 transform: translateY(24px) scale(0.97);412 filter: blur(4px);413 }414 to {415 opacity: 1;416 transform: translateY(0) scale(1);417 filter: blur(0);418 }419}420 421@keyframes float {422 0% { transform: translateY(0px); }423 50% { transform: translateY(-8px); }424 100% { transform: translateY(0px); }425}426.floating { animation: float 5s ease-in-out infinite; }427 428@keyframes pulse-glow {429 0%, 100% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.1); }430 50% { box-shadow: 0 0 25px rgba(0, 229, 255, 0.2); }431}432 433@keyframes border-glow {434 0%, 100% { border-color: rgba(0, 229, 255, 0.08); }435 50% { border-color: rgba(0, 229, 255, 0.2); }436}437 438@keyframes fadeIn {439 from { opacity: 0; }440 to { opacity: 1; }441}442 443@keyframes slideUp {444 from { opacity: 0; transform: translateY(30px); }445 to { opacity: 1; transform: translateY(0); }446}447 448/* Sources Toggle Panel */449.sources-toggle {450 display: inline-flex;451 align-items: center;452 gap: 0.4rem;453 margin-top: 0.8rem;454 padding: 0.35rem 0.75rem;455 border-radius: 8px;456 background: rgba(0, 229, 255, 0.06);457 border: 1px solid rgba(0, 229, 255, 0.12);458 color: var(--primary);459 font-size: 0.78rem;460 font-weight: 600;461 cursor: pointer;462 transition: all 0.3s;463}464.sources-toggle:hover {465 background: rgba(0, 229, 255, 0.1);466 box-shadow: 0 0 15px rgba(0, 229, 255, 0.08);467}468 469.sources-panel {470 overflow: hidden;471 max-height: 0;472 transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);473 margin-top: 0.5rem;474}475.sources-panel.open { max-height: 800px; }476.source-chip {477 background: rgba(255, 255, 255, 0.02);478 border-left: 3px solid var(--primary);479 border-radius: 0 10px 10px 0;480 padding: 1rem;481 margin-bottom: 0.5rem;482 font-size: 0.85rem;483}484.source-meta {485 font-weight: 700;486 color: var(--primary);487 font-size: 0.73rem;488 margin-bottom: 0.3rem;489}490 491.latency-badge {492 display: inline-flex;493 align-items: center;494 gap: 0.3rem;495 margin-top: 0.6rem;496 padding: 0.2rem 0.6rem;497 border-radius: 20px;498 background: rgba(0, 230, 118, 0.06);499 border: 1px solid rgba(0, 230, 118, 0.12);500 font-size: 0.73rem;501 font-weight: 600;502 color: var(--success);503}504 505.typing-indicator { display: flex; gap: 0.4rem; padding: 0.5rem 0; }506.typing-indicator span {507 width: 8px; height: 8px;508 border-radius: 50%;509 background: var(--primary);510 animation: typingBounce 1.4s infinite ease-in-out both;511 opacity: 0.6;512}513.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }514.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }515@keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }516 517/* ── Document Selection Gateway ──────────────────── */518.gateway-options {519 display: grid;520 grid-template-columns: 1fr;521 gap: 1.2rem;522 margin: 0 auto;523}524@media(min-width: 768px) {525 .gateway-options { grid-template-columns: 1fr 1fr; }526}527 528.gateway-card {529 background: rgba(255, 255, 255, 0.02);530 backdrop-filter: blur(16px);531 -webkit-backdrop-filter: blur(16px);532 border: 1px solid rgba(255, 255, 255, 0.05);533 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);534 border-radius: 18px;535 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);536 min-height: 230px;537}538.gateway-card:hover {539 transform: translateY(-3px);540 box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 229, 255, 0.06);541 border-color: rgba(0, 229, 255, 0.15);542}543 544.gateway-doc-item {545 display: flex;546 align-items: center;547 justify-content: space-between;548 padding: 0.7rem 1rem;549 border-radius: 12px;550 background: rgba(255, 255, 255, 0.02);551 border: 1px solid rgba(255, 255, 255, 0.04);552 cursor: pointer;553 transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);554}555 556.gateway-doc-item:hover {557 background: rgba(0, 229, 255, 0.05);558 border-color: rgba(0, 229, 255, 0.15);559 transform: translateX(3px);560 box-shadow: 0 0 15px rgba(0, 229, 255, 0.05);561}562 563.gateway-upload-zone {564 border: 1px dashed rgba(179, 136, 255, 0.25);565 border-radius: 12px;566 padding: 1.5rem;567 text-align: center;568 background: rgba(179, 136, 255, 0.02);569 transition: all 0.3s;570 cursor: pointer;571 position: relative;572 overflow: hidden;573}574.gateway-upload-zone:hover, .gateway-upload-zone.dragover {575 border-color: var(--secondary);576 background: rgba(179, 136, 255, 0.05);577 box-shadow: 0 0 25px rgba(179, 136, 255, 0.08);578}579.gateway-upload-zone input[type="file"] {580 position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2;581}582 583/* ── Active Document Highlight ───────────────────── */584.doc-card.doc-active {585 background: rgba(0, 229, 255, 0.06) !important;586 border-color: rgba(0, 229, 255, 0.2) !important;587 box-shadow: 0 0 20px rgba(0, 229, 255, 0.08);588}589 590/* ── Modal Styles ────────────────────────────────── */591.modal-overlay {592 position: fixed;593 inset: 0;594 background: rgba(0, 0, 0, 0.7);595 backdrop-filter: blur(8px);596 -webkit-backdrop-filter: blur(8px);597 z-index: 100;598 display: flex;599 align-items: center;600 justify-content: center;601 opacity: 0;602 pointer-events: none;603 transition: opacity 0.3s ease;604}605.modal-overlay:not(.hidden) {606 opacity: 1;607 pointer-events: auto;608}609.modal-overlay.hidden {610 display: none;611}612.modal-content {613 transform: scale(0.96) translateY(15px);614 opacity: 0;615 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);616}617.modal-overlay:not(.hidden) .modal-content {618 transform: scale(1) translateY(0);619 opacity: 1;620}621 622/* ── Glow Line Accents ──────────────────────── */623.glow-line {624 height: 1px;625 background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.15), transparent);626 margin: 1.5rem 0;627}628 629/* ── Page Container (roadmap/change pages) ───── */630.page-container {631 max-width: 1200px;632 margin: 2rem auto;633 background: rgba(255, 255, 255, 0.02);634 backdrop-filter: blur(20px);635 -webkit-backdrop-filter: blur(20px);636 border: 1px solid rgba(255, 255, 255, 0.05);637 box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);638 border-radius: 24px;639 padding: 3rem;640 position: relative;641}642@media (max-width: 768px) {643 .page-container { margin: 1rem; padding: 1.5rem; border-radius: 18px; }644}645 646/* ── Auth Custom Styles ──────────────────────── */647.animate-fade-in {648 animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;649}650 651#authOverlay {652 background: rgba(5, 7, 10, 0.85) !important;653 backdrop-filter: blur(25px) saturate(180%);654}655