Sherwinj10/ai-knowledge-base
0
1:root {2 --bg-color: #0f172a;3 --sidebar-bg: #1e293b;4 --text-primary: #f8fafc;5 --text-secondary: #94a3b8;6 --accent-color: #3b82f6;7 --accent-hover: #2563eb;8 --border-color: #334155;9 --msg-user-bg: #1e293b;10 --msg-bot-bg: #334155;11 --font-family: 'Outfit', sans-serif;12}13 14* {15 margin: 0;16 padding: 0;17 box-sizing: border-box;18}19 20body {21 font-family: var(--font-family);22 background-color: var(--bg-color);23 color: var(--text-primary);24 height: 100vh;25 overflow: hidden;26}27 28.app-container {29 display: flex;30 height: 100%;31}32 33/* Sidebar */34.sidebar {35 width: 300px;36 background-color: var(--sidebar-bg);37 border-right: 1px solid var(--border-color);38 padding: 2rem;39 display: flex;40 flex-direction: column;41 gap: 2rem;42}43 44.logo {45 display: flex;46 align-items: center;47 gap: 0.8rem;48 font-size: 1.5rem;49 font-weight: 600;50 color: var(--accent-color);51}52 53.upload-section h3,54.info-section h3 {55 font-size: 0.9rem;56 text-transform: uppercase;57 letter-spacing: 1px;58 color: var(--text-secondary);59 margin-bottom: 1rem;60 display: flex;61 align-items: center;62 gap: 0.5rem;63}64 65.drop-zone {66 border: 2px dashed var(--border-color);67 border-radius: 12px;68 padding: 2rem;69 text-align: center;70 transition: all 0.3s ease;71 cursor: pointer;72}73 74.drop-zone:hover,75.drop-zone.dragover {76 border-color: var(--accent-color);77 background-color: rgba(59, 130, 246, 0.1);78}79 80.drop-zone i {81 font-size: 2rem;82 color: var(--text-secondary);83 margin-bottom: 1rem;84}85 86.drop-zone p {87 font-size: 0.9rem;88 color: var(--text-secondary);89 margin-bottom: 1rem;90}91 92.btn-secondary {93 background-color: transparent;94 border: 1px solid var(--accent-color);95 color: var(--accent-color);96 padding: 0.5rem 1rem;97 border-radius: 6px;98 cursor: pointer;99 font-family: inherit;100 transition: all 0.2s;101}102 103.btn-secondary:hover {104 background-color: var(--accent-color);105 color: white;106}107 108.status-msg {109 margin-top: 1rem;110 font-size: 0.85rem;111 text-align: center;112 min-height: 20px;113}114 115.status-msg.success {116 color: #4ade80;117}118 119.status-msg.error {120 color: #f87171;121}122 123.status-msg.loading {124 color: #fbbf24;125}126 127.info-section p {128 font-size: 0.9rem;129 color: var(--text-secondary);130 margin-bottom: 0.5rem;131 line-height: 1.5;132}133 134/* Main Chat Area */135.chat-area {136 flex: 1;137 display: flex;138 flex-direction: column;139 background-color: var(--bg-color);140}141 142.chat-header {143 padding: 1.5rem 2rem;144 border-bottom: 1px solid var(--border-color);145 display: flex;146 align-items: center;147 justify-content: space-between;148}149 150.chat-header h2 {151 font-weight: 500;152}153 154.badge {155 background-color: rgba(59, 130, 246, 0.1);156 color: var(--accent-color);157 padding: 0.25rem 0.75rem;158 border-radius: 20px;159 font-size: 0.8rem;160 font-weight: 500;161}162 163.messages-container {164 flex: 1;165 overflow-y: auto;166 padding: 2rem;167 display: flex;168 flex-direction: column;169 gap: 1.5rem;170}171 172.message {173 display: flex;174 gap: 1rem;175 max-width: 80%;176 animation: fadeIn 0.3s ease;177}178 179.message.user {180 align-self: flex-end;181 flex-direction: row-reverse;182}183 184.message .avatar {185 width: 36px;186 height: 36px;187 border-radius: 50%;188 display: flex;189 align-items: center;190 justify-content: center;191 flex-shrink: 0;192}193 194.message.bot .avatar {195 background-color: var(--accent-color);196 color: white;197}198 199.message.user .avatar {200 background-color: var(--text-secondary);201 color: var(--bg-color);202}203 204.message .content {205 padding: 1rem 1.5rem;206 border-radius: 12px;207 line-height: 1.6;208 font-size: 0.95rem;209}210 211.message.bot .content {212 background-color: var(--msg-bot-bg);213 border-top-left-radius: 2px;214}215 216.message .content p {217 white-space: pre-wrap;218}219 220.message.user .content {221 background-color: var(--msg-user-bg);222 border: 1px solid var(--border-color);223 border-top-right-radius: 2px;224}225 226.source-citation {227 margin-top: 0.8rem;228 padding-top: 0.8rem;229 border-top: 1px solid rgba(255, 255, 255, 0.1);230 font-size: 0.85rem;231}232 233.source-citation summary {234 cursor: pointer;235 color: var(--accent-color);236 font-weight: 500;237 outline: none;238}239 240.source-citation ul {241 margin-top: 0.5rem;242 padding-left: 1rem;243 color: var(--text-secondary);244}245 246.input-area {247 padding: 2rem;248 border-top: 1px solid var(--border-color);249}250 251.input-wrapper {252 position: relative;253 max-width: 800px;254 margin: 0 auto;255}256 257#user-input {258 width: 100%;259 padding: 1rem 3.5rem 1rem 1.5rem;260 background-color: var(--sidebar-bg);261 border: 1px solid var(--border-color);262 border-radius: 12px;263 color: var(--text-primary);264 font-size: 1rem;265 font-family: inherit;266 outline: none;267 transition: border-color 0.2s;268}269 270#user-input:focus {271 border-color: var(--accent-color);272}273 274#send-btn {275 position: absolute;276 right: 10px;277 top: 50%;278 transform: translateY(-50%);279 background: none;280 border: none;281 color: var(--accent-color);282 font-size: 1.2rem;283 cursor: pointer;284 padding: 0.5rem;285 transition: transform 0.2s;286}287 288#send-btn:hover {289 transform: translateY(-50%) scale(1.1);290}291 292@keyframes fadeIn {293 from {294 opacity: 0;295 transform: translateY(10px);296 }297 298 to {299 opacity: 1;300 transform: translateY(0);301 }302}303 304/* Scrollbar */305::-webkit-scrollbar {306 width: 8px;307}308 309::-webkit-scrollbar-track {310 background: transparent;311}312 313::-webkit-scrollbar-thumb {314 background: var(--border-color);315 border-radius: 4px;316}317 318::-webkit-scrollbar-thumb:hover {319 background: var(--text-secondary);320}