hugging2021/local-gemma4-rag

1:root {2  --primary: #6366f1;3  --primary-glow: rgba(99, 102, 241, 0.4);4  --secondary: #06b6d4;5  --secondary-glow: rgba(6, 182, 212, 0.4);6  --bg-dark: #0f172a;7  --glass: rgba(255, 255, 255, 0.05);8  --glass-border: rgba(255, 255, 255, 0.1);9  --text-main: #f8fafc;10  --text-muted: #94a3b8;11  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);12}13 14* {15  box-sizing: border-box;16  margin: 0;17  padding: 0;18}19 20body {21  font-family: 'Inter', system-ui, -apple-system, sans-serif;22  background-color: var(--bg-dark);23  background: radial-gradient(circle at top right, #1e1b4b, #0f172a);24  color: var(--text-main);25  min-height: 100vh;26  display: flex;27  flex-direction: column;28  overflow-x: hidden;29}30 31.container {32  max-width: 1000px;33  margin: 0 auto;34  padding: 2rem;35  width: 100%;36  flex: 1;37}38 39header {40  text-align: center;41  margin-bottom: 3rem;42  padding: 2rem;43  background: var(--glass);44  backdrop-filter: blur(12px);45  border: 1px solid var(--glass-border);46  border-radius: 24px;47  animation: fadeInDown 0.8s ease-out;48}49 50h1 {51  font-size: 3rem;52  font-weight: 800;53  background: var(--accent-gradient);54  -webkit-background-clip: text;55  -webkit-text-fill-color: transparent;56  margin-bottom: 0.5rem;57}58 59.subtitle {60  color: var(--text-muted);61  font-size: 1.1rem;62}63 64.card {65  background: var(--glass);66  backdrop-filter: blur(16px);67  border: 1px solid var(--glass-border);68  border-radius: 24px;69  padding: 2rem;70  margin-bottom: 2rem;71  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);72}73 74/* Initialization States */75#setup-container {76  display: flex;77  flex-direction: column;78  align-items: center;79  gap: 1.5rem;80}81 82.status-grid {83  display: grid;84  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));85  gap: 1rem;86  width: 100%;87  margin-top: 1rem;88}89 90.status-item {91  background: rgba(0, 0, 0, 0.2);92  padding: 1rem;93  border-radius: 16px;94  border: 1px solid var(--glass-border);95}96 97.status-label {98  font-size: 0.8rem;99  color: var(--text-muted);100  margin-bottom: 0.5rem;101}102 103.progress-bar-container {104  height: 6px;105  background: rgba(255, 255, 255, 0.1);106  border-radius: 3px;107  overflow: hidden;108}109 110.progress-fill {111  height: 100%;112  width: 0%;113  background: var(--accent-gradient);114  transition: width 0.3s ease;115  box-shadow: 0 0 10px var(--primary-glow);116}117 118button {119  background: var(--accent-gradient);120  border: none;121  padding: 1rem 2.5rem;122  border-radius: 12px;123  color: white;124  font-weight: 600;125  font-size: 1rem;126  cursor: pointer;127  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);128  box-shadow: 0 4px 15px var(--primary-glow);129}130 131button:hover {132  transform: translateY(-2px);133  box-shadow: 0 8px 25px var(--primary-glow);134  filter: brightness(1.1);135}136 137button:disabled {138  opacity: 0.5;139  cursor: not-allowed;140  transform: none;141}142 143/* Chat Section */144#chat-container.hidden {145  display: none;146}147 148#chat-history {149  height: 450px;150  overflow-y: auto;151  padding: 1rem;152  display: flex;153  flex-direction: column;154  gap: 1rem;155  margin-bottom: 1.5rem;156  border-radius: 16px;157  background: rgba(0, 0, 0, 0.2);158}159 160.message {161  max-width: 80%;162  padding: 1rem 1.5rem;163  border-radius: 20px;164  line-height: 1.6;165  font-size: 0.95rem;166  animation: slideUp 0.4s ease-out;167}168 169.message.user {170  align-self: flex-end;171  background: var(--primary);172  color: white;173  border-bottom-right-radius: 4px;174}175 176.message.ai {177  align-self: flex-start;178  background: rgba(255, 255, 255, 0.08);179  border: 1px solid var(--glass-border);180  border-bottom-left-radius: 4px;181}182 183.input-area {184  display: flex;185  gap: 1rem;186}187 188input[type="text"] {189  flex: 1;190  background: rgba(255, 255, 255, 0.05);191  border: 1px solid var(--glass-border);192  border-radius: 12px;193  padding: 1rem 1.5rem;194  color: white;195  font-size: 1rem;196  transition: border-color 0.3s ease;197}198 199input[type="text"]:focus {200  outline: none;201  border-color: var(--primary);202}203 204/* Upload Section */205.upload-btn-wrapper {206  position: relative;207  overflow: hidden;208  display: inline-block;209  width: 100%;210}211 212.upload-btn-placeholder {213  border: 2px dashed var(--glass-border);214  color: var(--text-muted);215  background-color: transparent;216  padding: 2rem;217  border-radius: 16px;218  font-size: 1rem;219  font-weight: 500;220  text-align: center;221  width: 100%;222  cursor: pointer;223  transition: all 0.3s ease;224}225 226.upload-btn-placeholder:hover {227  border-color: var(--primary);228  background: rgba(255, 255, 255, 0.05);229  color: var(--text-main);230}231 232input[type=file] {233  font-size: 100px;234  position: absolute;235  left: 0;236  top: 0;237  opacity: 0;238  cursor: pointer;239}240 241footer {242  text-align: center;243  padding: 2rem;244  color: var(--text-muted);245  font-size: 0.8rem;246}247 248@keyframes fadeInDown {249  from { opacity: 0; transform: translateY(-20px); }250  to { opacity: 1; transform: translateY(0); }251}252 253@keyframes slideUp {254  from { opacity: 0; transform: translateY(10px); }255  to { opacity: 1; transform: translateY(0); }256}257 258/* Custom Scrollbar */259::-webkit-scrollbar { width: 6px; }260::-webkit-scrollbar-track { background: transparent; }261::-webkit-scrollbar-thumb {262  background: var(--glass-border);263  border-radius: 3px;264}265::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }266