hugging2021/local-gemma4-rag
1
1:root {2 --glass: rgba(255, 255, 255, 0.08);3 --glass-border: rgba(255, 255, 255, 0.12);4 --accent: #bb8bff;5 --accent-hover: #a370f7;6 --bg: #0f1115;7 --text: #e2e8f0;8 --text-muted: #94a3b8;9 --card-bg: rgba(30, 41, 59, 0.5);10}11 12* {13 box-sizing: border-box;14 margin: 0;15 padding: 0;16}17 18body {19 background: var(--bg);20 background-image: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #0f1115 100%);21 color: var(--text);22 font-family: 'Inter', -apple-system, sans-serif;23 line-height: 1.6;24 min-height: 100vh;25 padding: 2rem;26}27 28.container {29 max-width: 1200px;30 margin: 0 auto;31}32 33header {34 display: flex;35 justify-content: space-between;36 align-items: center;37 margin-bottom: 3rem;38}39 40h1 {41 font-size: 2.5rem;42 font-weight: 800;43 letter-spacing: -0.025em;44 background: linear-gradient(to right, #fff, var(--accent));45 -webkit-background-clip: text;46 background-clip: text;47 -webkit-text-fill-color: transparent;48}49 50.subtitle {51 color: var(--text-muted);52 font-size: 1.1rem;53}54 55#sync-indicator {56 padding: 0.5rem;57 border-radius: 50%;58 background: var(--glass);59 color: var(--accent);60 box-shadow: 0 0 20px rgba(187, 139, 255, 0.2);61}62 63.card {64 background: var(--card-bg);65 border-radius: 20px;66 padding: 2rem;67 border: 1px solid var(--glass-border);68 backdrop-filter: blur(12px);69 margin-bottom: 1.5rem;70}71 72.card.glass {73 box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);74}75 76/* Setup Container */77#setup-container {78 max-width: 600px;79 margin: 4rem auto;80 text-align: center;81}82 83.status-box h2 {84 margin-bottom: 0.5rem;85}86 87.status-grid {88 display: grid;89 grid-template-columns: 1fr 1fr;90 gap: 1.5rem;91 margin: 2rem 0;92}93 94.status-item {95 text-align: left;96}97 98.status-label {99 font-size: 0.85rem;100 color: var(--text-muted);101 margin-bottom: 0.5rem;102}103 104.progress-bar-container {105 height: 6px;106 background: rgba(255, 255, 255, 0.05);107 border-radius: 10px;108 overflow: hidden;109}110 111.progress-fill {112 height: 100%;113 width: 0%;114 background: linear-gradient(to right, #7c3aed, var(--accent));115 transition: width 0.3s ease;116 box-shadow: 0 0 10px rgba(187, 139, 255, 0.5);117}118 119.model-selector-container {120 margin-bottom: 2rem;121 text-align: left;122}123 124.glass-select {125 width: 100%;126 padding: 0.75rem 1rem;127 background: rgba(255, 255, 255, 0.05);128 border: 1px solid var(--glass-border);129 border-radius: 12px;130 color: var(--text);131 font-size: 0.95rem;132 appearance: none;133 cursor: pointer;134 outline: none;135 transition: all 0.2s;136 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23bb8bff' 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");137 background-repeat: no-repeat;138 background-position: right 1rem center;139 background-size: 1.2rem;140}141 142.glass-select:focus {143 border-color: var(--accent);144 background-color: rgba(255, 255, 255, 0.08);145}146 147.glass-select option {148 background: #1e293b;149 color: #fff;150}151 152.primary-btn {153 background: var(--accent);154 color: #fff;155 border: none;156 padding: 1rem 2rem;157 border-radius: 12px;158 font-weight: 600;159 cursor: pointer;160 transition: all 0.2s ease;161 width: 100%;162 font-size: 1rem;163}164 165.primary-btn:hover:not(:disabled) {166 background: var(--accent-hover);167 transform: translateY(-2px);168 box-shadow: 0 10px 20px rgba(187, 139, 255, 0.3);169}170 171.primary-btn:disabled {172 opacity: 0.5;173 cursor: not-allowed;174}175 176/* Main Layout */177#chat-container {178 display: grid;179 grid-template-columns: 300px 1fr;180 gap: 1.5rem;181}182 183.hidden {184 display: none !important;185}186 187/* Sidebar */188#sidebar {189 height: fit-content;190 padding: 1.5rem;191}192 193#sidebar h3 {194 margin-bottom: 1.2rem;195 font-size: 1.2rem;196 color: var(--accent);197}198 199#docs-list {200 list-style: none;201}202 203.doc-item {204 display: flex;205 align-items: center;206 gap: 0.75rem;207 padding: 0.75rem;208 background: rgba(255, 255, 255, 0.03);209 border-radius: 10px;210 margin-bottom: 0.5rem;211 font-size: 0.9rem;212 border: 1px solid transparent;213 transition: all 0.2s;214}215 216.doc-item:hover {217 background: rgba(255, 255, 255, 0.05);218 border-color: var(--glass-border);219}220 221.doc-item .remove-btn {222 margin-left: auto;223 background: transparent;224 border: none;225 color: var(--text-muted);226 cursor: pointer;227 padding: 4px;228 border-radius: 4px;229 opacity: 0;230 transition: all 0.2s;231 display: flex;232 align-items: center;233 justify-content: center;234}235 236.doc-item:hover .remove-btn {237 opacity: 1;238}239 240.doc-item .remove-btn:hover {241 background: rgba(239, 68, 68, 0.2);242 color: #ef4444;243}244 245.doc-icon {246 color: var(--accent);247}248 249/* Chat Main */250.chat-main {251 display: flex;252 flex-direction: column;253 gap: 1.5rem;254}255 256/* Upload Card */257#upload-card {258 padding: 1.5rem;259}260 261.upload-btn-wrapper {262 position: relative;263 overflow: hidden;264 cursor: pointer;265}266 267.upload-btn-placeholder {268 display: flex;269 flex-direction: column;270 align-items: center;271 padding: 1.5rem;272 border: 2px dashed var(--glass-border);273 border-radius: 15px;274 color: var(--text-muted);275}276 277.upload-btn-wrapper input[type=file] {278 font-size: 100px;279 position: absolute;280 left: 0;281 top: 0;282 opacity: 0;283 cursor: pointer;284}285 286.hint {287 font-size: 0.8rem;288 color: var(--text-muted);289}290 291/* Chat History */292.chat-card {293 flex-grow: 1;294 display: flex;295 flex-direction: column;296 min-height: 500px;297 max-height: 700px;298 padding: 0;299 overflow: hidden;300}301 302#chat-history {303 flex-grow: 1;304 overflow-y: auto;305 padding: 2rem;306 display: flex;307 flex-direction: column;308 gap: 1.5rem;309}310 311.message {312 display: flex;313 gap: 1rem;314 max-width: 85%;315}316 317.message.user {318 align-self: flex-end;319 flex-direction: row-reverse;320}321 322.message .avatar {323 width: 32px;324 height: 32px;325 border-radius: 8px;326 background: var(--glass);327 display: flex;328 align-items: center;329 justify-content: center;330 font-size: 0.75rem;331 font-weight: 700;332 flex-shrink: 0;333}334 335.message.user .avatar {336 background: var(--accent);337}338 339.message .content {340 background: rgba(255, 255, 255, 0.05);341 padding: 1.25rem 1.5rem;342 border-radius: 18px;343 font-size: 0.95rem;344 word-break: break-word;345 overflow-x: auto;346}347 348/* Markdown Element Styling */349.message .content h1, 350.message .content h2, 351.message .content h3 {352 margin: 1.5rem 0 0.75rem 0;353 color: var(--accent);354 line-height: 1.3;355}356 357.message .content h1 { font-size: 1.4rem; }358.message .content h2 { font-size: 1.2rem; }359.message .content h3 { font-size: 1.1rem; }360 361.message .content p {362 margin-bottom: 1rem;363}364 365.message .content p:last-child {366 margin-bottom: 0;367}368 369.message .content ul, 370.message .content ol {371 margin-bottom: 1rem;372 padding-left: 1.5rem;373}374 375.message .content li {376 margin-bottom: 0.4rem;377}378 379.message .content code {380 background: rgba(0, 0, 0, 0.3);381 padding: 0.2rem 0.4rem;382 border-radius: 4px;383 font-family: 'JetBrains Mono', 'Fira Code', monospace;384 font-size: 0.85rem;385 color: #f7768e;386}387 388.message .content pre {389 background: #1a1b26 !important; /* Tokyo Night Dark feel */390 padding: 1.25rem;391 border-radius: 12px;392 margin: 1.25rem 0;393 overflow-x: auto;394 border: 1px solid var(--glass-border);395}396 397.message .content pre code {398 background: transparent;399 padding: 0;400 color: inherit;401 font-size: 0.9rem;402}403 404.message .content blockquote {405 border-left: 4px solid var(--accent);406 background: rgba(187, 139, 255, 0.05);407 padding: 0.75rem 1.25rem;408 margin: 1.25rem 0;409 border-radius: 0 8px 8px 0;410 font-style: italic;411 color: var(--text-muted);412}413 414.message .content table {415 width: 100%;416 border-collapse: collapse;417 margin: 1.25rem 0;418 font-size: 0.9rem;419}420 421.message .content th, 422.message .content td {423 padding: 0.75rem;424 border: 1px solid var(--glass-border);425 text-align: left;426}427 428.message .content th {429 background: rgba(255, 255, 255, 0.05);430 color: var(--accent);431 font-weight: 600;432}433 434.message.ai .content {435 border-top-left-radius: 2px;436}437 438.message.user .content {439 background: var(--accent);440 color: #fff;441 border-top-right-radius: 2px;442}443 444.input-area {445 padding: 1.5rem;446 background: rgba(0, 0, 0, 0.2);447 display: flex;448 gap: 1rem;449 border-top: 1px solid var(--glass-border);450}451 452.input-area input {453 flex-grow: 1;454 background: var(--glass);455 border: 1px solid var(--glass-border);456 border-radius: 12px;457 padding: 0.75rem 1.25rem;458 color: #fff;459 outline: none;460 transition: border-color 0.2s;461}462 463.input-area input:focus {464 border-color: var(--accent);465}466 467.input-area button {468 background: var(--accent);469 border: none;470 width: 45px;471 height: 45px;472 border-radius: 12px;473 color: #fff;474 display: flex;475 align-items: center;476 justify-content: center;477 cursor: pointer;478 transition: all 0.2s;479}480 481.input-area button:hover {482 background: var(--accent-hover);483 transform: scale(1.05);484}485 486/* Sources UI */487.sources-container {488 margin-top: 1rem;489 border-top: 1px solid var(--glass-border);490 padding-top: 0.75rem;491}492 493.sources-toggle {494 background: transparent;495 border: 1px solid var(--glass-border);496 color: var(--text-muted);497 font-size: 0.75rem;498 padding: 0.3rem 0.6rem;499 border-radius: 6px;500 cursor: pointer;501 transition: all 0.2s;502}503 504.sources-toggle:hover {505 background: var(--glass);506 color: var(--text);507}508 509.sources-content {510 display: none;511 margin-top: 0.75rem;512 font-size: 0.8rem;513 color: var(--text-muted);514 background: rgba(0, 0, 0, 0.2);515 padding: 1rem;516 border-radius: 10px;517 max-height: 200px;518 overflow-y: auto;519}520 521.sources-content.show {522 display: block;523}524 525.source-snippet {526 margin-bottom: 0.75rem;527 padding-bottom: 0.75rem;528 border-bottom: 1px solid rgba(255, 255, 255, 0.05);529}530 531.source-snippet:last-child {532 border-bottom: none;533 margin-bottom: 0;534}535 536.source-meta {537 font-weight: 700;538 color: var(--accent);539 margin-bottom: 0.25rem;540 display: block;541}542 543/* Footer */544footer {545 margin-top: 4rem;546 text-align: center;547 color: var(--text-muted);548 font-size: 0.9rem;549 padding-bottom: 2rem;550 border-top: 1px solid var(--glass-border);551 padding-top: 2rem;552}553 554.footer-content {555 display: flex;556 flex-direction: column;557 gap: 0.5rem;558}559 560.social-link {561 color: var(--accent);562 text-decoration: none;563 font-weight: 600;564 transition: color 0.2s;565}566 567.social-link:hover {568 color: var(--accent-hover);569 text-decoration: underline;570}571 572.tech-stack {573 font-size: 0.75rem;574 opacity: 0.8;575}576 577footer strong {578 color: var(--accent);579}580 581/* Custom Scrollbar */582::-webkit-scrollbar {583 width: 6px;584}585::-webkit-scrollbar-track {586 background: transparent;587}588::-webkit-scrollbar-thumb {589 background: var(--glass-border);590 border-radius: 10px;591}592::-webkit-scrollbar-thumb:hover {593 background: var(--text-muted);594}595 596/* New UI Elements: Clear & Copy */597.chat-header {598 padding: 1rem 1.5rem;599 background: rgba(0, 0, 0, 0.15);600 border-bottom: 1px solid var(--glass-border);601 display: flex;602 justify-content: space-between;603 align-items: center;604}605 606.chat-header h3 {607 margin: 0;608 font-size: 0.8rem;609 text-transform: uppercase;610 letter-spacing: 1px;611 color: var(--text-muted);612}613 614#clear-chat-btn {615 background: transparent;616 border: 1px solid rgba(239, 68, 68, 0.3);617 color: #ef4444;618 padding: 0.3rem 0.6rem;619 border-radius: 6px;620 font-size: 0.7rem;621 cursor: pointer;622 transition: all 0.2s;623}624 625#clear-chat-btn:hover {626 background: rgba(239, 68, 68, 0.1);627 border-color: #ef4444;628}629 630.message.ai {631 position: relative;632}633 634.copy-btn {635 position: absolute;636 top: 0;637 right: -35px;638 background: transparent;639 border: none;640 color: var(--text-muted);641 cursor: pointer;642 opacity: 0;643 transition: all 0.2s;644 padding: 4px;645 border-radius: 4px;646}647 648.message.ai:hover .copy-btn {649 opacity: 1;650}651 652.copy-btn:hover {653 background: rgba(255, 255, 255, 0.05);654 color: var(--accent);655}656